fix(Table): extra lock content enough space && dataSource=[], close#364

alibaba-fusion · Mar 5, 2019 · b9c2328 · b9c2328
1 parent a9742df
commit b9c2328
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 18 deletions.
diff --git a/src/table/base.jsx b/src/table/base.jsx
@@ -130,7 +130,8 @@ export default class Table extends React.Component {
         loading: PropTypes.bool,
         /**
          * 自定义 Loading 组件
-         * @type {Function}
+         * 请务必传递 props, 使用方式： loadingComponent={props => <Loading {...props}/>}
+         * @param {Object} props 当前点击行的key
          */
         loadingComponent: PropTypes.func,
         /**

diff --git a/src/table/lock.jsx b/src/table/lock.jsx
@@ -347,31 +347,61 @@ export default function lock(BaseComponent) {
             }
         }
 
+        removeLockTable() {
+            const lockLeftLen = this.lockLeftChildren.length;
+            const lockRightLen = this.lockRightChildren.length;
+
+            if (lockLeftLen) {
+                this._notNeedAdjustLockLeft = true;
+            }
+            if (lockRightLen) {
+                this._notNeedAdjustLockRight = true;
+            }
+            if (lockRightLen || lockLeftLen) {
+                this.forceUpdate();
+                return true;
+            }
+        }
+
         adjustIfTableNotNeedLock() {
-            if (this.isOriginLock() && this.tableInc.props.dataSource.length) {
-                const configWidths = this.tableInc.flatChildren
+            if (this.isOriginLock()) {
+                const widthObj = this.tableInc.flatChildren
                     .map((item, index) => {
-                        const row = this.getCellNode(0, index);
-                        return (row && row.clientWidth) || 0;
+                        const cell = this.getCellNode(0, index) || {};
+                        const headerCell =
+                            this.getHeaderCellNode(0, index) || {};
+
+                        return {
+                            cellWidths: cell.clientWidth || 0,
+                            headerWidths: headerCell.clientWidth || 0,
+                        };
                     })
-                    .reduce((a, b) => a + b, 0);
+                    .reduce(
+                        (a, b) => {
+                            return {
+                                cellWidths: a.cellWidths + b.cellWidths,
+                                headerWidths: a.headerWidths + b.headerWidths,
+                            };
+                        },
+                        {
+                            cellWidths: 0,
+                            headerWidths: 0,
+                        }
+                    );
 
                 const node = findDOMNode(this);
                 const width = node.clientWidth;
-                const lockLeftLen = this.lockLeftChildren.length;
-                const lockRightLen = this.lockRightChildren.length;
+
+                // if the table doesn't exist, there is no need to adjust
+                if (width === 0) {
+                    return true;
+                }
+
+                const configWidths =
+                    widthObj.cellWidths || widthObj.headerWidths;
 
                 if (configWidths <= width && configWidths > 0) {
-                    if (lockLeftLen) {
-                        this._notNeedAdjustLockLeft = true;
-                    }
-                    if (lockRightLen) {
-                        this._notNeedAdjustLockRight = true;
-                    }
-                    if (lockRightLen || lockLeftLen) {
-                        this.forceUpdate();
-                        return true;
-                    }
+                    this.removeLockTable();
                 } else if (
                     this._notNeedAdjustLockLeft ||
                     this._notNeedAdjustLockRight

diff --git a/test/table/issue-spec.js b/test/table/issue-spec.js
@@ -447,4 +447,44 @@ describe('Issue', () => {
         ReactDOM.unmountComponentAtNode(div);
         document.body.removeChild(div);
     });
+
+    it('sort should have only one empty when datasorce=[] && enough width', () => {
+        class App extends React.Component {
+            render() {
+                return (
+                    <Table
+                        style={{ width: '600px' }}
+                        dataSource={[]}
+                        scrollToRow={20}
+                    >
+                        <Table.Column
+                            title="Id1"
+                            lock
+                            dataIndex="id"
+                            width={100}
+                        />
+                        <Table.Column
+                            title="Index"
+                            dataIndex="index"
+                            width={200}
+                        />
+                        <Table.Column
+                            title="Time"
+                            dataIndex="time"
+                            lock="right"
+                            width={200}
+                        />
+                    </Table>
+                );
+            }
+        }
+
+        const div = document.createElement('div');
+        document.body.appendChild(div);
+        ReactDOM.render(<App />, div);
+
+        assert(document.querySelectorAll('div.next-table-empty').length === 1);
+        ReactDOM.unmountComponentAtNode(div);
+        document.body.removeChild(div);
+    });
 });