fix(Table): lock columns cant align with whole table when affixed

alibaba-fusion · Dec 10, 2018 · f1531c3 · f1531c3
1 parent dda5a16
commit f1531c3
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 7 deletions.
diff --git a/src/affix/index.jsx b/src/affix/index.jsx
@@ -88,6 +88,10 @@ class Affix extends React.Component {
         }
     }
 
+    updatePosition = () => {
+        this._updateNodePosition();
+    }
+
     _updateNodePosition = () => {
         const { container, useAbsolute } = this.props;
         const affixContainer = container();
@@ -101,13 +105,15 @@ class Affix extends React.Component {
         const affixHeight = this.affixNode.offsetHeight;
         const containerRect = getRect(affixContainer);
 
+        const affixChildHeight = this.affixChildNode.offsetHeight;
+
         const affixMode = this.affixMode;
         const affixStyle = {
             width: affixOffset.width,
         };
         const containerStyle = {
             width: affixOffset.width,
-            height: affixHeight,
+            height: affixChildHeight,
         };
 
         if (affixMode.top && containerScrollTop > affixOffset.top - affixMode.offset) {
@@ -206,6 +212,10 @@ class Affix extends React.Component {
         this.affixNode = findDOMNode(ref);
     }
 
+    _affixChildNodeRefHandler = (ref) => {
+        this.affixChildNode = findDOMNode(ref);
+    }
+
     render() {
         const { prefix, className, style, children } = this.props;
         const state = this.state;
@@ -219,7 +229,7 @@ class Affix extends React.Component {
 
         return (
             <div ref={this._affixNodeRefHandler} style={combinedStyle}>
-                <div className={classNames} style={state.style}>
+                <div ref={this._affixChildNodeRefHandler} className={classNames} style={state.style}>
                     {children}
                 </div>
             </div>

diff --git a/src/table/base.jsx b/src/table/base.jsx
@@ -507,6 +507,7 @@ export default class Table extends React.Component {
                         <Header
                             prefix={prefix}
                             pure={pure}
+                            affixRef={this.getAffixRef}
                             colGroup={colGroup}
                             className={`${prefix}table-header`}
                             filterParams={filterParams}
@@ -555,6 +556,13 @@ export default class Table extends React.Component {
         this.wrapper = wrapper;
     };
 
+    getAffixRef = (affixRef) => {
+        if (!affixRef) {
+            return this.affixRef;
+        }
+        this.affixRef = affixRef;
+    };
+
     getHeaderCellRef = (i, j, cell) => {
         const cellRef = `header_cell_${i}_${j}`;
         if (!cell) {

diff --git a/src/table/lock.jsx b/src/table/lock.jsx
@@ -385,15 +385,25 @@ export default function lock(BaseComponent) {
                         headerLeftLockRowHeight = headerLeftLockRow.offsetHeight;
                     }
 
-                    if (headerRightRow) {
+                    if (headerRightRow && headerRightLockRow) {
                         const
                             maxRightRowHeight = Math.max(headerRightLockRowHeight, headerRightRow.offsetHeight);
-                        headerRightLockRow && dom.setStyle(headerRightLockRow, 'height', maxRightRowHeight);
+
+                        dom.setStyle(headerRightLockRow, 'height', maxRightRowHeight);
+
+                        setTimeout(() => {
+                            this.tableRightInc.affixRef && this.tableRightInc.affixRef.getInstance().updatePosition();
+                        });
                     }
 
-                    if (headerLeftRow) {
+                    if (headerLeftRow && headerLeftLockRow) {
                         const maxLeftRowHeight = Math.max(headerLeftLockRowHeight, headerLeftRow.offsetHeight);
-                        headerLeftLockRow && dom.setStyle(headerLeftLockRow, 'height', maxLeftRowHeight);
+
+                        dom.setStyle(headerLeftLockRow, 'height', maxLeftRowHeight);
+
+                        setTimeout(() => {
+                            this.tableLeftInc.affixRef && this.tableLeftInc.affixRef.getInstance().updatePosition();
+                        });
                     }
 
                 });

diff --git a/src/table/sticky/header.jsx b/src/table/sticky/header.jsx
@@ -13,6 +13,11 @@ export default class StickHeader extends React.Component {
         offsetTop: PropTypes.number,
         affixProps: PropTypes.object
     }
+
+    getAffixRef = (ref) => {
+        this.props.affixRef && this.props.affixRef(ref);
+    }
+
     render() {
         const { prefix } = this.props;
         const { Header, offsetTop, affixProps } = this.context;
@@ -24,7 +29,7 @@ export default class StickHeader extends React.Component {
             className
         });
 
-        return (<Affix {...others} className={cls} offsetTop={offsetTop}>
+        return (<Affix ref={this.getAffixRef} {...others} className={cls} offsetTop={offsetTop}>
             <Header {...this.props}/>
         </Affix>);
     }