@rainbow-oh/yee-c 0.1.0 → 0.2.0

package/dist/esm/Splitter/splitter.js

@@ -128,64 +128,67 @@ var Wrapper = function Wrapper(_ref3) {
   var refs = useRef({});
   var arr = React.Children.toArray(children);
   React.Children.forEach(children, function (child, index) {
-    var n = index + 1;
-    var _ref4 = child.props || {},
-      style = _ref4.style;
-    var currentSize;
-    var min = undefined;
-    var max = undefined;
-    if (itemsSize && itemsSize[index]) {
-      var _itemsSize$index = itemsSize[index];
-      currentSize = _itemsSize$index.currentSize;
-      min = _itemsSize$index.min;
-      max = _itemsSize$index.max;
-    }
-    wrappered.push( /*#__PURE__*/React.cloneElement(child, {
-      style: _objectSpread(_objectSpread({}, style), {}, {
-        // If there is a border or other size-related design, it may cause calculation issues
-        flexBasis: currentSize
-      }),
-      min: min,
-      max: max,
-      index: n,
-      key: n,
-      ref: function ref(el) {
-        refs.current["item".concat(n)] = {
-          el: el,
-          props: child.props,
-          size: {
-            min: min,
-            max: max
-          }
-        };
+    if ( /*#__PURE__*/React.isValidElement(child)) {
+      var n = index + 1;
+      var _ref4 = child.props || {},
+        style = _ref4.style;
+      var currentSize;
+      var min = undefined;
+      var max = undefined;
+      if (itemsSize && itemsSize[index]) {
+        var _itemsSize$index = itemsSize[index];
+        currentSize = _itemsSize$index.currentSize;
+        min = _itemsSize$index.min;
+        max = _itemsSize$index.max;
       }
-    }));
-    var next = arr[index + 1];
-    if (!next || ! /*#__PURE__*/React.isValidElement(next)) {
-      return;
-    }
-    var _ref5 = child.props || {},
-      flexable = _ref5.flexable,
-      expandable = _ref5.expandable;
-    var _ref6 = next.props || {},
-      nextExpandable = _ref6.expandable;
-    var _expandable = {
-      start: false,
-      end: false
-    };
-    if (expandable) {
-      _expandable.start = true;
-    }
-    if (nextExpandable) {
-      _expandable.end = true;
+      wrappered.push( /*#__PURE__*/React.cloneElement(child, {
+        // @ts-ignore
+        style: _objectSpread(_objectSpread({}, style), {}, {
+          // If there is a border or other size-related design, it may cause calculation issues
+          flexBasis: currentSize
+        }),
+        min: min,
+        max: max,
+        index: n,
+        key: n,
+        ref: function ref(el) {
+          refs.current["item".concat(n)] = {
+            el: el,
+            props: child.props,
+            size: {
+              min: min,
+              max: max
+            }
+          };
+        }
+      }));
+      var next = arr[index + 1];
+      if (!next || ! /*#__PURE__*/React.isValidElement(next)) {
+        return;
+      }
+      var _ref5 = child.props || {},
+        flexable = _ref5.flexable,
+        expandable = _ref5.expandable;
+      var _ref6 = next.props || {},
+        nextExpandable = _ref6.expandable;
+      var _expandable = {
+        start: false,
+        end: false
+      };
+      if (expandable) {
+        _expandable.start = true;
+      }
+      if (nextExpandable) {
+        _expandable.end = true;
+      }
+      wrappered.push( /*#__PURE__*/React.createElement(SplitterHandler, _extends({}, props, {
+        index: n,
+        flexable: flexable,
+        expandable: _expandable,
+        onClick: onClick,
+        key: "handler-".concat(n)
+      })));
     }
-    wrappered.push( /*#__PURE__*/React.createElement(SplitterHandler, _extends({}, props, {
-      index: n,
-      flexable: flexable,
-      expandable: _expandable,
-      onClick: onClick,
-      key: "handler-".concat(n)
-    })));
   });
   return /*#__PURE__*/React.createElement(SplitterWrapperCtx.Provider, {
     value: {

package/dist/esm/Splitter/style/index.less

@@ -10,8 +10,18 @@
       var(--yee-splitter-border-color);
   }
 
+  &-horizontal {
+    @{pls}-handler {
+      cursor: e-resize;
+    }
+  }
+
   &-vertical {
     flex-direction: column;
+
+    @{pls}-handler {
+      cursor: n-resize;
+    }
   }
 }
 
@@ -77,8 +87,19 @@
       transition:
         background 0.2s ease-in-out,
         opacity 0.2s ease-in-out;
+      border-radius: 2px;
       content: '';
     }
+
+    &:hover {
+      &::after {
+        background-color: color-mix(
+          in srgb,
+          var(--yee-splitter-handler-color),
+          black 20%
+        );
+      }
+    }
   }
 
   &-flexable {

package/dist/esm/Table/demo/size.js

@@ -1,4 +1,4 @@
-import { Space, Table } from "../..";
+import { Table } from "../..";
 import React from 'react';
 export default (function () {
   var columns = [{
@@ -30,12 +30,7 @@ export default (function () {
     age: 32,
     address: 'Sidney No. 1 Lake Park'
   }];
-  return /*#__PURE__*/React.createElement(Space, {
-    direction: "vertical",
-    style: {
-      width: '100%'
-    }
-  }, /*#__PURE__*/React.createElement(Table, {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Table, {
     columns: columns,
     dataSource: dataSource,
     size: "small"

package/dist/esm/Tabs/hooks/useTabScroll.d.ts

@@ -7,6 +7,6 @@ interface UseTabScrollOptions {
 }
 export declare function useTabScroll({ direction, navContainer, navList, enabled, }: UseTabScrollOptions): {
     refreshKey: number;
-    updateShadow: () => void;
+    updateShadow: import("../../utils/debounce").Debounced<() => void>;
 };
 export {};

package/dist/esm/Tabs/interface.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { DataAttributeProps } from '../utils/types';
-type SemanticDOM = 'header' | 'content';
+type SemanticDOM = 'header' | 'content' | 'track' | 'list' | 'activeBar';
 export type TabItemType = {
     /**
      * Unique key corresponding to activeKey

package/dist/esm/Tabs/style/index.less

@@ -522,6 +522,10 @@
   // background-color: var(--yee-color-bg-container);
 }
 
+@{pls}-tab-content {
+  height: 100%;
+}
+
 @{pls}-active {
   z-index: 2;
 

package/dist/esm/Tabs/tab-header/index.js

@@ -24,6 +24,8 @@ var TabHeader = function TabHeader(props) {
     _props$position = props.position,
     position = _props$position === void 0 ? 'top' : _props$position,
     headerExtra = props.headerExtra,
+    classNames = props.classNames,
+    styles = props.styles,
     onEdit = props.onEdit;
   var direction = position === 'top' || position === 'bottom' ? 'horizontal' : 'vertical';
 
@@ -105,7 +107,7 @@ var TabHeader = function TabHeader(props) {
       handleAddTab(e);
     }
   }, [handleAddTab]);
-  var cls = clsx("".concat(prefixCls, "-nav-wrapper"), "".concat(prefixCls, "-nav-wrapper-").concat(position));
+  var cls = clsx("".concat(prefixCls, "-nav-wrapper"), "".concat(prefixCls, "-nav-wrapper-").concat(position), classNames === null || classNames === void 0 ? void 0 : classNames.header);
   var contextValue = {
     activetab: activetab,
     navList: navList,
@@ -115,14 +117,17 @@ var TabHeader = function TabHeader(props) {
     setRange: setRange
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: cls
+    className: cls,
+    style: styles === null || styles === void 0 ? void 0 : styles.header
   }, renderPrefixExtra(), /*#__PURE__*/React.createElement(TabHeaderCtx.Provider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-nav-wrap"),
+    className: clsx("".concat(prefixCls, "-nav-wrap"), classNames === null || classNames === void 0 ? void 0 : classNames.track),
+    style: styles === null || styles === void 0 ? void 0 : styles.track,
     ref: navContainer
   }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-nav-list"),
+    className: clsx("".concat(prefixCls, "-nav-list"), classNames === null || classNames === void 0 ? void 0 : classNames.list),
+    style: styles === null || styles === void 0 ? void 0 : styles.list,
     ref: navList
   }, items === null || items === void 0 ? void 0 : items.map(function (item, index) {
     return /*#__PURE__*/React.createElement(TabHeaderTitle, _extends({}, item, {
@@ -131,7 +136,8 @@ var TabHeader = function TabHeader(props) {
       index: index
     }));
   }), !type && /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-active-bar"),
+    className: clsx("".concat(prefixCls, "-active-bar"), classNames === null || classNames === void 0 ? void 0 : classNames.activeBar),
+    style: styles === null || styles === void 0 ? void 0 : styles.activeBar,
     ref: activebar,
     "aria-hidden": "true"
   }), type === 'editable-card' && /*#__PURE__*/React.createElement("span", {

package/dist/esm/Tooltip/interface.d.ts

@@ -10,4 +10,8 @@ export interface TooltipProps extends Omit<TriggerProps, 'popup'> {
      * @default 0.1
      */
     mouseEnterDelay?: number;
+    /***
+     * Tooltip custom background color
+     * */
+    color?: string;
 }

package/dist/esm/Tooltip/style/index.less

@@ -8,19 +8,19 @@
 
   &-arrow {
     &::after {
-      position: absolute;
-      bottom: 0;
-      z-index: 0;
-      width: var(--yee-tooltip-arrow-width);
-      height: var(--yee-tooltip-arrow-height);
-      margin: auto;
+      // position: absolute;
+      // bottom: 0;
+      // z-index: 0;
+      // width: var(--yee-tooltip-arrow-width);
+      // height: var(--yee-tooltip-arrow-height);
+      // margin: auto;
       background-color: var(--yee-tooltip-bg-color);
       border-radius: var(--yee-tooltip-arrow-border-radius);
       box-shadow: var(--yee-box-shadow-popover-arrow);
       transform: translateY(var(--yee-tooltip-arrow-translate-y))
         rotate(var(--yee-tooltip-arrow-rotate));
-      content: '';
-      inset-inline: 0;
+      // content: '';
+      // inset-inline: 0;
     }
   }
 }

package/dist/esm/Tooltip/tooltip.js

@@ -1,5 +1,11 @@
-var _excluded = ["prefixCls", "title", "arrow", "children", "placement", "trigger", "mouseEnterDelay"];
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["prefixCls", "title", "arrow", "children", "placement", "trigger", "mouseEnterDelay", "color", "popupStyle", "hideOnClick"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React, { useContext } from 'react';
@@ -25,7 +31,12 @@ var Tooltip = function Tooltip(baseprops) {
     trigger = _props$trigger === void 0 ? ['hover', 'focus'] : _props$trigger,
     _props$mouseEnterDela = props.mouseEnterDelay,
     mouseEnterDelay = _props$mouseEnterDela === void 0 ? 0.1 : _props$mouseEnterDela,
+    color = props.color,
+    popupStyle = props.popupStyle,
+    _props$hideOnClick = props.hideOnClick,
+    hideOnClick = _props$hideOnClick === void 0 ? false : _props$hideOnClick,
     rest = _objectWithoutProperties(props, _excluded);
+  var mergedPopupStyle = _objectSpread(_objectSpread({}, color ? _defineProperty({}, '--yee-tooltip-bg-color', color) : null), popupStyle);
   var popup = /*#__PURE__*/React.createElement("span", {
     className: "".concat(prefixCls, "-content"),
     role: "tooltip"
@@ -36,7 +47,8 @@ var Tooltip = function Tooltip(baseprops) {
     popup: popup,
     arrow: arrow,
     placement: placement,
-    hideOnClick: false,
+    hideOnClick: hideOnClick,
+    popupStyle: mergedPopupStyle,
     mouseEnterDelay: mouseEnterDelay
   }), children);
 };

package/dist/esm/Tree/demo/draggable.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/esm/Tree/demo/draggable.js

@@ -0,0 +1,61 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { Tree, moveTreeNode } from "../..";
+import React, { useState } from 'react';
+var FIELD_NAMES = {
+  key: 'key',
+  label: 'label',
+  children: 'children'
+};
+export default (function () {
+  var _useState = useState([{
+      label: 'parent 1',
+      key: '0-0',
+      children: [{
+        label: 'parent 1-0',
+        key: '0-0-0',
+        children: [{
+          label: 'leaf-1',
+          key: '0-0-0-0'
+        }, {
+          label: 'leaf-2',
+          key: '0-0-0-1'
+        }]
+      }, {
+        label: 'parent 1-1',
+        key: '0-0-1',
+        children: [{
+          label: 'leaf-3',
+          key: '0-0-1-0'
+        }]
+      }]
+    }, {
+      label: 'parent 2',
+      key: '0-1',
+      children: [{
+        label: 'leaf-4',
+        key: '0-1-0'
+      }]
+    }]),
+    _useState2 = _slicedToArray(_useState, 2),
+    data = _useState2[0],
+    setData = _useState2[1];
+  return /*#__PURE__*/React.createElement(Tree, {
+    draggable: true,
+    defaultExpandAll: true,
+    dataSource: data,
+    onDrop: function onDrop(info) {
+      return setData(function (prev) {
+        return moveTreeNode(prev, {
+          dragKey: info.dragKey,
+          dropKey: info.dropKey,
+          position: info.position
+        }, FIELD_NAMES);
+      });
+    }
+  });
+});

package/dist/esm/Tree/demo/expanded.js

@@ -12,23 +12,23 @@ export default (function () {
     expandedKeys = _useState2[0],
     setExpandedKeys = _useState2[1];
   var treeData = [{
-    title: 'parent 1',
+    label: 'parent 1',
     key: '0-0',
     children: [{
-      title: 'parent 1-0',
+      label: 'parent 1-0',
       key: '0-0-0',
       children: [{
-        title: 'leaf',
+        label: 'leaf',
         key: '0-0-0-0'
       }, {
-        title: 'leaf',
+        label: 'leaf',
         key: '0-0-0-1'
       }]
     }, {
-      title: 'parent 1-1',
+      label: 'parent 1-1',
       key: '0-0-1',
       children: [{
-        title: 'leaf',
+        label: 'leaf',
         key: '0-0-1-0'
       }]
     }]

package/dist/esm/Tree/index.d.ts

@@ -1,3 +1,4 @@
 import Tree from './tree';
 export type { TreeProps } from './interface';
+export { moveTreeNode } from './utils/tree-tools';
 export default Tree;

package/dist/esm/Tree/index.js

@@ -1,2 +1,3 @@
 import Tree from "./tree";
+export { moveTreeNode } from "./utils/tree-tools";
 export default Tree;

package/dist/esm/Tree/interface.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="react" />
 export type SemanticType = '';
+export type DragPosition = 'before' | 'after' | 'inside';
+export type { MoveInfo } from './utils/tree-tools';
 export type TreeNode<T> = {
     /**
      * uid
@@ -102,6 +104,30 @@ export interface TreeProps<T> {
      * Whether to allow dragging
      */
     draggable?: boolean;
+    /**
+     * Whether to allow dropping a dragged node at the given position.
+     * Return false to forbid the drop (cursor shows "no-drop").
+     */
+    allowDrop?: (info: {
+        dragNode: T;
+        dropNode: T;
+        position: DragPosition;
+    }) => boolean;
+    /**
+     * Callback after a node is dropped. Pure controlled: the Tree does not
+     * mutate dataSource — reorder it yourself (e.g. with `moveTreeNode`).
+     */
+    onDrop?: (info: {
+        /** Original data of the dragged node */
+        dragNode: T;
+        /** Original data of the target node */
+        dropNode: T;
+        dragKey: string | number;
+        dropKey: string | number;
+        position: DragPosition;
+        /** Convenience flag: true when position is 'before' or 'after' */
+        dropToGap: boolean;
+    }) => void;
     /**
      * Whether to show connecting lines
      */

package/dist/esm/Tree/style/index.less

@@ -2,11 +2,36 @@
 
 @{pls} {
   &-node {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: flex-start;
     height: var(--yee-tree-node-height);
 
+    &[draggable='true'] {
+      cursor: grab;
+    }
+
+    &-dragging {
+      opacity: 0.4;
+    }
+
+    &-drag-over-before {
+      box-shadow: inset 0 2px 0 0 var(--yee-primary-color);
+    }
+
+    &-drag-over-after {
+      box-shadow: inset 0 -2px 0 0 var(--yee-primary-color);
+    }
+
+    &-drag-over-inside {
+      background: color-mix(
+        in srgb,
+        var(--yee-primary-color) 12%,
+        transparent
+      );
+    }
+
     &-switcher {
       display: inline-flex;
       align-items: center;

package/dist/esm/Tree/tree-node.js

@@ -1,4 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
@@ -32,9 +33,16 @@ var Node = function Node(props) {
     checkedKeys = _useContext.checkedKeys,
     expandedKeys = _useContext.expandedKeys,
     switcherIcon = _useContext.switcherIcon,
+    draggable = _useContext.draggable,
+    draggingKey = _useContext.draggingKey,
+    dropState = _useContext.dropState,
     onCheck = _useContext.onCheck,
     onSelect = _useContext.onSelect,
-    onExpand = _useContext.onExpand;
+    onExpand = _useContext.onExpand,
+    onNodeDragStart = _useContext.onNodeDragStart,
+    onNodeDragOver = _useContext.onNodeDragOver,
+    onNodeDragLeave = _useContext.onNodeDragLeave,
+    onNodeDrop = _useContext.onNodeDrop;
   var expanded = expandedKeys.includes(key);
   var checked = checkedKeys.includes(key);
   var selected = selectedKeys.includes(key);
@@ -110,11 +118,28 @@ var Node = function Node(props) {
       });
     });
   };
-  return /*#__PURE__*/React.createElement("div", {
-    className: clsx("".concat(prefixCls, "-node"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-node-with-line"), showLine), "".concat(prefixCls, "-leaf-node"), isLeaf), "".concat(prefixCls, "-last-node"), isLast))
+  var isDropTarget = (dropState === null || dropState === void 0 ? void 0 : dropState.key) === key;
+  var dropPosition = isDropTarget ? dropState.position : null;
+  var dragProps = draggable && !disabled ? {
+    draggable: true,
+    onDragStart: function onDragStart(e) {
+      return onNodeDragStart(key, e);
+    },
+    onDragOver: function onDragOver(e) {
+      return onNodeDragOver(key, e);
+    },
+    onDragLeave: function onDragLeave(e) {
+      return onNodeDragLeave(key, e);
+    },
+    onDrop: function onDrop(e) {
+      return onNodeDrop(key, e);
+    }
+  } : {};
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: clsx("".concat(prefixCls, "-node"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-node-with-line"), showLine), "".concat(prefixCls, "-leaf-node"), isLeaf), "".concat(prefixCls, "-last-node"), isLast), "".concat(prefixCls, "-node-dragging"), draggingKey === key), "".concat(prefixCls, "-node-drag-over-before"), dropPosition === 'before'), "".concat(prefixCls, "-node-drag-over-after"), dropPosition === 'after'), "".concat(prefixCls, "-node-drag-over-inside"), dropPosition === 'inside'))
     // style={{
     //   paddingLeft: depth * 28 + (isLeaf && checkable ? 24 : 0),
     // }}
-  }, renderEmptyNodes(depth), renderExpandedIcon(), renderCheckbox(), renderLabel());
+  }, dragProps), renderEmptyNodes(depth), renderExpandedIcon(), renderCheckbox(), renderLabel());
 };
 export default Node;

package/dist/esm/Tree/tree.d.ts

@@ -1,6 +1,10 @@
 import React, { ChangeEvent } from 'react';
-import type { TreeProps } from './interface';
+import type { DragPosition, TreeProps } from './interface';
 import './style/index.less';
+type DropState = {
+    key: string | number;
+    position: DragPosition;
+} | null;
 export declare const TreeContext: React.Context<{
     prefixCls?: string | undefined;
     checkable?: boolean | undefined;
@@ -11,9 +15,16 @@ export declare const TreeContext: React.Context<{
     selectedKeys: Array<string | number>;
     checkedKeys: Array<string | number>;
     expandedKeys: Array<string | number>;
+    draggable?: boolean | undefined;
+    draggingKey: string | number | null;
+    dropState: DropState;
     onCheck: (event: ChangeEvent<HTMLInputElement>) => void;
     onSelect: (key: string | number) => void;
     onExpand: (key: string | number) => void;
+    onNodeDragStart: (key: string | number, e: React.DragEvent) => void;
+    onNodeDragOver: (key: string | number, e: React.DragEvent) => void;
+    onNodeDragLeave: (key: string | number, e: React.DragEvent) => void;
+    onNodeDrop: (key: string | number, e: React.DragEvent) => void;
 }>;
 declare const Tree: <T extends Record<string, unknown> = any>(baseprops: TreeProps<T>) => React.JSX.Element;
 export default Tree;