From c37366409946764dde365ff185c5adec3c12963e Mon Sep 17 00:00:00 2001 From: Fran McDade Date: Wed, 29 May 2024 17:06:05 +1000 Subject: [PATCH] feat: row selection should clear when entity list is filtered (#84) --- src/components/Table/common/utils.ts | 7 +++--- .../HeadSelectionCell/headSelectionCell.tsx | 8 +++---- src/components/Table/table.tsx | 5 ++++ src/components/TableCreator/tableCreator.tsx | 5 +++- src/providers/exploreState.tsx | 2 ++ src/providers/exploreState/utils.ts | 24 +++++++++++++++++++ src/views/ExploreView/exploreView.tsx | 3 ++- 7 files changed, 45 insertions(+), 9 deletions(-) diff --git a/src/components/Table/common/utils.ts b/src/components/Table/common/utils.ts index 9514cdef..ac23a9c3 100644 --- a/src/components/Table/common/utils.ts +++ b/src/components/Table/common/utils.ts @@ -341,12 +341,13 @@ function getVisibleRowsTableData(rows: Row[]): TableData[][] { */ export function isAnyRowSelected(table: Table): boolean { const { - getIsAllRowsSelected, - getIsSomeRowsSelected, + getIsAllPageRowsSelected, + getIsSomePageRowsSelected, options: { enableRowSelection }, } = table; return Boolean( - enableRowSelection && (getIsSomeRowsSelected() || getIsAllRowsSelected()) + enableRowSelection && + (getIsSomePageRowsSelected() || getIsAllPageRowsSelected()) ); } diff --git a/src/components/Table/components/TableHead/components/HeadSelectionCell/headSelectionCell.tsx b/src/components/Table/components/TableHead/components/HeadSelectionCell/headSelectionCell.tsx index 13b28a0c..76c5648d 100644 --- a/src/components/Table/components/TableHead/components/HeadSelectionCell/headSelectionCell.tsx +++ b/src/components/Table/components/TableHead/components/HeadSelectionCell/headSelectionCell.tsx @@ -14,16 +14,16 @@ export const HeadSelectionCell = ({ tableInstance, }: HeadSelectionCellProps): JSX.Element => { const { - getIsAllRowsSelected, - getIsSomeRowsSelected, + getIsAllPageRowsSelected, + getIsSomePageRowsSelected, getToggleAllRowsSelectedHandler, } = tableInstance; return ( } icon={} - indeterminate={getIsSomeRowsSelected()} + indeterminate={getIsSomePageRowsSelected()} indeterminateIcon={} onChange={getToggleAllRowsSelectedHandler()} /> diff --git a/src/components/Table/table.tsx b/src/components/Table/table.tsx index 024bca93..3597ec33 100644 --- a/src/components/Table/table.tsx +++ b/src/components/Table/table.tsx @@ -14,6 +14,7 @@ import { useReactTable, VisibilityState, } from "@tanstack/react-table"; +import { CoreOptions } from "@tanstack/table-core"; import React, { useEffect } from "react"; import { track } from "../../common/analytics/analytics"; import { @@ -52,6 +53,7 @@ import { GridTable } from "./table.styles"; export interface TableProps { columns: ColumnDef[]; count?: number; + getRowId?: CoreOptions["getRowId"]; initialState: InitialTableState; items: T[]; listView?: ListViewConfig; @@ -68,6 +70,7 @@ export interface TableProps { * Uncontrolled table will take advantage of React Table's state and will be used for static loads. * @param tableProps - Set of props required for displaying the table. * @param tableProps.columns - Set of columns to display. + * @param tableProps.getRowId - Function to customize the row ID. * @param tableProps.initialState - Initial table state. * @param tableProps.items - Row data to display. * @param tableProps.listView - List view configuration. @@ -76,6 +79,7 @@ export interface TableProps { */ export const TableComponent = ({ columns, + getRowId, initialState, items, listView, @@ -160,6 +164,7 @@ TableProps): JSX.Element => { : undefined, getFilteredRowModel: clientFiltering ? getFilteredRowModel() : undefined, getPaginationRowModel: getPaginationRowModel(), + getRowId, getSortedRowModel: clientFiltering ? getSortedRowModel() : undefined, initialState, manualPagination: clientFiltering, diff --git a/src/components/TableCreator/tableCreator.tsx b/src/components/TableCreator/tableCreator.tsx index a00e84f5..4f00b886 100644 --- a/src/components/TableCreator/tableCreator.tsx +++ b/src/components/TableCreator/tableCreator.tsx @@ -1,5 +1,5 @@ import { CellContext, ColumnDef, ColumnSort } from "@tanstack/react-table"; -import { HeaderContext, RowData } from "@tanstack/table-core"; +import { CoreOptions, HeaderContext, RowData } from "@tanstack/table-core"; import React, { useMemo } from "react"; import { Pagination } from "../../common/entities"; import { ColumnConfig, ListViewConfig } from "../../config/entities"; @@ -21,6 +21,7 @@ import { TableCreator as TableCreatorContainer } from "./tableCreator.styles"; export interface TableCreatorProps { columns: ColumnConfig[]; defaultSort: ColumnSort | undefined; + getRowId?: CoreOptions["getRowId"]; items: T[]; listView?: ListViewConfig; loading?: boolean; @@ -54,6 +55,7 @@ const createRowSelectionCell = () => export const TableCreator = ({ columns, defaultSort, + getRowId, items, listView, loading, @@ -97,6 +99,7 @@ export const TableCreator = ({ columns={columnDefs} count={pageCount} + getRowId={getRowId} initialState={initialState} items={items} listView={listView} diff --git a/src/providers/exploreState.tsx b/src/providers/exploreState.tsx index 3a06f1ed..f625ad50 100644 --- a/src/providers/exploreState.tsx +++ b/src/providers/exploreState.tsx @@ -50,6 +50,7 @@ import { getFilterCount, patchEntityListItems, resetPage, + resetRowSelection, updateEntityPageState, updateEntityPageStateSorting, updateEntityStateByCategoryGroupConfigKey, @@ -611,6 +612,7 @@ function exploreReducer( }); return { ...state, + entityPageState: resetRowSelection(state), filterCount: getFilterCount(filterState), filterState, paginationState: resetPage(state.paginationState), diff --git a/src/providers/exploreState/utils.ts b/src/providers/exploreState/utils.ts index e1a05211..7fc3deea 100644 --- a/src/providers/exploreState/utils.ts +++ b/src/providers/exploreState/utils.ts @@ -155,6 +155,30 @@ export function resetPage(paginationState: PaginationState): PaginationState { return nextPaginationState; } +/** + * Resets row selection for the current entity and entities that share the same category group config key. + * @param state - Explore state. + * @returns entity page state mapper with row selection reset. + */ +export function resetRowSelection(state: ExploreState): EntityPageStateMapper { + const categoryGroupConfigKey = getEntityCategoryGroupConfigKey( + state.tabValue, + state.entityPageState + ); + return Object.entries(state.entityPageState).reduce( + (acc, [entityPath, entityPageState]) => { + if (entityPageState.categoryGroupConfigKey === categoryGroupConfigKey) { + return { + ...acc, + [entityPath]: { ...entityPageState, rowSelection: {} }, + }; + } + return { ...acc, [entityPath]: entityPageState }; + }, + {} as EntityPageStateMapper + ); +} + /** * Sets entity state for the given category group config key. * @param categoryGroupConfigKey - Category group config key. diff --git a/src/views/ExploreView/exploreView.tsx b/src/views/ExploreView/exploreView.tsx index 5b12cfee..d63d8eb4 100644 --- a/src/views/ExploreView/exploreView.tsx +++ b/src/views/ExploreView/exploreView.tsx @@ -292,7 +292,7 @@ function renderList( relatedListItems, tabValue, } = exploreState; - const { list, listView } = entityConfig; + const { getId: getRowId, list, listView } = entityConfig; const { columns: columnsConfig, defaultSort } = list; if (!exploreState || !tabValue) { @@ -309,6 +309,7 @@ function renderList(