Fix Form Types

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

@@ -1,17 +1,18 @@
 import * as React from 'react';
 import { FC, useRef, useCallback, useEffect, useMemo } from 'react';
-import {
-    Form,
-    FormProps,
-    FormRenderProps as FinalFormFormRenderProps,
-} from 'react-final-form';
+import { Form, FormProps, FormRenderProps } from 'react-final-form';
 import arrayMutators from 'final-form-arrays';
 
 import useInitializeFormWithRecord from './useInitializeFormWithRecord';
 import useWarnWhenUnsavedChanges from './useWarnWhenUnsavedChanges';
 import sanitizeEmptyValues from './sanitizeEmptyValues';
 import getFormInitialValues from './getFormInitialValues';
-import { FormContextValue, Record, OnSuccess, OnFailure } from '../types';
+import {
+    FormContextValue,
+    Record as RaRecord,
+    OnSuccess,
+    OnFailure,
+} from '../types';
 import { RedirectionSideEffect } from '../sideEffect';
 import { useDispatch } from 'react-redux';
 import { setAutomaticRefresh } from '../actions/uiActions';
@@ -42,7 +43,7 @@ import { FormContextProvider } from './FormContextProvider';
  *
  * @param {Props} props
  */
-const FormWithRedirect: FC<FormWithRedirectProps> = ({
+const FormWithRedirect = ({
     debug,
     decorators,
     defaultValue,
@@ -63,7 +64,7 @@ const FormWithRedirect: FC<FormWithRedirectProps> = ({
     warnWhenUnsavedChanges,
     sanitizeEmptyValues: shouldSanitizeEmptyValues = true,
     ...props
-}) => {
+}: FormWithRedirectProps) => {
     const redirect = useRef(props.redirect);
     const onSave = useRef(save);
     const formGroups = useRef<{ [key: string]: string[] }>({});
@@ -165,6 +166,7 @@ const FormWithRedirect: FC<FormWithRedirectProps> = ({
                 validate={validate}
                 validateOnBlur={validateOnBlur}
                 render={formProps => (
+                    // @ts-ignore Ignored because of a weird error about the active prop
                     <FormView
                         {...props}
                         {...formProps}
@@ -182,23 +184,28 @@ const FormWithRedirect: FC<FormWithRedirectProps> = ({
 };
 
 export type FormWithRedirectProps = FormWithRedirectOwnProps &
-    Omit<FormProps, 'onSubmit' | 'active'>;
+    Omit<FormProps, 'onSubmit'>;
 
+export type FormWithRedirectRenderProps = Omit<
+    FormViewProps,
+    'chilren' | 'render' | 'setRedirect'
+>;
 export type FormWithRedirectRender = (
-    props: Omit<FormViewProps, 'render' | 'setRedirect'>
+    props: FormWithRedirectRenderProps
 ) => React.ReactElement<any, any>;
 
 export type FormWithRedirectSave = (
-    data: Partial<Record>,
+    data: Partial<RaRecord>,
     redirectTo: RedirectionSideEffect,
     options?: {
         onSuccess?: OnSuccess;
         onFailure?: OnFailure;
     }
 ) => void;
+
 export interface FormWithRedirectOwnProps {
     defaultValue?: any;
-    record?: Record;
+    record?: RaRecord;
     redirect?: RedirectionSideEffect;
     render: FormWithRedirectRender;
     save?: FormWithRedirectSave;
@@ -221,18 +228,18 @@ export type HandleSubmitWithRedirect = (
 ) => void;
 interface FormViewProps
     extends FormWithRedirectOwnProps,
-        Omit<FinalFormFormRenderProps, 'render' | 'active'> {
+        Omit<FormRenderProps, 'render' | 'component'> {
     handleSubmitWithRedirect?: HandleSubmitWithRedirect;
     setRedirect: SetRedirect;
     warnWhenUnsavedChanges?: boolean;
 }
 
-const FormView: FC<FormViewProps> = ({
+const FormView = ({
     render,
     warnWhenUnsavedChanges,
     setRedirect,
     ...props
-}) => {
+}: FormViewProps) => {
     // if record changes (after a getOne success or a refresh), the form must be updated
     useInitializeFormWithRecord(props.record);
     useWarnWhenUnsavedChanges(warnWhenUnsavedChanges);

packages/ra-core/src/form/index.ts

@@ -7,6 +7,7 @@ import FormField from './FormField';
 import FormWithRedirect, {
     FormWithRedirectProps,
     FormWithRedirectRender,
+    FormWithRedirectRenderProps,
     FormWithRedirectSave,
     HandleSubmitWithRedirect,
 } from './FormWithRedirect';
@@ -30,6 +31,7 @@ export type {
     FormDataConsumerRender,
     FormDataConsumerRenderParams,
     FormWithRedirectProps,
+    FormWithRedirectRenderProps,
     FormWithRedirectRender,
     FormWithRedirectSave,
     HandleSubmitWithRedirect,

packages/ra-ui-materialui/src/form/SimpleFormView.tsx

@@ -3,8 +3,7 @@ import { Children, FC, ReactElement } from 'react';
 import classnames from 'classnames';
 import FormInput from './FormInput';
 import PropTypes from 'prop-types';
-import { FormRenderProps } from 'react-final-form';
-import { MutationMode, Record, RedirectionSideEffect } from 'ra-core';
+import { FormWithRedirectRenderProps, MutationMode, Record } from 'ra-core';
 import Toolbar from './Toolbar';
 import CardContentInner from '../layout/CardContentInner';
 
@@ -97,18 +96,14 @@ SimpleFormView.defaultProps = {
     component: CardContentInner,
 };
 
-export interface SimpleFormViewProps extends FormRenderProps {
+export interface SimpleFormViewProps extends FormWithRedirectRenderProps {
     basePath?: string;
     className?: string;
     component?: React.ComponentType<any>;
-    handleSubmitWithRedirect?: (redirectTo: RedirectionSideEffect) => void;
     margin?: 'none' | 'normal' | 'dense';
     mutationMode?: MutationMode;
     record?: Record;
-    redirect?: RedirectionSideEffect;
     resource?: string;
-    save?: () => void;
-    saving?: boolean;
     toolbar?: ReactElement;
     /** @deprecated use mutationMode: undoable instead */
     undoable?: boolean;

packages/ra-ui-materialui/src/form/TabbedFormView.tsx

@@ -12,12 +12,11 @@ import classnames from 'classnames';
 import { Route, useRouteMatch, useLocation } from 'react-router-dom';
 import { Divider } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
-import { FormRenderProps } from 'react-final-form';
 import {
     escapePath,
+    FormWithRedirectRenderProps,
     MutationMode,
     Record,
-    RedirectionSideEffect,
 } from 'ra-core';
 import Toolbar from './Toolbar';
 import TabbedFormTabs, { getTabFullPath } from './TabbedFormTabs';
@@ -29,7 +28,6 @@ export const TabbedFormView = (props: TabbedFormViewProps) => {
         children,
         className,
         classes: classesOverride,
-        form,
         handleSubmit,
         handleSubmitWithRedirect,
         invalid,
@@ -183,18 +181,14 @@ TabbedFormView.defaultProps = {
     toolbar: <Toolbar />,
 };
 
-export interface TabbedFormViewProps extends FormRenderProps {
+export interface TabbedFormViewProps extends FormWithRedirectRenderProps {
     basePath?: string;
     classes?: ClassesOverride<typeof useTabbedFormViewStyles>;
     className?: string;
     margin?: 'none' | 'normal' | 'dense';
     mutationMode?: MutationMode;
-    handleSubmitWithRedirect?: (redirectTo: RedirectionSideEffect) => void;
     record?: Record;
-    redirect?: RedirectionSideEffect;
     resource?: string;
-    save?: () => void;
-    saving?: boolean;
     syncWithLocation?: boolean;
     tabs?: ReactElement;
     toolbar?: ReactElement;
@@ -213,6 +207,7 @@ const sanitizeRestProps = ({
     dirtySinceLastSubmit,
     error,
     errors,
+    form,
     hasSubmitErrors,
     hasValidationErrors,
     initialValues,