Introduce RecordContext and Base components for Edit, Create and Show

packages/ra-core/src/controller/RecordContext.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { createContext, ReactNode, useContext, useMemo } from 'react';
+import pick from 'lodash/pick';
+import { Record } from '../types';
+
+/**
+ * Context to store the current record.
+ *
+ * Use the useRecordContext() hook to read the context. That's what the Edit and Show components do in react-admin.
+ *
+ * @example
+ *
+ * import { useEditController, EditContext } from 'ra-core';
+ *
+ * const Edit = props => {
+ *     const { record }= useEditController(props);
+ *     return (
+ *         <RecordContextProvider value={record}>
+ *             ...
+ *         </RecordContextProvider>
+ *     );
+ * };
+ */
+export const RecordContext = createContext<Record | Omit<Record, 'id'>>(
+    undefined
+);
+
+export const RecordContextProvider = ({
+    children,
+    value,
+}: RecordContextOptions) => (
+    <RecordContext.Provider value={value}>{children}</RecordContext.Provider>
+);
+RecordContext.displayName = 'RecordContext';
+
+export const usePickRecordContext = <
+    RecordType extends Record | Omit<Record, 'id'> = Record
+>(
+    context: RecordType
+) => {
+    const value = useMemo(() => pick(context, ['record']), [context.record]); // eslint-disable-line
+    return value;
+};
+
+/**
+ * Hook to read the record from a RecordContext.
+ *
+ * Must be used within a <RecordContext> such as provided by the <EditContextProvider>
+ * (e.g. as a descendent of <Edit> or <EditBase>) or within a <ShowContextProvider>
+ * (e.g. as a descendent of <Show> or <ShowBase>)
+ *
+ * @returns {Record} The record context
+ */
+export const useRecordContext = <
+    RecordType extends Record | Omit<Record, 'id'> = Record
+>(
+    props: RecordType
+) => {
+    // Can't find a way to specify the RecordType when CreateContext is declared
+    // @ts-ignore
+    const context = useContext<RecordType>(RecordContext);
+
+    if (!context) {
+        // As the record could very well be undefined because not yet loaded
+        // We don't display a deprecation warning yet
+        // @deprecated - to be removed in 4.0
+        return props;
+    }
+
+    return context;
+};
+
+export interface RecordContextOptions<
+    RecordType extends Record | Omit<Record, 'id'> = Record
+> {
+    children: ReactNode;
+    value?: RecordType;
+}

packages/ra-core/src/controller/details/CreateBase.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { useCreateController } from './useCreateController';
+import { CreateContextProvider } from './CreateContextProvider';
+
+/**
+ * Call useCreateController and put the value in a CreateContext
+ *
+ * Base class for <Create> components, without UI.
+ *
+ * Accepts any props accepted by useCreateController:
+ * - id: The record identifier
+ * - resource: The resource
+ *
+ * @example // Custom edit layout
+ *
+ * const PostCreate = props => (
+ *     <BaseCreate {...props}>
+ *         <Grid container>
+ *             <Grid item xs={8}>
+ *                 <SimpleForm>
+ *                     ...
+ *                 </SimpleForm>
+ *             </Grid>
+ *             <Grid item xs={4}>
+ *                 Create instructions...
+ *             </Grid>
+ *         </Grid>
+ *         <div>
+ *             Post related links...
+ *         </div>
+ *     </BaseCreate>
+ * );
+ */
+export const CreateBase = ({ children, ...props }) => (
+    <CreateContextProvider value={useCreateController(props)}>
+        {children}
+    </CreateContextProvider>
+);

packages/ra-core/src/controller/details/CreateContext.tsx

@@ -0,0 +1,39 @@
+import { createContext } from 'react';
+import { CreateControllerProps } from './useCreateController';
+
+/**
+ * Context to store the result of the useCreateController() hook.
+ *
+ * Use the useCreateContext() hook to read the context. That's what the Create components do in react-admin.
+ *
+ * @example
+ *
+ * import { useCreateController, CreateContextProvider } from 'ra-core';
+ *
+ * const Create = props => {
+ *     const controllerProps = useCreateController(props);
+ *     return (
+ *         <CreateContextProvider value={controllerProps}>
+ *             ...
+ *         </CreateContextProvider>
+ *     );
+ * };
+ */
+export const CreateContext = createContext<CreateControllerProps>({
+    basePath: null,
+    record: null,
+    defaultTitle: null,
+    loaded: null,
+    loading: null,
+    redirect: null,
+    setOnFailure: null,
+    setOnSuccess: null,
+    setTransform: null,
+    resource: null,
+    save: null,
+    saving: null,
+    successMessage: null,
+    version: null,
+});
+
+CreateContext.displayName = 'CreateContext';

packages/ra-core/src/controller/details/CreateContextProvider.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { ReactElement } from 'react';
+import { RecordContextProvider, usePickRecordContext } from '../RecordContext';
+import { CreateContext } from './CreateContext';
+import { CreateControllerProps } from './useCreateController';
+import { SaveContextProvider, usePickSaveContext } from './SaveContext';
+
+/**
+ * Create a Create Context.
+ *
+ * @example
+ *
+ * const MyCreate = (props) => {
+ *     const controllerProps = useCreateController(props);
+ *     return (
+ *         <CreateContextProvider value={controllerProps}>
+ *             <MyCreateView>
+ *         </CreateContextProvider>
+ *     );
+ * };
+ *
+ * const MyCreateView = () => {
+ *     const { record } = useRecordContext();
+ *     // or, to rerender only when the save operation change but not data
+ *     const { saving } = useCreateContext();
+ * }
+ *
+ * @see CreateContext
+ * @see RecordContext
+ */
+export const CreateContextProvider = ({
+    children,
+    value,
+}: {
+    children: ReactElement;
+    value: CreateControllerProps;
+}) => (
+    <CreateContext.Provider value={value}>
+        <SaveContextProvider value={usePickSaveContext(value)}>
+            <RecordContextProvider value={usePickRecordContext(value)}>
+                {children}
+            </RecordContextProvider>
+        </SaveContextProvider>
+    </CreateContext.Provider>
+);

