fix(Table): header and body always scroll together while GroupHeader …

…and StickyLock, close 4396 (#4550)

* fix(Table): should support Header and Body follow the TableGroupHeader when it locks the columns

* fix(Table): delete useless code

* fix(Table): adjust test spec for #4396

---------

Co-authored-by: 珵之 <chengzhi.zpc@alibaba-inc.com>

src/table/list/body.jsx

@@ -1,6 +1,25 @@
 import React from 'react';
+import { findDOMNode } from 'react-dom';
+import PropTypes from 'prop-types';
 import BodyComponent from '../base/body';
 
-export default function ListBody(props) {
-    return <BodyComponent component="div" {...props} />;
+export default class ListBody extends React.Component {
+    static contextTypes = {
+        getNode: PropTypes.func,
+        onFixedScrollSync: PropTypes.func,
+    };
+
+    componentDidMount() {
+        const { getNode } = this.context;
+        getNode && getNode('body', findDOMNode(this));
+    }
+
+    onScroll = e => {
+        const { onFixedScrollSync } = this.context;
+        onFixedScrollSync && onFixedScrollSync(e);
+    };
+
+    render() {
+        return <BodyComponent component="div" onScroll={this.onScroll} {...this.props} />;
+    }
 }

test/table/issue-spec.js

@@ -12,7 +12,7 @@ import '../../src/table/style.js';
 
 /* eslint-disable */
 Enzyme.configure({ adapter: new Adapter() });
-
+const delay = duration => new Promise(resolve => setTimeout(resolve, duration));
 const generateDataSource = j => {
     const result = [];
     for (let i = 0; i < j; i++) {
@@ -659,6 +659,79 @@ describe('Issue', () => {
         document.body.removeChild(div);
     });
 
+    // fix https://github.com/alibaba-fusion/next/issues/4396
+    it('should support Header and Body follow the TableGroupHeader when it locks the columns', async () => {
+        const container = document.createElement('div');
+        document.body.appendChild(container);
+
+        const dataSource = () => {
+            const result = [];
+            for (let i = 0; i < 5; i++) {
+                result.push({
+                    title: { name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible` },
+                    id: 100306660940 + i,
+                    time: 2000 + i,
+                });
+            }
+            return result;
+        };
+        const columns = [
+            {
+                title: 'Group2-7',
+                children: [
+                    {
+                        title: 'Title2',
+                        dataIndex: 'id',
+                        lock: 'left',
+                        width: 140,
+                    },
+                    {
+                        title: 'Title3',
+                        lock: 'left',
+                        dataIndex: 'time',
+                        width: 200,
+                    },
+                ],
+            },
+            {
+                title: 'Title1',
+                dataIndex: 'id',
+                width: 1400,
+            },
+            {
+                title: 'Time',
+                dataIndex: 'time',
+                width: 500,
+            },
+        ];
+
+        ReactDOM.render(
+            <Table.StickyLock dataSource={dataSource()} columns={columns}>
+                <Table.GroupHeader
+                    useFirstLevelDataWhenNoChildren
+                    cell={() => {
+                        return <div>title</div>;
+                    }}
+                />
+            </Table.StickyLock>,
+            container
+        );
+        const tableHeader = document.querySelector('.next-table-header');
+        const tableBody = document.querySelector('.next-table-body');
+        assert(tableHeader);
+        assert(tableBody);
+
+        tableHeader.scrollTo({ left: 100, top: 0, behavior: 'smooth' });
+        await delay(500);
+        assert(tableHeader.scrollLeft === 100);
+        assert(tableBody.scrollLeft === 100);
+
+        tableBody.scrollTo({ left: 0, top: 0, behavior: 'smooth' });
+        await delay(500);
+        assert(tableHeader.scrollLeft === 0);
+        assert(tableBody.scrollLeft === 0);
+    });
+
     it('should support multiple header lock', done => {
         const container = document.createElement('div');
         document.body.appendChild(container);