From 494ad561472375bc4046612b40b230a051d8f122 Mon Sep 17 00:00:00 2001 From: Vesa Luusua Date: Tue, 27 Aug 2019 13:52:33 +0300 Subject: [PATCH] final form update: type is nowadays inside input props --- .../FieldDateInput/FieldDateInput.js | 2 +- .../FieldDateRangeController.js | 3 ++- .../FieldDateRangeInput.js | 2 +- .../FieldTextInput/FieldTextInput.js | 20 +++++++++++++------ .../EditListingPhotosForm.js | 8 ++++---- .../ProfileSettingsForm.js | 12 ++--------- 6 files changed, 24 insertions(+), 23 deletions(-) diff --git a/src/components/FieldDateInput/FieldDateInput.js b/src/components/FieldDateInput/FieldDateInput.js index 84f7988d..ba8f472a 100644 --- a/src/components/FieldDateInput/FieldDateInput.js +++ b/src/components/FieldDateInput/FieldDateInput.js @@ -47,7 +47,7 @@ class FieldDateInputComponent extends Component { [css.pickerError]: hasError, }); - const { onBlur, onFocus, ...restOfInput } = input; + const { onBlur, onFocus, type, ...restOfInput } = input; const inputProps = { onBlur: input.onBlur, onFocus: input.onFocus, diff --git a/src/components/FieldDateRangeController/FieldDateRangeController.js b/src/components/FieldDateRangeController/FieldDateRangeController.js index e0652517..7c57e464 100644 --- a/src/components/FieldDateRangeController/FieldDateRangeController.js +++ b/src/components/FieldDateRangeController/FieldDateRangeController.js @@ -5,7 +5,8 @@ import DateRangeController from './DateRangeController'; const component = props => { const { input, controllerRef, ...rest } = props; - return ; + const { type, ...restOfInput } = input; + return ; }; const FieldDateRangeController = props => { diff --git a/src/components/FieldDateRangeInput/FieldDateRangeInput.js b/src/components/FieldDateRangeInput/FieldDateRangeInput.js index 93a705d8..4ed4b4b7 100644 --- a/src/components/FieldDateRangeInput/FieldDateRangeInput.js +++ b/src/components/FieldDateRangeInput/FieldDateRangeInput.js @@ -117,7 +117,7 @@ class FieldDateRangeInputComponent extends Component { ) : null; // eslint-disable-next-line no-unused-vars - const { onBlur, onFocus, ...restOfInput } = input; + const { onBlur, onFocus, type, ...restOfInput } = input; const inputProps = { unitType, onBlur: this.handleBlur, diff --git a/src/components/FieldTextInput/FieldTextInput.js b/src/components/FieldTextInput/FieldTextInput.js index 368f5615..1ab6f745 100644 --- a/src/components/FieldTextInput/FieldTextInput.js +++ b/src/components/FieldTextInput/FieldTextInput.js @@ -18,7 +18,6 @@ class FieldTextInputComponent extends Component { customErrorText, id, label, - type, input, meta, onUnmount, @@ -33,7 +32,7 @@ class FieldTextInputComponent extends Component { } const { valid, invalid, touched, error } = meta; - const isTextarea = type === 'textarea'; + const isTextarea = input.type === 'textarea'; const errorText = customErrorText || error; @@ -43,6 +42,8 @@ class FieldTextInputComponent extends Component { const fieldMeta = { touched: hasError, error: errorText }; + // Textarea doesn't need type. + const { type, ...inputWithoutType } = input; // Uncontrolled input uses defaultValue instead of value. const { value: defaultValue, ...inputWithoutValue } = input; // Use inputRef if it is passed as prop. @@ -57,7 +58,15 @@ class FieldTextInputComponent extends Component { }); const maxLength = CONTENT_MAX_LENGTH; const inputProps = isTextarea - ? { className: inputClasses, id, rows: 1, maxLength, ...refMaybe, ...input, ...rest } + ? { + className: inputClasses, + id, + rows: 1, + maxLength, + ...refMaybe, + ...inputWithoutType, + ...rest, + } : isUncontrolled ? { className: inputClasses, @@ -109,9 +118,6 @@ FieldTextInputComponent.propTypes = { id: string, label: string, - // Either 'textarea' or something that is passed to the input element - type: string.isRequired, - // Uncontrolled input uses defaultValue prop, but doesn't pass value from form to the field. // https://reactjs.org/docs/uncontrolled-components.html#default-values isUncontrolled: bool, @@ -121,6 +127,8 @@ FieldTextInputComponent.propTypes = { // Generated by final-form's Field component input: shape({ onChange: func.isRequired, + // Either 'textarea' or something that is passed to the input element + type: string.isRequired, }).isRequired, meta: object.isRequired, }; diff --git a/src/forms/EditListingPhotosForm/EditListingPhotosForm.js b/src/forms/EditListingPhotosForm/EditListingPhotosForm.js index 2cb7389e..b5f77c06 100644 --- a/src/forms/EditListingPhotosForm/EditListingPhotosForm.js +++ b/src/forms/EditListingPhotosForm/EditListingPhotosForm.js @@ -159,8 +159,8 @@ export class EditListingPhotosFormComponent extends Component { disabled={imageUploadRequested} > {fieldprops => { - const { accept, input, label, type, disabled } = fieldprops; - const { name } = input; + const { accept, input, label, disabled } = fieldprops; + const { name, type } = input; const onChange = e => { const file = e.target.files[0]; form.change(`addImage`, file); @@ -185,10 +185,10 @@ export class EditListingPhotosFormComponent extends Component { { - const { input, type, meta } = props; + const { input, meta } = props; return (
- +
); diff --git a/src/forms/ProfileSettingsForm/ProfileSettingsForm.js b/src/forms/ProfileSettingsForm/ProfileSettingsForm.js index 6224b96b..69d690dd 100644 --- a/src/forms/ProfileSettingsForm/ProfileSettingsForm.js +++ b/src/forms/ProfileSettingsForm/ProfileSettingsForm.js @@ -198,16 +198,8 @@ class ProfileSettingsFormComponent extends Component { disabled={uploadInProgress} > {fieldProps => { - const { - accept, - id, - input, - label, - type, - disabled, - uploadImageError, - } = fieldProps; - const { name } = input; + const { accept, id, input, label, disabled, uploadImageError } = fieldProps; + const { name, type } = input; const onChange = e => { const file = e.target.files[0]; form.change(`profileImage`, file);