Skip to content

Commit

Permalink
feat(Table): add rowExpandable to remove + before row, close #1518
Browse files Browse the repository at this point in the history
  • Loading branch information
@youluna
youluna committed Sep 10, 2020
1 parent f00a2da commit e7880a8
Show file tree
Hide file tree
Showing 4 changed files with 57 additions and 28 deletions.
6 changes: 4 additions & 2 deletions docs/table/demo/expanded-lock.md
View file
Expand Up @@ -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
Expand All @@ -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;
Expand Down Expand Up @@ -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')}
>
<Table.Column title="Id" dataIndex="id" lock width={100}/>
Expand Down
7 changes: 7 additions & 0 deletions src/table/base.jsx
View file
Expand Up @@ -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,
/**
* 额外渲染行的缩进
*/
Expand Down
45 changes: 19 additions & 26 deletions src/table/expanded.jsx
View file
Expand Up @@ -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,
/**
* 额外渲染行的缩进
*/
Expand Down Expand Up @@ -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,
Expand All @@ -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,
};
}

Expand All @@ -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 ? (
<Icon
type="minus"
size="xs"
className={`${prefix}table-expand-unfold`}
/>
<Icon type="minus" size="xs" className={`${prefix}table-expand-unfold`} />
) : (
<Icon
type="add"
size="xs"
className={`${prefix}table-expand-fold`}
/>
<Icon type="add" size="xs" className={`${prefix}table-expand-fold`} />
),
attrs = getExpandedColProps(record, index) || {};
const cls = classnames({
Expand All @@ -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 (
<span
{...attrs}
role="button"
tabIndex="0"
onKeyDown={this.expandedKeydown.bind(
this,
value,
record,
index
)}
onKeyDown={this.expandedKeydown.bind(this, value, record, index)}
aria-label={hasExpanded ? locale.expanded : locale.folded}
aria-expanded={hasExpanded}
className={cls}
Expand Down Expand Up @@ -228,6 +220,7 @@ export default function expanded(BaseComponent, stickyLock) {
components,
openRowKeys,
expandedRowRender,
rowExpandable,
hasExpandedRowCtrl,
children,
columns,
Expand Down
27 changes: 27 additions & 0 deletions test/table/index-spec.js
View file
Expand Up @@ -520,6 +520,29 @@ describe('Table', () => {
);
});

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(
{
Expand Down Expand Up @@ -594,6 +617,9 @@ describe('Table', () => {
onFilter,
children: [<Table.Column dataIndex="id" filters={filters} />],
});

assert(wrapper.find('next-table-filter-active').length === 0);

wrapper.find('.next-icon-filter').simulate('click');
wrapper
.find('.next-btn')
Expand All @@ -612,6 +638,7 @@ describe('Table', () => {
.simulate('click');
assert.deepEqual(id, '3');

assert(wrapper.find('next-table-filter-active'));
wrapper.setProps({
filterParams: {
id: {
Expand Down

0 comments on commit e7880a8

Please sign in to comment.