From bc2d8bce142ea2c7bd2c77f3425788cd23fb02c8 Mon Sep 17 00:00:00 2001 From: Oliver Sand Date: Thu, 27 May 2021 11:20:18 +0200 Subject: [PATCH 1/9] material-ui: hide grid for hidden fields Implementations follows the one that already exists for ant design. Closes #1974 --- .../src/FieldTemplate/FieldTemplate.tsx | 5 +++ .../ObjectFieldTemplate.tsx | 26 ++++++----- packages/material-ui/test/Form.test.tsx | 12 +++++ .../test/__snapshots__/Form.test.tsx.snap | 44 +++++++++++++++++++ 4 files changed, 77 insertions(+), 10 deletions(-) diff --git a/packages/material-ui/src/FieldTemplate/FieldTemplate.tsx b/packages/material-ui/src/FieldTemplate/FieldTemplate.tsx index 5a1bfa3732..6ad3231758 100644 --- a/packages/material-ui/src/FieldTemplate/FieldTemplate.tsx +++ b/packages/material-ui/src/FieldTemplate/FieldTemplate.tsx @@ -16,6 +16,7 @@ const FieldTemplate = ({ classNames, disabled, displayLabel, + hidden, label, onDropPropertyClick, onKeyChange, @@ -26,6 +27,10 @@ const FieldTemplate = ({ rawDescription, schema, }: FieldTemplateProps) => { + if (hidden) { + return children; + } + return ( { const classes = useStyles(); + const isHidden = (element: any): boolean => + element.content.props.uiSchema["ui:widget"] === "hidden"; + return ( <> {(uiSchema['ui:title'] || title) && ( @@ -49,16 +52,19 @@ const ObjectFieldTemplate = ({ /> )} - {properties.map((element: any, index: number) => ( - - {element.content} - - ))} + {properties.map((element: any, index: number) => + isHidden(element) ? ( + element.content + ) : ( + + {element.content} + + ) + )} {canExpand(schema, uiSchema, formData) && ( diff --git a/packages/material-ui/test/Form.test.tsx b/packages/material-ui/test/Form.test.tsx index 39362a0365..63b5395efc 100644 --- a/packages/material-ui/test/Form.test.tsx +++ b/packages/material-ui/test/Form.test.tsx @@ -197,6 +197,18 @@ describe("single fields", () => { .toJSON(); expect(tree).toMatchSnapshot(); }); + test("hidden field", () => { + const schema: JSONSchema7 = { + type: "string", + }; + const uiSchema: UiSchema = { + "ui:widget": "hidden", + }; + const tree = renderer + .create(
) + .toJSON(); + expect(tree).toMatchSnapshot(); + }); test("hidden label", () => { const schema: JSONSchema7 = { type: "string", diff --git a/packages/material-ui/test/__snapshots__/Form.test.tsx.snap b/packages/material-ui/test/__snapshots__/Form.test.tsx.snap index b75bba60d4..717d1b64ac 100644 --- a/packages/material-ui/test/__snapshots__/Form.test.tsx.snap +++ b/packages/material-ui/test/__snapshots__/Form.test.tsx.snap @@ -795,6 +795,50 @@ exports[`single fields format datetime 1`] = `
`; +exports[`single fields hidden field 1`] = ` +
+ +
+ +
+
+`; + exports[`single fields hidden label 1`] = `
Date: Mon, 14 Jun 2021 18:11:44 +0200 Subject: [PATCH 2/9] Update test snapshot to latest master --- packages/material-ui/test/__snapshots__/Form.test.tsx.snap | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/material-ui/test/__snapshots__/Form.test.tsx.snap b/packages/material-ui/test/__snapshots__/Form.test.tsx.snap index 717d1b64ac..32d774f6e4 100644 --- a/packages/material-ui/test/__snapshots__/Form.test.tsx.snap +++ b/packages/material-ui/test/__snapshots__/Form.test.tsx.snap @@ -921,7 +921,7 @@ exports[`single fields hidden label 1`] = `
From 83adf05e8b2b28eefd5174643508bbbdd6526416 Mon Sep 17 00:00:00 2001 From: Oliver Sand Date: Mon, 14 Jun 2021 18:55:39 +0200 Subject: [PATCH 3/9] Add comment --- .../material-ui/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/material-ui/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx b/packages/material-ui/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx index d1d2ed8d51..1fb75522d0 100644 --- a/packages/material-ui/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx +++ b/packages/material-ui/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx @@ -53,6 +53,8 @@ const ObjectFieldTemplate = ({ )} {properties.map((element: any, index: number) => + // Remove the if the inner element is hidden as the + // itself would otherwise still take up space. isHidden(element) ? ( element.content ) : ( From 0a69f63b9b1c3fd5e76bcef9bbde3a2e960d6844 Mon Sep 17 00:00:00 2001 From: Oliver Sand Date: Tue, 15 Jun 2021 09:27:15 +0200 Subject: [PATCH 4/9] Move ui:widget evaluation into core --- .../antd/src/templates/ObjectFieldTemplate/index.js | 5 +---- packages/core/index.d.ts | 1 + packages/core/src/components/fields/ObjectField.js | 12 +++++++----- .../src/ObjectFieldTemplate/ObjectFieldTemplate.tsx | 7 ++----- 4 files changed, 11 insertions(+), 14 deletions(-) diff --git a/packages/antd/src/templates/ObjectFieldTemplate/index.js b/packages/antd/src/templates/ObjectFieldTemplate/index.js index c558435969..4652f18461 100644 --- 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 (
@@ -99,7 +96,7 @@ const ObjectFieldTemplate = ({ /> )} - {properties.filter(filterHidden).map((element) => ( + {properties.filter((e) => !e.hidden).map((element) => ( {element.content} diff --git a/packages/core/index.d.ts b/packages/core/index.d.ts index a1f97349be..17f2f01875 100644 --- 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 index 09de06e318..fa80926c45 100644 --- a/packages/core/src/components/fields/ObjectField.js +++ b/packages/core/src/components/fields/ObjectField.js @@ -229,6 +229,11 @@ 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: ( { const classes = useStyles(); - const isHidden = (element: any): boolean => - element.content.props.uiSchema["ui:widget"] === "hidden"; - return ( <> {(uiSchema['ui:title'] || title) && ( @@ -52,10 +49,10 @@ const ObjectFieldTemplate = ({ /> )} - {properties.map((element: any, index: number) => + {properties.map((element, index) => // Remove the if the inner element is hidden as the // itself would otherwise still take up space. - isHidden(element) ? ( + element.hidden ? ( element.content ) : ( Date: Tue, 15 Jun 2021 09:43:49 +0200 Subject: [PATCH 5/9] Add test for hidden in antd --- packages/antd/test/Form.test.js | 12 +++++++++ .../antd/test/__snapshots__/Form.test.js.snap | 26 +++++++++++++++++++ 2 files changed, 38 insertions(+) diff --git a/packages/antd/test/Form.test.js b/packages/antd/test/Form.test.js index 2e57ce61ef..cc079cb445 100644 --- a/packages/antd/test/Form.test.js +++ b/packages/antd/test/Form.test.js @@ -78,4 +78,16 @@ describe("single fields", () => { .toJSON(); expect(tree).toMatchSnapshot(); }); + test("hidden field", () => { + const schema = { + type: "string", + }; + const uiSchema = { + "ui:widget": "hidden", + }; + const tree = renderer + .create(
) + .toJSON(); + expect(tree).toMatchSnapshot(); + }); }); diff --git a/packages/antd/test/__snapshots__/Form.test.js.snap b/packages/antd/test/__snapshots__/Form.test.js.snap index 155f4967db..e634278123 100644 --- a/packages/antd/test/__snapshots__/Form.test.js.snap +++ b/packages/antd/test/__snapshots__/Form.test.js.snap @@ -1,5 +1,31 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`single fields hidden field 1`] = ` + +
+ +
+
+ +
+
+`; + exports[`single fields null field 1`] = `
Date: Tue, 15 Jun 2021 09:55:46 +0200 Subject: [PATCH 6/9] Hide hidden fields in bootstrap Closes #2175 --- .../ObjectFieldTemplate.tsx | 5 +- packages/bootstrap-4/test/Form.test.tsx | 19 +++++++ .../test/__snapshots__/Form.test.tsx.snap | 49 +++++++++++++++++++ 3 files changed, 72 insertions(+), 1 deletion(-) diff --git a/packages/bootstrap-4/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx b/packages/bootstrap-4/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx index 0a3106bc41..de98a8764f 100644 --- a/packages/bootstrap-4/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx +++ b/packages/bootstrap-4/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx @@ -33,7 +33,10 @@ const ObjectFieldTemplate = ({ )} {properties.map((element: any, index: number) => ( - + {element.content} ))} diff --git a/packages/bootstrap-4/test/Form.test.tsx b/packages/bootstrap-4/test/Form.test.tsx index 7fb76f4841..4d3247fbcd 100644 --- 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() + .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 index ec2606e00b..abb92593dd 100644 --- 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`] = ` `; +exports[`single fields hidden field 1`] = ` +
+
+
+
+
+ +
+ +
+
+
+
+
+
+ +
+
+`; + exports[`single fields null field 1`] = `
Date: Tue, 15 Jun 2021 10:12:05 +0200 Subject: [PATCH 7/9] Improve tests --- packages/antd/test/Form.test.js | 11 ++++++++-- .../antd/test/__snapshots__/Form.test.js.snap | 18 ++++++++++----- packages/material-ui/test/Form.test.tsx | 11 ++++++++-- .../test/__snapshots__/Form.test.tsx.snap | 22 +++++++++++++------ 4 files changed, 46 insertions(+), 16 deletions(-) diff --git a/packages/antd/test/Form.test.js b/packages/antd/test/Form.test.js index cc079cb445..d408c9710d 100644 --- a/packages/antd/test/Form.test.js +++ b/packages/antd/test/Form.test.js @@ -80,10 +80,17 @@ describe("single fields", () => { }); test("hidden field", () => { const schema = { - type: "string", + type: "object", + properties: { + "my-field": { + type: "string", + }, + }, }; const uiSchema = { - "ui:widget": "hidden", + "my-field": { + "ui:widget": "hidden", + }, }; const tree = renderer .create() diff --git a/packages/antd/test/__snapshots__/Form.test.js.snap b/packages/antd/test/__snapshots__/Form.test.js.snap index e634278123..057c23adab 100644 --- a/packages/antd/test/__snapshots__/Form.test.js.snap +++ b/packages/antd/test/__snapshots__/Form.test.js.snap @@ -7,13 +7,21 @@ exports[`single fields hidden field 1`] = ` onSubmit={[Function]} >
- + > +
+
+
+ + +`; + exports[`single fields null field 1`] = `
Date: Tue, 15 Jun 2021 09:27:24 -0500 Subject: [PATCH 9/9] Update custom-templates.md --- docs/advanced-customization/custom-templates.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/advanced-customization/custom-templates.md b/docs/advanced-customization/custom-templates.md index 5eabf6a5ee..bd91607a79 100644 --- 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`.