diff --git a/.gitignore b/.gitignore index e3c5beadd..9f11d8f43 100644 --- a/.gitignore +++ b/.gitignore @@ -33,4 +33,5 @@ es/ .storybook .doc !tests/__mocks__/rc-util/lib -examples/debug.tsx \ No newline at end of file +examples/debug.tsx +.history diff --git a/examples/ellipsis-custom-tooltip.tsx b/examples/ellipsis-custom-tooltip.tsx new file mode 100644 index 000000000..5241352d7 --- /dev/null +++ b/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 ( + + {description} + + ); + }, + })); +}; + +const columns = [ + { + title: 'name', + dataIndex: 'name', + width: 100, + ellipsis: { + showTitle: false, + }, + render: (name: string) => ( + + {name} + + ), + }, + ...createColumns(10), + { + title: 'Operations', + key: 'operations', + ellipsis: { + showTitle: false, + }, + render() { + return ( + + Operations + + ); + }, + }, +]; + +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 = () => ( +
+

Table ellipsis custom tooltip

+ + +); + +export default Demo; diff --git a/package.json b/package.json index c9dd0057c..5778e4045 100644 --- a/package.json +++ b/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", diff --git a/src/Cell/index.tsx b/src/Cell/index.tsx index 5d8a3e329..92dd4c4d9 100644 --- a/src/Cell/index.tsx +++ b/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 { children?: React.ReactNode; colSpan?: number; rowSpan?: number; - ellipsis?: boolean; + ellipsis?: CellEllipsisType; align?: AlignType; shouldCellUpdate?: (record: RecordType) => boolean; @@ -55,6 +56,8 @@ export interface CellProps { /** @private Used for `expandable` with nest tree */ appendNode?: React.ReactNode; additionalProps?: React.HTMLAttributes; + + rowType?: 'header' | 'body' | 'footer'; } function Cell( @@ -79,6 +82,7 @@ function Cell( additionalProps = {}, ellipsis, align, + rowType, }: CellProps, ref: React.Ref, ): React.ReactElement { @@ -157,7 +161,8 @@ function Cell( // ====================== 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') { diff --git a/src/Header/HeaderRow.tsx b/src/Header/HeaderRow.tsx index 74c3c39ab..18de958dd 100644 --- a/src/Header/HeaderRow.tsx +++ b/src/Header/HeaderRow.tsx @@ -66,6 +66,7 @@ function HeaderRow({ key={columnsKey[cellIndex]} {...fixedInfo} additionalProps={additionalProps} + rowType="header" /> ); })} diff --git a/src/interface.ts b/src/interface.ts index 3f4ac79ca..b8a56b2ad 100644 --- a/src/interface.ts +++ b/src/interface.ts @@ -55,13 +55,15 @@ export interface RenderedCell { export type DataIndex = string | number | (string | number)[]; +export type CellEllipsisType = { showTitle?: boolean } | boolean; + interface ColumnSharedType { title?: React.ReactNode; key?: Key; className?: string; fixed?: FixedType; onHeaderCell?: GetComponentProps[number]>; - ellipsis?: boolean; + ellipsis?: CellEllipsisType; align?: AlignType; } diff --git a/tests/Table.spec.js b/tests/Table.spec.js index 9f4b3e9c0..d9efbbbe7 100644 --- a/tests/Table.spec.js +++ b/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: () =>

233

}, + ], + }), + ); + + 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: () =>

233

}, + ]; + 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 = [ {