From 6f2e5aebe708167ac79a1855b6951c9c13f11686 Mon Sep 17 00:00:00 2001
From: zhangwenshuai <zhangwenshuai@mttop.cn>
Date: Wed, 24 Jun 2020 12:36:53 +0800
Subject: [PATCH] add react-resizeable

---
 components/apolloTable/component/Table.less | 10 +++
 components/apolloTable/component/Table.tsx  | 98 +++++++++++++++------
 2 files changed, 80 insertions(+), 28 deletions(-)

diff --git a/components/apolloTable/component/Table.less b/components/apolloTable/component/Table.less
index 29ef05f..232d44a 100644
--- a/components/apolloTable/component/Table.less
+++ b/components/apolloTable/component/Table.less
@@ -107,3 +107,13 @@
 .defaultEmpty {
     padding-top: 100px;
 }
+.handleWidth{
+    position: absolute;
+    width: 10px;
+    height: 100%;
+    bottom: 0;
+    right: -5px;
+    cursor: col-resize;
+    z-index: 1;
+    background: #ececec;
+}
diff --git a/components/apolloTable/component/Table.tsx b/components/apolloTable/component/Table.tsx
index 7482115..a288775 100644
--- a/components/apolloTable/component/Table.tsx
+++ b/components/apolloTable/component/Table.tsx
@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import memoizeOne from 'memoize-one';
 import { Empty, Spin } from 'antd';
 import { ScrollSync, Grid, AutoSizer } from 'react-virtualized';
+import { Resizable } from 'react-resizable';
 import _ from 'lodash';
 import scrollbarSize from 'dom-helpers/scrollbarSize';
 import styles from './Table.less';
@@ -215,6 +216,31 @@ export default class AirTable extends Component<TableProps, TableState> {
         });
     };
 
+    // 列伸缩回调
+    onResizeWidth = (columnName: string, e, { size }) => {
+        const { columns } = this.state;
+        const newColumns: any = [];
+        columns.map((item) => {
+            if (item.columnName === columnName) {
+                item.width = size.width;
+            }
+            newColumns.push(item);
+        });
+        this.setState(
+            {
+                columns: newColumns,
+            },
+            () => {
+                this.grid1 && this.grid1.recomputeGridSize();
+                this.grid2 && this.grid2.recomputeGridSize();
+                this.grid3 && this.grid3.recomputeGridSize();
+                this.grid4 && this.grid4.recomputeGridSize();
+                this.grid5 && this.grid5.recomputeGridSize();
+                this.grid6 && this.grid6.recomputeGridSize();
+            },
+        );
+    };
+
     // 渲染表头
     renderHeaderCell = (
         { showColumns, position }: { showColumns: ColumnProps[]; position?: string },
@@ -233,23 +259,37 @@ export default class AirTable extends Component<TableProps, TableState> {
             requiredFlag,
         } = showColumns[columnIndex];
         return (
-            <div className={styles.headerCell} key={key} style={style}>
-                <Column
-                    columnType={String(columnType)}
-                    columnName={columnName}
-                    columnChsName={columnChsName}
-                    columnAttrObj={columnAttrObj}
-                    sortFlag={sortFlag}
-                    sortConfig={sortConfig}
-                    columnIndex={columnIndex}
-                    showIndex={position === 'right' ? false : showIndex}
-                    questionText={questionText}
-                    rowSelection={position === 'right' ? false : rowSelection}
-                    dataSource={dataSource}
-                    icon={icon}
-                    required={requiredFlag}
-                />
-            </div>
+            <Resizable
+                width={style.width}
+                handle={
+                    <span
+                        className={styles.handleWidth}
+                        onClick={(e) => {
+                            e.stopPropagation();
+                        }}
+                    />
+                }
+                onResize={this.onResizeWidth.bind(this, columnName)}
+                draggableOpts={{ enableUserSelectHack: false }}
+            >
+                <div className={styles.headerCell} key={key} style={style}>
+                    <Column
+                        columnType={String(columnType)}
+                        columnName={columnName}
+                        columnChsName={columnChsName}
+                        columnAttrObj={columnAttrObj}
+                        sortFlag={sortFlag}
+                        sortConfig={sortConfig}
+                        columnIndex={columnIndex}
+                        showIndex={position === 'right' ? false : showIndex}
+                        questionText={questionText}
+                        rowSelection={position === 'right' ? false : rowSelection}
+                        dataSource={dataSource}
+                        icon={icon}
+                        required={requiredFlag}
+                    />
+                </div>
+            </Resizable>
         );
     };
 
@@ -537,16 +577,16 @@ export default class AirTable extends Component<TableProps, TableState> {
                                                                         })}
                                                                     />
                                                                 ) : (
-                                                                        columnCount > 0 &&
-                                                                        !loading && (
-                                                                            <Empty
-                                                                                className={styles.defaultEmpty}
-                                                                                description={
-                                                                                    noDataPlaceholder || locale.empty
-                                                                                }
-                                                                            />
-                                                                        )
-                                                                    )}
+                                                                    columnCount > 0 &&
+                                                                    !loading && (
+                                                                        <Empty
+                                                                            className={styles.defaultEmpty}
+                                                                            description={
+                                                                                noDataPlaceholder || locale.empty
+                                                                            }
+                                                                        />
+                                                                    )
+                                                                )}
                                                             </div>
                                                         }
                                                     </div>
@@ -628,7 +668,9 @@ export default class AirTable extends Component<TableProps, TableState> {
                                         </div>
                                     )}
                                     <div className={styles.fillHandleWrapper} />
-                                    <div className={styles.loading} style={{ top: `${totalHeight / 2}px` }}>{loading && (loadComp ? loadComp : <Spin />)}</div>
+                                    <div className={styles.loading} style={{ top: `${totalHeight / 2}px` }}>
+                                        {loading && (loadComp ? loadComp : <Spin />)}
+                                    </div>
                                 </div>
                             );
                         }}
-- 
2.21.0