Introduce ReferenceArrayInputContext

Author: djhi

packages/ra-core/src/controller/input/ReferenceArrayInputContext.ts

@@ -0,0 +1,29 @@
+import { createContext } from 'react';
+import { PaginationPayload, Record, SortPayload } from '../../types';
+
+/**
+ * Context which provides access to the useReferenceArrayInput features.
+ *
+ * @example
+ * const ReferenceArrayInput = ({ children }) => {
+ *     const controllerProps = useReferenceArrayInputController();
+ *     return (
+ *         <ReferenceArrayInputContextProvider value={controllerProps}>
+ *             {children}
+ *         </ReferenceArrayInputContextProvider>
+ *     )
+ * }
+ */
+export const ReferenceArrayInputContext = createContext(undefined);
+
+export interface ReferenceArrayInputContextValue {
+    choices: Record[];
+    error?: any;
+    warning?: any;
+    loading: boolean;
+    loaded: boolean;
+    setFilter: (filter: any) => void;
+    setPagination: (pagination: PaginationPayload) => void;
+    setSort: (sort: SortPayload) => void;
+    setSortForList: (sort: string, order?: string) => void;
+}

packages/ra-core/src/controller/input/ReferenceArrayInputContextProvider.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import {
+    ReferenceArrayInputContext,
+    ReferenceArrayInputContextValue,
+} from './ReferenceArrayInputContext';
+
+/**
+ * Provider for the context which provides access to the useReferenceArrayInput features.
+ *
+ * @example
+ * const ReferenceArrayInput = ({ children }) => {
+ *     const controllerProps = useReferenceArrayInputController();
+ *     return (
+ *         <ReferenceArrayInputContextProvider value={controllerProps}>
+ *             {children}
+ *         </ReferenceArrayInputContextProvider>
+ *     )
+ * }
+ */
+export const ReferenceArrayInputContextProvider = ({
+    children,
+    value,
+}: {
+    children: ReactNode;
+    value: ReferenceArrayInputContextValue;
+}) => (
+    <ReferenceArrayInputContext.Provider value={value}>
+        {children}
+    </ReferenceArrayInputContext.Provider>
+);

packages/ra-core/src/controller/input/ReferenceArrayInputController.tsx

@@ -2,7 +2,7 @@ import { ComponentType, ReactElement, useCallback } from 'react';
 import debounce from 'lodash/debounce';
 
 import { Record, SortPayload, PaginationPayload } from '../../types';
-import useReferenceArrayInputController from './useReferenceArrayInputController';
+import { useReferenceArrayInputController } from './useReferenceArrayInputController';
 import { ListControllerProps } from '..';
 
 /**

packages/ra-core/src/controller/input/index.ts

@@ -1,19 +1,21 @@
 import ReferenceArrayInputController from './ReferenceArrayInputController';
 import ReferenceInputController from './ReferenceInputController';
-import useReferenceArrayInputController from './useReferenceArrayInputController';
 import {
     getStatusForInput,
     getSelectedReferencesStatus,
     getStatusForArrayInput,
 } from './referenceDataStatus';
 
+export * from './useReferenceArrayInputController';
 export * from './useReferenceInputController';
+export * from './ReferenceArrayInputContext';
+export * from './ReferenceArrayInputContextProvider';
+export * from './useReferenceArrayInputContext';
 
 export {
     getStatusForInput,
     getSelectedReferencesStatus,
     getStatusForArrayInput,
     ReferenceArrayInputController,
     ReferenceInputController,
-    useReferenceArrayInputController,
 };

packages/ra-core/src/controller/input/useReferenceArrayInputContext.ts

@@ -0,0 +1,22 @@
+import { useContext } from 'react';
+import {
+    ReferenceArrayInputContext,
+    ReferenceArrayInputContextValue,
+} from './ReferenceArrayInputContext';
+
+/**
+ * Hook to get the ReferenceArrayInputContext.
+ */
+export const useReferenceArrayInputContext = <
+    T extends ReferenceArrayInputContextValue = ReferenceArrayInputContextValue
+>(
+    props: T
+): ReferenceArrayInputContextValue => {
+    const context = useContext(ReferenceArrayInputContext);
+
+    if (props.choices) {
+        return props;
+    }
+
+    return context;
+};

packages/ra-core/src/controller/input/useReferenceArrayInputController.ts

@@ -1,16 +1,8 @@
 import { useMemo, useState, useEffect, useRef, useCallback } from 'react';
 import { useSelector } from 'react-redux';
 import isEqual from 'lodash/isEqual';
