From 52ad3c3ad3c4c0684fb438e7b9a2d358f1c3fc85 Mon Sep 17 00:00:00 2001
From: Gildas Garcia <gildas.garcia@gmail.com>
Date: Mon, 19 Aug 2019 11:40:37 +0200
Subject: [PATCH 1/2] [RFR] Migrate RadioButtonGroupInput to TypeScript

---
 .../src/input/CheckboxGroupInput.tsx          |   3 +-
 .../src/input/InputWithOptions.ts             |  12 ++
 ...spec.js => RadioButtonGroupInput.spec.tsx} |   0
 ...roupInput.js => RadioButtonGroupInput.tsx} | 123 +++++++++---------
 ...tItem.js => RadioButtonGroupInputItem.tsx} |   2 +-
 5 files changed, 76 insertions(+), 64 deletions(-)
 create mode 100644 packages/ra-ui-materialui/src/input/InputWithOptions.ts
 rename packages/ra-ui-materialui/src/input/{RadioButtonGroupInput.spec.js => RadioButtonGroupInput.spec.tsx} (100%)
 rename packages/ra-ui-materialui/src/input/{RadioButtonGroupInput.js => RadioButtonGroupInput.tsx} (61%)
 rename packages/ra-ui-materialui/src/input/{RadioButtonGroupInputItem.js => RadioButtonGroupInputItem.tsx} (91%)

diff --git a/packages/ra-ui-materialui/src/input/CheckboxGroupInput.tsx b/packages/ra-ui-materialui/src/input/CheckboxGroupInput.tsx
index 5b32b8d1552..e1f8c933ca5 100644
--- 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
new file mode 100644
index 00000000000..4483be59f71
--- /dev/null
+++ 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/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.spec.js b/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.spec.tsx
similarity index 100%
rename from packages/ra-ui-materialui/src/input/RadioButtonGroupInput.spec.js
rename to packages/ra-ui-materialui/src/input/RadioButtonGroupInput.spec.tsx
diff --git a/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.js b/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx
similarity index 61%
rename from packages/ra-ui-materialui/src/input/RadioButtonGroupInput.js
rename to packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx
index ffc2f1058aa..e157495c911 100644
--- a/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.js
+++ b/packages/ra-ui-materialui/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/packages/ra-ui-materialui/src/input/RadioButtonGroupInputItem.js b/packages/ra-ui-materialui/src/input/RadioButtonGroupInputItem.tsx
similarity index 91%
rename from packages/ra-ui-materialui/src/input/RadioButtonGroupInputItem.js
rename to packages/ra-ui-materialui/src/input/RadioButtonGroupInputItem.tsx
index 439bde7a7df..383bec3d4b1 100644
--- a/packages/ra-ui-materialui/src/input/RadioButtonGroupInputItem.js
+++ b/packages/ra-ui-materialui/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)

From 7b70f4f3b37bf76f95648e8c964b9a63940db8df Mon Sep 17 00:00:00 2001
From: djhi <gildas.garcia@gmail.com>
Date: Wed, 21 Aug 2019 09:29:09 +0200
Subject: [PATCH 2/2] prettier

---
 .../src/input/RadioButtonGroupInput.tsx       | 112 +++++++++---------
 1 file changed, 59 insertions(+), 53 deletions(-)

diff --git a/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx b/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx
index e157495c911..976ce6371a2 100644
--- a/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx
+++ b/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx
@@ -1,6 +1,12 @@
 import React, { FunctionComponent } from 'react';
 import PropTypes from 'prop-types';
-import { makeStyles, FormControl, FormHelperText, FormLabel, 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';
@@ -93,62 +99,62 @@ export const RadioButtonGroupInput: FunctionComponent<
     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)}
-            >
-                <FormLabel component="legend" className={classes.label}>
-                    <FieldTitle
-                        label={label}
+    return (
+        <FormControl
+            component="fieldset"
+            margin="normal"
+            {...sanitizeRestProps(rest)}
+        >
+            <FormLabel component="legend" className={classes.label}>
+                <FieldTitle
+                    label={label}
+                    source={source}
+                    resource={resource}
+                    isRequired={isRequired}
+                />
+            </FormLabel>
+
+            <RadioGroup id={id} {...input} {...options}>
+                {choices.map(choice => (
+                    <RadioButtonGroupInputItem
+                        key={get(choice, optionValue)}
+                        choice={choice}
+                        optionText={optionText}
+                        optionValue={optionValue}
                         source={source}
-                        resource={resource}
-                        isRequired={isRequired}
+                        translateChoice={translateChoice}
                     />
-                </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>
-        );
-    };
+                ))}
+            </RadioGroup>
+            {helperText || (touched && error) ? (
+                <FormHelperText>
+                    <InputHelperText
+                        touched={touched}
+                        error={error}
+                        helperText={helperText}
+                    />
+                </FormHelperText>
+            ) : null}
+        </FormControl>
+    );
+};
 
 RadioButtonGroupInput.propTypes = {
     choices: PropTypes.arrayOf(PropTypes.object),