Merge pull request #3815 from marmelab/fix-final-form-props-spread

Fix FinalForm Props Leak to Root Component
marmelab · Oct 14, 2019 · 46e97e6 · 46e97e6
2 parents dd78406 + 1106271
commit 46e97e6
Show file tree

Hide file tree

Showing 14 changed files with 64 additions and 16 deletions.
diff --git 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,13 +149,15 @@ const AutocompleteArrayInput: FunctionComponent<
         isRequired,
         meta: { touched, error },
     } = useInput({
+        format,
         id: idOverride,
         input: inputOverride,
         isRequired: isRequiredOverride,
         meta: metaOverride,
         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
@@ -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,13 +149,15 @@ const AutocompleteInput: FunctionComponent<
         isRequired,
         meta: { touched, error },
     } = useInput({
+        format,
         id: idOverride,
         input: inputOverride,
         isRequired: isRequiredOverride,
         meta: metaOverride,
         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
@@ -14,13 +14,15 @@ const BooleanInput: FunctionComponent<
     InputProps<SwitchProps> &
         Omit<FormGroupProps, 'defaultValue' | 'onChange' | 'onBlur' | 'onFocus'>
 > = ({
+    format,
     label,
     fullWidth,
     helperText,
     onBlur,
     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
@@ -94,6 +94,7 @@ const CheckboxGroupInput: FunctionComponent<
     ChoicesProps & InputProps<CheckboxProps> & 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
@@ -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<TextFieldProps> & Omit<TextFieldProps, 'helperText' | 'label'>
 > = ({
+    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
@@ -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
@@ -29,13 +29,15 @@ const NullableBooleanInput: FunctionComponent<
     InputProps<TextFieldProps> & Omit<TextFieldProps, 'label' | 'helperText'>
 > = ({
     className,
+    format = getStringFromBoolean,
     helperText,
     label,
     margin = 'dense',
     onBlur,
     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.spec.tsx b/packages/ra-ui-materialui/src/input/NumberInput.spec.tsx
@@ -36,7 +36,9 @@ describe('<NumberInput />', () => {
                     render={() => <NumberInput {...defaultProps} step="0.1" />}
                 />
             );
-            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
@@ -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;
 }
 
 /**
@@ -33,16 +33,18 @@ const NumberInput: FunctionComponent<
         InputProps<TextFieldProps> &
         Omit<TextFieldProps, 'label' | 'helperText'>
 > = ({
+    format,
     helperText,
     label,
     margin = 'dense',
-    options,
-    source,
-    step,
-    resource,
     onBlur,
     onFocus,
     onChange,
+    options,
+    parse = convertStringToNumber,
+    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
@@ -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
@@ -109,16 +109,20 @@ interface Props {
  * </ReferenceInput>
  */
 export const ReferenceInput: FunctionComponent<Props & InputProps> = ({
+    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
@@ -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
@@ -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,