[RFR] Migrate RadioButtonGroupInput to TypeScript

marmelab · Aug 19, 2019 · f9dda1b · f9dda1b
1 parent caa931f
commit f9dda1b
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 10 deletions.
diff --git a/packages/ra-ui-materialui/src/input/CheckboxGroupInput.tsx b/packages/ra-ui-materialui/src/input/CheckboxGroupInput.tsx
@@ -11,6 +11,7 @@ import { FieldTitle, useInput, InputProps } from 'ra-core';
 import defaultSanitizeRestProps from './sanitizeRestProps';
 import CheckboxGroupInputItem from './CheckboxGroupInputItem';
 import { CheckboxProps } from '@material-ui/core/Checkbox';
+import { InputWithOptionsProps } from './InputWithOptions';
 
 const sanitizeRestProps = ({
     setFilter,
@@ -90,7 +91,7 @@ const useStyles = makeStyles(theme => ({
  * The object passed as `options` props is passed to the material-ui <Checkbox> components
  */
 const CheckboxGroupInput: FunctionComponent<
-    InputProps<CheckboxProps> & FormControlProps
+    InputWithOptionsProps & InputProps<CheckboxProps> & FormControlProps
 > = ({
     choices,
     helperText,

diff --git a/packages/ra-ui-materialui/src/input/InputWithOptions.ts b/packages/ra-ui-materialui/src/input/InputWithOptions.ts
@@ -0,0 +1,12 @@
+import { ReactElement } from 'react';
+
+type OptionTextFunction<ChoiceType = any> = (record: ChoiceType) => string;
+
+export interface InputWithOptionsProps<ChoiceType = any> {
+    choices: ChoiceType[];
+    optionText:
+        | string
+        | OptionTextFunction<ChoiceType>
+        | ReactElement<{ record: ChoiceType }>;
+    optionValue: string;
+}
diff --git a/...i/src/input/RadioButtonGroupInput.spec.js → .../src/input/RadioButtonGroupInput.spec.tsx b/...i/src/input/RadioButtonGroupInput.spec.js → .../src/input/RadioButtonGroupInput.spec.tsx
diff --git a/...rialui/src/input/RadioButtonGroupInput.js → ...ialui/src/input/RadioButtonGroupInput.tsx b/...rialui/src/input/RadioButtonGroupInput.js → ...ialui/src/input/RadioButtonGroupInput.tsx
@@ -1,16 +1,17 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 import PropTypes from 'prop-types';
-import FormControl from '@material-ui/core/FormControl';
+import FormControl, { FormControlProps } from '@material-ui/core/FormControl';
 import FormHelperText from '@material-ui/core/FormHelperText';
-import InputLabel from '@material-ui/core/InputLabel';
-import RadioGroup from '@material-ui/core/RadioGroup';
+import FormLabel from '@material-ui/core/FormLabel';
+import RadioGroup, { RadioGroupProps } from '@material-ui/core/RadioGroup';
 import { makeStyles } from '@material-ui/core/styles';
 import get from 'lodash/get';
-import { useInput, FieldTitle } from 'ra-core';
+import { useInput, FieldTitle, InputProps } from 'ra-core';
 
 import sanitizeRestProps from './sanitizeRestProps';
 import InputHelperText from './InputHelperText';
 import RadioButtonGroupInputItem from './RadioButtonGroupInputItem';
+import { InputWithOptionsProps } from './InputWithOptions';
 
 const useStyles = makeStyles({
     label: {
@@ -75,7 +76,9 @@ const useStyles = makeStyles({
  *
  * The object passed as `options` props is passed to the material-ui <RadioButtonGroup> component
  */
-export const RadioButtonGroupInput = ({
+export const RadioButtonGroupInput: FunctionComponent<
+    InputWithOptionsProps & InputProps<RadioGroupProps> & FormControlProps
+> = ({
     choices,
     helperText,
     label,
@@ -114,14 +117,14 @@ export const RadioButtonGroupInput = ({
             margin="normal"
             {...sanitizeRestProps(rest)}
         >
-            <InputLabel component="legend" shrink className={classes.label}>
+            <FormLabel component="legend" className={classes.label}>
                 <FieldTitle
                     label={label}
                     source={source}
                     resource={resource}
                     isRequired={isRequired}
                 />
-            </InputLabel>
+            </FormLabel>
 
             <RadioGroup id={id} {...input} {...options}>
                 {choices.map(choice => (

diff --git a/...ui/src/input/RadioButtonGroupInputItem.js → ...i/src/input/RadioButtonGroupInputItem.tsx b/...ui/src/input/RadioButtonGroupInputItem.js → ...i/src/input/RadioButtonGroupInputItem.tsx
@@ -13,7 +13,7 @@ const RadioButtonGroupInputItem = ({
 }) => {
     const translate = useTranslate();
 
-    const choiceName = isValidElement(optionText) // eslint-disable-line no-nested-ternary
+    const choiceName = isValidElement<{ record: any }>(optionText)
         ? cloneElement(optionText, { record: choice })
         : typeof optionText === 'function'
         ? optionText(choice)