Merge pull request #394 from rvsia/buttonType

Hyperkid123 · web-flow · commit 09f902f7f0f7 · 2020-03-20T12:03:37.000+01:00
fix(renderer): add buttonType to form controls
diff --git a/__mocks__/mock-layout-mapper.js b/__mocks__/mock-layout-mapper.js
@@ -3,7 +3,7 @@ import { layoutComponents } from "../packages/react-form-renderer/src/constants"
 
 export const layoutMapper = {
   [layoutComponents.FORM_WRAPPER]: ({ children, ...rest }) => <form {...rest}>{ children }</form>,
-  [layoutComponents.BUTTON]: ({ label, ...rest }) =>  <button { ...rest }>{ label }</button>,
+  [layoutComponents.BUTTON]: ({ label, buttonType, ...rest }) =>  <button { ...rest }>{ label }</button>,
   [layoutComponents.BUTTON_GROUP]: ({ children }) => <div>{ children }</div>,
   [layoutComponents.TITLE]: ({ children }) => <div>{ children }</div>,
   [layoutComponents.DESCRIPTION]: ({ children }) => <div>{ children }</div>,
diff --git a/packages/mui-component-mapper/src/form-fields/layout-components.js b/packages/mui-component-mapper/src/form-fields/layout-components.js
@@ -6,7 +6,7 @@ import Typography from '@material-ui/core/Typography';
 
 const layoutMapper = {
   [layoutComponents.FORM_WRAPPER]: ({ children, ...props }) => <form { ...props }>{ children }</form>,
-  [layoutComponents.BUTTON]: ({ label, variant, children, ...props }) => <Button color={ variant } variant="contained" { ...props }>{ label || children }</Button>,
+  [layoutComponents.BUTTON]: ({ label, variant, children, buttonType, ...props }) => <Button color={ variant } variant="contained" { ...props }>{ label || children }</Button>,
   [layoutComponents.BUTTON_GROUP]: ({ children }) => (
     <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
       { children }
diff --git a/packages/pf3-component-mapper/src/form-fields/layout-components.js b/packages/pf3-component-mapper/src/form-fields/layout-components.js
@@ -10,12 +10,13 @@ FormWapper.propTypes = {
   children: PropTypes.oneOfType([ PropTypes.node, PropTypes.arrayOf(PropTypes.node) ]).isRequired,
 };
 
-const FormButton = ({ label, variant, children, ...props }) => <Button bsStyle={ variant } { ...props }>{ label || children }</Button>;
+const FormButton = ({ label, variant, children, buttonType, ...props }) => <Button bsStyle={ variant } { ...props }>{ label || children }</Button>;
 
 FormButton.propTypes = {
   label: PropTypes.oneOfType([ PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node) ]),
   variant: PropTypes.string,
   children: PropTypes.oneOfType([ PropTypes.node, PropTypes.arrayOf(PropTypes.node) ]),
+  buttonType: PropTypes.string,
 };
 
 const ButtonGroupWrapper = ({ children, className, ...props }) => (
diff --git a/packages/pf4-component-mapper/src/form-fields/layout-components.js b/packages/pf4-component-mapper/src/form-fields/layout-components.js
@@ -10,8 +10,8 @@ import { Button } from '@patternfly/react-core/dist/js/components/Button/Button'
 
 import './layout-components-styles.scss';
 
-const ButtonLayout = ({ label, bsStyle, children, disabled, ...props }) =>
-  <Button variant={ bsStyle || 'secondary' } isDisabled={ disabled } { ...props }>
+const ButtonLayout = ({ label, bsStyle, children, disabled, buttonType, ...props }) =>
+  <Button variant={ buttonType === 'cancel' ? 'link' : bsStyle || 'secondary' } isDisabled={ disabled } { ...props }>
     { label }{ children }
   </Button>;
 
@@ -23,6 +23,7 @@ ButtonLayout.propTypes = {
     PropTypes.arrayOf(PropTypes.node),
     PropTypes.node,
   ]),
+  buttonType: PropTypes.string,
 };
 
 const ButtonGroupLayout = ({ children, ...props }) =>
diff --git a/packages/pf4-component-mapper/src/tests/field-array/__snapshots__/field-array.test.js.snap b/packages/pf4-component-mapper/src/tests/field-array/__snapshots__/field-array.test.js.snap
@@ -665,6 +665,7 @@ exports[`FieldArray should render array field correctly 1`] = `
                         className="pf-c-form__actions"
                       >
                         <ButtonLayout
+                          buttonType="submit"
                           key="form-submit"
                           label="Submit"
                           type="submit"
diff --git a/packages/react-form-renderer/demo/layout-mapper.js b/packages/react-form-renderer/demo/layout-mapper.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { layoutComponents } from '../src/constants';
 
-const Button = ({ variant, label, ...rest }) => (
+const Button = ({ variant, label, buttonType, ...rest }) => (
   <button
     style={{
       backgroundColor: variant === 'primary' ? 'red' : 'initial',
diff --git a/packages/react-form-renderer/src/form-renderer/form-controls.js b/packages/react-form-renderer/src/form-renderer/form-controls.js
@@ -47,6 +47,7 @@ const FormControls = ({
                   variant="primary"
                   disabled={ submitting || validating || disableSubmit }
                   label={ submitLabel }
+                  buttonType="submit"
                 />
               ),
               reset: canReset ? (
@@ -61,9 +62,12 @@ const FormControls = ({
                     }
                   } }
                   label={ resetLabel }
+                  buttonType="reset"
                 />
               ) : null,
-              cancel: onCancel ? <Button key="form-cancel" type="button" onClick={ () => onCancel(values) } label={ cancelLabel } /> : null,
+              cancel: onCancel ?
+                <Button key="form-cancel" type="button" onClick={ () => onCancel(values) } label={ cancelLabel } buttonType="cancel"/>
+                : null,
             };
             return (
               <ButtonGroup className={ buttonClassName }>
diff --git a/packages/react-form-renderer/src/tests/form-renderer/__snapshots__/form-controls.test.js.snap b/packages/react-form-renderer/src/tests/form-renderer/__snapshots__/form-controls.test.js.snap
@@ -46,6 +46,7 @@ exports[`<FormControls /> should add missing buttons if not defined in button or
           <Component>
             <div>
               <Component
+                buttonType="submit"
                 key="form-submit"
                 label="Submit"
                 type="submit"
@@ -59,6 +60,7 @@ exports[`<FormControls /> should add missing buttons if not defined in button or
                 </button>
               </Component>
               <Component
+                buttonType="reset"
                 disabled={true}
                 key="form-reset"
                 label="Reset"
@@ -74,6 +76,7 @@ exports[`<FormControls /> should add missing buttons if not defined in button or
                 </button>
               </Component>
               <Component
+                buttonType="cancel"
                 key="form-cancel"
                 label="Cancel"
                 onClick={[Function]}
@@ -148,6 +151,7 @@ exports[`<FormControls /> should render all controls and with default labels 1`]
           <Component>
             <div>
               <Component
+                buttonType="submit"
                 disabled={true}
                 key="form-submit"
                 label="Submit"
@@ -163,6 +167,7 @@ exports[`<FormControls /> should render all controls and with default labels 1`]
                 </button>
               </Component>
               <Component
+                buttonType="reset"
                 disabled={true}
                 key="form-reset"
                 label="Reset"
@@ -178,6 +183,7 @@ exports[`<FormControls /> should render all controls and with default labels 1`]
                 </button>
               </Component>
               <Component
+                buttonType="cancel"
                 key="form-cancel"
                 label="Cancel"
                 onClick={[Function]}
@@ -251,6 +257,7 @@ exports[`<FormControls /> should render buttons in correct order 1`] = `
           <Component>
             <div>
               <Component
+                buttonType="cancel"
                 key="form-cancel"
                 label="Cancel"
                 onClick={[Function]}
@@ -264,6 +271,7 @@ exports[`<FormControls /> should render buttons in correct order 1`] = `
                 </button>
               </Component>
               <Component
+                buttonType="submit"
                 key="form-submit"
                 label="Submit"
                 type="submit"
@@ -277,6 +285,7 @@ exports[`<FormControls /> should render buttons in correct order 1`] = `
                 </button>
               </Component>
               <Component
+                buttonType="reset"
                 disabled={true}
                 key="form-reset"
                 label="Reset"
@@ -351,6 +360,7 @@ exports[`<FormControls /> should render only submit button 1`] = `
           <Component>
             <div>
               <Component
+                buttonType="submit"
                 key="form-submit"
                 label="Submit"
                 type="submit"
diff --git a/packages/react-form-renderer/src/tests/form-renderer/__snapshots__/form-information.test.js.snap b/packages/react-form-renderer/src/tests/form-renderer/__snapshots__/form-information.test.js.snap
@@ -129,6 +129,7 @@ exports[`<FormControls /> should render with description 1`] = `
                     className=""
                   >
                     <Component
+                      buttonType="submit"
                       key="form-submit"
                       label="Submit"
                       type="submit"
@@ -288,6 +289,7 @@ exports[`<FormControls /> should render with title and description 1`] = `
                     className=""
                   >
                     <Component
+                      buttonType="submit"
                       key="form-submit"
                       label="Submit"
                       type="submit"
@@ -435,6 +437,7 @@ exports[`<FormControls /> should render without title and description 1`] = `
                     className=""
                   >
                     <Component
+                      buttonType="submit"
                       key="form-submit"
                       label="Submit"
                       type="submit"
diff --git a/packages/react-form-renderer/src/tests/form-renderer/__snapshots__/form-renderer.test.js.snap b/packages/react-form-renderer/src/tests/form-renderer/__snapshots__/form-renderer.test.js.snap
@@ -787,6 +787,7 @@ exports[`<FormRenderer /> should render form from schema 1`] = `
               >
                 <div>
                   <Component
+                    buttonType="submit"
                     key="form-submit"
                     label="Submit"
                     type="submit"
diff --git a/packages/react-form-renderer/src/tests/form-renderer/form-controls.test.js b/packages/react-form-renderer/src/tests/form-renderer/form-controls.test.js
@@ -13,7 +13,7 @@ describe('<FormControls />', () => {
 
   beforeEach(() => {
     initialLayout = {
-      [layoutComponents.BUTTON]: ({ label, ...props }) => <button { ...props }>{ label }</button>,
+      [layoutComponents.BUTTON]: ({ label, buttonType, ...props }) => <button { ...props }>{ label }</button>,
       [layoutComponents.COL]: ({ children, ...props }) => <div { ...props }>{ children }</div>,
       [layoutComponents.BUTTON_GROUP]: ({ children, ...props }) => <div { ...props }>{ children }</div>,
     };
diff --git a/packages/react-form-renderer/src/tests/form-renderer/form-information.test.js b/packages/react-form-renderer/src/tests/form-renderer/form-information.test.js
@@ -19,7 +19,7 @@ describe('<FormControls />', () => {
     formFieldsMapper = {};
 
     layoutMapper = {
-      [layoutComponents.BUTTON]: ({ label, ...props }) => <button { ...props }>{ label }</button>,
+      [layoutComponents.BUTTON]: ({ label, buttonType, ...props }) => <button { ...props }>{ label }</button>,
       [layoutComponents.BUTTON_GROUP]: ({ children, ...props }) => <div { ...props }>{ children }</div>,
       [layoutComponents.TITLE]: ({ children }) => <h1>{ children }</h1>,
       [layoutComponents.DESCRIPTION]: ({ children }) => <div>{ children }</div>,
diff --git a/packages/react-form-renderer/src/tests/form-renderer/form-renderer.test.js b/packages/react-form-renderer/src/tests/form-renderer/form-renderer.test.js
@@ -30,7 +30,7 @@ describe('<FormRenderer />', () => {
 
     layoutMapper = {
       [layoutComponents.BUTTON_GROUP]: ({ children }) => <div>{ children }</div>,
-      [layoutComponents.BUTTON]: ({ label, bsStyle, ...rest }) => <button { ...rest }>{ label }</button>,
+      [layoutComponents.BUTTON]: ({ label, bsStyle, buttonType, ...rest }) => <button { ...rest }>{ label }</button>,
       [layoutComponents.FORM_WRAPPER]: ({ children, ...props }) => <form { ...props }>{ children }</form>,
       [layoutComponents.TITLE]: ({ children }) => <div>{ children }</div>,
       [layoutComponents.DESCRIPTION]: ({ children }) => <div>{ children }</div>,
diff --git a/packages/react-form-renderer/src/tests/form-renderer/render-form.test.js b/packages/react-form-renderer/src/tests/form-renderer/render-form.test.js
@@ -30,7 +30,7 @@ describe('renderForm function', () => {
   beforeEach(() => {
     layoutMapper = {
       [layoutComponents.FORM_WRAPPER]: ({ children }) => <div>{ children }</div>,
-      [layoutComponents.BUTTON]: ({ label, ...rest }) =>  <button { ...rest }>{ label }</button>,
+      [layoutComponents.BUTTON]: ({ label, buttonType, ...rest }) =>  <button { ...rest }>{ label }</button>,
       [layoutComponents.BUTTON_GROUP]: ({ children }) => <div>{ children }</div>,
       [layoutComponents.TITLE]: ({ children }) => <div>{ children }</div>,
       [layoutComponents.DESCRIPTION]: ({ children }) => <div>{ children }</div>,
@@ -995,7 +995,7 @@ describe('renderForm function', () => {
     it('should set false value in initializeOnMount', () => {
       layoutMapper = {
         [layoutComponents.FORM_WRAPPER]: ({ children, ...props }) => <form { ...props }>{ children }</form>,
-        [layoutComponents.BUTTON]: ({ label, ...rest }) =>  <button { ...rest }>{ label }</button>,
+        [layoutComponents.BUTTON]: ({ label, buttonType, ...rest }) =>  <button { ...rest }>{ label }</button>,
         [layoutComponents.BUTTON_GROUP]: ({ children }) => <div>{ children }</div>,
         [layoutComponents.TITLE]: ({ children }) => <div>{ children }</div>,
         [layoutComponents.DESCRIPTION]: ({ children }) => <div>{ children }</div>,
@@ -1059,7 +1059,7 @@ describe('renderForm function', () => {
     it('should set unefined value in initializeOnMount', () => {
       layoutMapper = {
         [layoutComponents.FORM_WRAPPER]: ({ children, ...props }) => <form { ...props }>{ children }</form>,
-        [layoutComponents.BUTTON]: ({ label, ...rest }) =>  <button { ...rest }>{ label }</button>,
+        [layoutComponents.BUTTON]: ({ label, buttonType, ...rest }) =>  <button { ...rest }>{ label }</button>,
         [layoutComponents.BUTTON_GROUP]: ({ children }) => <div>{ children }</div>,
         [layoutComponents.TITLE]: ({ children }) => <div>{ children }</div>,
         [layoutComponents.DESCRIPTION]: ({ children }) => <div>{ children }</div>,
diff --git a/packages/react-renderer-demo/src/app/pages/renderer/component-mapping.md b/packages/react-renderer-demo/src/app/pages/renderer/component-mapping.md
@@ -59,6 +59,7 @@ Check the example below to see a simple implementation of layout components.
 |label|string|Button label|"Submit", "Cancel", "Reset"|Yes, \`buttonsLabels\` FormRenderer prop|
 |variant|string|Variant of button. Submit button will receive "primary" value |"primary", undefined|No|
 |onClick|function|Button click event handler|function|Yes, \`onSubmit\`, \`onCancel\`, \`onReset\` FormRenderer props|
+|buttonType|string|Depends on the type button|One of 'submit', 'cancel', 'reset'|No|
 
 ### ButtonGroup
 |Prop|Type|Description|Value|Customizable|
diff --git a/packages/react-renderer-demo/src/app/src/doc-components/component-mapper/form-fields-mapper.js b/packages/react-renderer-demo/src/app/src/doc-components/component-mapper/form-fields-mapper.js
@@ -26,7 +26,7 @@ const getButtonStyle = variant => ({
   marginRight: 4,
 });
 
-const Button = ({ children, label, variant, ...props }) => <button style={ getButtonStyle(variant) } { ...props }>{ label }</button>;
+const Button = ({ children, label, variant, buttonType, ...props }) => <button style={ getButtonStyle(variant) } { ...props }>{ label }</button>;
 
 const layoutComponent = {
   [layoutComponents.FORM_WRAPPER]: FormWrapper,
diff --git a/packages/react-renderer-demo/src/app/src/doc-components/component-mapper/layout-mapper.js b/packages/react-renderer-demo/src/app/src/doc-components/component-mapper/layout-mapper.js
@@ -29,7 +29,7 @@ const getButtonStyle = variant => ({
   marginRight: 4,
 });
 
-const Button = ({ children, label, variant, ...props }) => <button style={ getButtonStyle(variant) } { ...props }>{ label }</button>;
+const Button = ({ children, label, variant, buttonType, ...props }) => <button style={ getButtonStyle(variant) } { ...props }>{ label }</button>;
 
 const buttonGroupStyle = {
   display: 'flex',
diff --git a/packages/react-renderer-demo/src/app/src/doc-components/field-array/form-fields-mapper.js b/packages/react-renderer-demo/src/app/src/doc-components/field-array/form-fields-mapper.js
@@ -26,7 +26,7 @@ const getButtonStyle = variant => ({
   marginRight: 4,
 });
 
-const Button = ({ children, label, variant, ...props }) => <button style={ getButtonStyle(variant) } { ...props }>{ label }</button>;
+const Button = ({ children, label, variant, buttonType, ...props }) => <button style={ getButtonStyle(variant) } { ...props }>{ label }</button>;
 
 const layoutComponent = {
   [layoutComponents.FORM_WRAPPER]: FormWrapper,

Original file line number	Diff line number	Diff line change
@@ -665,6 +665,7 @@ exports[`FieldArray should render array field correctly 1`] = `
`665`	`665`	`className="pf-c-form__actions"`
`666`	`666`	`>`
`667`	`667`	`<ButtonLayout`
	`668`	`+ buttonType="submit"`
`668`	`669`	`key="form-submit"`
`669`	`670`	`label="Submit"`
`670`	`671`	`type="submit"`
Original file line number	Diff line number	Diff line change
@@ -787,6 +787,7 @@ exports[`<FormRenderer /> should render form from schema 1`] = `
`787`	`787`	`>`
`788`	`788`	`<div>`
`789`	`789`	`<Component`
	`790`	`+ buttonType="submit"`
`790`	`791`	`key="form-submit"`
`791`	`792`	`label="Submit"`
`792`	`793`	`type="submit"`