From 24e21231a8599b7209610a80e2043451827d65a6 Mon Sep 17 00:00:00 2001 From: Sven van de Scheur Date: Tue, 20 Aug 2024 17:13:00 +0200 Subject: [PATCH] :sparkles: - feat: allow passing allPagesSelectedManaged to control whether to automatically select all rows when select all pages is checked in DataGrid copmonent --- src/components/data/datagrid/datagrid.tsx | 46 ++++++++++++++++++++--- src/components/form/input/input.scss | 7 ++++ 2 files changed, 47 insertions(+), 6 deletions(-) diff --git a/src/components/data/datagrid/datagrid.tsx b/src/components/data/datagrid/datagrid.tsx index a29bd47..2385136 100644 --- a/src/components/data/datagrid/datagrid.tsx +++ b/src/components/data/datagrid/datagrid.tsx @@ -106,15 +106,25 @@ export type DataGridProps = { allowSelectAll?: boolean; /** - * Whether a select all checkbox should be shown (when `selectable=true`) allowing to select all pages. - * NOTE: No actual implementation of multi-page selection (other than calling `onSelectAllPages(selected)`) and - * receiving `allPagesSelected` is provided. + * Whether a select all checkbox should be shown (when `selectable=true`) allowing to select all pages. If + * `allPagesSelectedManaged=true` rows are considered selected when `allPagesSelected=true`. Clicking the + * "select all pages" checkbox calls `onSelectAllPages(selected)`. */ allowSelectAllPages?: boolean; - /** Whether all pages are selected. */ + /** + * Whether all pages are selected. If `allPagesSelectedManaged=true`, setting this to `true` selects all rows. If + * `allPagesSelectedManaged=false`. + */ allPagesSelected?: boolean; + /** + * Whether all rows are considered to be selected when `allowSelectAllPages=true`. If support for excluding rows from + * the multi-page selection is required: this should be set to false and the selected rows should be provided as part + * of the `selected` prop instead. + */ + allPagesSelectedManaged?: boolean; + /** The table layout algorithm. */ tableLayout?: "auto" | "fixed"; @@ -229,6 +239,7 @@ export const DataGrid: React.FC = ({ allowSelectAll = true, allowSelectAllPages = false, allPagesSelected = false, + allPagesSelectedManaged = true, fieldsSelectable = false, selected, equalityChecker = (item1, item2) => item1 === item2, @@ -282,6 +293,11 @@ export const DataGrid: React.FC = ({ selected && setSelectedState(selected); }, [selected]); + // Update selectedState when selected prop changes. + useEffect(() => { + setAllPagesSelectedState(allPagesSelected); + }, [allPagesSelected]); + // Update sortState when sort prop changes. useEffect(() => { if (typeof sort === "string") { @@ -324,7 +340,9 @@ export const DataGrid: React.FC = ({ const _pageSize = pageSize || _count; const _pages = Math.ceil(_count / _pageSize); const _selectedRows = - (allPagesSelectedState ? objectList : selectedState) || []; + (allPagesSelectedManaged && allPagesSelectedState + ? objectList + : selectedState) || []; const filteredObjectList = filterState ? filterAttributeDataArray(objectList, filterState) @@ -437,6 +455,7 @@ export const DataGrid: React.FC = ({ allowSelectAll={allowSelectAll} allowSelectAllPages={allowSelectAllPages} allPagesSelected={allPagesSelectedState} + allPagesSelectedManaged={allPagesSelectedManaged} selectedRows={_selectedRows} selectionActions={selectionActions} title={title} @@ -494,6 +513,8 @@ export const DataGrid: React.FC = ({ setEditingState={setEditingState} selectable={selectable} selectedRows={_selectedRows} + allPagesSelected={allPagesSelectedState} + allPagesSelectedManaged={allPagesSelectedManaged} equalityChecker={equalityChecker} sortDirection={sortDirection} sortField={sortField} @@ -533,6 +554,7 @@ export type DataGridCaptionProps = { allowSelectAll: boolean; allowSelectAllPages: boolean; allPagesSelected: boolean; + allPagesSelectedManaged: boolean; selectedRows: AttributeData[] | null; selectionActions?: ButtonProps[]; title: React.ReactNode; @@ -556,6 +578,7 @@ export const DataGridCaption: React.FC = ({ allowSelectAll, allowSelectAllPages, allPagesSelected, + allPagesSelectedManaged, selectionActions, selectedRows, title, @@ -628,6 +651,7 @@ export const DataGridCaption: React.FC = ({ onSelectAll(!allSelected)} labelSelect={labelSelectAll} pages={pages} @@ -777,7 +801,9 @@ export const DataGridHeading: React.FC = ({ return ( - {selectable && } + {selectable && ( + + )} {renderableFields.map((field) => ( void; selectable: boolean; selectedRows: AttributeData[]; + allPagesSelected: boolean; + allPagesSelectedManaged: boolean; sortDirection: "ASC" | "DESC" | undefined; sortField: string | undefined; urlFields: string[]; @@ -928,6 +956,8 @@ export const DataGridBody: React.FC = ({ renderableRows, selectable, selectedRows, + allPagesSelected, + allPagesSelectedManaged, equalityChecker = (item1, item2) => item1 === item2, setEditingState, sortDirection, @@ -958,6 +988,7 @@ export const DataGridBody: React.FC = ({ equalityChecker(element, rowData), ) || false } + disabled={allPagesSelectedManaged && allPagesSelected} count={count} handleSelect={handleSelect} labelSelect={labelSelect} @@ -1285,6 +1316,7 @@ export type DataGridSelectionCheckboxProps = { amountSelected: number; checked: boolean; count: DataGridProps["count"]; + disabled?: boolean; handleSelect: (attributeData: AttributeData) => void; sortedObjectList: AttributeData[]; labelSelect?: string; @@ -1301,6 +1333,7 @@ export const DataGridSelectionCheckbox: React.FC< > = ({ amountSelected, checked, + disabled = false, count, handleSelect, labelSelect, @@ -1366,6 +1399,7 @@ export const DataGridSelectionCheckbox: React.FC< return ( handleSelect(rowData || {})} aria-label={label} > diff --git a/src/components/form/input/input.scss b/src/components/form/input/input.scss index 457b592..20281c4 100644 --- a/src/components/form/input/input.scss +++ b/src/components/form/input/input.scss @@ -16,6 +16,13 @@ width: min(320px, 100%); max-width: 100%; + &:disabled, + &--disabled, + &--muted { + color: var(--typography-color-muted); + opacity: 0.4; + } + &::placeholder { color: var(--typography-color-muted); }