From d0119f6fb55b7ef994ecc95f0c1fa5e9c5283ca2 Mon Sep 17 00:00:00 2001 From: Heath Chiavettone Date: Fri, 17 Sep 2021 17:36:29 -0700 Subject: [PATCH 1/5] Added form readonly prop (#2552) Updated the playground to add the `Readonly whole form` flag Added the `form-readonly` section in the documentation Updated the tests to verify the `read-only` status --- docs/api-reference/form-props.md | 17 +++++++++++++++++ packages/core/src/components/Form.js | 5 +++++ packages/core/test/Form_test.js | 27 +++++++++++++++++++++++++++ packages/playground/src/app.js | 3 +++ 4 files changed, 52 insertions(+) diff --git a/docs/api-reference/form-props.md b/docs/api-reference/form-props.md index 44a10229c2..e523709ae6 100644 --- a/docs/api-reference/form-props.md +++ b/docs/api-reference/form-props.md @@ -72,6 +72,23 @@ render(( If you just want to disable some of the fields, see the `ui:disabled` parameter in `uiSchema`. +## readonly + +It's possible to make the whole form read-only by setting the `readonly` prop. The `readonly` prop is then forwarded down to each field of the form. + +```jsx +const schema = { + type: "string" +}; + +render(( +
+), document.getElementById("app")); +``` + +If you just want to make some of the fields read-only, see the `ui:readonly` parameter in `uiSchema`. + ## enctype The value of this prop will be passed to the `enctype` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-enctype). diff --git a/packages/core/src/components/Form.js b/packages/core/src/components/Form.js index 0656383273..4e4c0ce655 100644 --- a/packages/core/src/components/Form.js +++ b/packages/core/src/components/Form.js @@ -24,6 +24,7 @@ export default class Form extends Component { noValidate: false, liveValidate: false, disabled: false, + readonly: false, noHtml5Validate: false, ErrorList: DefaultErrorList, omitExtraData: false, @@ -438,6 +439,7 @@ export default class Form extends Component { acceptcharset, noHtml5Validate, disabled, + readonly, formContext, } = this.props; @@ -484,6 +486,7 @@ export default class Form extends Component { onFocus={this.onFocus} registry={registry} disabled={disabled} + readonly={readonly} /> {children ? ( children @@ -504,6 +507,8 @@ if (process.env.NODE_ENV !== "production") { schema: PropTypes.object.isRequired, uiSchema: PropTypes.object, formData: PropTypes.any, + disabled: PropTypes.bool, + readonly: PropTypes.bool, widgets: PropTypes.objectOf( PropTypes.oneOfType([PropTypes.func, PropTypes.object]) ), diff --git a/packages/core/test/Form_test.js b/packages/core/test/Form_test.js index 9ed30c432c..ef689a350c 100644 --- a/packages/core/test/Form_test.js +++ b/packages/core/test/Form_test.js @@ -2226,6 +2226,33 @@ describeRepeated("Form common", createFormComponent => { }); }); + describe("Form readonly prop", () => { + const schema = { + type: "object", + properties: { + foo: { type: "string" }, + bar: { type: "string" }, + }, + }; + const formData = { foo: "foo", bar: "bar" }; + + it("should enable all items", () => { + const { node } = createFormComponent({ schema, formData }); + + expect(node.querySelectorAll("input:disabled")).to.have.length.of(0); + }); + + it("should readonly all items", () => { + const { node } = createFormComponent({ + schema, + formData, + readonly: true, + }); + + expect(node.querySelectorAll("input:read-only")).to.have.length.of(2); + }); + }); + describe("Attributes", () => { const formProps = { schema: {}, diff --git a/packages/playground/src/app.js b/packages/playground/src/app.js index 39895419ef..16cb7eccb8 100644 --- a/packages/playground/src/app.js +++ b/packages/playground/src/app.js @@ -100,6 +100,7 @@ const liveSettingsSchema = { properties: { validate: { type: "boolean", title: "Live validation" }, disable: { type: "boolean", title: "Disable whole form" }, + readonly: { type: "boolean", title: "Readonly whole form" }, omitExtraData: { type: "boolean", title: "Omit extra data" }, liveOmit: { type: "boolean", title: "Live omit" }, }, @@ -355,6 +356,7 @@ class Playground extends Component { liveSettings: { validate: false, disable: false, + readonly: false, omitExtraData: false, liveOmit: false, }, @@ -599,6 +601,7 @@ class Playground extends Component { {...templateProps} liveValidate={liveSettings.validate} disabled={liveSettings.disable} + readonly={liveSettings.readonly} omitExtraData={liveSettings.omitExtraData} liveOmit={liveSettings.liveOmit} schema={schema} From 3c72aafc34718c07d695c6d95f44e4c1a79f38f2 Mon Sep 17 00:00:00 2001 From: Heath Chiavettone Date: Fri, 17 Sep 2021 17:42:20 -0700 Subject: [PATCH 2/5] Fix test --- packages/core/test/Form_test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core/test/Form_test.js b/packages/core/test/Form_test.js index ef689a350c..f94108cde0 100644 --- a/packages/core/test/Form_test.js +++ b/packages/core/test/Form_test.js @@ -2236,10 +2236,10 @@ describeRepeated("Form common", createFormComponent => { }; const formData = { foo: "foo", bar: "bar" }; - it("should enable all items", () => { + it("should not have any readonly items", () => { const { node } = createFormComponent({ schema, formData }); - expect(node.querySelectorAll("input:disabled")).to.have.length.of(0); + expect(node.querySelectorAll("input:read-only")).to.have.length.of(0); }); it("should readonly all items", () => { From eab0da687b23e191309be469d8ae9c24539329e5 Mon Sep 17 00:00:00 2001 From: Heath Chiavettone Date: Thu, 23 Sep 2021 14:47:19 -0700 Subject: [PATCH 3/5] - Updated the Typescript type for the `FormProps` to add `readonly` --- packages/core/index.d.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/core/index.d.ts b/packages/core/index.d.ts index 1267e88d3f..c30c1305ad 100644 --- a/packages/core/index.d.ts +++ b/packages/core/index.d.ts @@ -19,6 +19,7 @@ declare module '@rjsf/core' { className?: string; customFormats?: { [k: string]: string | RegExp | ((data: string) => boolean) }; disabled?: boolean; + readonly?: boolean; enctype?: string; extraErrors?: any; ErrorList?: React.StatelessComponent; From 0ed2f2f4421c38135a711a3f69d80f21e7a1dfbb Mon Sep 17 00:00:00 2001 From: Heath Chiavettone Date: Fri, 24 Sep 2021 11:13:27 -0700 Subject: [PATCH 4/5] - Updated the `CHANGELOG.md` in preparation for release --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index f300c7c707..57aa327cb1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -21,6 +21,7 @@ should change the heading of the (upcoming) version to include a major version b ## @rjsf/core - Fix for clearing errors after updating and submitting form (https://github.com/rjsf-team/react-jsonschema-form/pull/2536) - bootstrap-4 TextWidget wrappers now pull from registry, add rootSchema to Registry, fix FieldProps.onFocus type to match WidgetProps (https://github.com/rjsf-team/react-jsonschema-form/pull/2519) +- Added global `readonly` flag to the `Form` (https://github.com/rjsf-team/react-jsonschema-form/pull/2554) ## @rjsf/bootstrap-4 - bootstrap-4 TextWidget wrappers now pull from registry, add rootSchema to Registry, fix FieldProps.onFocus type to match WidgetProps (https://github.com/rjsf-team/react-jsonschema-form/pull/2519) @@ -30,6 +31,7 @@ should change the heading of the (upcoming) version to include a major version b ## Dev / docs / playground - Several dependency updates +- Added global `readonly` flag to the `Form` (https://github.com/rjsf-team/react-jsonschema-form/pull/2554) # v3.1.0 From e84d5057b78d6ba10787b41d3a1de335fdab5ebd Mon Sep 17 00:00:00 2001 From: Heath Chiavettone Date: Fri, 24 Sep 2021 16:48:17 -0700 Subject: [PATCH 5/5] - Updated test to verify the nesting of readonly works as expected --- packages/core/test/Form_test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core/test/Form_test.js b/packages/core/test/Form_test.js index f94108cde0..20f0e07faa 100644 --- a/packages/core/test/Form_test.js +++ b/packages/core/test/Form_test.js @@ -2231,10 +2231,10 @@ describeRepeated("Form common", createFormComponent => { type: "object", properties: { foo: { type: "string" }, - bar: { type: "string" }, + bar: { type: "object", properties: { baz: { type: "string" } } }, }, }; - const formData = { foo: "foo", bar: "bar" }; + const formData = { foo: "foo", bar: { baz: "baz" } }; it("should not have any readonly items", () => { const { node } = createFormComponent({ schema, formData });