Convert Form components to typescript

Refs #4505

packages/ra-core/src/form/FormWithRedirect.tsx

@@ -38,7 +38,9 @@ import { setAutomaticRefresh } from '../actions/uiActions';
  *
  * @param {Prop} props
  */
-const FormWithRedirect: FC<FormWithRedirectOwnProps & FormProps> = ({
+const FormWithRedirect: FC<
+    FormWithRedirectOwnProps & Omit<FormProps, 'onSubmit'>
+> = ({
     debug,
     decorators,
     defaultValue,
@@ -150,17 +152,17 @@ const FormWithRedirect: FC<FormWithRedirectOwnProps & FormProps> = ({
 export interface FormWithRedirectOwnProps {
     defaultValue?: any;
     record?: Record;
-    save: (
+    save?: (
         data: Partial<Record>,
         redirectTo: RedirectionSideEffect,
         options?: {
             onSuccess?: (data?: any) => void;
             onFailure?: (error: any) => void;
         }
     ) => void;
-    redirect: RedirectionSideEffect;
-    saving: boolean;
-    version: number;
+    redirect?: RedirectionSideEffect;
+    saving?: boolean;
+    version?: number;
     warnWhenUnsavedChanges?: boolean;
     sanitizeEmptyValues?: boolean;
 }
@@ -172,7 +174,12 @@ const defaultSubscription = {
     invalid: true,
 };
 
-const FormView = ({ render, warnWhenUnsavedChanges, ...props }) => {
+const FormView = ({
+    render,
+    warnWhenUnsavedChanges,
+    setRedirect,
+    ...props
+}) => {
     // if record changes (after a getOne success or a refresh), the form must be updated
     useInitializeFormWithRecord(props.record);
     useWarnWhenUnsavedChanges(warnWhenUnsavedChanges);
@@ -182,7 +189,7 @@ const FormView = ({ render, warnWhenUnsavedChanges, ...props }) => {
         dispatch(setAutomaticRefresh(props.pristine));
     }, [dispatch, props.pristine]);
 
-    const { redirect, setRedirect, handleSubmit } = props;
+    const { redirect, handleSubmit } = props;
 
     /**
      * We want to let developers define the redirection target from inside the form,

packages/ra-ui-materialui/src/form/FormInput.js → packages/ra-ui-materialui/src/form/FormInput.tsx

@@ -1,9 +1,12 @@
 import * as React from 'react';
+import { FC, HtmlHTMLAttributes, ReactElement } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { makeStyles } from '@material-ui/core/styles';
+import { Record } from 'ra-core';
 
 import Labeled from '../input/Labeled';
+import { ClassesOverride } from '../types';
 
 const sanitizeRestProps = ({ basePath, record, ...rest }) => rest;
 
@@ -14,7 +17,7 @@ const useStyles = makeStyles(
     { name: 'RaFormInput' }
 );
 
-const FormInput = props => {
+const FormInput: FC<FormInputProps> = props => {
     const { input, classes: classesOverride, ...rest } = props;
     const classes = useStyles(props);
     return input ? (
@@ -59,11 +62,21 @@ const FormInput = props => {
 };
 
 FormInput.propTypes = {
-    className: PropTypes.string,
     classes: PropTypes.object,
-    input: PropTypes.object,
+    // @ts-ignore
+    input: PropTypes.node,
 };
 
+export interface FormInputProps extends HtmlHTMLAttributes<HTMLDivElement> {
+    basePath: string;
+    classes?: ClassesOverride<typeof useStyles>;
+    input: ReactElement;
+    margin?: 'none' | 'normal' | 'dense';
+    record: Record;
+    resource: string;
+    variant?: 'standard' | 'outlined' | 'filled';
+}
+
 // wat? TypeScript looses the displayName if we don't set it explicitly
 FormInput.displayName = 'FormInput';
 

packages/ra-ui-materialui/src/form/FormTab.spec.js → packages/ra-ui-materialui/src/form/FormTab.spec.tsx

@@ -42,7 +42,7 @@ describe('<FormTab label="foo" />', () => {
     it('should render a TabbedForm with FormTabs having custom props without warnings', () => {
         const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
 
-        const record = { name: 'foo' };
+        const record = { id: 'gazebo', name: 'foo' };
         const { container } = renderWithRedux(
             <TabbedForm>
                 <FormTab

packages/ra-ui-materialui/src/form/FormTab.js → packages/ra-ui-materialui/src/form/FormTab.tsx

@@ -1,24 +1,16 @@
 import * as React from 'react';
+import { FC, ReactElement } from 'react';
 import PropTypes from 'prop-types';
 import { Link, useLocation } from 'react-router-dom';
 import MuiTab from '@material-ui/core/Tab';
 import classnames from 'classnames';
-import { useTranslate } from 'ra-core';
+import { useTranslate, Record } from 'ra-core';
 
 import FormInput from './FormInput';
 
-const sanitizeRestProps = ({
-    contentClassName,
-    label,
-    icon,
-    value,
-    translate,
-    ...rest
-}) => rest;
-
 const hiddenStyle = { display: 'none' };
 
-const FormTab = ({
+const FormTab: FC<FormTabProps> = ({
     basePath,
     className,
     contentClassName,
@@ -46,15 +38,15 @@ const FormTab = ({
             className={classnames('form-tab', className)}
             component={Link}
             to={{ ...location, pathname: value }}
-            {...sanitizeRestProps(rest)}
+            {...rest}
         />
     );
 
     const renderContent = () => (
         <span style={hidden ? hiddenStyle : null} className={contentClassName}>
             {React.Children.map(
                 children,
-                input =>
+                (input: ReactElement) =>
                     input && (
                         <FormInput
                             basePath={basePath}
@@ -83,12 +75,28 @@ FormTab.propTypes = {
     label: PropTypes.string.isRequired,
     margin: PropTypes.oneOf(['none', 'dense', 'normal']),
     path: PropTypes.string,
+    // @ts-ignore
     record: PropTypes.object,
     resource: PropTypes.string,
     value: PropTypes.string,
     variant: PropTypes.oneOf(['standard', 'outlined', 'filled']),
 };
 
+export interface FormTabProps {
+    basePath?: string;
+    className?: string;
+    contentClassName?: string;
+    hidden?: boolean;
+    icon?: ReactElement;
+    intent?: 'header' | 'content';
+    label: string;
+    margin?: 'none' | 'normal' | 'dense';
+    record?: Record;
+    resource?: string;
+    value?: string;
+    variant?: 'standard' | 'outlined' | 'filled';
+}
+
 FormTab.displayName = 'FormTab';
 
 export default FormTab;

packages/ra-ui-materialui/src/form/SimpleForm.spec.js → packages/ra-ui-materialui/src/form/SimpleForm.spec.tsx

@@ -35,28 +35,17 @@ describe('<SimpleForm />', () => {
     });
 
     it('should pass submitOnEnter to <Toolbar />', () => {
-        const handleSubmit = () => {};
-        const Toolbar = ({ submitOnEnter }) => (
+        const Toolbar = ({ submitOnEnter }: any): any => (
             <p>submitOnEnter: {submitOnEnter.toString()}</p>
         );
 
         const { queryByText, rerender } = renderWithRedux(
-            <SimpleForm
-                submitOnEnter={false}
-                handleSubmit={handleSubmit}
-                toolbar={<Toolbar />}
-            />
+            <SimpleForm submitOnEnter={false} toolbar={<Toolbar />} />
         );
 
         expect(queryByText('submitOnEnter: false')).not.toBeNull();
 
-        rerender(
-            <SimpleForm
-                submitOnEnter
-                handleSubmit={handleSubmit}
-                toolbar={<Toolbar />}
-            />
-        );
+        rerender(<SimpleForm submitOnEnter toolbar={<Toolbar />} />);
 
         expect(queryByText('submitOnEnter: true')).not.toBeNull();
     });

packages/ra-ui-materialui/src/form/SimpleForm.js → packages/ra-ui-materialui/src/form/SimpleForm.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { Children } from 'react';
+import { Children, FC, ReactElement, HtmlHTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { FormWithRedirect } from 'ra-core';
+import { FormWithRedirect, Record, RedirectionSideEffect } from 'ra-core';
+import { FormProps, FormRenderProps } from 'react-final-form';
 
 import FormInput from './FormInput';
 import Toolbar from './Toolbar';
@@ -39,11 +40,11 @@ import CardContentInner from '../layout/CardContentInner';
  * @prop {ReactElement} toolbar The element displayed at the bottom of the form, containing the SaveButton
  * @prop {string} variant Apply variant to all inputs. Possible values are 'standard', 'outlined', and 'filled' (default)
  * @prop {string} margin Apply variant to all inputs. Possible values are 'none', 'normal', and 'dense' (default)
- * @prop {boolean} sanitizeEmptyValues Wether or not deleted record attributes should be recreated with a `null` value (default: true)
+ * @prop {boolean} sanitizeEmptyValues Whether or not deleted record attributes should be recreated with a `null` value (default: true)
  *
  * @param {Prop} props
  */
-const SimpleForm = props => (
+const SimpleForm: FC<SimpleFormProps> = props => (
     <FormWithRedirect
         {...props}
         render={formProps => <SimpleFormView {...formProps} />}
@@ -52,8 +53,8 @@ const SimpleForm = props => (
 
 SimpleForm.propTypes = {
     children: PropTypes.node,
-    defaultValue: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), // @deprecated
     initialValues: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+    // @ts-ignore
     record: PropTypes.object,
     redirect: PropTypes.oneOfType([
         PropTypes.string,
@@ -70,7 +71,25 @@ SimpleForm.propTypes = {
     sanitizeEmptyValues: PropTypes.bool,
 };
 
-const SimpleFormView = ({
+export interface SimpleFormProps
+    extends Omit<FormProps, 'onSubmit'>,
+        Omit<HtmlHTMLAttributes<HTMLFormElement>, 'onSubmit' | 'children'> {
+    basePath?: string;
+    className?: string;
+    initialValues?: any;
+    margin?: 'none' | 'normal' | 'dense';
+    record?: Record;
+    redirect?: RedirectionSideEffect;
+    resource?: string;
+    sanitizeEmptyValues?: boolean;
+    submitOnEnter?: boolean;
+    toolbar?: ReactElement;
+    undoable?: boolean;
+    variant?: 'standard' | 'outlined' | 'filled';
+    warnWhenUnsavedChanges?: boolean;
+}
+
+const SimpleFormView: FC<SimpleFormViewProps> = ({
     basePath,
     children,
     className,
@@ -96,7 +115,7 @@ const SimpleFormView = ({
         <CardContentInner>
             {Children.map(
                 children,
-                input =>
+                (input: ReactElement) =>
                     input && (
                         <FormInput
                             basePath={basePath}
@@ -133,6 +152,7 @@ SimpleFormView.propTypes = {
     handleSubmit: PropTypes.func, // passed by react-final-form
     invalid: PropTypes.bool,
     pristine: PropTypes.bool,
+    // @ts-ignore
     record: PropTypes.object,
     resource: PropTypes.string,
     redirect: PropTypes.oneOfType([
@@ -148,62 +168,54 @@ SimpleFormView.propTypes = {
     validate: PropTypes.func,
 };
 
+export interface SimpleFormViewProps extends FormRenderProps {
+    basePath?: string;
+    className?: string;
+    margin?: 'none' | 'normal' | 'dense';
+    handleSubmitWithRedirect?: (redirectTo: RedirectionSideEffect) => void;
+    record?: Record;
+    redirect?: RedirectionSideEffect;
+    resource?: string;
+    save?: () => void;
+    saving?: boolean;
+    toolbar?: ReactElement;
+    undoable?: boolean;
+    variant?: 'standard' | 'outlined' | 'filled';
+    submitOnEnter?: boolean;
+    __versions?: any; // react-final-form internal prop, missing in their type
+}
+
 SimpleFormView.defaultProps = {
     submitOnEnter: true,
     toolbar: <Toolbar />,
 };
 
 const sanitizeRestProps = ({
-    anyTouched,
-    array,
-    asyncBlurFields,
-    asyncValidate,
-    asyncValidating,
-    autofill,
-    blur,
-    change,
-    clearAsyncError,
-    clearFields,
-    clearSubmit,
-    clearSubmitErrors,
-    destroy,
+    active,
     dirty,
     dirtyFields,
     dirtyFieldsSinceLastSubmit,
     dirtySinceLastSubmit,
-    dispatch,
+    error,
+    errors,
     form,
-    handleSubmit,
     hasSubmitErrors,
     hasValidationErrors,
-    initialize,
-    initialized,
     initialValues,
+    modified = null,
     modifiedSinceLastSubmit,
-    modifiedsincelastsubmit,
-    pristine,
-    pure,
-    redirect,
-    reset,
-    resetSection,
-    save,
-    setRedirect,
-    submit,
+    save = null,
     submitError,
     submitErrors,
-    submitAsSideEffect,
     submitFailed,
     submitSucceeded,
     submitting,
-    touch,
-    translate,
-    triggerSubmit,
-    undoable,
-    untouch,
+    touched = null,
     valid,
-    validate,
     validating,
-    __versions,
+    values,
+    visited = null,
+    __versions = null,
     ...props
 }) => props;