feat(table): add row selection tooltip

growingio · May 25, 2021 · 297d8c2 · 297d8c2
1 parent 014cc31
commit 297d8c2
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 13 deletions.
diff --git a/src/components/table/demo/TablePagination.stories.tsx b/src/components/table/demo/TablePagination.stories.tsx
@@ -57,6 +57,7 @@ export const TablePagination: Story<TableProps<any> & PaginationProps> = (args)
       rowSelection={{
         getCheckboxProps: (record: any) => ({
           disabled: record.a === 1,
+          title: record.a
         }),
       }}
       {...rest}

diff --git a/src/components/table/hook/useSelection.tsx b/src/components/table/hook/useSelection.tsx
@@ -3,6 +3,7 @@ import React, { useMemo, useCallback } from 'react';
 import { get, intersection, isUndefined, difference, union, isFunction, isString, compact } from 'lodash';
 import { ColumnsType, RowSelection, ColumnType } from '../interface';
 import Checkbox from '../../checkbox';
+import Tooltip from '../../tooltip';
 import useControlledState from '../../../utils/hooks/useControlledState';
 
 export const getRowKey = <RecordType,>(row: RecordType, rowKey?: string | ((record: RecordType) => string)): string => {
@@ -85,19 +86,25 @@ const useSelection = <RecordType,>(
     render: (...rest) => {
       const key = getRowKey(rest[1], rowKey);
       const thisCheckboxProps = getCheckboxProps?.(rest[1]) || {};
+      const { title, disabled, ...restCheckboxProps } = thisCheckboxProps;
       return (
-        <Checkbox
-          {...thisCheckboxProps}
-          checked={localSelectedRowKeys.includes(key)}
-          onClick={(e) => e.stopPropagation()}
-          onChange={(e) => {
-            const latestLocalSelectedRowKeys = e.target.checked
-              ? union(localSelectedRowKeys, [key])
-              : difference(localSelectedRowKeys, [key]);
-            setLocalSelectedRowKeys(latestLocalSelectedRowKeys);
-            onChange?.(latestLocalSelectedRowKeys, getSelectRows(latestLocalSelectedRowKeys));
-          }}
-        />
+        <Tooltip placement='topLeft' arrowPointAtCenter title={title} disabled={!disabled}>
+          <div>
+            <Checkbox
+              {...restCheckboxProps}
+              disabled={disabled}
+              checked={localSelectedRowKeys.includes(key)}
+              onClick={(e) => e.stopPropagation()}
+              onChange={(e) => {
+                const latestLocalSelectedRowKeys = e.target.checked
+                  ? union(localSelectedRowKeys, [key])
+                  : difference(localSelectedRowKeys, [key]);
+                setLocalSelectedRowKeys(latestLocalSelectedRowKeys);
+                onChange?.(latestLocalSelectedRowKeys, getSelectRows(latestLocalSelectedRowKeys));
+              }}
+            >&nbsp;</Checkbox>
+          </div>
+        </Tooltip>
       );
     },
   };

diff --git a/src/components/table/interface.ts b/src/components/table/interface.ts
@@ -89,7 +89,7 @@ export interface RowSelection<RecordType> {
   columnWidth?: number | string;
   fixed?: 'left' | 'right' | boolean;
   onChange?: (selectedRowKeys: string[], selectedRows: RecordType[]) => void;
-  getCheckboxProps?: (record: RecordType) => CheckboxProps;
+  getCheckboxProps?: (record: RecordType) => CheckboxProps & { title?: React.ReactNode };
 }
 
 export interface TableProps<RecordType> {