[docs] Update react-number-format demo to use the recommended prop (#…

…44743)
mui · Dec 13, 2024 · 33490eb · 33490eb
1 parent a491dc2
commit 33490eb
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 72 deletions.
diff --git a/docs/data/material/components/text-fields/FormattedInputs.js b/docs/data/material/components/text-fields/FormattedInputs.js
@@ -29,35 +29,6 @@ TextMaskCustom.propTypes = {
   onChange: PropTypes.func.isRequired,
 };
 
-const NumericFormatCustom = React.forwardRef(
-  function NumericFormatCustom(props, ref) {
-    const { onChange, ...other } = props;
-
-    return (
-      <NumericFormat
-        {...other}
-        getInputRef={ref}
-        onValueChange={(values) => {
-          onChange({
-            target: {
-              name: props.name,
-              value: values.value,
-            },
-          });
-        }}
-        thousandSeparator
-        valueIsNumericString
-        prefix="$"
-      />
-    );
-  },
-);
-
-NumericFormatCustom.propTypes = {
-  name: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired,
-};
-
 export default function FormattedInputs() {
   const [values, setValues] = React.useState({
     textmask: '(100) 000-0000',
@@ -83,18 +54,15 @@ export default function FormattedInputs() {
           inputComponent={TextMaskCustom}
         />
       </FormControl>
-      <TextField
-        label="react-number-format"
+      <NumericFormat
         value={values.numberformat}
         onChange={handleChange}
-        name="numberformat"
-        id="formatted-numberformat-input"
-        slotProps={{
-          input: {
-            inputComponent: NumericFormatCustom,
-          },
-        }}
+        customInput={TextField}
+        thousandSeparator
+        valueIsNumericString
+        prefix="$"
         variant="standard"
+        label="react-number-format"
       />
     </Stack>
   );

diff --git a/docs/data/material/components/text-fields/FormattedInputs.tsx b/docs/data/material/components/text-fields/FormattedInputs.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { IMaskInput } from 'react-imask';
-import { NumericFormat, NumericFormatProps } from 'react-number-format';
+import { NumericFormat } from 'react-number-format';
 import Stack from '@mui/material/Stack';
 import Input from '@mui/material/Input';
 import InputLabel from '@mui/material/InputLabel';
@@ -30,30 +30,6 @@ const TextMaskCustom = React.forwardRef<HTMLInputElement, CustomProps>(
   },
 );
 
-const NumericFormatCustom = React.forwardRef<NumericFormatProps, CustomProps>(
-  function NumericFormatCustom(props, ref) {
-    const { onChange, ...other } = props;
-
-    return (
-      <NumericFormat
-        {...other}
-        getInputRef={ref}
-        onValueChange={(values) => {
-          onChange({
-            target: {
-              name: props.name,
-              value: values.value,
-            },
-          });
-        }}
-        thousandSeparator
-        valueIsNumericString
-        prefix="$"
-      />
-    );
-  },
-);
-
 export default function FormattedInputs() {
   const [values, setValues] = React.useState({
     textmask: '(100) 000-0000',
@@ -79,18 +55,15 @@ export default function FormattedInputs() {
           inputComponent={TextMaskCustom as any}
         />
       </FormControl>
-      <TextField
-        label="react-number-format"
+      <NumericFormat
         value={values.numberformat}
         onChange={handleChange}
-        name="numberformat"
-        id="formatted-numberformat-input"
-        slotProps={{
-          input: {
-            inputComponent: NumericFormatCustom as any,
-          },
-        }}
+        customInput={TextField}
+        thousandSeparator
+        valueIsNumericString
+        prefix="$"
         variant="standard"
+        label="react-number-format"
       />
     </Stack>
   );