From 76435779fc11e75b4647d6ab1ff4b1de69f27fd8 Mon Sep 17 00:00:00 2001
From: zhangwenshuai <zhangwenshuai@mttop.cn>
Date: Mon, 10 Aug 2020 11:47:49 +0800
Subject: [PATCH] update dragResize dir and fixed ui

---
 components/apolloTable/component/DragFixed.tsx   |  8 ++++++--
 .../apolloTable/component/DragResized.less       |  5 ++++-
 components/apolloTable/component/DragResized.tsx | 16 ++++++++++++++--
 .../apolloTable/component/RightDragFixed.tsx     |  8 ++++++--
 components/apolloTable/component/Table.tsx       |  1 +
 5 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/components/apolloTable/component/DragFixed.tsx b/components/apolloTable/component/DragFixed.tsx
index e5c7f2f..ec6f5fa 100644
--- a/components/apolloTable/component/DragFixed.tsx
+++ b/components/apolloTable/component/DragFixed.tsx
@@ -36,6 +36,10 @@ const DragFixed = (props: any) => {
 
     const onMouseMoveWrap = (e: any) => {
         // 滑块位置跟随鼠标上下移动
+        const handleWrapRect = handleWrap.getBoundingClientRect();
+        if (e.clientY < handleWrapRect.y) {
+            return;
+        }
         handle.style.top = `${e.clientY}px`;
     };
 
@@ -51,7 +55,7 @@ const DragFixed = (props: any) => {
             onResizeStart();
         }
         const originLeft = container.getBoundingClientRect().x || 0;
-        handleWrap.style.top = 0;
+        // handleWrap.style.top = 0;
         handleWrap.style.left = `${e.x - originLeft}px`;
     };
 
@@ -95,7 +99,7 @@ const DragFixed = (props: any) => {
         dividerWrap.style.display = 'none';
         // 滑块wrap移除hovered样式
         handleWrap.classList.remove(styles.hovered);
-        handleWrap.style.top = `${initTop}px`;
+        // handleWrap.style.top = `${initTop}px`;
         handleWrap.style.left = fixedWidth;
         // 滑块隐藏
         handle.style.opacity = 0;
diff --git a/components/apolloTable/component/DragResized.less b/components/apolloTable/component/DragResized.less
index 773456f..11007ce 100644
--- a/components/apolloTable/component/DragResized.less
+++ b/components/apolloTable/component/DragResized.less
@@ -5,10 +5,13 @@
     width: 2px;
     height: 100%;
     bottom: 0;
-    right: -1px;
+    right: 0px;
     cursor: ew-resize;
     z-index: 1;
     background: #ececec;
+    &.right{
+        left: 0px;
+    }
     &:hover {
         background-color: rgb(33, 150, 243);
     }
diff --git a/components/apolloTable/component/DragResized.tsx b/components/apolloTable/component/DragResized.tsx
index 102e080..2005fde 100644
--- a/components/apolloTable/component/DragResized.tsx
+++ b/components/apolloTable/component/DragResized.tsx
@@ -1,10 +1,21 @@
 import React from 'react';
+import classNames from 'classnames';
 import { ResizableBox } from 'react-resizable';
 import { getCache, saveCache } from '../utils/cache';
 import styles from './DragResized.less';
 
 const DragResized = (props: any) => {
-    const { style, columnName, tableId, canResized, onDragResized, onDragResizedCb, cachedFeAttr, columns } = props;
+    const {
+        style,
+        columnName,
+        tableId,
+        canResized,
+        onDragResized,
+        onDragResizedCb,
+        cachedFeAttr,
+        columns,
+        position,
+    } = props;
     if (!canResized) {
         return <div style={style}>{props.children}</div>;
     }
@@ -65,7 +76,7 @@ const DragResized = (props: any) => {
             height={style.height}
             handle={
                 <span
-                    className={styles.handleWidth}
+                    className={position === 'right' ? classNames(styles.handleWidth, styles.right) : styles.handleWidth}
                     onClick={(e) => {
                         e.stopPropagation();
                     }}
@@ -76,6 +87,7 @@ const DragResized = (props: any) => {
             onResize={onResizeWidth}
             onResizeStop={onResizeWidthStop}
             draggableOpts={{ enableUserSelectHack: false }}
+            resizeHandles={position === 'right' ? ['w'] : ['e']}
         >
             {props.children}
         </ResizableBox>
diff --git a/components/apolloTable/component/RightDragFixed.tsx b/components/apolloTable/component/RightDragFixed.tsx
index 99bcf69..e11f94c 100644
--- a/components/apolloTable/component/RightDragFixed.tsx
+++ b/components/apolloTable/component/RightDragFixed.tsx
@@ -37,6 +37,10 @@ const DragFixed = (props: any) => {
 
     const onMouseMoveWrap = (e: any) => {
         // 滑块位置跟随鼠标上下移动
+        const handleWrapRect = handleWrap.getBoundingClientRect();
+        if (e.clientY < handleWrapRect.y) {
+            return;
+        }
         handle.style.top = `${e.clientY}px`;
     };
 
@@ -52,7 +56,7 @@ const DragFixed = (props: any) => {
             onResizeStart();
         }
         const originLeft = container.getBoundingClientRect().x || 0;
-        handleWrap.style.top = 0;
+        // handleWrap.style.top = 0;
         handleWrap.style.left = `${e.x - originLeft}px`;
     };
 
@@ -101,7 +105,7 @@ const DragFixed = (props: any) => {
         dividerWrap.style.display = 'none';
         // 滑块wrap移除hovered样式
         handleWrap.classList.remove(styles.hovered);
-        handleWrap.style.top = `${initTop}px`;
+        // handleWrap.style.top = `${initTop}px`;
         handleWrap.style.left = fixedWidth;
         // 滑块隐藏
         handle.style.opacity = 0;
diff --git a/components/apolloTable/component/Table.tsx b/components/apolloTable/component/Table.tsx
index 917fd64..e600431 100644
--- a/components/apolloTable/component/Table.tsx
+++ b/components/apolloTable/component/Table.tsx
@@ -270,6 +270,7 @@ export default class AirTable extends Component<TableProps, TableState> {
                 cachedFeAttr={cachedFeAttr}
                 onDragResizedCb={this.onDragResizedCb}
                 columns={formatColumns}
+                position={position}
             >
                 <DragSorted
                     columnName={columnName}
-- 
2.21.0