From e7880a8f99c2c823c70f98ef736e60dc65ef9753 Mon Sep 17 00:00:00 2001 From: youluna Date: Wed, 9 Sep 2020 18:29:01 +0800 Subject: [PATCH] feat(Table): add rowExpandable to remove + before row, close #1518 --- docs/table/demo/expanded-lock.md | 6 +++-- src/table/base.jsx | 7 +++++ src/table/expanded.jsx | 45 ++++++++++++++------------------ test/table/index-spec.js | 27 +++++++++++++++++++ 4 files changed, 57 insertions(+), 28 deletions(-) diff --git a/docs/table/demo/expanded-lock.md b/docs/table/demo/expanded-lock.md index ebae8eb783..f3fa8b9b93 100644 --- a/docs/table/demo/expanded-lock.md +++ b/docs/table/demo/expanded-lock.md @@ -2,7 +2,7 @@ - order: 6 -(IE下不支持) `Table.StickyLock` 模式下，展开行的可视区域宽度与 `Table` 占屏幕宽度保持一致, 本模式下 `expandedRowIndent` 为 `[0, 0]`，不可修改。 + `Table.StickyLock` 模式下(IE不支持，会fallback到旧有逻辑)，展开行的可视区域宽度与 `Table` 占屏幕宽度保持一致, 本模式下 `expandedRowIndent` 为 `[0, 0]`，不可修改。 :::lang=en-us # Expandable @@ -23,7 +23,8 @@ const dataSource = () => { result.push({ title: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`, id: 100306660940 + i, - time: 2000 + i + time: 2000 + i, + expandable: i !== 2 }); } return result; @@ -63,6 +64,7 @@ class App extends React.Component { // expandedRowIndent 仅在IE下才会生效，非IE模式下为[0,0]且不可修改 expandedRowIndent={[2, 0]} expandedRowRender={expandedRowRender} + rowExpandable={record => record.expandable} onRowClick={() => console.log('rowClick')} > diff --git a/src/table/base.jsx b/src/table/base.jsx index a5bc22808e..68a2f84987 100644 --- a/src/table/base.jsx +++ b/src/table/base.jsx @@ -201,6 +201,13 @@ class Table extends React.Component { * @returns {Element} 渲染内容 */ expandedRowRender: PropTypes.func, + /** + * 设置行是否可展开，设置 false 为不可展开 + * @param {Object} record 该行所对应的数据 + * @param {Number} index 该行所对应的序列 + * @returns {Boolean} 是否可展开 + */ + rowExpandable: PropTypes.func, /** * 额外渲染行的缩进 */ diff --git a/src/table/expanded.jsx b/src/table/expanded.jsx index f25c3262ae..0596e3c5cf 100644 --- a/src/table/expanded.jsx +++ b/src/table/expanded.jsx @@ -22,6 +22,13 @@ export default function expanded(BaseComponent, stickyLock) { * @returns {Element} */ expandedRowRender: PropTypes.func, + /** + * 设置行是否可展开，设置 false 为不可展开 + * @param {Object} record 该行所对应的数据 + * @param {Number} index 该行所对应的序列 + * @returns {Boolean} 是否可展开 + */ + rowExpandable: PropTypes.func, /** * 额外渲染行的缩进 */ @@ -64,6 +71,7 @@ export default function expanded(BaseComponent, stickyLock) { static childContextTypes = { openRowKeys: PropTypes.array, expandedRowRender: PropTypes.func, + rowExpandable: PropTypes.func, expandedIndexSimulate: PropTypes.bool, expandedRowWidthEquals2Table: PropTypes.bool, expandedRowIndent: PropTypes.array, @@ -79,9 +87,7 @@ export default function expanded(BaseComponent, stickyLock) { expandedRowRender: this.props.expandedRowRender, expandedIndexSimulate: this.props.expandedIndexSimulate, expandedRowWidthEquals2Table: stickyLock, - expandedRowIndent: stickyLock - ? [0, 0] - : this.props.expandedRowIndent, + expandedRowIndent: stickyLock ? [0, 0] : this.props.expandedRowIndent, }; } @@ -105,23 +111,19 @@ export default function expanded(BaseComponent, stickyLock) { }; renderExpandedCell = (value, index, record) => { - const { getExpandedColProps, prefix, locale } = this.props; + const { getExpandedColProps, prefix, locale, rowExpandable } = this.props; + + if (typeof rowExpandable === 'function' && !rowExpandable(record, index)) { + return ''; + } const { openRowKeys } = this.state, { primaryKey } = this.props, hasExpanded = openRowKeys.indexOf(record[primaryKey]) > -1, switchNode = hasExpanded ? ( - + ) : ( - + ), attrs = getExpandedColProps(record, index) || {}; const cls = classnames({ @@ -131,24 +133,14 @@ export default function expanded(BaseComponent, stickyLock) { }); if (!attrs.disabled) { - attrs.onClick = this.onExpandedClick.bind( - this, - value, - record, - index - ); + attrs.onClick = this.onExpandedClick.bind(this, value, record, index); } return ( { ); }); + it('should support rowExpandable', done => { + timeout( + { + dataSource: [ + { id: '1', name: 'test', expandable: false }, + { id: '2', name: 'test2', expandable: true, }, + { id: '3', name: 'test3', expandable: true }, + ], + expandedRowRender: record => record.name, + rowExpandable: record => record.expandable + }, + () => { + let expandedTotal = wrapper + .find('.next-table-row'); + let expandedIcon = wrapper + .find('.next-table-prerow .next-table-cell-wrapper .next-icon'); + + assert(expandedTotal.length - expandedIcon.length === 1); + done(); + } + ); + }); + it('should support multiple header', done => { timeout( { @@ -594,6 +617,9 @@ describe('Table', () => { onFilter, children: [], }); + + assert(wrapper.find('next-table-filter-active').length === 0); + wrapper.find('.next-icon-filter').simulate('click'); wrapper .find('.next-btn') @@ -612,6 +638,7 @@ describe('Table', () => { .simulate('click'); assert.deepEqual(id, '3'); + assert(wrapper.find('next-table-filter-active')); wrapper.setProps({ filterParams: { id: {