-import get from 'lodash/get';
-import sortBy from 'lodash/sortBy';
 import difference from 'lodash/difference';
-import {
-    PaginationPayload,
-    Record,
-    SortPayload,
-    ReduxState,
-    Identifier,
-} from '../../types';
+import { Record, SortPayload, ReduxState, Identifier } from '../../types';
 import { useGetMany } from '../../dataProvider';
 import { FieldInputProps, useForm } from 'react-final-form';
 import useGetMatching from '../../dataProvider/useGetMatching';
@@ -20,7 +12,7 @@ import { useResourceContext } from '../../core';
 import { usePaginationState, useSortState } from '..';
 import { ListControllerProps } from '../useListController';
 import { indexById, removeEmpty, useSafeSetState } from '../../util';
-import { SORT_DESC } from '../../reducer/admin/resource/list/queryReducer';
+import { ReferenceArrayInputContextValue } from './ReferenceArrayInputContext';
 
 /**
  * Prepare data for the ReferenceArrayInput components
@@ -46,9 +38,9 @@ import { SORT_DESC } from '../../reducer/admin/resource/list/queryReducer';
  *
  * @return {Object} controllerProps Fetched data and callbacks for the ReferenceArrayInput components
  */
-const useReferenceArrayInputController = (
-    props: Option
-): ReferenceArrayInputProps & Omit<ListControllerProps, 'setSort'> => {
+export const useReferenceArrayInputController = (
+    props: UseReferenceArrayInputOptions
+): ReferenceArrayInputContextValue & Omit<ListControllerProps, 'setSort'> => {
     const {
         basePath,
         filter: defaultFilter,
@@ -340,30 +332,7 @@ const mergeReferences = (ref1: Record[], ref2: Record[]): Record[] => {
     return res;
 };
 
-export default useReferenceArrayInputController;
-
-/**
- * @typedef ReferenceArrayProps
- * @type {Object}
- * @property {Array} ids the list of ids.
- * @property {Object} data Object holding the reference data by their ids
- * @property {Object} error the error returned by the dataProvider
- * @property {boolean} loading is the reference currently loading
- * @property {boolean} loaded has the reference already been loaded
- */
-interface ReferenceArrayInputProps {
-    choices: Record[];
-    error?: any;
-    warning?: any;
-    loading: boolean;
-    loaded: boolean;
-    setFilter: (filter: any) => void;
-    setPagination: (pagination: PaginationPayload) => void;
-    setSort: (sort: SortPayload) => void;
-    setSortForList: (sort: string, order?: string) => void;
-}
-
-interface Option {
+export interface UseReferenceArrayInputOptions {
     basePath?: string;
     filter?: any;
     filterToQuery?: (filter: any) => any;

packages/ra-ui-materialui/src/input/ReferenceArrayInput.tsx

@@ -11,6 +11,7 @@ import {
     PaginationPayload,
     Translate,
     ResourceContextProvider,
+    ReferenceArrayInputContextProvider,
     ListContextProvider,
 } from 'ra-core';
 
@@ -137,40 +138,37 @@ const ReferenceArrayInput = ({
         ...props,
     });
 
-    const {
-        setSort,
-        setSortForList,
-        ...controllerProps
-    } = useReferenceArrayInputController({
+    const controllerProps = useReferenceArrayInputController({
         ...props,
         input,
     });
 
     const listContext = useMemo(
         () => ({
             ...controllerProps,
-            setSort: setSortForList,
+            setSort: controllerProps.setSortForList,
         }),
-        [controllerProps, setSortForList]
+        [controllerProps]
     );
 
     const translate = useTranslate();
 
     return (
         <ResourceContextProvider value={props.reference}>
-            <ListContextProvider value={listContext}>
-                <ReferenceArrayInputView
-                    id={id}
-                    input={input}
-                    isRequired={isRequired}
-                    meta={meta}
-                    translate={translate}
-                    children={children}
-                    setSort={setSort}
-                    {...props}
-                    {...controllerProps}
-                />
-            </ListContextProvider>
+            <ReferenceArrayInputContextProvider value={controllerProps}>
+                <ListContextProvider value={listContext}>
+                    <ReferenceArrayInputView
+                        id={id}
+                        input={input}
+                        isRequired={isRequired}
+                        meta={meta}
+                        translate={translate}
+                        children={children}
+                        {...props}
+                        {...controllerProps}
+                    />
+                </ListContextProvider>
+            </ReferenceArrayInputContextProvider>
         </ResourceContextProvider>
     );
 };