From 9c74015bb095a9741233fefad1c6b59791bdc35b Mon Sep 17 00:00:00 2001 From: Gildas Garcia Date: Mon, 14 Oct 2019 09:50:21 +0200 Subject: [PATCH 1/2] Fix FinalForm Props Leak to Root Component Fixes #3810 --- .../src/input/AutocompleteArrayInput.tsx | 4 ++++ .../ra-ui-materialui/src/input/AutocompleteInput.tsx | 4 ++++ packages/ra-ui-materialui/src/input/BooleanInput.tsx | 4 ++++ .../ra-ui-materialui/src/input/CheckboxGroupInput.tsx | 4 ++++ packages/ra-ui-materialui/src/input/DateInput.tsx | 5 ++++- packages/ra-ui-materialui/src/input/FileInput.tsx | 6 ++++-- .../src/input/NullableBooleanInput.tsx | 6 ++++-- packages/ra-ui-materialui/src/input/NumberInput.tsx | 11 +++++++---- .../src/input/RadioButtonGroupInput.tsx | 4 ++++ .../ra-ui-materialui/src/input/ReferenceInput.tsx | 4 ++++ .../ra-ui-materialui/src/input/SelectArrayInput.tsx | 6 +++++- packages/ra-ui-materialui/src/input/SelectInput.tsx | 4 ++++ packages/ra-ui-materialui/src/input/TextInput.tsx | 10 +++++++--- 13 files changed, 59 insertions(+), 13 deletions(-) diff --git a/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.tsx b/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.tsx index 9e0ea023cc5..d781a0f86d0 100644 --- a/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.tsx +++ b/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.tsx @@ -98,6 +98,7 @@ const AutocompleteArrayInput: FunctionComponent< choices = [], emptyText, emptyValue, + format, helperText, id: idOverride, input: inputOverride, @@ -117,6 +118,7 @@ const AutocompleteArrayInput: FunctionComponent< } = {}, optionText = 'name', optionValue = 'id', + parse, resource, setFilter, shouldRenderSuggestions: shouldRenderSuggestionsOverride, @@ -147,6 +149,7 @@ const AutocompleteArrayInput: FunctionComponent< isRequired, meta: { touched, error }, } = useInput({ + format, id: idOverride, input: inputOverride, isRequired: isRequiredOverride, @@ -154,6 +157,7 @@ const AutocompleteArrayInput: FunctionComponent< onBlur, onChange, onFocus, + parse, resource, source, validate, diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx index eb25917235d..4a0efea537e 100644 --- a/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx +++ b/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx @@ -98,6 +98,7 @@ const AutocompleteInput: FunctionComponent< choices = [], emptyText, emptyValue, + format, helperText, id: idOverride, input: inputOverride, @@ -117,6 +118,7 @@ const AutocompleteInput: FunctionComponent< } = {}, optionText = 'name', optionValue = 'id', + parse, resource, setFilter, shouldRenderSuggestions: shouldRenderSuggestionsOverride, @@ -147,6 +149,7 @@ const AutocompleteInput: FunctionComponent< isRequired, meta: { touched, error }, } = useInput({ + format, id: idOverride, input: inputOverride, isRequired: isRequiredOverride, @@ -154,6 +157,7 @@ const AutocompleteInput: FunctionComponent< onBlur, onChange, onFocus, + parse, resource, source, validate, diff --git a/packages/ra-ui-materialui/src/input/BooleanInput.tsx b/packages/ra-ui-materialui/src/input/BooleanInput.tsx index 290eae0517a..edab1274958 100644 --- a/packages/ra-ui-materialui/src/input/BooleanInput.tsx +++ b/packages/ra-ui-materialui/src/input/BooleanInput.tsx @@ -14,6 +14,7 @@ const BooleanInput: FunctionComponent< InputProps & Omit > = ({ + format, label, fullWidth, helperText, @@ -21,6 +22,7 @@ const BooleanInput: FunctionComponent< onChange, onFocus, options, + parse, resource, source, validate, @@ -32,9 +34,11 @@ const BooleanInput: FunctionComponent< isRequired, meta: { error, touched }, } = useInput({ + format, onBlur, onChange, onFocus, + parse, resource, source, type: 'checkbox', diff --git a/packages/ra-ui-materialui/src/input/CheckboxGroupInput.tsx b/packages/ra-ui-materialui/src/input/CheckboxGroupInput.tsx index 19569bbad53..f57b2399814 100644 --- a/packages/ra-ui-materialui/src/input/CheckboxGroupInput.tsx +++ b/packages/ra-ui-materialui/src/input/CheckboxGroupInput.tsx @@ -94,6 +94,7 @@ const CheckboxGroupInput: FunctionComponent< ChoicesProps & InputProps & FormControlProps > = ({ choices = [], + format, helperText, label, onBlur, @@ -102,6 +103,7 @@ const CheckboxGroupInput: FunctionComponent< optionText, optionValue, options, + parse, resource, row, source, @@ -118,9 +120,11 @@ const CheckboxGroupInput: FunctionComponent< isRequired, meta: { error, touched }, } = useInput({ + format, onBlur, onChange, onFocus, + parse, resource, source, validate, diff --git a/packages/ra-ui-materialui/src/input/DateInput.tsx b/packages/ra-ui-materialui/src/input/DateInput.tsx index 7ccb51d4898..be1ba1d2091 100644 --- a/packages/ra-ui-materialui/src/input/DateInput.tsx +++ b/packages/ra-ui-materialui/src/input/DateInput.tsx @@ -23,7 +23,7 @@ const convertDateToString = (value: Date) => { const dateRegex = /^\d{4}-\d{2}-\d{2}$/; -const format = (value: string | Date) => { +const getStringFromDate = (value: string | Date) => { // null, undefined and empty string values should not go through dateFormatter // otherwise, it returns undefined and will make the input an uncontrolled one. if (value == null || value === '') { @@ -45,6 +45,7 @@ const format = (value: string | Date) => { export const DateInput: FunctionComponent< InputProps & Omit > = ({ + format = getStringFromDate, label, options, source, @@ -54,6 +55,7 @@ export const DateInput: FunctionComponent< onBlur, onChange, onFocus, + parse, validate, variant = 'filled', ...rest @@ -68,6 +70,7 @@ export const DateInput: FunctionComponent< onBlur, onChange, onFocus, + parse, resource, source, validate, diff --git a/packages/ra-ui-materialui/src/input/FileInput.tsx b/packages/ra-ui-materialui/src/input/FileInput.tsx index b1f0971ab31..7a7d6fe6e62 100644 --- a/packages/ra-ui-materialui/src/input/FileInput.tsx +++ b/packages/ra-ui-materialui/src/input/FileInput.tsx @@ -51,6 +51,7 @@ const FileInput: FunctionComponent< children, className, classes: classesOverride, + format, helperText, label, labelMultiple = 'ra.input.file.upload_several', @@ -59,6 +60,7 @@ const FileInput: FunctionComponent< minSize, multiple = false, options: { inputProps: inputPropsOptions, ...options } = {}, + parse, placeholder, resource, source, @@ -109,8 +111,8 @@ const FileInput: FunctionComponent< meta, isRequired, } = useInput({ - format: transformFiles, - parse: transformFiles, + format: format || transformFiles, + parse: parse || transformFiles, source, type: 'file', validate, diff --git a/packages/ra-ui-materialui/src/input/NullableBooleanInput.tsx b/packages/ra-ui-materialui/src/input/NullableBooleanInput.tsx index 2288aba08a0..a72724e5eb1 100644 --- a/packages/ra-ui-materialui/src/input/NullableBooleanInput.tsx +++ b/packages/ra-ui-materialui/src/input/NullableBooleanInput.tsx @@ -29,6 +29,7 @@ const NullableBooleanInput: FunctionComponent< InputProps & Omit > = ({ className, + format = getStringFromBoolean, helperText, label, margin = 'dense', @@ -36,6 +37,7 @@ const NullableBooleanInput: FunctionComponent< onChange, onFocus, options, + parse = getBooleanFromString, resource, source, validate, @@ -51,11 +53,11 @@ const NullableBooleanInput: FunctionComponent< isRequired, meta: { error, touched }, } = useInput({ - format: getStringFromBoolean, + format, onBlur, onChange, onFocus, - parse: getBooleanFromString, + parse, resource, source, type: 'checkbox', diff --git a/packages/ra-ui-materialui/src/input/NumberInput.tsx b/packages/ra-ui-materialui/src/input/NumberInput.tsx index 18203213527..840f54630ae 100644 --- a/packages/ra-ui-materialui/src/input/NumberInput.tsx +++ b/packages/ra-ui-materialui/src/input/NumberInput.tsx @@ -33,16 +33,18 @@ const NumberInput: FunctionComponent< InputProps & Omit > = ({ + format, helperText, label, margin = 'dense', - options, - source, - step, - resource, onBlur, onFocus, onChange, + options, + parse, + resource, + source, + step, validate, variant = 'filled', inputProps: overrideInputProps, @@ -54,6 +56,7 @@ const NumberInput: FunctionComponent< isRequired, meta: { error, touched }, } = useInput({ + format, onBlur, onChange, onFocus, diff --git a/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx b/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx index 73401ffdbd6..ebb838978d8 100644 --- a/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx +++ b/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx @@ -84,6 +84,7 @@ export const RadioButtonGroupInput: FunctionComponent< > = ({ choices = [], classes: classesOverride, + format, helperText, label, onBlur, @@ -92,6 +93,7 @@ export const RadioButtonGroupInput: FunctionComponent< options, optionText, optionValue, + parse, resource, source, translateChoice, @@ -106,9 +108,11 @@ export const RadioButtonGroupInput: FunctionComponent< isRequired, meta: { error, touched }, } = useInput({ + format, onBlur, onChange, onFocus, + parse, resource, source, validate, diff --git a/packages/ra-ui-materialui/src/input/ReferenceInput.tsx b/packages/ra-ui-materialui/src/input/ReferenceInput.tsx index 959a20f5c0d..e1789dad115 100644 --- a/packages/ra-ui-materialui/src/input/ReferenceInput.tsx +++ b/packages/ra-ui-materialui/src/input/ReferenceInput.tsx @@ -109,16 +109,20 @@ interface Props { * */ export const ReferenceInput: FunctionComponent = ({ + format, onBlur, onChange, onFocus, + parse, validate, ...props }) => { const inputProps = useInput({ + format, onBlur, onChange, onFocus, + parse, validate, ...props, }); diff --git a/packages/ra-ui-materialui/src/input/SelectArrayInput.tsx b/packages/ra-ui-materialui/src/input/SelectArrayInput.tsx index fd51cd9bd56..30e9cace75f 100644 --- a/packages/ra-ui-materialui/src/input/SelectArrayInput.tsx +++ b/packages/ra-ui-materialui/src/input/SelectArrayInput.tsx @@ -136,15 +136,17 @@ const SelectArrayInput: FunctionComponent< choices = [], classes: classesOverride, className, + format, + helperText, label, margin = 'dense', - helperText, onBlur, onChange, onFocus, options, optionText, optionValue, + parse, resource, source, translateChoice, @@ -165,9 +167,11 @@ const SelectArrayInput: FunctionComponent< isRequired, meta: { error, touched }, } = useInput({ + format, onBlur, onChange, onFocus, + parse, resource, source, validate, diff --git a/packages/ra-ui-materialui/src/input/SelectInput.tsx b/packages/ra-ui-materialui/src/input/SelectInput.tsx index 756f450ea6c..c52d4438a90 100644 --- a/packages/ra-ui-materialui/src/input/SelectInput.tsx +++ b/packages/ra-ui-materialui/src/input/SelectInput.tsx @@ -148,6 +148,7 @@ const SelectInput: FunctionComponent< disableValue, emptyText, emptyValue, + format, helperText, label, onBlur, @@ -156,6 +157,7 @@ const SelectInput: FunctionComponent< options, optionText, optionValue, + parse, resource, source, translateChoice, @@ -176,9 +178,11 @@ const SelectInput: FunctionComponent< isRequired, meta: { error, touched }, } = useInput({ + format, onBlur, onChange, onFocus, + parse, resource, source, validate, diff --git a/packages/ra-ui-materialui/src/input/TextInput.tsx b/packages/ra-ui-materialui/src/input/TextInput.tsx index 49813ba14f5..f63b17db29e 100644 --- a/packages/ra-ui-materialui/src/input/TextInput.tsx +++ b/packages/ra-ui-materialui/src/input/TextInput.tsx @@ -25,13 +25,15 @@ export const TextInput: FunctionComponent< InputProps & Omit > = ({ label, - options, - resource, - source, + format, helperText, onBlur, onFocus, onChange, + options, + parse, + resource, + source, validate, ...rest }) => { @@ -41,9 +43,11 @@ export const TextInput: FunctionComponent< isRequired, meta: { error, touched }, } = useInput({ + format, onBlur, onChange, onFocus, + parse, resource, source, type: 'text', From 1106271283e4d7313f93b7529a14a6685b25f32e Mon Sep 17 00:00:00 2001 From: Gildas Garcia Date: Mon, 14 Oct 2019 10:05:25 +0200 Subject: [PATCH 2/2] Fix NumberInput --- packages/ra-ui-materialui/src/input/NumberInput.spec.tsx | 4 +++- packages/ra-ui-materialui/src/input/NumberInput.tsx | 6 +++--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/ra-ui-materialui/src/input/NumberInput.spec.tsx b/packages/ra-ui-materialui/src/input/NumberInput.spec.tsx index 16e59cb9b91..69c81cd140d 100644 --- a/packages/ra-ui-materialui/src/input/NumberInput.spec.tsx +++ b/packages/ra-ui-materialui/src/input/NumberInput.spec.tsx @@ -36,7 +36,9 @@ describe('', () => { render={() => } /> ); - const input = getByLabelText('resources.posts.fields.views'); + const input = getByLabelText( + 'resources.posts.fields.views' + ) as HTMLInputElement; expect(input.step).toEqual('0.1'); }); }); diff --git a/packages/ra-ui-materialui/src/input/NumberInput.tsx b/packages/ra-ui-materialui/src/input/NumberInput.tsx index 840f54630ae..ffc3f5cf260 100644 --- a/packages/ra-ui-materialui/src/input/NumberInput.tsx +++ b/packages/ra-ui-materialui/src/input/NumberInput.tsx @@ -6,14 +6,14 @@ import { useInput, FieldTitle, InputProps } from 'ra-core'; import InputHelperText from './InputHelperText'; import sanitizeRestProps from './sanitizeRestProps'; -const parse = value => { +const convertStringToNumber = value => { const float = parseFloat(value); return isNaN(float) ? null : float; }; interface Props { - step: string | number; + step?: string | number; } /** @@ -41,7 +41,7 @@ const NumberInput: FunctionComponent< onFocus, onChange, options, - parse, + parse = convertStringToNumber, resource, source, step,