From 652d5d8a2d1a84510fdcd24463db0882ed064af4 Mon Sep 17 00:00:00 2001 From: fzaninotto Date: Fri, 2 Apr 2021 00:10:47 +0200 Subject: [PATCH] Revert "Fix Datagrid requires too many props when used standalone" This reverts commit 7108205bf926a4879f5200508bf97c2410ef6bb8. --- 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, 44 insertions(+), 45 deletions(-) diff --git a/docs/List.md b/docs/List.md index 5c0d6cf0f74..a3a412174e0 100644 --- a/docs/List.md +++ b/docs/List.md @@ -2819,13 +2819,15 @@ export const UserList = ({ permissions, ...props }) => { ### Rendering `` With A Custom Query -You can use the `` component with [custom queries](./Actions.md#usequery-hook): +You can use the `` component with [custom queries](./Actions.md#usequery-hook), provided you pass the result to a ``: {% raw %} ```jsx import keyBy from 'lodash/keyBy' import { useQuery, + ResourceContextProvider, + ListContextProvider, Datagrid, TextField, Pagination, @@ -2834,14 +2836,13 @@ import { const CustomList = () => { const [page, setPage] = useState(1); - const [perPage, setPerPage] = useState(25); - const [sort, setSort] = useState({ field: 'id', order: 'ASC' }) + const perPage = 50; const { data, total, loading, error } = useQuery({ type: 'getList', resource: 'posts', payload: { pagination: { page, perPage }, - sort, + sort: { field: 'id', order: 'ASC' }, filter: {}, } }); @@ -2853,29 +2854,33 @@ const CustomList = () => { return

ERROR: {error}

} return ( - id)} - currentSort={sort} - setSort={(field, order) => setSort({ field, order })} - > - - - - + + id), + currentSort: { field: 'id', order: 'ASC' }, + selectedIds: [], + }} + > + + + + + + + ); } ``` {% 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 761eaeea956..b18666178d9 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 a5b5cf127c6..b813ea10a0d 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 updateSortCallback = useCallback( + const updateSort = useCallback( event => { event.stopPropagation(); const newField = event.currentTarget.dataset.field; @@ -163,8 +163,6 @@ 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) { @@ -186,10 +184,10 @@ const Datagrid: FC = React.forwardRef((props, ref) => { const lastSelected = useRef(null); useEffect(() => { - if (!selectedIds || selectedIds.length === 0) { + if (selectedIds.length === 0) { lastSelected.current = null; } - }, [JSON.stringify(selectedIds)]); // eslint-disable-line react-hooks/exhaustive-deps + }, [selectedIds.length]); const handleToggleItem = useCallback( (id, event) => { @@ -278,7 +276,7 @@ const Datagrid: FC = React.forwardRef((props, ref) => { )} /> )} - {hasBulkActions && selectedIds && ( + {hasBulkActions && ( 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 26517af90a5..c4d3d99468d 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 && selectedIds, + hasBulkActions, 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 1465e562f31..59af2028ea9 100644 --- a/packages/ra-ui-materialui/src/list/datagrid/DatagridHeaderCell.tsx +++ b/packages/ra-ui-materialui/src/list/datagrid/DatagridHeaderCell.tsx @@ -52,8 +52,7 @@ export const DatagridHeaderCell = ( variant="head" {...rest} > - {updateSort && - field.props.sortable !== false && + {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 80d4f8a15e1..2259dfcf7d2 100644 --- a/packages/ra-ui-materialui/src/list/datagrid/DatagridRow.tsx +++ b/packages/ra-ui-materialui/src/list/datagrid/DatagridRow.tsx @@ -110,16 +110,14 @@ const DatagridRow: FC = React.forwardRef((props, ref) => { const effect = typeof rowClick === 'function' - ? await rowClick(id, basePath || `/${resource}`, record) + ? await rowClick(id, basePath, record) : rowClick; switch (effect) { case 'edit': - history.push(linkToRecord(basePath || `/${resource}`, id)); + history.push(linkToRecord(basePath, id)); return; case 'show': - history.push( - linkToRecord(basePath || `/${resource}`, id, 'show') - ); + history.push(linkToRecord(basePath, id, 'show')); return; case 'expand': handleToggleExpand(event); @@ -139,7 +137,6 @@ const DatagridRow: FC = React.forwardRef((props, ref) => { handleToggleSelection, id, record, - resource, rowClick, ] );