feat: support custom cell ellipsis tooltip (#474)

* feat: support custom ellipsis tooltip

* feat: add showTitle api for ellipsis

Author: lijinke666

.gitignore

@@ -33,4 +33,5 @@ es/
 .storybook
 .doc
 !tests/__mocks__/rc-util/lib
-examples/debug.tsx
+examples/debug.tsx
+.history

examples/ellipsis-custom-tooltip.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import Tooltip from 'rc-tooltip';
+import Table from '../src';
+import '../assets/index.less';
+import 'rc-tooltip/assets/bootstrap.css';
+
+const createColumns = (length: number) => {
+  return Array.from({ length }, (_, i) => ({
+    title: 'description',
+    dataIndex: 'description',
+    key: `description ${i + 1}`,
+    ellipsis: {
+      showTitle: false,
+    },
+    ...(i === 0 ? { width: 50 } : null),
+    render(description: string) {
+      return (
+        <Tooltip placement="topLeft" overlay={description}>
+          <span>{description}</span>
+        </Tooltip>
+      );
+    },
+  }));
+};
+
+const columns = [
+  {
+    title: 'name',
+    dataIndex: 'name',
+    width: 100,
+    ellipsis: {
+      showTitle: false,
+    },
+    render: (name: string) => (
+      <Tooltip placement="topLeft" overlay={name}>
+        <span>{name}</span>
+      </Tooltip>
+    ),
+  },
+  ...createColumns(10),
+  {
+    title: 'Operations',
+    key: 'operations',
+    ellipsis: {
+      showTitle: false,
+    },
+    render() {
+      return (
+        <Tooltip placement="topLeft" overlay="Operations">
+          <a href="#">Operations</a>
+        </Tooltip>
+      );
+    },
+  },
+];
+
+const data = [
+  { name: 'jack', description: 'description description', key: '1' },
+  { name: 'jackjackjackjackjackjack', description: 'description description', key: '2' },
+  { name: 'jack ma', description: 'description description', key: '3' },
+  { name: 'jack nickson', description: 'description description', key: '4' },
+];
+
+const Demo = () => (
+  <div>
+    <h2>Table ellipsis custom tooltip</h2>
+    <Table columns={columns} data={data} />
+  </div>
+);
+
+export default Demo;

package.json

@@ -74,6 +74,7 @@
     "rc-animate": "^3.0.0",
     "rc-dropdown": "~3.1.0",
     "rc-menu": "^8.0.2",
+    "rc-tooltip": "^4.0.3",
     "react": "^16.0.0",
     "react-dnd": "^2.5.4",
     "react-dnd-html5-backend": "^2.5.4",

src/Cell/index.tsx

@@ -9,6 +9,7 @@ import {
   CellType,
   DefaultRecordType,
   AlignType,
+  CellEllipsisType,
 } from '../interface';
 import { getPathValue } from '../utils/valueUtil';
 
@@ -38,7 +39,7 @@ export interface CellProps<RecordType extends DefaultRecordType> {
   children?: React.ReactNode;
   colSpan?: number;
   rowSpan?: number;
-  ellipsis?: boolean;
+  ellipsis?: CellEllipsisType;
   align?: AlignType;
 
   shouldCellUpdate?: (record: RecordType) => boolean;
@@ -55,6 +56,8 @@ export interface CellProps<RecordType extends DefaultRecordType> {
   /** @private Used for `expandable` with nest tree */
   appendNode?: React.ReactNode;
   additionalProps?: React.HTMLAttributes<HTMLElement>;
+
+  rowType?: 'header' | 'body' | 'footer';
 }
 
 function Cell<RecordType extends DefaultRecordType>(
@@ -79,6 +82,7 @@ function Cell<RecordType extends DefaultRecordType>(
     additionalProps = {},
     ellipsis,
     align,
+    rowType,
   }: CellProps<RecordType>,
   ref: React.Ref<any>,
 ): React.ReactElement {
@@ -157,7 +161,8 @@ function Cell<RecordType extends DefaultRecordType>(
 
   // ====================== Render ======================
   let title: string;
-  if (ellipsis) {
+  const ellipsisConfig: CellEllipsisType = ellipsis === true ? { showTitle: true } : ellipsis;
+  if (ellipsisConfig && (ellipsisConfig.showTitle || rowType === 'header')) {
     if (typeof childNode === 'string' || typeof childNode === 'number') {
       title = childNode.toString();
     } else if (React.isValidElement(childNode) && typeof childNode.props.children === 'string') {

src/Header/HeaderRow.tsx

@@ -66,6 +66,7 @@ function HeaderRow<RecordType>({
             key={columnsKey[cellIndex]}
             {...fixedInfo}
             additionalProps={additionalProps}
+            rowType="header"
           />
         );
       })}

src/interface.ts

@@ -55,13 +55,15 @@ export interface RenderedCell<RecordType> {
 
 export type DataIndex = string | number | (string | number)[];
 
+export type CellEllipsisType = { showTitle?: boolean } | boolean;
+
 interface ColumnSharedType<RecordType> {
   title?: React.ReactNode;
   key?: Key;
   className?: string;
   fixed?: FixedType;
   onHeaderCell?: GetComponentProps<ColumnsType<RecordType>[number]>;
-  ellipsis?: boolean;
+  ellipsis?: CellEllipsisType;
   align?: AlignType;
 }
 

tests/Table.spec.js

@@ -267,6 +267,41 @@ describe('Table.Basic', () => {
     });
   });
 
+  it('renders ellipsis by showTitle option', () => {
+    const wrapper = mount(
+      createTable({
+        columns: [
+          { title: 'title', ellipsis: { showTitle: true } },
+          { title: 'node title', ellipsis: { showTitle: true }, render: () => <h1>233</h1> },
+        ],
+      }),
+    );
+
+    wrapper.find('td').forEach(td => {
+      expect(td.hasClass('rc-table-cell-ellipsis')).toBeTruthy();
+    });
+  });
+
+  it('not renders ellipsis origin html title', () => {
+    const columns = [
+      { title: 'title', ellipsis: { showTitle: false } },
+      { title: 'node title', ellipsis: { showTitle: false }, render: () => <h1>233</h1> },
+    ];
+    const wrapper = mount(
+      createTable({
+        columns,
+      }),
+    );
+
+    wrapper.find('.rc-table-thead th').forEach(td => {
+      expect(td.getDOMNode().attributes.getNamedItem('title')).toBeTruthy();
+    });
+
+    wrapper.find('.rc-table-tbody td').forEach(td => {
+      expect(td.getDOMNode().attributes.getNamedItem('title')).toBeFalsy();
+    });
+  });
+
   it('renders column correctly', () => {
     const columns = [
       {