Fix Table: lock should work with colspan (#1371)

* fix(Table): lock should work with colspan
alibaba-fusion · Nov 20, 2019 · 91b346c · 91b346c
1 parent 7ee63e3
commit 91b346c
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 40 deletions.
diff --git a/docs/drawer/theme/index.jsx b/docs/drawer/theme/index.jsx
@@ -11,7 +11,7 @@ import enUS from '../../../src/locale/en-us';
 const i18nMaps = {
     'en-us': {
         title: 'Title Here',
-        content: 'Start your business here by searching a popular product',
+        content: ':) Start your business here by searching a popular product',
     },
 
     'zh-cn': {

diff --git a/docs/table/demo/lock-column.md b/docs/table/demo/lock-column.md
@@ -39,7 +39,7 @@ class App extends React.Component {
     state = {
         dataSource: [],
         cols: [
-            <Table.Column title="Title" dataIndex="title.name" width={400} key="name1" lock/>,
+            <Table.Column title="Title" dataIndex="title.name" width={200} key="name1"/>,
             <Table.ColumnGroup title="abc" key="name-group">
                 <Table.Column title="Title" dataIndex="title.name" width={100} key="name2"/>
                 <Table.Column title="Title" dataIndex="title.name" width={400} key="name3"/>
@@ -58,8 +58,8 @@ class App extends React.Component {
     }
     reduceCol = () => {
         this.setState({
-            cols: [<Table.Column title="Title" dataIndex="title.name" width={400} key="name1" lock/>,
-                <Table.Column title="Time" dataIndex="time" width={100} key="time"/>]
+            cols: [<Table.Column title="Title" dataIndex="title.name" width={400} key="name1"/>,
+                <Table.Column title="Time" dataIndex="time" width={100} key="time" lock />]
         });
     }
     render() {

diff --git a/src/table/lock.jsx b/src/table/lock.jsx
@@ -509,31 +509,35 @@ export default function lock(BaseComponent) {
                         typeof record === 'object' && '__rowIndex' in item
                             ? item.__rowIndex
                             : index;
-                    const lockLeftRow = this.getCellNode(rowIndex, 0, 'left'),
-                        lockRightRow = this.getCellNode(rowIndex, 0, 'right'),
-                        row = this.getFirstNormalCellNode(rowIndex),
-                        rowHeight =
-                            (row && parseFloat(getComputedStyle(row).height)) ||
-                            0;
-                    let lockLeftHeight = 0,
-                        lockRightHeight = 0;
-
-                    if (lockLeftRow) {
-                        lockLeftHeight = lockLeftRow.offsetHeight;
-                    }
-                    if (lockRightRow) {
-                        lockRightHeight = lockRightRow.offsetHeight;
-                    }
-                    if (lockLeftRow && rowHeight !== lockLeftHeight) {
-                        dom.setStyle(lockLeftRow, 'height', rowHeight);
-                    }
-                    if (lockRightRow && rowHeight !== lockRightHeight) {
-                        dom.setStyle(lockRightRow, 'height', rowHeight);
-                    }
+
+                    // 同步最左侧的锁列
+                    this.lockLeftChildren.forEach((child, i) => {
+                        this.setCellSize(rowIndex, i, 'left');
+                    });
+                    // 同步最右侧的锁列
+                    this.lockRightChildren.forEach((child, i) => {
+                        this.setCellSize(rowIndex, i, 'right');
+                    });
                 });
             }
         }
 
+        setCellSize(index, i, dir) {
+            const lockRow = this.getCellNode(index, i, dir),
+                row = this.getCellNode(index, i),
+                rowHeight =
+                    (row && parseFloat(getComputedStyle(row).height)) || 0;
+            let lockHeight = 0;
+
+            if (lockRow) {
+                lockHeight = lockRow.offsetHeight;
+            }
+
+            if (lockRow && rowHeight !== lockHeight) {
+                dom.setStyle(lockRow, 'height', rowHeight);
+            }
+        }
+
         getWrapperNode(type) {
             type = type ? type.charAt(0).toUpperCase() + type.substr(1) : '';
             try {
@@ -546,19 +550,20 @@ export default function lock(BaseComponent) {
             }
         }
 
-        getFirstNormalCellNode(index) {
-            let i = 0;
-            let row;
-            do {
-                row = this.getCellNode(index, i);
-                i++;
-            } while (
-                (!row || (row && row.rowSpan && row.rowSpan > 1)) &&
-                this.tableInc.flatChildren.length > i
-            );
-
-            return row;
-        }
+        // remove this in next major version, keep this for temperary incase of using it
+        // getFirstNormalCellNode(index) {
+        //     let i = 0;
+        //     let row;
+        //     do {
+        //         row = this.getCellNode(index, i);
+        //         i++;
+        //     } while (
+        //         (!row || (row && row.rowSpan && row.rowSpan > 1)) &&
+        //         this.tableInc.flatChildren.length > i
+        //     );
+
+        //     return row;
+        // }
 
         getRowNode(index, type) {
             type = type ? type.charAt(0).toUpperCase() + type.substr(1) : '';

diff --git a/types/table/index.d.ts b/types/table/index.d.ts
@@ -315,16 +315,19 @@ export interface TableProps extends React.HTMLAttributes<HTMLElement>, CommonPro
      * 是否启用选择模式
      */
     rowSelection?: {
-        getProps?: (record: object, index: number) => void;
+        getProps?: (record: {}, index: number) => void;
         onChange?: (selectedRowKeys: Array<any>, records: Array<any>) => void;
         onSelect?: (
             selected: boolean,
-            record: object,
+            record: {},
             records: Array<any>
         ) => void;
         onSelectAll?: (selected: boolean, records: Array<any>) => void;
         selectedRowKeys?: Array<any>;
         mode?: 'single' | 'multiple';
+        titleProps?: () => {};
+        columnProps?: () => {};
+        titleAddons?: () => {};
     };
 
     /**