From 6d4248d046a420aa6a1ddfeb78632e4405b91e51 Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Sun, 23 Jan 2022 15:31:28 +0800
Subject: [PATCH] fix: drag treenode style

---
 components/tree/style/mixin.less | 74 ++++++++++++++++++++++++++------
 1 file changed, 61 insertions(+), 13 deletions(-)

diff --git a/components/tree/style/mixin.less b/components/tree/style/mixin.less
index 197c206625..3a502753cd 100644
--- a/components/tree/style/mixin.less
+++ b/components/tree/style/mixin.less
@@ -1,7 +1,6 @@
 @import '../../style/mixins/index';
 
 @tree-prefix-cls: ~'@{ant-prefix}-tree';
-@tree-node-prefix-cls: ~'@{tree-prefix-cls}-treenode';
 @select-tree-prefix-cls: ~'@{ant-prefix}-select-tree';
 @tree-motion: ~'@{ant-prefix}-motion-collapse';
 @tree-node-padding: (@padding-xs / 2);
@@ -13,6 +12,7 @@
     display: inline-block;
     font-size: 10px;
     vertical-align: baseline;
+
     svg {
       transition: transform 0.3s;
     }
@@ -28,6 +28,7 @@
     background-color: @primary-color;
     border-radius: 1px;
     pointer-events: none;
+
     &::after {
       position: absolute;
       top: -3px;
@@ -66,6 +67,26 @@
       .@{custom-tree-prefix-cls}-node-content-wrapper {
         flex: auto;
       }
+
+      // >>> Drag
+      .@{custom-tree-node-prefix-cls}.dragging {
+        position: relative;
+
+        &::after {
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: @tree-node-padding;
+          left: 0;
+          border: 1px solid @primary-color;
+          opacity: 0;
+          animation: ant-tree-node-fx-do-not-use 0.3s;
+          animation-play-state: running;
+          animation-fill-mode: forwards;
+          content: '';
+          pointer-events: none;
+        }
+      }
     }
   }
 
@@ -110,6 +131,19 @@
     }
   }
 
+  // >>> Drag Handler
+  &-draggable-icon {
+    width: @tree-title-height;
+    line-height: @tree-title-height;
+    text-align: center;
+    opacity: 0.2;
+    transition: opacity @animation-duration-slow;
+
+    .@{custom-tree-node-prefix-cls}:hover & {
+      opacity: 0.45;
+    }
+  }
+
   // >>> Switcher
   &-switcher {
     .antTreeSwitcherIcon();
@@ -145,19 +179,21 @@
       display: inline-block;
       width: 100%;
       height: 100%;
+      // https://github.com/ant-design/ant-design/issues/31884
       &::before {
         position: absolute;
         top: 0;
+        right: 12px;
         bottom: -@tree-node-padding;
         margin-left: -1px;
-        border-left: 1px solid @normal-color;
+        border-right: 1px solid @normal-color;
         content: ' ';
       }
+
       &::after {
         position: absolute;
         width: @tree-title-height - 14px;
         height: @tree-title-height - 10px;
-        margin-left: -1px;
         border-bottom: 1px solid @normal-color;
         content: ' ';
       }
@@ -200,6 +236,7 @@
       line-height: @tree-title-height;
       text-align: center;
       vertical-align: top;
+
       &:empty {
         display: none;
       }
@@ -212,7 +249,7 @@
   }
 
   // ==================== Draggable =====================
-  &-node-content-wrapper[draggable='true'] {
+  &-node-content-wrapper {
     line-height: @tree-title-height;
     user-select: none;
 
@@ -255,20 +292,31 @@
       background: @component-background;
 
       &-line-icon {
-        vertical-align: -0.225em;
+        // https://github.com/ant-design/ant-design/issues/32813
+        vertical-align: -0.15em;
       }
     }
   }
-}
 
-.@{tree-node-prefix-cls}-leaf-last {
-  .@{tree-prefix-cls}-switcher {
-    &-leaf-line {
-      &::before {
-        top: auto !important;
-        bottom: auto !important;
-        height: @tree-title-height - 10px !important;
+  .@{custom-tree-node-prefix-cls}-leaf-last {
+    .@{custom-tree-prefix-cls}-switcher {
+      &-leaf-line {
+        &::before {
+          top: auto !important;
+          bottom: auto !important;
+          height: @tree-title-height - 10px !important;
+        }
       }
     }
   }
 }
+
+@keyframes ant-tree-node-fx-do-not-use {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}