Hide grid for hidden fields (material-ui, bootstrap-4, fluent-ui); pa…

…ss hidden prop to ObjectFieldTemplate (#2405) * material-ui: hide grid for hidden fields Implementations follows the one that already exists for ant design. Closes #1974 * Update test snapshot to latest master * Add comment * Move ui:widget evaluation into core * Add test for hidden in antd * Hide hidden fields in bootstrap Closes #2175 * Improve tests * Remove whitespace for hidden in fluent-ui * Update custom-templates.md Co-authored-by: Ashwin Ramaswami <aramaswamis@gmail.com>
rjsf-team · Jun 15, 2021 · 2393797 · 2393797
1 parent a0236bc
commit 2393797
Show file tree

Hide file tree

Showing 19 changed files with 346 additions and 28 deletions.
diff --git a/docs/advanced-customization/custom-templates.md b/docs/advanced-customization/custom-templates.md
@@ -219,5 +219,6 @@ The following props are part of each element in `properties`:
 - `name`: A string representing the property name.
 - `disabled`: A boolean value stating if the object property is disabled.
 - `readonly`: A boolean value stating if the property is read-only.
+- `hidden`: A boolean value stating if the property should be hidden.
 
 > Note: Array and object field templates are always rendered inside of the FieldTemplate. To fully customize an object field template, you may need to specify both `ui:FieldTemplate` and `ui:ObjectFieldTemplate`.
diff --git a/packages/antd/src/templates/ObjectFieldTemplate/index.js b/packages/antd/src/templates/ObjectFieldTemplate/index.js
@@ -75,9 +75,6 @@ const ObjectFieldTemplate = ({
     return defaultColSpan;
   };
 
-  const filterHidden = (element) =>
-    element.content.props.uiSchema['ui:widget'] !== 'hidden';
-
   return (
     <fieldset id={idSchema.$id}>
       <Row gutter={rowGutter}>
@@ -99,7 +96,7 @@ const ObjectFieldTemplate = ({
               />
             </Col>
           )}
-        {properties.filter(filterHidden).map((element) => (
+        {properties.filter((e) => !e.hidden).map((element) => (
           <Col key={element.name} span={calculateColSpan(element)}>
             {element.content}
           </Col>

diff --git a/packages/antd/test/Form.test.js b/packages/antd/test/Form.test.js
@@ -78,4 +78,23 @@ describe("single fields", () => {
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
+  test("hidden field", () => {
+    const schema = {
+      type: "object",
+      properties: {
+        "my-field": {
+          type: "string",
+        },
+      },
+    };
+    const uiSchema = {
+      "my-field": {
+        "ui:widget": "hidden",
+      },
+    };
+    const tree = renderer
+      .create(<Form schema={schema} uiSchema={uiSchema} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
 });
diff --git a/packages/antd/test/__snapshots__/Form.test.js.snap b/packages/antd/test/__snapshots__/Form.test.js.snap
@@ -1,5 +1,39 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`single fields hidden field 1`] = `
+<form
+  className="rjsf"
+  noValidate={false}
+  onSubmit={[Function]}
+>
+  <div
+    className="form-group field field-object"
+  >
+    <fieldset
+      id="root"
+    >
+      <div
+        className="ant-row"
+        style={
+          Object {
+            "marginLeft": -12,
+            "marginRight": -12,
+          }
+        }
+      />
+    </fieldset>
+  </div>
+  <div>
+    <button
+      className="btn btn-info"
+      type="submit"
+    >
+      Submit
+    </button>
+  </div>
+</form>
+`;
+
 exports[`single fields null field 1`] = `
 <form
   className="rjsf"

diff --git a/packages/bootstrap-4/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx b/packages/bootstrap-4/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx
@@ -33,7 +33,10 @@ const ObjectFieldTemplate = ({
       )}
       <Container fluid className="p-0">
         {properties.map((element: any, index: number) => (
-          <Row key={index} style={{ marginBottom: "10px" }}>
+          <Row
+            key={index}
+            style={{ marginBottom: "10px" }}
+            className={element.hidden ? "d-none" : undefined}>
             <Col xs={12}> {element.content}</Col>
           </Row>
         ))}

diff --git a/packages/bootstrap-4/test/Form.test.tsx b/packages/bootstrap-4/test/Form.test.tsx
@@ -197,4 +197,23 @@ describe("single fields", () => {
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
+  test("hidden field", () => {
+    const schema: JSONSchema7 = {
+      type: "object",
+      properties: {
+        "my-field": {
+          type: "string",
+        },
+      },
+    };
+    const uiSchema: UiSchema = {
+      "my-field": {
+        "ui:widget": "hidden",
+      },
+    };
+    const tree = renderer
+      .create(<Form schema={schema} uiSchema={uiSchema} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
 });
diff --git a/packages/bootstrap-4/test/__snapshots__/Form.test.tsx.snap b/packages/bootstrap-4/test/__snapshots__/Form.test.tsx.snap
@@ -346,6 +346,55 @@ exports[`single fields format datetime 1`] = `
 </form>
 `;
 
+exports[`single fields hidden field 1`] = `
+<form
+  className="rjsf"
+  noValidate={false}
+  onSubmit={[Function]}
+>
+  <div
+    className="form-group"
+  >
+    <div
+      className="p-0 container-fluid"
+    >
+      <div
+        className="d-none row"
+        style={
+          Object {
+            "marginBottom": "10px",
+          }
+        }
+      >
+        <div
+          className="col-12"
+        >
+           
+          <div
+            className="form-group"
+          >
+            <input
+              id="root_my-field"
+              type="hidden"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <button
+      className="btn btn-primary"
+      disabled={false}
+      type="submit"
+    >
+      Submit
+    </button>
+  </div>
+</form>
+`;
+
 exports[`single fields null field 1`] = `
 <form
   className="rjsf"

diff --git a/packages/core/index.d.ts b/packages/core/index.d.ts
@@ -215,6 +215,7 @@ declare module '@rjsf/core' {
             name: string;
             disabled: boolean;
             readonly: boolean;
+            hidden: boolean;
         }[];
         onAddClick: (schema: JSONSchema7) => () => void;
         readonly: boolean;

diff --git a/packages/core/src/components/fields/ObjectField.js b/packages/core/src/components/fields/ObjectField.js
@@ -229,18 +229,19 @@ class ObjectField extends Component {
         const addedByAdditionalProperties = schema.properties[
           name
         ].hasOwnProperty(ADDITIONAL_PROPERTY_FLAG);
+        const fieldUiSchema = addedByAdditionalProperties
+          ? uiSchema.additionalProperties
+          : uiSchema[name];
+        const hidden = fieldUiSchema && fieldUiSchema["ui:widget"] === "hidden";
+
         return {
           content: (
             <SchemaField
               key={name}
               name={name}
               required={this.isRequired(name)}
               schema={schema.properties[name]}
-              uiSchema={
-                addedByAdditionalProperties
-                  ? uiSchema.additionalProperties
-                  : uiSchema[name]
-              }
+              uiSchema={fieldUiSchema}
               errorSchema={errorSchema[name]}
               idSchema={idSchema[name]}
               idPrefix={idPrefix}
@@ -263,6 +264,7 @@ class ObjectField extends Component {
           readonly,
           disabled,
           required,
+          hidden,
         };
       }),
       readonly,

diff --git a/packages/fluent-ui/src/FieldTemplate/FieldTemplate.tsx b/packages/fluent-ui/src/FieldTemplate/FieldTemplate.tsx
@@ -20,12 +20,15 @@ const FieldTemplate = ({
   rawDescription,
   classNames,
   label,
-  required
+  required,
+  hidden,
 }: FieldTemplateProps) => {
   // TODO: do this better by not returning the form-group class from master.
   classNames = "ms-Grid-col ms-sm12 " + classNames.replace("form-group", "");
   return (
-    <div className={classNames} style={{marginBottom: 15}}>
+    <div
+      className={classNames}
+      style={{ marginBottom: 15, display: hidden ? "none" : undefined }}>
       {children}
       {/* {displayLabel && <Label>
         {label}

diff --git a/packages/fluent-ui/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx b/packages/fluent-ui/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx
@@ -29,7 +29,7 @@ const ObjectFieldTemplate = ({
 
       <div className="ms-Grid" dir="ltr">
         <div className="ms-Grid-row">
-          {properties.map((element: any) => element.content)}
+          {properties.map((element) => element.content)}
         </div>
       </div>
     </>

diff --git a/packages/fluent-ui/test/Form.test.tsx b/packages/fluent-ui/test/Form.test.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import Form from "../src/index";
 import { JSONSchema7 } from "json-schema";
 import renderer from "react-test-renderer";
+import { UiSchema } from '@rjsf/core';
 
 describe("single fields", () => {
   describe("string field", () => {
@@ -72,4 +73,23 @@ describe("single fields", () => {
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
-});
+  test("hidden field", () => {
+    const schema: JSONSchema7 = {
+      type: "object",
+      properties: {
+        "my-field": {
+          type: "string",
+        },
+      },
+    };
+    const uiSchema: UiSchema = {
+      "my-field": {
+        "ui:widget": "hidden",
+      },
+    };
+    const tree = renderer
+      .create(<Form schema={schema} uiSchema={uiSchema} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});
diff --git a/packages/fluent-ui/test/__snapshots__/Array.test.tsx.snap b/packages/fluent-ui/test/__snapshots__/Array.test.tsx.snap
@@ -10,6 +10,7 @@ exports[`array fields array 1`] = `
     className="ms-Grid-col ms-sm12  field field-array"
     style={
       Object {
+        "display": undefined,
         "marginBottom": 15,
       }
     }
@@ -115,6 +116,7 @@ exports[`array fields checkboxes 1`] = `
     className="ms-Grid-col ms-sm12  field field-array"
     style={
       Object {
+        "display": undefined,
         "marginBottom": 15,
       }
     }
@@ -211,6 +213,7 @@ exports[`array fields fixed array 1`] = `
     className="ms-Grid-col ms-sm12  field field-array"
     style={
       Object {
+        "display": undefined,
         "marginBottom": 15,
       }
     }
@@ -232,6 +235,7 @@ exports[`array fields fixed array 1`] = `
               className="ms-Grid-col ms-sm12  field field-string"
               style={
                 Object {
+                  "display": undefined,
                   "marginBottom": 15,
                 }
               }
@@ -389,6 +393,7 @@ exports[`array fields fixed array 1`] = `
               className="ms-Grid-col ms-sm12  field field-number"
               style={
                 Object {
+                  "display": undefined,
                   "marginBottom": 15,
                 }
               }