From d44d7a728179e0f5e9ea0b7734bf48c02f4a4190 Mon Sep 17 00:00:00 2001 From: fzaninotto Date: Fri, 2 Apr 2021 00:13:25 +0200 Subject: [PATCH] Fix Datagrid requires too many props when used standalone Closes #6108 --- docs/List.md | 49 +++++++++---------- examples/simple/src/customRouteLayout.tsx | 4 +- .../src/list/datagrid/Datagrid.tsx | 18 ++++--- .../src/list/datagrid/DatagridBody.tsx | 2 +- .../src/list/datagrid/DatagridHeaderCell.tsx | 7 +-- .../src/list/datagrid/DatagridRow.tsx | 9 ++-- 6 files changed, 45 insertions(+), 44 deletions(-) diff --git a/docs/List.md b/docs/List.md index a3a412174e0..5c0d6cf0f74 100644 --- a/docs/List.md +++ b/docs/List.md @@ -2819,15 +2819,13 @@ export const UserList = ({ permissions, ...props }) => { ### Rendering `` With A Custom Query -You can use the `` component with [custom queries](./Actions.md#usequery-hook), provided you pass the result to a ``: +You can use the `` component with [custom queries](./Actions.md#usequery-hook): {% raw %} ```jsx import keyBy from 'lodash/keyBy' import { useQuery, - ResourceContextProvider, - ListContextProvider, Datagrid, TextField, Pagination, @@ -2836,13 +2834,14 @@ import { const CustomList = () => { const [page, setPage] = useState(1); - const perPage = 50; + const [perPage, setPerPage] = useState(25); + const [sort, setSort] = useState({ field: 'id', order: 'ASC' }) const { data, total, loading, error } = useQuery({ type: 'getList', resource: 'posts', payload: { pagination: { page, perPage }, - sort: { field: 'id', order: 'ASC' }, + sort, filter: {}, } }); @@ -2854,33 +2853,29 @@ const CustomList = () => { return

ERROR: {error}

} return ( - - id), - currentSort: { field: 'id', order: 'ASC' }, - selectedIds: [], - }} - > - - - - - - - + id)} + currentSort={sort} + setSort={(field, order) => setSort({ field, order })} + > + + + + ); } ``` {% endraw %} +**Tip**: If you use the `` prop in this case, you must also set the `basePath` prop to let the `` compute the link to the record pages. + ## Third-Party Components You can find components for react-admin in third-party repositories. diff --git a/examples/simple/src/customRouteLayout.tsx b/examples/simple/src/customRouteLayout.tsx index b18666178d9..761eaeea956 100644 --- a/examples/simple/src/customRouteLayout.tsx +++ b/examples/simple/src/customRouteLayout.tsx @@ -26,13 +26,13 @@ const CustomRouteLayout = () => { Found {total} posts !

diff --git a/packages/ra-ui-materialui/src/list/datagrid/Datagrid.tsx b/packages/ra-ui-materialui/src/list/datagrid/Datagrid.tsx index b813ea10a0d..a5b5cf127c6 100644 --- a/packages/ra-ui-materialui/src/list/datagrid/Datagrid.tsx +++ b/packages/ra-ui-materialui/src/list/datagrid/Datagrid.tsx @@ -147,7 +147,7 @@ const Datagrid: FC = React.forwardRef((props, ref) => { isRowExpandable, ]); - const updateSort = useCallback( + const updateSortCallback = useCallback( event => { event.stopPropagation(); const newField = event.currentTarget.dataset.field; @@ -163,6 +163,8 @@ const Datagrid: FC = React.forwardRef((props, ref) => { [currentSort.field, currentSort.order, setSort] ); + const updateSort = setSort ? updateSortCallback : null; + const handleSelectAll = useCallback( event => { if (event.target.checked) { @@ -184,10 +186,10 @@ const Datagrid: FC = React.forwardRef((props, ref) => { const lastSelected = useRef(null); useEffect(() => { - if (selectedIds.length === 0) { + if (!selectedIds || selectedIds.length === 0) { lastSelected.current = null; } - }, [selectedIds.length]); + }, [JSON.stringify(selectedIds)]); // eslint-disable-line react-hooks/exhaustive-deps const handleToggleItem = useCallback( (id, event) => { @@ -276,7 +278,7 @@ const Datagrid: FC = React.forwardRef((props, ref) => { )} /> )} - {hasBulkActions && ( + {hasBulkActions && selectedIds && ( size?: 'medium' | 'small'; // can be injected when using the component without context basePath?: string; - currentsort?: SortPayload; + currentSort?: SortPayload; data?: RecordMap; ids?: Identifier[]; loaded?: boolean; diff --git a/packages/ra-ui-materialui/src/list/datagrid/DatagridBody.tsx b/packages/ra-ui-materialui/src/list/datagrid/DatagridBody.tsx index c4d3d99468d..26517af90a5 100644 --- a/packages/ra-ui-materialui/src/list/datagrid/DatagridBody.tsx +++ b/packages/ra-ui-materialui/src/list/datagrid/DatagridBody.tsx @@ -49,7 +49,7 @@ const DatagridBody: FC = React.forwardRef( [classes.clickableRow]: rowClick, }), expand, - hasBulkActions, + hasBulkActions: hasBulkActions && selectedIds, hover, id, key: id, diff --git a/packages/ra-ui-materialui/src/list/datagrid/DatagridHeaderCell.tsx b/packages/ra-ui-materialui/src/list/datagrid/DatagridHeaderCell.tsx index 59af2028ea9..1465e562f31 100644 --- a/packages/ra-ui-materialui/src/list/datagrid/DatagridHeaderCell.tsx +++ b/packages/ra-ui-materialui/src/list/datagrid/DatagridHeaderCell.tsx @@ -52,7 +52,8 @@ export const DatagridHeaderCell = ( variant="head" {...rest} > - {field.props.sortable !== false && + {updateSort && + field.props.sortable !== false && (field.props.sortBy || field.props.source) ? ( void; + updateSort?: (event: any) => void; } export default memo( diff --git a/packages/ra-ui-materialui/src/list/datagrid/DatagridRow.tsx b/packages/ra-ui-materialui/src/list/datagrid/DatagridRow.tsx index 2259dfcf7d2..80d4f8a15e1 100644 --- a/packages/ra-ui-materialui/src/list/datagrid/DatagridRow.tsx +++ b/packages/ra-ui-materialui/src/list/datagrid/DatagridRow.tsx @@ -110,14 +110,16 @@ const DatagridRow: FC = React.forwardRef((props, ref) => { const effect = typeof rowClick === 'function' - ? await rowClick(id, basePath, record) + ? await rowClick(id, basePath || `/${resource}`, record) : rowClick; switch (effect) { case 'edit': - history.push(linkToRecord(basePath, id)); + history.push(linkToRecord(basePath || `/${resource}`, id)); return; case 'show': - history.push(linkToRecord(basePath, id, 'show')); + history.push( + linkToRecord(basePath || `/${resource}`, id, 'show') + ); return; case 'expand': handleToggleExpand(event); @@ -137,6 +139,7 @@ const DatagridRow: FC = React.forwardRef((props, ref) => { handleToggleSelection, id, record, + resource, rowClick, ] );