From 9988d5e99b1af2f5490d9e99321f3e67b6835bca Mon Sep 17 00:00:00 2001
From: zhangwenshuai <zhangwenshuai@mttop.cn>
Date: Wed, 24 Jun 2020 21:43:34 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=88=97=E4=BC=B8=E7=BC=A9?=
 =?UTF-8?q?=E4=B8=BAdom=E6=93=8D=E4=BD=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/apolloTable/component/Table.tsx    | 55 +++++++++----------
 .../apolloTable/component/interface.tsx       |  2 -
 2 files changed, 26 insertions(+), 31 deletions(-)

diff --git a/components/apolloTable/component/Table.tsx b/components/apolloTable/component/Table.tsx
index 41fcdad..f9f7341 100644
--- a/components/apolloTable/component/Table.tsx
+++ b/components/apolloTable/component/Table.tsx
@@ -30,6 +30,8 @@ export default class AirTable extends Component<TableProps, TableState> {
 
     grid6: any;
     tableContainer: any;
+    widthHandleWrapper: any;
+    widthHandle: any;
 
     memoizeData: Function;
 
@@ -68,8 +70,6 @@ export default class AirTable extends Component<TableProps, TableState> {
             tableWidth: width,
             tableHeight: height,
             selectedCell: null,
-            showWidthHandle: false,
-            widthHandleLeft: 0,
         };
         this.config = {
             overscanColumnCount: 5,
@@ -220,31 +220,19 @@ export default class AirTable extends Component<TableProps, TableState> {
     };
 
     // 列伸缩回调
-    onResizeWidth = (columnName: string, e, { size }) => {
-        let originLeft =
-            this.tableContainer && this.tableContainer.offsetParent.offsetParent.offsetParent.style.paddingLeft;
-        if (originLeft) {
-            originLeft = originLeft.replace(/[a-zA-Z]/gi, '');
-        } else {
-            originLeft = 0;
+    onResizeWidth = (e) => {
+        const originLeft = (this.tableContainer && this.tableContainer.getBoundingClientRect().x) || 0;
+        if (this.widthHandle) {
+            this.widthHandle.style.left = `${e.x - originLeft}px`;
         }
-        this.setState({
-            widthHandleLeft: e.x - originLeft,
-        });
     };
     // 列伸缩开始
-    onResizeWidthStart = (columnName: string, e, { size }) => {
-        let originLeft =
-            this.tableContainer && this.tableContainer.offsetParent.offsetParent.offsetParent.style.paddingLeft;
-        if (originLeft) {
-            originLeft = originLeft.replace(/[a-zA-Z]/gi, '');
-        } else {
-            originLeft = 0;
+    onResizeWidthStart = (e) => {
+        const originLeft = (this.tableContainer && this.tableContainer.getBoundingClientRect().x) || 0;
+        if (this.widthHandleWrapper && this.widthHandle) {
+            this.widthHandleWrapper.style.display = 'block';
+            this.widthHandle.style.left = `${e.x - originLeft}px`;
         }
-        this.setState({
-            showWidthHandle: true,
-            widthHandleLeft: e.x - originLeft,
-        });
     };
     // 列伸缩结束
     onResizeWidthStop = (columnName: string, e, { size }) => {
@@ -256,10 +244,12 @@ export default class AirTable extends Component<TableProps, TableState> {
             }
             newColumns.push(item);
         });
+        if (this.widthHandleWrapper) {
+            this.widthHandleWrapper.style.display = 'none';
+        }
         this.setState(
             {
                 columns: newColumns,
-                showWidthHandle: false,
             },
             () => {
                 this.grid1 && this.grid1.recomputeGridSize();
@@ -301,8 +291,8 @@ export default class AirTable extends Component<TableProps, TableState> {
                             }}
                         />
                     }
-                    // onResize={this.onResizeWidth.bind(this, columnName)}
-                    // onResizeStart={this.onResizeWidthStart.bind(this, columnName)}
+                    onResize={this.onResizeWidth}
+                    onResizeStart={this.onResizeWidthStart}
                     onResizeStop={this.onResizeWidthStop.bind(this, columnName)}
                     draggableOpts={{ enableUserSelectHack: false }}
                 >
@@ -418,7 +408,7 @@ export default class AirTable extends Component<TableProps, TableState> {
 
     render() {
         const { loading, noDataPlaceholder, loadComp } = this.props;
-        const { columns, dataSource, tableWidth = 0, tableHeight = 0, showWidthHandle, widthHandleLeft } = this.state;
+        const { columns, dataSource, tableWidth = 0, tableHeight = 0 } = this.state;
         const { overscanColumnCount, overscanRowCount, rowHeight, headerHeight } = this.config;
         const scrollbarWidth = scrollbarSize() || 0;
         const showColumns = this.memoizeColumns(columns);
@@ -716,9 +706,16 @@ export default class AirTable extends Component<TableProps, TableState> {
                                     </div>
                                     <div
                                         className={styles.widthHandleWrapper}
-                                        style={{ display: showWidthHandle ? 'block' : 'none' }}
+                                        ref={(dom) => {
+                                            this.widthHandleWrapper = dom;
+                                        }}
                                     >
-                                        <div className={styles.widthHandle} style={{ left: widthHandleLeft }} />
+                                        <div
+                                            className={styles.widthHandle}
+                                            ref={(dom) => {
+                                                this.widthHandle = dom;
+                                            }}
+                                        />
                                     </div>
                                 </div>
                             );
diff --git a/components/apolloTable/component/interface.tsx b/components/apolloTable/component/interface.tsx
index 04c331a..1b10d4a 100644
--- a/components/apolloTable/component/interface.tsx
+++ b/components/apolloTable/component/interface.tsx
@@ -80,8 +80,6 @@ export interface TableState {
     tableHeight?: number;
     tableWidth?: number;
     selectedCell?: any;
-    showWidthHandle: boolean;
-    widthHandleLeft: number;
 }
 export interface CommonProps extends TableProps {
     operateConfig?: OperateConfigProps;
-- 
2.21.0