[RFR] Migrate RadioButtonGroupInput to TypeScript

marmelab · Aug 21, 2019 · 52ad3c3 · 52ad3c3
1 parent 875d719
commit 52ad3c3
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 64 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,18 +1,15 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 import PropTypes from 'prop-types';
-import {
-    makeStyles,
-    FormControl,
-    FormHelperText,
-    InputLabel,
-    RadioGroup,
-} from '@material-ui/core';
+import { makeStyles, FormControl, FormHelperText, FormLabel, RadioGroup } from '@material-ui/core';
+import { RadioGroupProps } from '@material-ui/core/RadioGroup';
+import { FormControlProps } from '@material-ui/core/FormControl';
 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: {
@@ -77,7 +74,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,
     classes: classesOverride,
     helperText,
@@ -94,62 +93,62 @@ export const RadioButtonGroupInput = ({
     validate,
     ...rest
 }) => {
-    const classes = useStyles(classesOverride);
+        const classes = useStyles(classesOverride);
 
-    const {
-        id,
-        input,
-        isRequired,
-        meta: { error, touched },
-    } = useInput({
-        onBlur,
-        onChange,
-        onFocus,
-        resource,
-        source,
-        validate,
-        ...rest,
-    });
+        const {
+            id,
+            input,
+            isRequired,
+            meta: { error, touched },
+        } = useInput({
+            onBlur,
+            onChange,
+            onFocus,
+            resource,
+            source,
+            validate,
+            ...rest,
+        });
 
-    return (
-        <FormControl
-            component="fieldset"
-            margin="normal"
-            {...sanitizeRestProps(rest)}
-        >
-            <InputLabel component="legend" shrink className={classes.label}>
-                <FieldTitle
-                    label={label}
-                    source={source}
-                    resource={resource}
-                    isRequired={isRequired}
-                />
-            </InputLabel>
-
-            <RadioGroup id={id} {...input} {...options}>
-                {choices.map(choice => (
-                    <RadioButtonGroupInputItem
-                        key={get(choice, optionValue)}
-                        choice={choice}
-                        optionText={optionText}
-                        optionValue={optionValue}
+        return (
+            <FormControl
+                component="fieldset"
+                margin="normal"
+                {...sanitizeRestProps(rest)}
+            >
+                <FormLabel component="legend" className={classes.label}>
+                    <FieldTitle
+                        label={label}
                         source={source}
-                        translateChoice={translateChoice}
-                    />
-                ))}
-            </RadioGroup>
-            {helperText || (touched && error) ? (
-                <FormHelperText>
-                    <InputHelperText
-                        touched={touched}
-                        error={error}
-                        helperText={helperText}
+                        resource={resource}
+                        isRequired={isRequired}
                     />
-                </FormHelperText>
-            ) : null}
-        </FormControl>
-    );
-};
+                </FormLabel>
+
+                <RadioGroup id={id} {...input} {...options}>
+                    {choices.map(choice => (
+                        <RadioButtonGroupInputItem
+                            key={get(choice, optionValue)}
+                            choice={choice}
+                            optionText={optionText}
+                            optionValue={optionValue}
+                            source={source}
+                            translateChoice={translateChoice}
+                        />
+                    ))}
+                </RadioGroup>
+                {helperText || (touched && error) ? (
+                    <FormHelperText>
+                        <InputHelperText
+                            touched={touched}
+                            error={error}
+                            helperText={helperText}
+                        />
+                    </FormHelperText>
+                ) : null}
+            </FormControl>
+        );
+    };
 
 RadioButtonGroupInput.propTypes = {
     choices: PropTypes.arrayOf(PropTypes.object),

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)