packages/ra-core/src/controller/CreateController.tsx → packages/ra-core/src/controller/details/CreateController.tsx

@@ -1,6 +1,7 @@
-import { Translate } from '../types';
-import { useTranslate } from '../i18n';
-import useCreateController, {
+import { Translate } from '../../types';
+import { useTranslate } from '../../i18n';
+import {
+    useCreateController,
     CreateProps,
     CreateControllerProps,
 } from './useCreateController';
@@ -26,10 +27,8 @@ interface Props extends CreateProps {
  *     </CreateController>
  * );
  */
-const CreateController = ({ children, ...props }: Props) => {
+export const CreateController = ({ children, ...props }: Props) => {
     const controllerProps = useCreateController(props);
     const translate = useTranslate(); // injected for backwards compatibility
     return children({ translate, ...controllerProps });
 };
-
-export default CreateController;

packages/ra-core/src/controller/details/EditBase.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { useEditController } from './useEditController';
+import { EditContextProvider } from './EditContextProvider';
+
+/**
+ * Call useEditController and put the value in a EditContext
+ *
+ * Base class for <Edit> components, without UI.
+ *
+ * Accepts any props accepted by useEditController:
+ * - id: The record identifier
+ * - resource: The resource
+ *
+ * @example // Custom edit layout
+ *
+ * const PostEdit = props => (
+ *     <BaseEdit {...props}>
+ *         <Grid container>
+ *             <Grid item xs={8}>
+ *                 <SimpleForm>
+ *                     ...
+ *                 </SimpleForm>
+ *             </Grid>
+ *             <Grid item xs={4}>
+ *                 Edit instructions...
+ *             </Grid>
+ *         </Grid>
+ *         <div>
+ *             Post related links...
+ *         </div>
+ *     </BaseList>
+ * );
+ */
+export const EditBase = ({ children, ...props }) => (
+    <EditContextProvider value={useEditController(props)}>
+        {children}
+    </EditContextProvider>
+);

packages/ra-core/src/controller/details/EditContext.tsx

@@ -0,0 +1,39 @@
+import { createContext } from 'react';
+import { EditControllerProps } from './useEditController';
+
+/**
+ * Context to store the result of the useEditController() hook.
+ *
+ * Use the useEditContext() hook to read the context. That's what the Edit components do in react-admin.
+ *
+ * @example
+ *
+ * import { useEditController, EditContextProvider } from 'ra-core';
+ *
+ * const Edit = props => {
+ *     const controllerProps = useEditController(props);
+ *     return (
+ *         <EditContextProvider value={controllerProps}>
+ *             ...
+ *         </EditContextProvider>
+ *     );
+ * };
+ */
+export const EditContext = createContext<EditControllerProps>({
+    basePath: null,
+    record: null,
+    defaultTitle: null,
+    loaded: null,
+    loading: null,
+    redirect: null,
+    setOnFailure: null,
+    setOnSuccess: null,
+    setTransform: null,
+    resource: null,
+    save: null,
+    saving: null,
+    successMessage: null,
+    version: null,
+});
+
+EditContext.displayName = 'EditContext';

packages/ra-core/src/controller/details/EditContextProvider.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { ReactElement } from 'react';
+import { RecordContextProvider, usePickRecordContext } from '../RecordContext';
+import { EditContext } from './EditContext';
+import { EditControllerProps } from './useEditController';
+import { SaveContextProvider, usePickSaveContext } from './SaveContext';
+
+/**
+ * Create an Edit Context.
+ *
+ * @example
+ *
+ * const MyEdit = (props) => {
+ *     const controllerProps = useEditController(props);
+ *     return (
+ *         <EditContextProvider value={controllerProps}>
+ *             <MyEditView>
+ *         </EditContextProvider>
+ *     );
+ * };
+ *
+ * const MyEditView = () => {
+ *     const { record } = useRecordContext();
+ *     // or, to rerender only when the save operation change but not data
+ *     const { saving } = useEditContext();
+ * }
+ *
+ * @see EditContext
+ * @see RecordContext
+ */
+export const EditContextProvider = ({
+    children,
+    value,
+}: {
+    children: ReactElement;
+    value: EditControllerProps;
+}) => (
+    <EditContext.Provider value={value}>
+        <SaveContextProvider value={usePickSaveContext(value)}>
+            <RecordContextProvider value={usePickRecordContext(value)}>
+                {children}
+            </RecordContextProvider>
+        </SaveContextProvider>
+    </EditContext.Provider>
+);

packages/ra-core/src/controller/EditController.tsx → packages/ra-core/src/controller/details/EditController.tsx

@@ -1,6 +1,7 @@
-import { Translate } from '../types';
-import { useTranslate } from '../i18n';
-import useEditController, {
+import { Translate } from '../../types';
+import { useTranslate } from '../../i18n';
+import {
+    useEditController,
     EditProps,
     EditControllerProps,
 } from './useEditController';
@@ -26,10 +27,8 @@ interface Props extends EditProps {
  *     </EditController>
  * );
  */
-const EditController = ({ children, ...props }: Props) => {
+export const EditController = ({ children, ...props }: Props) => {
     const controllerProps = useEditController(props);
     const translate = useTranslate(); // injected for backwards compatibility
     return children({ translate, ...controllerProps });
 };
-
-export default EditController;