[RFR] Migrate NumberInput to use useInput

packages/ra-ui-materialui/src/input/NumberInput.js

@@ -1,11 +1,17 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import TextField from '@material-ui/core/TextField';
-import { addField, FieldTitle } from 'ra-core';
+import { useInput, FieldTitle } from 'ra-core';
 
 import InputHelperText from './InputHelperText';
 import sanitizeRestProps from './sanitizeRestProps';
 
+const parse = value => {
+    const float = parseFloat(value);
+
+    return isNaN(float) ? null : float;
+};
+
 /**
  * An Input component for a number
  *
@@ -18,70 +24,40 @@ import sanitizeRestProps from './sanitizeRestProps';
  *
  * The object passed as `options` props is passed to the material-ui <TextField> component
  */
-export const NumberInput = ({
-    className,
-    input,
-    isRequired,
+const NumberInput = ({
+    helperText,
     label,
-    meta,
     options,
     source,
     step,
     resource,
-    helperText,
     onBlur,
     onFocus,
     onChange,
+    validate,
     ...rest
 }) => {
-    const handleBlur = useCallback(
-        event => {
-            /**
-             * Necessary because of a React bug on <input type="number">
-             * @see https://github.com/facebook/react/issues/1425
-             */
-            const numericValue = isNaN(parseFloat(event.target.value))
-                ? null
-                : parseFloat(event.target.value);
-            onBlur(numericValue);
-            input.onBlur(numericValue);
-        },
-        [input, onBlur]
-    );
-
-    const handleFocus = useCallback(
-        event => {
-            onFocus(event);
-            input.onFocus(event);
-        },
-        [input, onFocus]
-    );
-
-    const handleChange = useCallback(
-        event => {
-            /**
-             * Necessary because of a React bug on <input type="number">
-             * @see https://github.com/facebook/react/issues/1425
-             */
-            const numericValue = isNaN(parseFloat(event.target.value))
-                ? null
-                : parseFloat(event.target.value);
-            onChange(numericValue);
-            input.onChange(numericValue);
-        },
-        [input, onChange]
-    );
-
-    if (typeof meta === 'undefined') {
-        throw new Error(
-            "The NumberInput component wasn't called within a redux-form <Field>. Did you decorate it and forget to add the addField prop to your component? See https://marmelab.com/react-admin/Inputs.html#writing-your-own-input-component for details."
-        );
-    }
-    const { touched, error } = meta;
+    const {
+        id,
+        input,
+        isRequired,
+        meta: { error, touched },
+    } = useInput({
+        onBlur,
+        onChange,
+        onFocus,
+        parse,
+        resource,
+        source,
+        type: 'number',
+        validate,
+        ...rest,
+    });
 
     return (
         <TextField
-            type="number"
+            id={id}
+            {...input}
             margin="normal"
             error={!!(touched && error)}
             helperText={
@@ -100,49 +76,24 @@ export const NumberInput = ({
                     isRequired={isRequired}
                 />
             }
-            className={className}
             {...options}
             {...sanitizeRestProps(rest)}
-            {...input}
-            onBlur={handleBlur}
-            onFocus={handleFocus}
-            onChange={handleChange}
         />
     );
 };
 
 NumberInput.propTypes = {
-    className: PropTypes.string,
-    input: PropTypes.object,
-    isRequired: PropTypes.bool,
     label: PropTypes.string,
-    meta: PropTypes.object,
-    name: PropTypes.string,
-    onBlur: PropTypes.func,
-    onChange: PropTypes.func,
-    onFocus: PropTypes.func,
     options: PropTypes.object,
     resource: PropTypes.string,
     source: PropTypes.string,
     step: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-    validate: PropTypes.oneOfType([
-        PropTypes.func,
-        PropTypes.arrayOf(PropTypes.func),
-    ]),
 };
 
 NumberInput.defaultProps = {
-    onBlur: () => {},
-    onChange: () => {},
-    onFocus: () => {},
     options: {},
     step: 'any',
     textAlign: 'right',
 };
 
-export const NumberInputWithField = addField(NumberInput);
-NumberInputWithField.defaultProps = {
-    textAlign: 'right',
-};
-
-export default NumberInputWithField;
+export default NumberInput;