diff --git a/packages/react-table/src/components/Table/SelectColumn.tsx b/packages/react-table/src/components/Table/SelectColumn.tsx index 18f20efef34..08c5e835f8c 100644 --- a/packages/react-table/src/components/Table/SelectColumn.tsx +++ b/packages/react-table/src/components/Table/SelectColumn.tsx @@ -21,6 +21,8 @@ export interface SelectColumnProps { id?: string; /** name for the input element - required by Radio component */ name?: string; + /** Whether the checkbox should be in an indeterminate state */ + isIndeterminate?: boolean; } export const SelectColumn: React.FunctionComponent = ({ @@ -33,6 +35,7 @@ export const SelectColumn: React.FunctionComponent = ({ tooltipProps, id, name, + isIndeterminate, ...props }: SelectColumnProps) => { const inputRef = createRef(); @@ -41,6 +44,15 @@ export const SelectColumn: React.FunctionComponent = ({ onSelect && onSelect(event); }; + // PatternFly Checkbox supports indeterminate via isChecked: null + const checkboxProps = { + ...props, + id, + ref: inputRef, + onChange: handleChange, + ...(isIndeterminate && { isChecked: null }) + }; + const commonProps = { ...props, id, @@ -51,7 +63,7 @@ export const SelectColumn: React.FunctionComponent = ({ const content = ( {selectVariant === RowSelectVariant.checkbox ? ( - + ) : ( )} diff --git a/packages/react-table/src/components/Table/TableTypes.tsx b/packages/react-table/src/components/Table/TableTypes.tsx index 1704c795c69..994576f7040 100644 --- a/packages/react-table/src/components/Table/TableTypes.tsx +++ b/packages/react-table/src/components/Table/TableTypes.tsx @@ -107,6 +107,7 @@ export interface IColumn { allRowsSelected?: boolean; allRowsExpanded?: boolean; isHeaderSelectDisabled?: boolean; + isIndeterminate?: boolean; onFavorite?: OnFavorite; favoriteButtonProps?: ButtonProps; variant?: 'compact'; diff --git a/packages/react-table/src/components/Table/Th.tsx b/packages/react-table/src/components/Table/Th.tsx index af6431e59c9..8bbfb788117 100644 --- a/packages/react-table/src/components/Table/Th.tsx +++ b/packages/react-table/src/components/Table/Th.tsx @@ -158,7 +158,8 @@ const ThBase: React.FunctionComponent = ({ onSelect: select?.onSelect, selectVariant: 'checkbox', allRowsSelected: select.isSelected, - isHeaderSelectDisabled: !!select.isHeaderSelectDisabled + isHeaderSelectDisabled: !!select.isHeaderSelectDisabled, + isIndeterminate: select?.isIndeterminate } }, tooltip: tooltip as string, diff --git a/packages/react-table/src/components/Table/base/types.tsx b/packages/react-table/src/components/Table/base/types.tsx index bee426566f5..d60d430f823 100644 --- a/packages/react-table/src/components/Table/base/types.tsx +++ b/packages/react-table/src/components/Table/base/types.tsx @@ -180,6 +180,8 @@ export interface ThSelectType { onSelect?: OnSelect; /** Whether the cell is selected */ isSelected: boolean; + /** Whether the select checkbox should be in an indeterminate state (some items selected) */ + isIndeterminate?: boolean; /** Flag indicating the select checkbox in the th is disabled */ isHeaderSelectDisabled?: boolean; /** Whether to disable the selection */ diff --git a/packages/react-table/src/components/Table/examples/Table.md b/packages/react-table/src/components/Table/examples/Table.md index cc232178e2a..f0c8cbb18e3 100644 --- a/packages/react-table/src/components/Table/examples/Table.md +++ b/packages/react-table/src/components/Table/examples/Table.md @@ -158,6 +158,14 @@ checking checkboxes will check intermediate rows' checkboxes. ``` +### Selectable with indeterminate state + +This example demonstrates the indeterminate state support for the select-all checkbox. When some (but not all) rows are selected, the header checkbox displays a dash/minus icon to indicate partial selection. + +```ts file="TableSelectableIndeterminate.tsx" + +``` + ### Selectable radio input Similarly to the selectable example above, the radio buttons use the first column. The first header cell is empty, and each body row's first cell has radio button props. diff --git a/packages/react-table/src/components/Table/examples/TableSelectableIndeterminate.tsx b/packages/react-table/src/components/Table/examples/TableSelectableIndeterminate.tsx new file mode 100644 index 00000000000..8f31146b94a --- /dev/null +++ b/packages/react-table/src/components/Table/examples/TableSelectableIndeterminate.tsx @@ -0,0 +1,128 @@ +import { useEffect, useState } from 'react'; +import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table'; + +interface Repository { + name: string; + branches: string; + prs: string; + workspaces: string; + lastCommit: string; +} + +export const TableSelectableIndeterminate: React.FunctionComponent = () => { + // In real usage, this data would come from some external source like an API via props. + const repositories: Repository[] = [ + { name: 'one', branches: 'two', prs: 'a', workspaces: 'four', lastCommit: 'five' }, + { name: 'a', branches: 'two', prs: 'k', workspaces: 'four', lastCommit: 'five' }, + { name: 'b', branches: 'two', prs: 'k', workspaces: 'four', lastCommit: 'five' }, + { name: 'c', branches: 'two', prs: 'k', workspaces: 'four', lastCommit: 'five' }, + { name: 'd', branches: 'two', prs: 'k', workspaces: 'four', lastCommit: 'five' }, + { name: 'e', branches: 'two', prs: 'b', workspaces: 'four', lastCommit: 'five' } + ]; + + const columnNames = { + name: 'Repositories', + branches: 'Branches', + prs: 'Pull requests', + workspaces: 'Workspaces', + lastCommit: 'Last commit' + }; + + const isRepoSelectable = (repo: Repository) => repo.name !== 'a'; // Arbitrary logic for this example + const selectableRepos = repositories.filter(isRepoSelectable); + + // In this example, selected rows are tracked by the repo names from each row. This could be any unique identifier. + // This is to prevent state from being based on row order index in case we later add sorting. + const [selectedRepoNames, setSelectedRepoNames] = useState([]); + const setRepoSelected = (repo: Repository, isSelecting = true) => + setSelectedRepoNames((prevSelected) => { + const otherSelectedRepoNames = prevSelected.filter((r) => r !== repo.name); + return isSelecting && isRepoSelectable(repo) ? [...otherSelectedRepoNames, repo.name] : otherSelectedRepoNames; + }); + const selectAllRepos = (isSelecting = true) => + setSelectedRepoNames(isSelecting ? selectableRepos.map((r) => r.name) : []); + const areAllReposSelected = selectedRepoNames.length === selectableRepos.length; + const areSomeReposSelected = selectedRepoNames.length > 0 && selectedRepoNames.length < selectableRepos.length; + const isRepoSelected = (repo: Repository) => selectedRepoNames.includes(repo.name); + + // To allow shift+click to select/deselect multiple rows + const [recentSelectedRowIndex, setRecentSelectedRowIndex] = useState(null); + const [shifting, setShifting] = useState(false); + + const onSelectRepo = (repo: Repository, rowIndex: number, isSelecting: boolean) => { + // If the user is shift + selecting the checkboxes, then all intermediate checkboxes should be selected + if (shifting && recentSelectedRowIndex !== null) { + const numberSelected = rowIndex - recentSelectedRowIndex; + const intermediateIndexes = + numberSelected > 0 + ? Array.from(new Array(numberSelected + 1), (_x, i) => i + recentSelectedRowIndex) + : Array.from(new Array(Math.abs(numberSelected) + 1), (_x, i) => i + rowIndex); + intermediateIndexes.forEach((index) => setRepoSelected(repositories[index], isSelecting)); + } else { + setRepoSelected(repo, isSelecting); + } + setRecentSelectedRowIndex(rowIndex); + }; + + useEffect(() => { + const onKeyDown = (e: KeyboardEvent) => { + if (e.key === 'Shift') { + setShifting(true); + } + }; + const onKeyUp = (e: KeyboardEvent) => { + if (e.key === 'Shift') { + setShifting(false); + } + }; + + document.addEventListener('keydown', onKeyDown); + document.addEventListener('keyup', onKeyUp); + + return () => { + document.removeEventListener('keydown', onKeyDown); + document.removeEventListener('keyup', onKeyUp); + }; + }, []); + + return ( + + + + + + + + + + + + {repositories.map((repo, rowIndex) => ( + + + + + + + + ))} + +
selectAllRepos(isSelecting), + isSelected: areAllReposSelected, + isIndeterminate: areSomeReposSelected + }} + aria-label="Row select" + /> + {columnNames.name}{columnNames.branches}{columnNames.prs}{columnNames.workspaces}{columnNames.lastCommit}
onSelectRepo(repo, rowIndex, isSelecting), + isSelected: isRepoSelected(repo), + isDisabled: !isRepoSelectable(repo) + }} + /> + {repo.name}{repo.branches}{repo.prs}{repo.workspaces}{repo.lastCommit}
+ ); +}; diff --git a/packages/react-table/src/components/Table/utils/decorators/selectable.tsx b/packages/react-table/src/components/Table/utils/decorators/selectable.tsx index 1b4137316bb..80f851bbc5e 100644 --- a/packages/react-table/src/components/Table/utils/decorators/selectable.tsx +++ b/packages/react-table/src/components/Table/utils/decorators/selectable.tsx @@ -9,7 +9,7 @@ export const selectable: ITransform = ( { rowIndex, columnIndex, rowData, column, property, tooltip }: IExtra ) => { const { - extraParams: { onSelect, selectVariant, allRowsSelected, isHeaderSelectDisabled } + extraParams: { onSelect, selectVariant, allRowsSelected, isHeaderSelectDisabled, isIndeterminate } } = column; const extraData = { rowIndex, @@ -70,6 +70,7 @@ export const selectable: ITransform = ( onSelect={selectClick} name={selectName} tooltip={tooltip} + isIndeterminate={rowId === -1 ? isIndeterminate : undefined} > {label as React.ReactNode}