From 42dc0f94e7826845b8b5b21f6209b4ef60cfafb2 Mon Sep 17 00:00:00 2001 From: sprokusk Date: Thu, 16 Jan 2020 13:59:00 -0800 Subject: [PATCH 1/3] Add requiredOnLoad to FormField --- .../source/react/library/form/FormField.js | 4 ++++ .../source/react/library/form/internal/FormFieldElement.js | 1 + .../source/react/library/form/internal/methods.js | 7 ++++--- 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/react-components/source/react/library/form/FormField.js b/packages/react-components/source/react/library/form/FormField.js index 2737ba0ec..9d7e082be 100644 --- a/packages/react-components/source/react/library/form/FormField.js +++ b/packages/react-components/source/react/library/form/FormField.js @@ -29,6 +29,8 @@ const propTypes = { required: PropTypes.bool, /* The error message to display if the field is required but not present at validation */ requiredFieldMessage: PropTypes.string, + /* Should the required message render on load */ + requiredOnLoad: PropTypes.bool, /* An optional validation function. Will be passed in order: the current field value, and the entire form value */ validator: PropTypes.func, /* An optional nested path at which to access field data. Nested path can be delimted with `.` or with brackets `[]`. For example: my.nested.array[0] */ @@ -53,6 +55,7 @@ const defaultProps = { description: '', required: false, requiredFieldMessage: 'Required field', + requiredOnLoad: false, validator() {}, path: '', inline: false, @@ -68,6 +71,7 @@ const defaultProps = { export const formInputInterface = omit( [ 'requiredFieldMessage', + 'requiredOnLoad', 'validator', 'className', 'description', diff --git a/packages/react-components/source/react/library/form/internal/FormFieldElement.js b/packages/react-components/source/react/library/form/internal/FormFieldElement.js index 2cda5af90..3a9e3ffad 100644 --- a/packages/react-components/source/react/library/form/internal/FormFieldElement.js +++ b/packages/react-components/source/react/library/form/internal/FormFieldElement.js @@ -58,6 +58,7 @@ const FormFieldElement = props => { 'className', 'style', 'requiredFieldMessage', + 'requiredOnLoad', 'validator', ], props, diff --git a/packages/react-components/source/react/library/form/internal/methods.js b/packages/react-components/source/react/library/form/internal/methods.js index bc327e511..52a89a93e 100644 --- a/packages/react-components/source/react/library/form/internal/methods.js +++ b/packages/react-components/source/react/library/form/internal/methods.js @@ -189,6 +189,7 @@ export const updateFieldProps = ( error, required, requiredFieldMessage, + requiredOnLoad, validator, } = userProvidedFieldProps; @@ -197,8 +198,8 @@ export const updateFieldProps = ( let blockingError; - if (validate) { - if (required && isEmpty(value)) { + if (validate || requiredOnLoad) { + if ((required || requiredOnLoad) && isEmpty(value)) { blockingError = requiredFieldMessage; } else if (validator) { blockingError = validator(value, values); @@ -214,7 +215,7 @@ export const updateFieldProps = ( * Form.Field */ const fieldProps = omit( - ['requiredFieldMessage', 'validator', 'error', 'path'], + ['requiredFieldMessage', 'requiredOnLoad', 'validator', 'error', 'path'], userProvidedFieldProps, ); From 574c53c194df401ac63e00c3ae0d695366624c24 Mon Sep 17 00:00:00 2001 From: sprokusk Date: Thu, 23 Jan 2020 13:31:24 -0800 Subject: [PATCH 2/3] Change naming of requiredOnLoad to validateOnLoad --- .../source/react/library/form/FormField.js | 8 ++++---- .../react/library/form/internal/FormFieldElement.js | 2 +- .../source/react/library/form/internal/methods.js | 8 ++++---- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/react-components/source/react/library/form/FormField.js b/packages/react-components/source/react/library/form/FormField.js index 9d7e082be..1dd96a5db 100644 --- a/packages/react-components/source/react/library/form/FormField.js +++ b/packages/react-components/source/react/library/form/FormField.js @@ -29,8 +29,8 @@ const propTypes = { required: PropTypes.bool, /* The error message to display if the field is required but not present at validation */ requiredFieldMessage: PropTypes.string, - /* Should the required message render on load */ - requiredOnLoad: PropTypes.bool, + /* Should an error message render on load (the rendered msg depends on the presence of required or validator) */ + validateOnLoad: PropTypes.bool, /* An optional validation function. Will be passed in order: the current field value, and the entire form value */ validator: PropTypes.func, /* An optional nested path at which to access field data. Nested path can be delimted with `.` or with brackets `[]`. For example: my.nested.array[0] */ @@ -55,7 +55,7 @@ const defaultProps = { description: '', required: false, requiredFieldMessage: 'Required field', - requiredOnLoad: false, + validateOnLoad: false, validator() {}, path: '', inline: false, @@ -71,7 +71,7 @@ const defaultProps = { export const formInputInterface = omit( [ 'requiredFieldMessage', - 'requiredOnLoad', + 'validateOnLoad', 'validator', 'className', 'description', diff --git a/packages/react-components/source/react/library/form/internal/FormFieldElement.js b/packages/react-components/source/react/library/form/internal/FormFieldElement.js index 3a9e3ffad..7b45c322d 100644 --- a/packages/react-components/source/react/library/form/internal/FormFieldElement.js +++ b/packages/react-components/source/react/library/form/internal/FormFieldElement.js @@ -58,7 +58,7 @@ const FormFieldElement = props => { 'className', 'style', 'requiredFieldMessage', - 'requiredOnLoad', + 'validateOnLoad', 'validator', ], props, diff --git a/packages/react-components/source/react/library/form/internal/methods.js b/packages/react-components/source/react/library/form/internal/methods.js index 52a89a93e..251b2be53 100644 --- a/packages/react-components/source/react/library/form/internal/methods.js +++ b/packages/react-components/source/react/library/form/internal/methods.js @@ -189,7 +189,7 @@ export const updateFieldProps = ( error, required, requiredFieldMessage, - requiredOnLoad, + validateOnLoad, validator, } = userProvidedFieldProps; @@ -198,8 +198,8 @@ export const updateFieldProps = ( let blockingError; - if (validate || requiredOnLoad) { - if ((required || requiredOnLoad) && isEmpty(value)) { + if (validate || validateOnLoad) { + if (required && isEmpty(value)) { blockingError = requiredFieldMessage; } else if (validator) { blockingError = validator(value, values); @@ -215,7 +215,7 @@ export const updateFieldProps = ( * Form.Field */ const fieldProps = omit( - ['requiredFieldMessage', 'requiredOnLoad', 'validator', 'error', 'path'], + ['requiredFieldMessage', 'validateOnLoad', 'validator', 'error', 'path'], userProvidedFieldProps, ); From 1bbf2313136794a34f8c7f0eacb48a7356551cff Mon Sep 17 00:00:00 2001 From: sprokusk Date: Fri, 24 Jan 2020 09:43:01 -0800 Subject: [PATCH 3/3] Use the correct JSDoc annotation syntax for FormField prop descriptions --- .../source/react/library/form/FormField.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/react-components/source/react/library/form/FormField.js b/packages/react-components/source/react/library/form/FormField.js index 1dd96a5db..964142ec2 100644 --- a/packages/react-components/source/react/library/form/FormField.js +++ b/packages/react-components/source/react/library/form/FormField.js @@ -18,24 +18,24 @@ const propTypes = { label: PropTypes.string.isRequired, /** The styling of the identifier for this field */ labelType: PropTypes.oneOf(['primary', 'secondary']), - /* Depending on the field, value can be any type */ + /** Depending on the field, value can be any type */ // eslint-disable-next-line react/forbid-prop-types value: PropTypes.any, /** Form error, causing element to render red when present */ error: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), /** Expanded explainer for the field */ description: PropTypes.string, - /* Is the field required */ + /** Is the field required */ required: PropTypes.bool, - /* The error message to display if the field is required but not present at validation */ + /** The error message to display if the field is required but not present at validation */ requiredFieldMessage: PropTypes.string, - /* Should an error message render on load (the rendered msg depends on the presence of required or validator) */ + /** Should an error message render on load (the rendered msg depends on the presence of required or validator) */ validateOnLoad: PropTypes.bool, - /* An optional validation function. Will be passed in order: the current field value, and the entire form value */ + /** An optional validation function. Will be passed in order: the current field value, and the entire form value */ validator: PropTypes.func, - /* An optional nested path at which to access field data. Nested path can be delimted with `.` or with brackets `[]`. For example: my.nested.array[0] */ + /** An optional nested path at which to access field data. Nested path can be delimted with `.` or with brackets `[]`. For example: my.nested.array[0] */ path: PropTypes.string, - /* Alternate inline display format */ + /** Alternate inline display format */ inline: PropTypes.bool, /** Width of the inline label */ inlineLabelWidth: PropTypes.number,