feat(Table): add rowExpandable to remove + before row, close #1518

Author: youluna

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')}
             >
                 <Table.Column title="Id" dataIndex="id" lock width={100}/>

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,
         /**
          * 额外渲染行的缩进
          */

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 ? (
-                    <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({
@@ -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}
@@ -228,6 +220,7 @@ export default function expanded(BaseComponent, stickyLock) {
                 components,
                 openRowKeys,
                 expandedRowRender,
+                rowExpandable,
                 hasExpandedRowCtrl,
                 children,
                 columns,

test/table/index-spec.js

@@ -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(
             {
@@ -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')
@@ -612,6 +638,7 @@ describe('Table', () => {
             .simulate('click');
         assert.deepEqual(id, '3');
 
+        assert(wrapper.find('next-table-filter-active'));
         wrapper.setProps({
             filterParams: {
                 id: {