Export SimpleFormView Component

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

@@ -1,25 +1,8 @@
 import * as React from 'react';
-import {
-    Children,
-    FC,
-    ReactElement,
-    ReactNode,
-    HtmlHTMLAttributes,
-} from 'react';
+import { FC, ReactElement, ReactNode, HtmlHTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import {
-    FormWithRedirect,
-    FormWithRedirectProps,
-    MutationMode,
-    Record,
-    RedirectionSideEffect,
-} from 'ra-core';
-import { FormRenderProps } from 'react-final-form';
-
-import FormInput from './FormInput';
-import Toolbar from './Toolbar';
-import CardContentInner from '../layout/CardContentInner';
+import { FormWithRedirect, FormWithRedirectProps, MutationMode } from 'ra-core';
+import { SimpleFormView } from './SimpleFormView';
 
 /**
  * Form with a one column layout, one input per line.
@@ -105,142 +88,4 @@ export interface SimpleFormProps
     variant?: 'standard' | 'outlined' | 'filled';
 }
 
-const SimpleFormView: FC<SimpleFormViewProps> = ({
-    basePath,
-    children,
-    className,
-    component: Component,
-    handleSubmit,
-    handleSubmitWithRedirect,
-    invalid,
-    margin,
-    mutationMode,
-    pristine,
-    record,
-    redirect,
-    resource,
-    saving,
-    submitOnEnter,
-    toolbar,
-    undoable,
-    variant,
-    ...rest
-}) => (
-    <form
-        className={classnames('simple-form', className)}
-        {...sanitizeRestProps(rest)}
-    >
-        <Component>
-            {Children.map(
-                children,
-                (input: ReactElement) =>
-                    input && (
-                        <FormInput
-                            basePath={basePath}
-                            input={input}
-                            record={record}
-                            resource={resource}
-                            variant={input.props.variant || variant}
-                            margin={input.props.margin || margin}
-                        />
-                    )
-            )}
-        </Component>
-        {toolbar &&
-            React.cloneElement(toolbar, {
-                basePath,
-                handleSubmitWithRedirect,
-                handleSubmit,
-                invalid,
-                mutationMode,
-                pristine,
-                record,
-                redirect,
-                resource,
-                saving,
-                submitOnEnter,
-                undoable,
-            })}
-    </form>
-);
-
-SimpleFormView.propTypes = {
-    basePath: PropTypes.string,
-    children: PropTypes.node,
-    className: PropTypes.string,
-    handleSubmit: PropTypes.func, // passed by react-final-form
-    invalid: PropTypes.bool,
-    mutationMode: PropTypes.oneOf(['pessimistic', 'optimistic', 'undoable']),
-    pristine: PropTypes.bool,
-    // @ts-ignore
-    record: PropTypes.object,
-    resource: PropTypes.string,
-    redirect: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.bool,
-        PropTypes.func,
-    ]),
-    save: PropTypes.func, // the handler defined in the parent, which triggers the REST submission
-    saving: PropTypes.bool,
-    submitOnEnter: PropTypes.bool,
-    toolbar: PropTypes.element,
-    undoable: PropTypes.bool,
-    validate: PropTypes.func,
-};
-
-export interface SimpleFormViewProps extends FormRenderProps {
-    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;
-    variant?: 'standard' | 'outlined' | 'filled';
-    submitOnEnter?: boolean;
-    __versions?: any; // react-final-form internal prop, missing in their type
-}
-
-SimpleFormView.defaultProps = {
-    submitOnEnter: true,
-    toolbar: <Toolbar />,
-    component: CardContentInner,
-};
-
-const sanitizeRestProps = ({
-    active,
-    dirty,
-    dirtyFields,
-    dirtyFieldsSinceLastSubmit,
-    dirtySinceLastSubmit,
-    error,
-    errors,
-    form,
-    hasSubmitErrors,
-    hasValidationErrors,
-    initialValues,
-    modified = null,
-    modifiedSinceLastSubmit,
-    save = null,
-    submitError,
-    submitErrors,
-    submitFailed,
-    submitSucceeded,
-    submitting,
-    touched = null,
-    valid,
-    validating,
-    values,
-    visited = null,
-    __versions = null,
-    ...props
-}) => props;
-
 export default SimpleForm;

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

@@ -0,0 +1,147 @@
+import * as React from 'react';
+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 Toolbar from './Toolbar';
+import CardContentInner from '../layout/CardContentInner';
+
+export const SimpleFormView: FC<SimpleFormViewProps> = ({
+    basePath,
+    children,
+    className,
+    component: Component,
+    handleSubmit,
+    handleSubmitWithRedirect,
+    invalid,
+    margin,
+    mutationMode,
+    pristine,
+    record,
+    redirect,
+    resource,
+    saving,
+    submitOnEnter,
+    toolbar,
+    undoable,
+    variant,
+    ...rest
+}) => (
+    <form
+        className={classnames('simple-form', className)}
+        {...sanitizeRestProps(rest)}
+    >
+        <Component>
+            {Children.map(
+                children,
+                (input: ReactElement) =>
+                    input && (
+                        <FormInput
+                            basePath={basePath}
+                            input={input}
+                            record={record}
+                            resource={resource}
+                            variant={input.props.variant || variant}
+                            margin={input.props.margin || margin}
+                        />
+                    )
+            )}
+        </Component>
+        {toolbar &&
+            React.cloneElement(toolbar, {
+                basePath,
+                handleSubmitWithRedirect,
+                handleSubmit,
+                invalid,
+                mutationMode,
+                pristine,
+                record,
+                redirect,
+                resource,
+                saving,
+                submitOnEnter,
+                undoable,
+            })}
+    </form>
+);
+
+SimpleFormView.propTypes = {
+    basePath: PropTypes.string,
+    children: PropTypes.node,
+    className: PropTypes.string,
+    handleSubmit: PropTypes.func, // passed by react-final-form
+    invalid: PropTypes.bool,
+    mutationMode: PropTypes.oneOf(['pessimistic', 'optimistic', 'undoable']),
+    pristine: PropTypes.bool,
+    // @ts-ignore
+    record: PropTypes.object,
+    resource: PropTypes.string,
+    redirect: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.bool,
+        PropTypes.func,
+    ]),
+    save: PropTypes.func, // the handler defined in the parent, which triggers the REST submission
+    saving: PropTypes.bool,
+    submitOnEnter: PropTypes.bool,
+    toolbar: PropTypes.element,
+    undoable: PropTypes.bool,
+    validate: PropTypes.func,
+};
+
+SimpleFormView.defaultProps = {
+    submitOnEnter: true,
+    toolbar: <Toolbar />,
+    component: CardContentInner,
+};
+
+export interface SimpleFormViewProps extends FormRenderProps {
+    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;
+    variant?: 'standard' | 'outlined' | 'filled';
+    submitOnEnter?: boolean;
+    __versions?: any; // react-final-form internal prop, missing in their type
+}
+
+const sanitizeRestProps = ({
+    active,
+    dirty,
+    dirtyFields,
+    dirtyFieldsSinceLastSubmit,
+    dirtySinceLastSubmit,
+    error,
+    errors,
+    form,
+    hasSubmitErrors,
+    hasValidationErrors,
+    initialValues,
+    modified = null,
+    modifiedSinceLastSubmit,
+    save = null,
+    submitError,
+    submitErrors,
+    submitFailed,
+    submitSucceeded,
+    submitting,
+    touched = null,
+    valid,
+    validating,
+    values,
+    visited = null,
+    __versions = null,
+    ...props
+}) => props;

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

@@ -6,17 +6,24 @@ import SimpleFormIterator, {
 import TabbedFormTabs from './TabbedFormTabs';
 import Toolbar, { ToolbarProps } from './Toolbar';
 import getFormInitialValues from './getFormInitialValues';
+import { SimpleFormView, SimpleFormViewProps } from './SimpleFormView';
 export * from './FormTabHeader';
 
 export * from './TabbedForm';
 export * from './FormTab';
 export * from './FormTabHeader';
 
-export type { SimpleFormProps, SimpleFormIteratorProps, ToolbarProps };
+export type {
+    SimpleFormProps,
+    SimpleFormIteratorProps,
+    SimpleFormViewProps,
+    ToolbarProps,
+};
 
 export {
     FormInput,
     SimpleForm,
+    SimpleFormView,
     SimpleFormIterator,
     TabbedFormTabs,
     Toolbar,