diff --git a/packages/ra-core/src/controller/field/ReferenceManyFieldController.tsx b/packages/ra-core/src/controller/field/ReferenceManyFieldController.tsx index f627d7b962a..f6ce242ac25 100644 --- a/packages/ra-core/src/controller/field/ReferenceManyFieldController.tsx +++ b/packages/ra-core/src/controller/field/ReferenceManyFieldController.tsx @@ -91,7 +91,7 @@ export const ReferenceManyFieldController: FunctionComponent = ({ sort: initialSort, children, }) => { - const { sort, sortBy } = useSort(initialSort); + const { sort, setSort } = useSort(initialSort); const { page, perPage, setPage, setPerPage } = usePagination( initialPerPage ); @@ -124,7 +124,7 @@ export const ReferenceManyFieldController: FunctionComponent = ({ referenceBasePath, setPage, setPerPage, - setSort: sortBy, + setSort, total, }); }; diff --git a/packages/ra-core/src/controller/field/index.ts b/packages/ra-core/src/controller/field/index.ts index 9022a0d35e0..50d5c159967 100644 --- a/packages/ra-core/src/controller/field/index.ts +++ b/packages/ra-core/src/controller/field/index.ts @@ -2,10 +2,12 @@ import ReferenceArrayFieldController from './ReferenceArrayFieldController'; import ReferenceFieldController from './ReferenceFieldController'; import ReferenceManyFieldController from './ReferenceManyFieldController'; import useReference from './useReference'; +import useReferenceMany from './useReferenceMany'; export { ReferenceArrayFieldController, ReferenceFieldController, useReference, + useReferenceMany, ReferenceManyFieldController, }; diff --git a/packages/ra-core/src/controller/index.ts b/packages/ra-core/src/controller/index.ts index 424c6954cad..af47d10505f 100644 --- a/packages/ra-core/src/controller/index.ts +++ b/packages/ra-core/src/controller/index.ts @@ -8,6 +8,8 @@ import ListController from './ListController'; import ShowController from './ShowController'; import useRecordSelection from './useRecordSelection'; import useVersion from './useVersion'; +import useSort from './useSort'; +import usePagination from './usePagination'; export { getListControllerProps, sanitizeListRestProps, @@ -17,6 +19,8 @@ export { ShowController, useRecordSelection, useVersion, + useSort, + usePagination, }; export * from './field'; diff --git a/packages/ra-core/src/controller/useSort.ts b/packages/ra-core/src/controller/useSort.ts index 03acbc5499b..e6911e791c6 100644 --- a/packages/ra-core/src/controller/useSort.ts +++ b/packages/ra-core/src/controller/useSort.ts @@ -6,6 +6,11 @@ import { } from '../reducer/admin/resource/list/queryReducer'; import { Sort } from '../types'; +interface SortProps { + setSort: (field: string) => void; + sort: Sort; +} + const sortReducer = (state: Sort, field: string | Sort): Sort => { if (typeof field !== 'string') { return field; @@ -17,7 +22,9 @@ const sortReducer = (state: Sort, field: string | Sort): Sort => { return { field, order }; }; -export default (initialSort: Sort = { field: 'id', order: 'DESC' }) => { +export default ( + initialSort: Sort = { field: 'id', order: 'DESC' } +): SortProps => { const [sort, dispatch] = useReducer(sortReducer, initialSort); useEffect(() => dispatch(initialSort), [ initialSort.field, @@ -25,7 +32,7 @@ export default (initialSort: Sort = { field: 'id', order: 'DESC' }) => { ]); return { - sortBy: (field: string) => dispatch(field), + setSort: (field: string) => dispatch(field), sort, }; }; diff --git a/packages/ra-ui-materialui/src/field/ReferenceManyField.js b/packages/ra-ui-materialui/src/field/ReferenceManyField.js index b31728376e1..5601378cdf4 100644 --- a/packages/ra-ui-materialui/src/field/ReferenceManyField.js +++ b/packages/ra-ui-materialui/src/field/ReferenceManyField.js @@ -1,6 +1,6 @@ import React, { Fragment, cloneElement, Children } from 'react'; import PropTypes from 'prop-types'; -import { ReferenceManyFieldController, ComponentPropType } from 'ra-core'; +import { useSort, usePagination, useReferenceMany, ComponentPropType } from 'ra-core'; export const ReferenceManyFieldView = ({ children, @@ -106,22 +106,65 @@ ReferenceManyFieldView.propTypes = { * ... * */ -export const ReferenceManyField = ({ children, ...props }) => { +export const ReferenceManyField = ({ + children, + sort: initialSort, + perPage: initialPerPage, + resource, + reference, + record, + target, + filter, + source, + basePath, + ...props +}) => { if (React.Children.count(children) !== 1) { throw new Error( ' only accepts a single child (like )' ); } + const { sort, setSort } = useSort(initialSort); + const { page, perPage, setPage, setPerPage } = usePagination(initialPerPage); + + const { + data, + ids, + loadedOnce, + referenceBasePath, + total, + } = useReferenceMany({ + resource, + reference, + record, + target, + filter, + source, + basePath, + page, + perPage, + sort, + }); return ( - - {controllerProps => ( - - )} - + ); };