Merge pull request #221 from Mezzanine-UI/feat/table-rowselection-dis…

…abled Feature: Table `props.rowSelection.disabledRowKeys`
Mezzanine-UI · Apr 12, 2024 · 6c80b35 · 6c80b35
2 parents 84d9e2c + b09ae73
commit 6c80b35
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 5 deletions.
diff --git a/packages/core/src/table/table.ts b/packages/core/src/table/table.ts
@@ -144,6 +144,7 @@ export interface TableRowSelection {
   selectedRowKey?: string[];
   onChange?(keys: string[]): void;
   actions?: TableRowAction[];
+  disabledRowKeys?: string[];
 }
 
 /** === Feature draggable */

diff --git a/packages/react/src/Table/Table.stories.tsx b/packages/react/src/Table/Table.stories.tsx
@@ -376,6 +376,11 @@ export const Selections = () => {
           rowSelection={{
             selectedRowKey: selectedRowKeys,
             onChange: (keys) => setSelectedRowKeys(keys),
+            disabledRowKeys: dataSource.map((d) => {
+              if (d.age >= 25) return d.key;
+
+              return null;
+            }).filter((k) => k),
           }}
         />
       </div>

diff --git a/packages/react/src/Table/Table.tsx b/packages/react/src/Table/Table.tsx
@@ -182,12 +182,14 @@ const Table = forwardRef<HTMLTableElement, TableProps<Record<string, unknown>>>(
     selectedRowKey: rowSelectionProp?.selectedRowKey,
     onChange: rowSelectionProp?.onChange,
     dataSource: dataSourceProp,
+    disabledRowKeys: rowSelectionProp?.disabledRowKeys,
   });
 
   const rowSelection = useMemo(() => (rowSelectionProp ? {
     selectedRowKeys,
     onChange: setSelectedRowKey,
     actions: rowSelectionProp.actions,
+    disabledRowKeys: rowSelectionProp.disabledRowKeys,
   } : undefined), [
     rowSelectionProp,
     selectedRowKeys,

diff --git a/packages/react/src/Table/TableContext.ts b/packages/react/src/Table/TableContext.ts
@@ -16,6 +16,7 @@ import { EmptyProps } from '../Empty';
 export interface RowSelectionContext extends Pick<TableRowSelection, 'actions'> {
   selectedRowKeys: string[];
   onChange(v: string): void;
+  disabledRowKeys?: string[];
 }
 
 /** typeof sorting */

diff --git a/packages/react/src/Table/index.ts b/packages/react/src/Table/index.ts
@@ -16,6 +16,10 @@ export {
 export {
   useTableDraggable,
 } from './draggable/useTableDraggable';
+export {
+  useTableRowSelection,
+  SELECTED_ALL_KEY,
+} from './rowSelection/useTableRowSelection';
 export {
   default as useTableScroll,
 } from './useTableScroll';
diff --git a/packages/react/src/Table/rowSelection/TableRowSelection.tsx b/packages/react/src/Table/rowSelection/TableRowSelection.tsx
@@ -11,6 +11,7 @@ import {
   tableClasses as classes,
   TableRowAction,
 } from '@mezzanine-ui/core/table';
+import xor from 'lodash/xor';
 import { MoreVerticalIcon } from '@mezzanine-ui/icons';
 import { TableContext, TableDataContext, RowSelectionContext } from '../TableContext';
 import { NativeElementPropsWithoutKeyAndRef } from '../../utils/jsx-types';
@@ -64,10 +65,16 @@ const TableRowSelection = forwardRef<HTMLDivElement, TableRowSelectionProps>(
       const selectedRowKeys = rowSelection?.selectedRowKeys ?? [];
 
       if (!selectedRowKeys.length) return 'none';
-      if (selectedRowKeys.length === dataSource.length) return 'all';
+
+      const validDataSource = xor(
+        rowSelection?.disabledRowKeys ?? [],
+        dataSource.map((d) => (d.id || d.key) as string),
+      );
+
+      if (selectedRowKeys.length === validDataSource.length) return 'all';
 
       return 'indeterminate';
-    }, [rowSelection?.selectedRowKeys, dataSource.length]);
+    }, [rowSelection?.selectedRowKeys, rowSelection?.disabledRowKeys, dataSource]);
 
     const selfChecked = useMemo(() => (
       (rowSelection?.selectedRowKeys ?? []).some((key) => key === rowKey)
@@ -138,7 +145,9 @@ const TableRowSelection = forwardRef<HTMLDivElement, TableRowSelectionProps>(
       >
         <Checkbox
           checked={checked}
-          disabled={false}
+          disabled={rowSelection?.disabledRowKeys?.length
+            ? rowSelection.disabledRowKeys.includes(rowKey)
+            : false}
           indeterminate={indeterminate}
           inputProps={{
             name,

diff --git a/packages/react/src/Table/rowSelection/useTableRowSelection.ts b/packages/react/src/Table/rowSelection/useTableRowSelection.ts
@@ -1,4 +1,5 @@
 import { TableRowSelection, TableDataSource } from '@mezzanine-ui/core/table';
+import xor from 'lodash/xor';
 import { useControlValueState } from '../../Form/useControlValueState';
 import { useLastCallback } from '../../hooks/useLastCallback';
 
@@ -19,6 +20,7 @@ export function useTableRowSelection(props: UseTableRowSelection) {
   const {
     selectedRowKey: selectedRowKeyProp,
     onChange: onChangeProp,
+    disabledRowKeys = [],
     dataSource,
   } = props;
 
@@ -32,13 +34,14 @@ export function useTableRowSelection(props: UseTableRowSelection) {
     if (!dataSource.length) return;
 
     const allSourceKeys = dataSource.map((source) => (source.key || source.id) as string);
+    const validSourceKeys = xor(disabledRowKeys, allSourceKeys);
     let nextSelectedRowKey = selectedRowKey;
 
     if (rowKey === SELECTED_ALL_KEY) {
-      if (equalityFn(selectedRowKey, allSourceKeys)) {
+      if (equalityFn(selectedRowKey, validSourceKeys)) {
         nextSelectedRowKey = [];
       } else {
-        nextSelectedRowKey = allSourceKeys;
+        nextSelectedRowKey = validSourceKeys;
       }
     } else {
       const existedRowKeyIdx = selectedRowKey.findIndex((key) => key === rowKey);

diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
@@ -165,6 +165,8 @@ export {
   TableRefresh,
   useTableDraggable,
   useTableScroll,
+  useTableRowSelection,
+  SELECTED_ALL_KEY,
   default as Table,
 } from './Table';
 export {