@kdcloudjs/kdesign 1.6.0 → 1.6.3

package/lib/tree/style/index.less

@@ -12,6 +12,7 @@
   font-size: @tree-font-size;
   color: @tree-color-text;
   margin-left: @tree-margin-left;
+  padding: @tree-padding-vertical 0;
   &-root {
     min-width: 100%;
     flex-shrink: 0;
@@ -136,26 +137,35 @@
 
   &-drag-over {
     background-color: @tree-node-drag-over-color-background;
-    border: 2px solid @tree-node-drag-over-border-color;
+    box-shadow: inset 0 0 0 2px @tree-node-drag-over-border-color;
   }
 
   &-drag-line {
-    position: absolute;
-    left: 0;
-    top: 100%;
-    width: 100%;
-    border-top: 2px solid @tree-node-drag-line-border-color;
-
-    &::before {
-      content: '';
-      width: 4px;
-      height: 4px;
-      background-color: #fff;
-      border-radius: 50%;
-      border: 2px solid @tree-node-drag-line-border-color;
+    &-top, &-bottom {
       position: absolute;
-      top: -1px;
-      transform: translateY(-50%);
+      left: 0;
+      top: 0;
+      width: 100%;
+      border-top: 2px solid @tree-node-drag-line-border-color;
+      
+      &::before {
+        content: '';
+        width: 4px;
+        height: 4px;
+        background-color: #fff;
+        border-radius: 50%;
+        border: 2px solid @tree-node-drag-line-border-color;
+        position: absolute;
+        top: -1px;
+        transform: translateY(-50%);
+      }
+    }
+    &-top {
+      top: 0;
+    }
+
+    &-bottom {
+      top: 100%;
     }
   }
   &-leaf-icon {

package/lib/tree/style/token.less

@@ -22,7 +22,10 @@
 @tree-expand-icon-loading-width: var(~'@{tree-prefix}-expand-icon-loading-sizing-width', 16px);
 @tree-node-icon-height: var(~'@{tree-prefix}-node-icon-sizing-height', 16px);
 @tree-node-icon-width: var(~'@{tree-prefix}-node-icon-sizing-width', 16px);
+
+// spacing
 @tree-margin-left: var(~'@{tree-prefix}-spacing-margin-left', 0px);
+@tree-padding-vertical: var(~'@{tree-prefix}-spacing-padding-vertical', 3px);
 
 // font
 @tree-font-size: var(~'@{tree-prefix}-font-size', @font-size-small);

package/lib/tree/tree.js

@@ -298,47 +298,32 @@ var InternalTree = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
 
   var handleDragOver = _react.default.useCallback(function (event, node, dropTarget) {
     var dropPos = (0, _treeUtils.calcDropPosition)(event, dropTarget);
-    setDropPosition(dropPos);
-    var dragNode = getDragNode();
 
-    if (dragNode.key === node.key) {
-      setDropPosition(null);
+    if (!delayedDragEnterRef.current) {
+      delayedDragEnterRef.current = {};
     }
 
-    onDragOver && onDragOver({
-      event: event,
-      node: node
-    });
-  }, [onDragOver]);
-
-  var handleDragLeave = _react.default.useCallback(function (event, node) {
-    onDragLeave && onDragLeave({
-      event: event,
-      node: node
-    });
-  }, [onDragLeave]);
+    if (dropPos !== 0 && dropPos !== dropPosition) {
+      (0, _keys.default)(delayedDragEnterRef.current).forEach(function (key) {
+        clearTimeout(delayedDragEnterRef.current[key]);
+        delayedDragEnterRef.current[key] = null;
+      });
+    }
 
-  var handleDragEnter = _react.default.useCallback(function (event, node, dropTarget) {
+    setDropPosition(dropPos);
     var key = node.key,
         pos = node.pos;
     var dragNode = getDragNode();
 
-    if (!dragNode) {
-      return;
-    }
-
-    if (!delayedDragEnterRef.current) {
-      delayedDragEnterRef.current = {};
+    if (dragNode.key === node.key) {
+      setDropPosition(null);
     }
 
-    (0, _keys.default)(delayedDragEnterRef.current).forEach(function (key) {
-      clearTimeout(delayedDragEnterRef.current[key]);
-    });
+    if ((dragNode === null || dragNode === void 0 ? void 0 : dragNode.key) !== key && dropPos === 0) {
+      if (dragNode.key === node.key || delayedDragEnterRef.current[pos]) {
+        return;
+      }
 
-    if ((dragNode === null || dragNode === void 0 ? void 0 : dragNode.key) !== key) {
-      var dragPos = (0, _treeUtils.calcDropPosition)(event, dropTarget);
-      setDragOverNodeKey(key);
-      setDropPosition(dragPos);
       delayedDragEnterRef.current[pos] = setTimeout(function () {
         var newExpandedKeys = (0, _toConsumableArray2.default)(expandedKeys);
 
@@ -357,14 +342,39 @@ var InternalTree = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       }, 800);
     }
 
+    onDragOver && onDragOver({
+      event: event,
+      node: node
+    });
+  }, [TreeProps, dropPosition, expandedKeys, onDragOver, onExpand, setExpandedKeys]);
+
+  var handleDragLeave = _react.default.useCallback(function (event, node) {
+    onDragLeave && onDragLeave({
+      event: event,
+      node: node
+    });
+  }, [onDragLeave]);
+
+  var handleDragEnter = _react.default.useCallback(function (event, node, _dropTarget) {
+    var key = node.key;
+    var dragNode = getDragNode();
+
+    if (!dragNode) {
+      return;
+    }
+
+    if ((dragNode === null || dragNode === void 0 ? void 0 : dragNode.key) !== key) {
+      setDragOverNodeKey(key);
+    }
+
     onDragEnter && onDragEnter({
       event: event,
       node: node
     });
-  }, [TreeProps, expandedKeys, onDragEnter, onExpand, setExpandedKeys]);
+  }, [onDragEnter]);
 
   var handleDragEnd = _react.default.useCallback(function (event, node) {
-    setDragOverNodeKey('');
+    setDragOverNodeKey(null);
     onDragEnd && onDragEnd({
       event: event,
       node: node
@@ -374,6 +384,8 @@ var InternalTree = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   var handleDrop = _react.default.useCallback(function (event, node, dragNode, dragNodesKeys) {
     var _context3;
 
+    setDragOverNodeKey(null);
+    setDropPosition(null);
     var pos = (0, _treeUtils.getPos)(flattenAllData, dragNodesKeys);
     var keys = (0, _concat.default)(_context3 = (0, _treeUtils.getAllChildKeys)(flattenAllData, pos)).call(_context3, dragNodesKeys);
     onDrop && onDrop({
@@ -470,6 +482,7 @@ var InternalTree = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     item.getDragNode = getDragNode;
     item.setDragNode = setDragNode;
     item.dragOver = dragOverNodeKey === item.key && dropPosition === 0;
+    item.dropPosition = dropPosition;
     item.expandOnClickNode = expandOnClickNode;
     item.loading = loadingKeys.has(item.key) && !loadedKeys.has(item.key);
     item.loadData = loadData;

package/lib/tree/treeNode.js

@@ -88,6 +88,7 @@ var TreeNode = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       indeterminate = TreeNodeProps.indeterminate,
       estimatedItemSize = TreeNodeProps.estimatedItemSize,
       dragOver = TreeNodeProps.dragOver,
+      dropPosition = TreeNodeProps.dropPosition,
       expandOnClickNode = TreeNodeProps.expandOnClickNode,
       loading = TreeNodeProps.loading,
       onExpand = TreeNodeProps.onExpand,
@@ -99,7 +100,7 @@ var TreeNode = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       onDragEnd = TreeNodeProps.onDragEnd,
       onDrop = TreeNodeProps.onDrop,
       onSelect = TreeNodeProps.onSelect,
-      others = __rest(TreeNodeProps, ["nodeKey", "prefixCls", "selectable", "checkable", "className", "icon", "switcherIcon", "disabled", "draggable", "pos", "checked", "level", "getDragNode", "hasChildNode", "expand", "title", "showLine", "showIcon", "selected", "setDragNode", "style", "indeterminate", "estimatedItemSize", "dragOver", "expandOnClickNode", "loading", "onExpand", "onCheck", "onDragStart", "onDragOver", "onDragLeave", "onDragEnter", "onDragEnd", "onDrop", "onSelect"]);
+      others = __rest(TreeNodeProps, ["nodeKey", "prefixCls", "selectable", "checkable", "className", "icon", "switcherIcon", "disabled", "draggable", "pos", "checked", "level", "getDragNode", "hasChildNode", "expand", "title", "showLine", "showIcon", "selected", "setDragNode", "style", "indeterminate", "estimatedItemSize", "dragOver", "dropPosition", "expandOnClickNode", "loading", "onExpand", "onCheck", "onDragStart", "onDragOver", "onDragLeave", "onDragEnter", "onDragEnd", "onDrop", "onSelect"]);
 
   var nodeData = _react.default.useMemo(function () {
     return (0, _extends2.default)({
@@ -267,7 +268,9 @@ var TreeNode = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     }, indent(), renderExpandIcon(), showIcon && renderNodeIcon(), /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _classnames.default)((_classNames5 = {}, (0, _defineProperty2.default)(_classNames5, "".concat(treeNodePrefixCls, "-title-wrap"), true), (0, _defineProperty2.default)(_classNames5, "".concat(treeNodePrefixCls, "-title-wrap-hover"), !expandOnClickNode && !disabled), (0, _defineProperty2.default)(_classNames5, "".concat(treeNodePrefixCls, "-title-wrap-selected"), selected && selectable && !disabled && !expandOnClickNode), _classNames5)),
       onClick: expandOnClickNode ? undefined : handleClick
-    }, checkable ? /*#__PURE__*/_react.default.createElement(_checkbox.default, {
+    }, showDragLine && dropPosition === -1 && /*#__PURE__*/_react.default.createElement("span", {
+      className: (0, _classnames.default)("".concat(treeNodePrefixCls, "-drag-line-top"))
+    }), checkable ? /*#__PURE__*/_react.default.createElement(_checkbox.default, {
       onChange: handleOnchange,
       checked: checked,
       indeterminate: !disabled && indeterminate,
@@ -279,8 +282,8 @@ var TreeNode = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       className: (0, _classnames.default)("".concat(treeNodePrefixCls, "-title"), (0, _defineProperty2.default)({}, "".concat(treeNodePrefixCls, "-title-disabled"), disabled))
     }, title)) : /*#__PURE__*/_react.default.createElement("span", {
       className: (0, _classnames.default)("".concat(treeNodePrefixCls, "-title"), (0, _defineProperty2.default)({}, "".concat(treeNodePrefixCls, "-title-disabled"), disabled))
-    }, title), showDragLine && !dragOver && /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _classnames.default)("".concat(treeNodePrefixCls, "-drag-line"))
+    }, title), showDragLine && dropPosition === 1 && /*#__PURE__*/_react.default.createElement("span", {
+      className: (0, _classnames.default)("".concat(treeNodePrefixCls, "-drag-line-bottom"))
     }))));
   };
 
@@ -352,6 +355,7 @@ var TreeNode = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var handleDrop = _react.default.useCallback(function (e) {
     if (!draggable) return;
     setShowDragLine(false);
+    setForbiddenChildrenPointerEvents(false);
     var data = getDragNode();
     var sourceKey = data === null || data === void 0 ? void 0 : data.key;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kdcloudjs/kdesign",
-  "version": "1.6.0",
+  "version": "1.6.3",
   "description": "KDesign 金蝶前端react 组件库",
   "title": "kdesign",
   "keywords": [