Merge pull request #3525 from marmelab/number-input-typescript

[RFR] Migrate NumberInput to TypeScript
marmelab · Aug 19, 2019 · 0617599 · 0617599
2 parents a893009 + 88087c3
commit 0617599
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 8 deletions.
diff --git a/...-materialui/src/input/NumberInput.spec.js → ...materialui/src/input/NumberInput.spec.tsx b/...-materialui/src/input/NumberInput.spec.js → ...materialui/src/input/NumberInput.spec.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { render, cleanup, fireEvent } from '@testing-library/react';
-
-import NumberInput from './NumberInput';
 import { Form } from 'react-final-form';
 import { required } from 'ra-core/lib';
 
+import NumberInput from './NumberInput';
+
 describe('<NumberInput />', () => {
     afterEach(cleanup);
 
@@ -21,7 +21,9 @@ describe('<NumberInput />', () => {
                 render={() => <NumberInput {...defaultProps} />}
             />
         );
-        const input = getByLabelText('resources.posts.fields.views');
+        const input = getByLabelText(
+            'resources.posts.fields.views'
+        ) as HTMLInputElement;
         expect(input.value).toEqual('12');
         expect(input.getAttribute('type')).toEqual('number');
     });

diff --git a/...ra-ui-materialui/src/input/NumberInput.js → ...a-ui-materialui/src/input/NumberInput.tsx b/...ra-ui-materialui/src/input/NumberInput.js → ...a-ui-materialui/src/input/NumberInput.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 import PropTypes from 'prop-types';
-import TextField from '@material-ui/core/TextField';
-import { useInput, FieldTitle } from 'ra-core';
+import TextField, { TextFieldProps } from '@material-ui/core/TextField';
+import { useInput, FieldTitle, InputProps } from 'ra-core';
 
 import InputHelperText from './InputHelperText';
 import sanitizeRestProps from './sanitizeRestProps';
@@ -12,6 +12,10 @@ const parse = value => {
     return isNaN(float) ? null : float;
 };
 
+interface Props {
+    step: string | number;
+}
+
 /**
  * An Input component for a number
  *
@@ -24,7 +28,11 @@ const parse = value => {
  *
  * The object passed as `options` props is passed to the material-ui <TextField> component
  */
-const NumberInput = ({
+const NumberInput: FunctionComponent<
+    Props &
+        InputProps<TextFieldProps> &
+        Omit<TextFieldProps, 'label' | 'helperText'>
+> = ({
     helperText,
     label,
     options,
@@ -87,7 +95,7 @@ NumberInput.propTypes = {
     options: PropTypes.object,
     resource: PropTypes.string,
     source: PropTypes.string,
-    step: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+    step: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 };
 
 NumberInput.defaultProps = {