fix(Table): get correct width after screen resize, close #2399

Author: youluna

src/table/base/row.jsx

@@ -106,24 +106,13 @@ export default class Row extends React.Component {
         const { lockType } = this.context;
         return columns.map((child, index) => {
             /* eslint-disable no-unused-vars, prefer-const */
-            const {
-                dataIndex,
-                align,
-                alignHeader,
-                width,
-                colSpan,
-                style,
-                cellStyle,
-                __colIndex,
-                ...others
-            } = child;
+            const { dataIndex, align, alignHeader, width, colSpan, style, cellStyle, __colIndex, ...others } = child;
             const colIndex = '__colIndex' in child ? __colIndex : index;
             // colSpan should show in body td by the way of <Table.Column colSpan={2} />
             // tbody's cell merge should only by the way of <Table cellProps={} />
 
             const value = fetchDataByPath(record, dataIndex);
-            const attrs =
-                getCellProps(rowIndex, colIndex, dataIndex, record) || {};
+            const attrs = getCellProps(rowIndex, colIndex, dataIndex, record) || {};
 
             if (this.context.notRenderCellIndex) {
                 const matchCellIndex = this.context.notRenderCellIndex
@@ -134,25 +123,16 @@ export default class Row extends React.Component {
                     return null;
                 }
             }
-            if (
-                (attrs.colSpan && attrs.colSpan > 1) ||
-                (attrs.rowSpan && attrs.rowSpan > 1)
-            ) {
-                this._getNotRenderCellIndex(
-                    colIndex,
-                    rowIndex,
-                    attrs.colSpan || 1,
-                    attrs.rowSpan || 1
-                );
+            if ((attrs.colSpan && attrs.colSpan > 1) || (attrs.rowSpan && attrs.rowSpan > 1)) {
+                this._getNotRenderCellIndex(colIndex, rowIndex, attrs.colSpan || 1, attrs.rowSpan || 1);
             }
 
             const cellClass = attrs.className;
             const className = classnames({
                 first: lockType !== 'right' && colIndex === 0,
                 last:
                     lockType !== 'left' &&
-                    (colIndex === columns.length - 1 ||
-                        colIndex + attrs.colSpan === columns.length), // 考虑合并单元格的情况
+                    (colIndex === columns.length - 1 || colIndex + attrs.colSpan === columns.length), // 考虑合并单元格的情况
                 [child.className]: child.className,
                 [cellClass]: cellClass,
             });
@@ -218,7 +198,7 @@ export default class Row extends React.Component {
             pure,
             locale,
             expandedIndexSimulate,
-            tableOuterWidth,
+            tableEl,
             rtl,
             wrapper,
             ...others

src/table/expanded/row.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { log } from '../../util';
+import { log, dom, events } from '../../util';
 import Row from '../lock/row';
 
 export default class ExpandedRow extends React.Component {
@@ -21,6 +21,34 @@ export default class ExpandedRow extends React.Component {
         lockType: PropTypes.oneOf(['left', 'right']),
     };
 
+    componentDidMount() {
+        events.on(window, 'resize', this.setExpandedWidth);
+    }
+
+    componentDidUpdate() {
+        this.setExpandedWidth();
+    }
+
+    componentWillUnmount() {
+        events.off(window, 'resize', this.setExpandedWidth);
+    }
+
+    getExpandedRow = (parentKey, ref) => {
+        if (!this.expandedRowRef) {
+            this.expandedRowRef = {};
+        }
+        this.expandedRowRef[parentKey] = ref;
+    };
+
+    setExpandedWidth = () => {
+        const { tableEl } = this.props;
+        const totalWidth = +(tableEl && tableEl.clientWidth) - 2 || '100%';
+
+        Object.keys(this.expandedRowRef || {}).forEach(key => {
+            dom.setStyle(this.expandedRowRef[key], { width: totalWidth });
+        });
+    };
+
     renderExpandedRow(record, rowIndex) {
         const {
             expandedRowRender,
@@ -30,7 +58,6 @@ export default class ExpandedRow extends React.Component {
             expandedIndexSimulate,
             expandedRowWidthEquals2Table,
         } = this.context;
-        const { tableOuterWidth } = this.props;
         const expandedIndex = expandedIndexSimulate ? (rowIndex - 1) / 2 : rowIndex;
 
         const { columns, cellRef } = this.props;
@@ -76,7 +103,6 @@ export default class ExpandedRow extends React.Component {
 
             const expandedRowStyle = {
                 position: 'sticky',
-                width: (tableOuterWidth || 0) - 1,
                 left: 0,
             };
             // 暴露给用户的index
@@ -85,14 +111,19 @@ export default class ExpandedRow extends React.Component {
                 content = (
                     <div
                         className={`${prefix}table-cell-wrapper`}
+                        ref={this.getExpandedRow.bind(this, record[primaryKey])}
                         style={expandedRowWidthEquals2Table && expandedRowStyle}
                     >
                         {content}
                     </div>
                 );
             } else {
                 content = expandedRowWidthEquals2Table ? (
-                    <div className={`${prefix}table-expanded-area`} style={expandedRowStyle}>
+                    <div
+                        className={`${prefix}table-expanded-area`}
+                        ref={this.getExpandedRow.bind(this, record[primaryKey])}
+                        style={expandedRowStyle}
+                    >
                         {content}
                     </div>
                 ) : (

src/table/new-lock.jsx

@@ -3,7 +3,7 @@ import { findDOMNode } from 'react-dom';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import shallowElementEquals from 'shallow-element-equals';
-import { log, obj, dom } from '../util';
+import { log, obj, dom, events } from '../util';
 import LockRow from './lock/row';
 import LockBody from './lock/body';
 import LockHeader from './lock/header';
@@ -61,6 +61,8 @@ export default function stickyLock(BaseComponent) {
             this.updateOffsetArr();
             this.onLockBodyScroll(isEmpty ? { currentTarget: this.headerNode } : { currentTarget: this.bodyNode });
             this.forceUpdate();
+
+            events.on(window, 'resize', this.updateOffsetArr);
         }
 
         shouldComponentUpdate(nextProps, nextState, nextContext) {
@@ -76,6 +78,10 @@ export default function stickyLock(BaseComponent) {
             this.updateOffsetArr();
         }
 
+        componentWillUnmount() {
+            events.off(window, 'resize', this.updateOffsetArr);
+        }
+
         updateOffsetArr = () => {
             const { lockLeftChildren, lockRightChildren, originChildren } = this.splitChildren || {};