Merge pull request #172 from rvsia/add_label_to_form

fix(renderer): add label prop to form

Author: Hyperkid123

packages/react-form-renderer/src/form-renderer/index.js

@@ -57,6 +57,8 @@ const FormRenderer = ({
     return <SchemaErrorComponent name={ schemaError.name } message={ schemaError.message } />;
   }
 
+  const label = inputSchema.schema.title || inputSchema.schema.label;
+
   return (
     <Form
       onSubmit={ onSubmit }
@@ -90,7 +92,7 @@ const FormRenderer = ({
           <RendererContext.Consumer>
             { ({ layoutMapper: { FormWrapper }}) => (
               <FormWrapper>
-                { inputSchema.schema.title && renderTitle(inputSchema.schema.title) }
+                { label && renderTitle(label) }
                 { inputSchema.schema.description && renderDescription(inputSchema.schema.description) }
                 { renderForm(inputSchema.schema.fields) }
                 { onStateUpdate && <FormSpy onChange={ onStateUpdate } /> }

packages/react-form-renderer/src/tests/form-renderer/__snapshots__/form-information.test.js.snap

@@ -157,163 +157,6 @@ exports[`<FormControls /> should render with description 1`] = `
 </ContextWrapper>
 `;
 
-exports[`<FormControls /> should render with title 1`] = `
-<ContextWrapper>
-  <FormRenderer
-    buttonClassName=""
-    buttonsLabels={Object {}}
-    clearOnUnmount={false}
-    disableSubmit={Array []}
-    formFieldsMapper={Object {}}
-    formType="pf3"
-    initialValues={Object {}}
-    layoutMapper={
-      Object {
-        "Button": [Function],
-        "ButtonGroup": [Function],
-        "Description": [Function],
-        "FormWrapper": [Function],
-        "Title": [Function],
-      }
-    }
-    onSubmit={[MockFunction]}
-    resetAble={false}
-    schema={
-      Object {
-        "fields": Array [],
-        "title": "Title",
-      }
-    }
-    schemaType="default"
-    showFormControls={true}
-    uiSchema={Object {}}
-  >
-    <ReactFinalForm
-      decorators={
-        Array [
-          [Function],
-        ]
-      }
-      initialValues={Object {}}
-      mutators={
-        Object {
-          "concat": [Function],
-          "insert": [Function],
-          "move": [Function],
-          "pop": [Function],
-          "push": [Function],
-          "remove": [Function],
-          "removeBatch": [Function],
-          "shift": [Function],
-          "swap": [Function],
-          "unshift": [Function],
-          "update": [Function],
-        }
-      }
-      onSubmit={[MockFunction]}
-      render={[Function]}
-      subscription={
-        Object {
-          "pristine": true,
-          "submitting": true,
-          "valid": true,
-        }
-      }
-    >
-      <Component>
-        <form>
-          <Component>
-            <div>
-              Title
-            </div>
-          </Component>
-          <FormControls
-            buttonClassName=""
-            buttonOrder={
-              Array [
-                "submit",
-                "reset",
-                "cancel",
-              ]
-            }
-            canReset={false}
-            canSubmit={false}
-            cancelLabel="Cancel"
-            handleSubmit={[Function]}
-            resetLabel="Reset"
-            submitLabel="Submit"
-          >
-            <ReactFinalForm(FormSpy)>
-              <FormSpy
-                reactFinalForm={
-                  Object {
-                    "batch": [Function],
-                    "blur": [Function],
-                    "change": [Function],
-                    "destroyOnUnregister": false,
-                    "focus": [Function],
-                    "getFieldState": [Function],
-                    "getRegisteredFields": [Function],
-                    "getState": [Function],
-                    "initialize": [Function],
-                    "isValidationPaused": [Function],
-                    "mutators": Object {
-                      "concat": [Function],
-                      "insert": [Function],
-                      "move": [Function],
-                      "pop": [Function],
-                      "push": [Function],
-                      "remove": [Function],
-                      "removeBatch": [Function],
-                      "shift": [Function],
-                      "swap": [Function],
-                      "unshift": [Function],
-                      "update": [Function],
-                    },
-                    "pauseValidation": [Function],
-                    "registerField": [Function],
-                    "reset": [Function],
-                    "resetFieldState": [Function],
-                    "resumeValidation": [Function],
-                    "setConfig": [Function],
-                    "submit": [Function],
-                    "subscribe": [Function],
-                  }
-                }
-              >
-                <Component
-                  className=""
-                >
-                  <div
-                    className=""
-                  >
-                    <Component
-                      key="form-submit"
-                      label="Submit"
-                      onClick={[Function]}
-                      type="button"
-                      variant="primary"
-                    >
-                      <button
-                        onClick={[Function]}
-                        type="button"
-                        variant="primary"
-                      >
-                        Submit
-                      </button>
-                    </Component>
-                  </div>
-                </Component>
-              </FormSpy>
-            </ReactFinalForm(FormSpy)>
-          </FormControls>
-        </form>
-      </Component>
-    </ReactFinalForm>
-  </FormRenderer>
-</ContextWrapper>
-`;
-
 exports[`<FormControls /> should render with title and description 1`] = `
 <ContextWrapper>
   <FormRenderer
@@ -381,9 +224,9 @@ exports[`<FormControls /> should render with title and description 1`] = `
       <Component>
         <form>
           <Component>
-            <div>
+            <h1>
               Title
-            </div>
+            </h1>
           </Component>
           <Component>
             <div>

packages/react-form-renderer/src/tests/form-renderer/form-information.test.js

@@ -21,7 +21,7 @@ describe('<FormControls />', () => {
     layoutMapper = {
       [layoutComponents.BUTTON]: ({ label, ...props }) => <button { ...props }>{ label }</button>,
       [layoutComponents.BUTTON_GROUP]: ({ children, ...props }) => <div { ...props }>{ children }</div>,
-      [layoutComponents.TITLE]: ({ children }) => <div>{ children }</div>,
+      [layoutComponents.TITLE]: ({ children }) => <h1>{ children }</h1>,
       [layoutComponents.DESCRIPTION]: ({ children }) => <div>{ children }</div>,
       [layoutComponents.FORM_WRAPPER]: ({ children }) => <form>{ children }</form>,
     };
@@ -40,13 +40,24 @@ describe('<FormControls />', () => {
     };
   });
 
+  const TITLE = 'tiiiitle';
+
   it('should render with title', () => {
     const wrapper = mount(
       <ContextWrapper>
-        <FormRenderer { ...initialProps } schema={{ ...schema, title: 'Title' }}/>
+        <FormRenderer { ...initialProps } schema={{ ...schema, title: TITLE }}/>
       </ContextWrapper>
     );
-    expect(toJson(wrapper)).toMatchSnapshot();
+    expect(wrapper.find('h1').text().includes(TITLE)).toEqual(true);
+  });
+
+  it('should render with label', () => {
+    const wrapper = mount(
+      <ContextWrapper>
+        <FormRenderer { ...initialProps } schema={{ ...schema, label: TITLE }}/>
+      </ContextWrapper>
+    );
+    expect(wrapper.find('h1').text().includes(TITLE)).toEqual(true);
   });
 
   it('should render with description', () => {

packages/react-renderer-demo/src/docs-components/component-mapping.md

@@ -58,10 +58,15 @@ Check the example below to see a simple implementation of layout components.
 |----|----|-----------|-----|------------|
 |children|node|Wrapper around form buttons||No|
 
-#### FormGroup
-|Prop|Type|Description|Value|Customizable|
-|----|----|-----------|-----|------------|
-|children|node|Form field group||Based on form schema|
+#### Title
+|Prop|Type|Description|Customizable|
+|----|----|-----------|------------|
+|children|node|Form title|no|
+
+#### Description
+|Prop|Type|Description|Customizable|
+|----|----|-----------|------------|
+|children|node|Form description|no|
 
 ## Creating formFieldsMapper
 

packages/react-renderer-demo/src/docs-components/renderer-api.md

@@ -34,3 +34,27 @@ Form Renderer provides a lot of customization via props.
 |subscription|object|You can pass your own [subscription](https://final-form.org/docs/react-final-form/types/FormProps#subscription), which will be added to default settings.|`{ pristine: true, submitting: true, valid: true }`|
 |uiSchema|object|Use when you need to use mozilla schema.|{ }|
 |<NavLink to="/renderer/validators">validate</NavLink>|func|A function which receives all form values and returns an object with errors.||
+
+### Schema
+
+The root object of the schema represents the <NavLink to="/renderer/component-mapping#formwrapper">Form</NavLink> component, which accepts only these three props:
+
+|Prop|Type|Description|
+|----|:--:|----------:|
+|label, title|node|<NavLink to="/renderer/component-mapping#title">Title</NavLink> of the form. Optional.|
+|description|node|<NavLink to="/renderer/component-mapping#description">Description</NavLink> of the form. Optional.|
+|fields|array of objects|<NavLink to="/renderer/component-api">Components</NavLink> of the form. Required!|
+
+#### Example
+
+```javascript
+schema = {
+  title: 'Your name',
+  description: 'Add your name',
+  fields: [{
+    name: 'userName',
+    label: 'Your name is',
+    component: componentTypes.TEXT_FIELD,
+  }]
+};
+```