Merge pull request #3527 from marmelab/select-input-typescript

[RFR] Migrate SelectInput to TypeScript
marmelab · Aug 15, 2019 · f7dbc69 · f7dbc69
2 parents 25f72cd + 5c480db
commit f7dbc69
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 9 deletions.
diff --git a/...-materialui/src/input/SelectInput.spec.js → ...materialui/src/input/SelectInput.spec.tsx b/...-materialui/src/input/SelectInput.spec.js → ...materialui/src/input/SelectInput.spec.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import assert from 'assert';
 import { render, cleanup, fireEvent } from '@testing-library/react';
 import { Form } from 'react-final-form';
 import { TranslationContext } from 'ra-core';
@@ -24,7 +23,9 @@ describe('<SelectInput />', () => {
                 render={() => <SelectInput {...defaultProps} />}
             />
         );
-        const input = getByLabelText('resources.posts.fields.language');
+        const input = getByLabelText(
+            'resources.posts.fields.language'
+        ) as HTMLInputElement;
         expect(input.value).toEqual('ang');
     });
 
@@ -290,7 +291,7 @@ describe('<SelectInput />', () => {
     });
 
     it('should use optionText with an element value as text identifier', () => {
-        const Foobar = ({ record }) => (
+        const Foobar = ({ record }: { record?: any }) => (
             <span data-value={record.id} aria-label={record.foobar} />
         );
 

diff --git a/...ra-ui-materialui/src/input/SelectInput.js → ...a-ui-materialui/src/input/SelectInput.tsx b/...ra-ui-materialui/src/input/SelectInput.js → ...a-ui-materialui/src/input/SelectInput.tsx
@@ -1,12 +1,13 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, FunctionComponent } from 'react';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
 import MenuItem from '@material-ui/core/MenuItem';
 import { makeStyles } from '@material-ui/core/styles';
-import { useInput, FieldTitle, useTranslate } from 'ra-core';
+import { useInput, FieldTitle, useTranslate, InputProps } from 'ra-core';
 
 import ResettableTextField from './ResettableTextField';
 import InputHelperText from './InputHelperText';
+import { TextFieldProps } from '@material-ui/core/TextField';
 
 const sanitizeRestProps = ({
     addLabel,
@@ -47,7 +48,7 @@ const sanitizeRestProps = ({
     translateChoice,
     validation,
     ...rest
-}) => rest;
+}: any) => rest;
 
 const useStyles = makeStyles(theme => ({
     input: {
@@ -129,7 +130,9 @@ const useStyles = makeStyles(theme => ({
  * <SelectInput source="gender" choices={choices} disableValue="not_available" />
  *
  */
-const SelectInput = ({
+const SelectInput: FunctionComponent<
+    InputProps<TextFieldProps> & Omit<TextFieldProps, 'label' | 'helperText'>
+> = ({
     allowEmpty,
     choices,
     className,
@@ -176,8 +179,8 @@ const SelectInput = ({
 
     const renderMenuItemOption = useCallback(
         choice => {
-            if (React.isValidElement(optionText)) {
-                return React.cloneElement(optionText, {
+            if (React.isValidElement<{ record: any }>(optionText)) {
+                return React.cloneElement<{ record: any }>(optionText, {
                     record: choice,
                 });
             }