From 9d4bd48b3a50b05aa22bf89123c8eb2079c56976 Mon Sep 17 00:00:00 2001 From: Naeem Baghi Date: Sun, 23 Dec 2018 15:55:53 +0330 Subject: [PATCH 1/2] Fix validation behavior on load --- example/ExamplePage.js | 24 +++++++++++++++++------- src/ComposedComponent.js | 34 +++++++++++++++++++++++++--------- src/SchemaForm.js | 9 ++++++--- 3 files changed, 48 insertions(+), 19 deletions(-) diff --git a/example/ExamplePage.js b/example/ExamplePage.js index 3ea391ea..c99a0e98 100644 --- a/example/ExamplePage.js +++ b/example/ExamplePage.js @@ -17,7 +17,11 @@ const examples = { localizer: Localizer }; -class ExamplePage extends React.Component { +type State = { + showError: boolean +}; + +class ExamplePage extends React.Component { tempModel = { comments: [ { @@ -63,7 +67,8 @@ class ExamplePage extends React.Component { schemaJson: "", formJson: "", selected: "", - localization: undefined + localization: undefined, + showError: false }; setStateDefault = () => this.setState({ model: this.tempModel }); @@ -76,7 +81,8 @@ class ExamplePage extends React.Component { selected: "", schema: {}, model: {}, - form: [] + form: [], + showError: false }); } @@ -89,7 +95,8 @@ class ExamplePage extends React.Component { schema: elem.schema, model: elem.model || {}, form: elem.form, - localization: elem.localization + localization: elem.localization, + showError: false }); } else { fetch(value) @@ -101,7 +108,8 @@ class ExamplePage extends React.Component { selected: value, schema, model: model || {}, - form + form, + showError: false }); }); } @@ -117,7 +125,7 @@ class ExamplePage extends React.Component { onValidate = () => { const { schema, model } = this.state; const result = utils.validateBySchema(schema, model); - this.setState({ validationResult: result }); + this.setState({ validationResult: result, showError: true }); }; onFormChange = val => { @@ -148,7 +156,8 @@ class ExamplePage extends React.Component { tests, formJson, schemaJson, - localization + localization, + showError } = this.state; const mapper = { // 'rc-select': RcSelect @@ -166,6 +175,7 @@ class ExamplePage extends React.Component { mapper={mapper} model={model} localization={localization} + showError={showError} /> ); diff --git a/src/ComposedComponent.js b/src/ComposedComponent.js index fb5f923f..b9377771 100755 --- a/src/ComposedComponent.js +++ b/src/ComposedComponent.js @@ -24,23 +24,39 @@ export default (ComposedComponent, defaultProps = {}) => class Composed extends React.Component { constructor(props) { super(props); - const { errorText, form } = this.props; + const { errorText, form, showError } = this.props; this.onChangeValidate = this.onChangeValidate.bind(this); const value = defaultValue(this.props); const validationResult = utils.validate(form, value); - this.state = { - value, - valid: !!(validationResult.valid || !value), - error: - (!validationResult.valid && - (value ? validationResult.error.message : null)) || - errorText - }; + if (!showError) { + this.state = { + value, + valid: true, + error: "" + }; + } else { + this.state = { + value, + valid: !!(validationResult.valid || !value), + error: + (!validationResult.valid && + (value ? validationResult.error.message : null)) || + errorText + }; + } } static getDerivedStateFromProps(nextProps) { const value = defaultValue(nextProps); + const { showError } = nextProps; const validationResult = utils.validate(nextProps.form, value); + if (!showError) { + return { + value, + valid: true, + error: "" + }; + } return { value, valid: validationResult.valid, diff --git a/src/SchemaForm.js b/src/SchemaForm.js index 21048827..7a663b42 100644 --- a/src/SchemaForm.js +++ b/src/SchemaForm.js @@ -31,7 +31,8 @@ type Props = { model: any, className: any, mapper: any, - localization?: Localization + localization?: Localization, + showError?: boolean }; const formatDate = (date: string | Date) => { @@ -45,7 +46,8 @@ const formatDate = (date: string | Date) => { class SchemaForm extends Component { static defaultProps = { - localization: undefined + localization: undefined, + showError: false }; mapper = { @@ -106,7 +108,7 @@ class SchemaForm extends Component { }; builder(form, model, index, mapper, onChange, builder) { - const { errors } = this.props; + const { errors, showError } = this.props; const Field = this.mapper[form.type]; if (!Field) { return null; @@ -135,6 +137,7 @@ class SchemaForm extends Component { builder={builder} errorText={error} localization={this.getLocalization()} + showError={showError} /> ); } From c867e78eaa9106d82780aca0be1a4fc2187e6d16 Mon Sep 17 00:00:00 2001 From: Naeem Baghi Date: Sun, 23 Dec 2018 16:09:58 +0330 Subject: [PATCH 2/2] Fix validation behavior on load --- README.md | 28 +++++++++++++++++++++++++ example/ExamplePage.js | 16 +++++++------- src/ComposedComponent.js | 8 +++---- src/SchemaForm.js | 8 +++---- src/__tests__/ComposedComponent-test.js | 7 ++++++- 5 files changed, 50 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index ed31dfe9..9d44d22c 100644 --- a/README.md +++ b/README.md @@ -102,6 +102,34 @@ import RcSelect from 'react-schema-form-rc-select/lib/RcSelect'; ``` +# Error Handler + +The error handler is disabled by default but you can enable it by using showErrors prop on `SchemaForm`. + +```js +... +onValidate = () => { + if (form is valid) { + ... + } else { + this.setState({ showErrors: true }); + } +} + +... + <> + + + +``` + # Contributing diff --git a/example/ExamplePage.js b/example/ExamplePage.js index c99a0e98..6f1a4f0c 100644 --- a/example/ExamplePage.js +++ b/example/ExamplePage.js @@ -18,7 +18,7 @@ const examples = { }; type State = { - showError: boolean + showErrors: boolean }; class ExamplePage extends React.Component { @@ -68,7 +68,7 @@ class ExamplePage extends React.Component { formJson: "", selected: "", localization: undefined, - showError: false + showErrors: false }; setStateDefault = () => this.setState({ model: this.tempModel }); @@ -82,7 +82,7 @@ class ExamplePage extends React.Component { schema: {}, model: {}, form: [], - showError: false + showErrors: false }); } @@ -96,7 +96,7 @@ class ExamplePage extends React.Component { model: elem.model || {}, form: elem.form, localization: elem.localization, - showError: false + showErrors: false }); } else { fetch(value) @@ -109,7 +109,7 @@ class ExamplePage extends React.Component { schema, model: model || {}, form, - showError: false + showErrors: false }); }); } @@ -125,7 +125,7 @@ class ExamplePage extends React.Component { onValidate = () => { const { schema, model } = this.state; const result = utils.validateBySchema(schema, model); - this.setState({ validationResult: result, showError: true }); + this.setState({ validationResult: result, showErrors: true }); }; onFormChange = val => { @@ -157,7 +157,7 @@ class ExamplePage extends React.Component { formJson, schemaJson, localization, - showError + showErrors } = this.state; const mapper = { // 'rc-select': RcSelect @@ -175,7 +175,7 @@ class ExamplePage extends React.Component { mapper={mapper} model={model} localization={localization} - showError={showError} + showErrors={showErrors} /> ); diff --git a/src/ComposedComponent.js b/src/ComposedComponent.js index b9377771..0ed0fa02 100755 --- a/src/ComposedComponent.js +++ b/src/ComposedComponent.js @@ -24,11 +24,11 @@ export default (ComposedComponent, defaultProps = {}) => class Composed extends React.Component { constructor(props) { super(props); - const { errorText, form, showError } = this.props; + const { errorText, form, showErrors } = this.props; this.onChangeValidate = this.onChangeValidate.bind(this); const value = defaultValue(this.props); const validationResult = utils.validate(form, value); - if (!showError) { + if (!showErrors) { this.state = { value, valid: true, @@ -48,9 +48,9 @@ export default (ComposedComponent, defaultProps = {}) => static getDerivedStateFromProps(nextProps) { const value = defaultValue(nextProps); - const { showError } = nextProps; + const { showErrors } = nextProps; const validationResult = utils.validate(nextProps.form, value); - if (!showError) { + if (!showErrors) { return { value, valid: true, diff --git a/src/SchemaForm.js b/src/SchemaForm.js index 7a663b42..23bc74a2 100644 --- a/src/SchemaForm.js +++ b/src/SchemaForm.js @@ -32,7 +32,7 @@ type Props = { className: any, mapper: any, localization?: Localization, - showError?: boolean + showErrors?: boolean }; const formatDate = (date: string | Date) => { @@ -47,7 +47,7 @@ const formatDate = (date: string | Date) => { class SchemaForm extends Component { static defaultProps = { localization: undefined, - showError: false + showErrors: false }; mapper = { @@ -108,7 +108,7 @@ class SchemaForm extends Component { }; builder(form, model, index, mapper, onChange, builder) { - const { errors, showError } = this.props; + const { errors, showErrors } = this.props; const Field = this.mapper[form.type]; if (!Field) { return null; @@ -137,7 +137,7 @@ class SchemaForm extends Component { builder={builder} errorText={error} localization={this.getLocalization()} - showError={showError} + showErrors={showErrors} /> ); } diff --git a/src/__tests__/ComposedComponent-test.js b/src/__tests__/ComposedComponent-test.js index 59bcba72..9f7ac39f 100644 --- a/src/__tests__/ComposedComponent-test.js +++ b/src/__tests__/ComposedComponent-test.js @@ -56,7 +56,12 @@ describe("ComposedComponent", () => { const Composed = ComposedComponent(Text); renderer.render( - + ); const result = renderer.getRenderOutput();