@kdcloudjs/kdesign 1.4.1 → 1.5.2

package/es/tree/style/index.less

@@ -93,6 +93,13 @@
   &-title-disabled {
     color: @tree-node-disabled-color;
   }
+  &-title-wrap {
+    flex: 1;
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 100%;
+  }
   &-title {
     white-space: nowrap;
     margin-left: 6px;
@@ -118,12 +125,29 @@
     height: 100%;
   }
 
+  &-drag-over {
+    background-color: @tree-node-drag-over-color-background;
+    border: 2px solid @tree-node-drag-over-border-color;
+  }
+
   &-drag-line {
     position: absolute;
     left: 0;
     top: 100%;
     width: 100%;
-    border-top: 1px solid #fc8555;
+    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%);
+    }
   }
   &-leaf-icon {
     height: @tree-node-icon-height;

package/es/tree/style/token.less

@@ -11,6 +11,9 @@
 @tree-node-checked-text-color: var(~'@{tree-prefix}-node-color-text-checked', @color-theme);
 @tree-node-hover-bg-color: var(~'@{tree-prefix}-node-color-backgroung-hover', @color-hover);
 @tree-node-icon-color-text: var(~'@{tree-prefix}-node-icon-color-text', #666666);
+@tree-node-drag-over-border-color: var(~'@{tree-prefix}-node-drag-over-color-border', #5582f3);
+@tree-node-drag-over-color-background: var(~'@{tree-prefix}-node-drag-over-color-background', #E3EBFF);
+@tree-node-drag-line-border-color: var(~'@{tree-prefix}-node-drag-line-color-background', #276FF5);
 
 // sizing
 @tree-expand-icon-height: var(~'@{tree-prefix}-expand-icon-sizing-height', 22px);

package/es/tree/tree.d.ts

@@ -12,6 +12,8 @@ export interface TreeProps {
     disabled?: boolean;
     draggable?: boolean;
     expandedKeys?: string[];
+    filterValue?: string;
+    filterTreeNode?: () => boolean;
     height?: number;
     icon?: ReactNode | ((props: any) => ReactNode);
     switcherIcon?: ReactNode | ((props: any) => ReactNode) | [ReactNode | ((props: any) => ReactNode)];

package/es/tree/tree.js

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _toConsumableArray from "@babel/runtime-corejs3/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React, { useContext, useCallback, useEffect } from 'react';
@@ -8,7 +10,7 @@ import classNames from 'classnames';
 import ConfigContext from '../config-provider/ConfigContext';
 import { getCompProps } from '../_utils';
 import TreeNode from './treeNode';
-import { getChecked, getHalfChecked, addKeys, flattenAll, delKey, getFilterData, getSpreadAttrData, getDataCheckededState, getDataCheckededStateStrictly, getMaxLevel, getAllChildKeys, getPos, getSelected } from './utils/treeUtils';
+import { getChecked, getHalfChecked, addKeys, flattenAll, delKey, getFilterData, getSpreadAttrData, getDataCheckededState, getDataCheckededStateStrictly, getMaxLevel, getAllChildKeys, getPos, getSelected, calcDropPosition } from './utils/treeUtils';
 import { useChecked, useExpand, usePlantomHeightEffect, useViewportHeight, useVisibleDataMemo, useScrollToKey, useSelect } from './treeHooks';
 import isBoolean from 'lodash/isBoolean';
 var InternalTree = /*#__PURE__*/React.forwardRef(function (props, ref) {
@@ -58,7 +60,9 @@ var InternalTree = /*#__PURE__*/React.forwardRef(function (props, ref) {
     return '';
   } : _TreeProps$setTreeNod2,
       innerEstimatedItemSize = TreeProps.estimatedItemSize,
-      style = TreeProps.style;
+      style = TreeProps.style,
+      filterTreeNode = TreeProps.filterTreeNode,
+      filterValue = TreeProps.filterValue;
   var treePrefixCls = getPrefixCls(prefixCls, 'tree', customPrefixcls); // 树样式前缀
 
   var treeNodePrefixCls = getPrefixCls(prefixCls, 'tree-node', customPrefixcls); // 树节点样式前缀
@@ -102,22 +106,34 @@ var InternalTree = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var scrollRef = ref || rootRef;
   var treeNodeRef = React.useRef(null);
   var dragNodeRef = React.useRef(null);
+  var delayedDragEnterRef = React.useRef(null);
 
   var _React$useState5 = React.useState(true),
       _React$useState6 = _slicedToArray(_React$useState5, 2),
       isInit = _React$useState6[0],
       setIsInit = _React$useState6[1];
 
-  var _useExpand = useExpand(flattenAllData, expandedKeysProps, defaultExpandedKeys, defaultExpandAll, defaultExpandRoot, defaultExpandParent, scrollKey, isInit),
-      _useExpand2 = _slicedToArray(_useExpand, 1),
-      expandedKeys = _useExpand2[0];
+  var _React$useState7 = React.useState(null),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      dropPosition = _React$useState8[0],
+      setDropPosition = _React$useState8[1];
+
+  var _React$useState9 = React.useState(null),
+      _React$useState10 = _slicedToArray(_React$useState9, 2),
+      dragOverNodeKey = _React$useState10[0],
+      setDragOverNodeKey = _React$useState10[1];
+
+  var _useExpand = useExpand(flattenAllData, expandedKeysProps, defaultExpandedKeys, defaultExpandAll, defaultExpandRoot, defaultExpandParent, scrollKey, isInit, filterTreeNode, filterValue),
+      _useExpand2 = _slicedToArray(_useExpand, 2),
+      expandedKeys = _useExpand2[0],
+      setExpandedKeys = _useExpand2[1];
 
   var spreadAttrData = React.useMemo(function () {
     return getSpreadAttrData(flattenAllData, expandedKeys);
   }, [flattenAllData, expandedKeys]);
   var filterData = React.useMemo(function () {
-    return getFilterData(spreadAttrData);
-  }, [spreadAttrData]);
+    return getFilterData(spreadAttrData, filterTreeNode, filterValue);
+  }, [spreadAttrData, filterTreeNode, filterValue]);
 
   var _useViewportHeight = useViewportHeight(height, listRef),
       _useViewportHeight2 = _slicedToArray(_useViewportHeight, 1),
@@ -176,7 +192,15 @@ var InternalTree = /*#__PURE__*/React.forwardRef(function (props, ref) {
       node: node
     });
   }, [onDragStart]);
-  var handleDragOver = React.useCallback(function (event, node) {
+  var handleDragOver = React.useCallback(function (event, node, dropTarget) {
+    var dropPos = calcDropPosition(event, dropTarget);
+    setDropPosition(dropPos);
+    var dragNode = getDragNode();
+
+    if (dragNode.key === node.key) {
+      setDropPosition(null);
+    }
+
     onDragOver && onDragOver({
       event: event,
       node: node
@@ -188,13 +212,52 @@ var InternalTree = /*#__PURE__*/React.forwardRef(function (props, ref) {
       node: node
     });
   }, [onDragLeave]);
-  var handleDragEnter = React.useCallback(function (event, node) {
+  var handleDragEnter = React.useCallback(function (event, node, dropTarget) {
+    var key = node.key,
+        pos = node.pos;
+    var dragNode = getDragNode();
+
+    if (!dragNode) {
+      return;
+    }
+
+    if (!delayedDragEnterRef.current) {
+      delayedDragEnterRef.current = {};
+    }
+
+    _Object$keys(delayedDragEnterRef.current).forEach(function (key) {
+      clearTimeout(delayedDragEnterRef.current[key]);
+    });
+
+    if ((dragNode === null || dragNode === void 0 ? void 0 : dragNode.key) !== key) {
+      var dragPos = calcDropPosition(event, dropTarget);
+      setDragOverNodeKey(key);
+      setDropPosition(dragPos);
+      delayedDragEnterRef.current[pos] = setTimeout(function () {
+        var newExpandedKeys = _toConsumableArray(expandedKeys);
+
+        if (!node.expand) {
+          newExpandedKeys = addKeys(expandedKeys, [key]);
+        }
+
+        if (!('expandedKeys' in TreeProps)) {
+          setExpandedKeys(newExpandedKeys);
+        }
+
+        onExpand === null || onExpand === void 0 ? void 0 : onExpand(newExpandedKeys, {
+          node: node,
+          expanded: true
+        });
+      }, 800);
+    }
+
     onDragEnter && onDragEnter({
       event: event,
       node: node
     });
-  }, [onDragEnter]);
+  }, [TreeProps, expandedKeys, onDragEnter, onExpand, setExpandedKeys]);
   var handleDragEnd = React.useCallback(function (event, node) {
+    setDragOverNodeKey('');
     onDragEnd && onDragEnd({
       event: event,
       node: node
@@ -211,9 +274,10 @@ var InternalTree = /*#__PURE__*/React.forwardRef(function (props, ref) {
       event: event,
       node: node,
       dragNode: dragNode,
-      keys: keys
+      dragNodesKeys: keys,
+      dropPosition: dropPosition
     });
-  }, [onDrop, flattenAllData]);
+  }, [flattenAllData, onDrop, dropPosition]);
   var handleSelect = React.useCallback(function (event, node, key) {
     var checked = getChecked(checkedKeys, key);
     onSelect && onSelect([key], {
@@ -300,6 +364,7 @@ var InternalTree = /*#__PURE__*/React.forwardRef(function (props, ref) {
     item.style = setTreeNodeStyle(_extends({}, item));
     item.getDragNode = getDragNode;
     item.setDragNode = setDragNode;
+    item.dragOver = dragOverNodeKey === item.key && dropPosition === 0;
     return /*#__PURE__*/React.createElement(TreeNode, _extends({}, item, {
       key: item.key,
       ref: treeNodeRef

package/es/tree/treeHooks.d.ts

@@ -4,6 +4,6 @@ export declare const useViewportHeight: (height: number, listRef: React.RefObjec
 export declare const useVisibleDataMemo: (virtual: boolean, filterData: TreeNodeData[], viewportHeight: number, estimatedItemSize: number, start: number) => TreeNodeData[][];
 export declare const usePlantomHeightEffect: (plantomRef: React.RefObject<HTMLElement>, filterData: TreeNodeData[], estimatedItemSize: number) => void;
 export declare const useChecked: (checkStrictly: boolean, checkedKeysProps: string[], defaultCheckedKeys: string[], flattenAllData: any[], maxLevel: number, checkable: boolean) => readonly [string[], string[], React.Dispatch<React.SetStateAction<string[]>>, React.Dispatch<React.SetStateAction<string[]>>];
-export declare const useExpand: (flattenAllData: any[], expandedKeysProps: string[], defaultExpandedKeys: string[], defaultExpandAll: boolean, defaultExpandRoot: boolean, defaultExpandParent: boolean, scrollKey: string, isInit: boolean) => readonly [string[], React.Dispatch<React.SetStateAction<string[]>>];
+export declare const useExpand: (flattenAllData: any[], expandedKeysProps: string[], defaultExpandedKeys: string[], defaultExpandAll: boolean, defaultExpandRoot: boolean, defaultExpandParent: boolean, scrollKey: string, isInit: boolean, filterTreeNode: FunctionConstructor, filterValue: string) => readonly [string[], React.Dispatch<React.SetStateAction<string[]>>];
 export declare const useScrollToKey: (scrollKey: string, index: number, estimatedItemSize: number, scrollRef: any, viewportHeight: number, treeNodePrefixCls: string) => void;
 export declare const useSelect: (selectedKeysProps: string[], defaultSelectedKeys: string[]) => readonly [string[], React.Dispatch<React.SetStateAction<string[]>>];

package/es/tree/treeHooks.js

@@ -64,7 +64,7 @@ export var useChecked = function useChecked(checkStrictly, checkedKeysProps, def
   }, [nextHalfCheckedKeys]);
   return [checkedKeys, halfCheckedKeys, setCheckedKeys, setHalfCheckedKeys];
 };
-export var useExpand = function useExpand(flattenAllData, expandedKeysProps, defaultExpandedKeys, defaultExpandAll, defaultExpandRoot, defaultExpandParent, scrollKey, isInit) {
+export var useExpand = function useExpand(flattenAllData, expandedKeysProps, defaultExpandedKeys, defaultExpandAll, defaultExpandRoot, defaultExpandParent, scrollKey, isInit, filterTreeNode, filterValue) {
   var expandScrollkeys = [];
 
   if (scrollKey) {
@@ -73,8 +73,8 @@ export var useExpand = function useExpand(flattenAllData, expandedKeysProps, def
   }
 
   var initialExpandedKeys = React.useMemo(function () {
-    return getInitExpandedKeys(flattenAllData, expandedKeysProps, defaultExpandedKeys, defaultExpandAll, defaultExpandRoot, defaultExpandParent, expandScrollkeys);
-  }, [flattenAllData, expandedKeysProps, defaultExpandedKeys, defaultExpandAll, defaultExpandRoot, defaultExpandParent, scrollKey]);
+    return getInitExpandedKeys(flattenAllData, expandedKeysProps, defaultExpandedKeys, defaultExpandAll, defaultExpandRoot, defaultExpandParent, expandScrollkeys, filterTreeNode, filterValue);
+  }, [flattenAllData, expandedKeysProps, defaultExpandedKeys, defaultExpandAll, defaultExpandRoot, defaultExpandParent, scrollKey, filterTreeNode, filterValue]);
   var newExpandedKeys = React.useMemo(function () {
     return getExpandedKeys(expandedKeysProps, expandScrollkeys);
   }, [expandedKeysProps]);

package/es/tree/treeNode.d.ts

@@ -24,6 +24,7 @@ export interface TreeNodeProps {
     checked?: boolean;
     pos?: string;
     estimatedItemSize?: number;
+    dragOver?: boolean;
     onCheck?: (key: string, value: boolean, node: React.ReactNode, event: React.MouseEvent<MouseEvent>, pos: string) => void;
     onSelect?: (event: React.MouseEvent<MouseEvent>, node: React.ReactNode, key: string) => void;
     onExpand?: (value: boolean, node: React.ReactNode) => void;

package/es/tree/treeNode.js

@@ -56,6 +56,7 @@ var TreeNode = /*#__PURE__*/React.forwardRef(function (props, ref) {
       style = TreeNodeProps.style,
       indeterminate = TreeNodeProps.indeterminate,
       estimatedItemSize = TreeNodeProps.estimatedItemSize,
+      dragOver = TreeNodeProps.dragOver,
       onExpand = TreeNodeProps.onExpand,
       onCheck = TreeNodeProps.onCheck,
       onDragStart = TreeNodeProps.onDragStart,
@@ -65,7 +66,7 @@ var TreeNode = /*#__PURE__*/React.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", "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", "onExpand", "onCheck", "onDragStart", "onDragOver", "onDragLeave", "onDragEnter", "onDragEnd", "onDrop", "onSelect"]);
 
   var nodeData = React.useMemo(function () {
     return _extends({
@@ -234,7 +235,7 @@ var TreeNode = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       draggable: draggable && !disabled,
-      className: classNames((_classNames3 = {}, _defineProperty(_classNames3, "".concat(treeNodePrefixCls, "-draggabled"), true), _defineProperty(_classNames3, "".concat(treeNodePrefixCls, "-root"), true), _defineProperty(_classNames3, "".concat(treeNodePrefixCls, "-fb-children-pointerEvents"), forbiddenChildrenPointerEvents), _classNames3)),
+      className: classNames((_classNames3 = {}, _defineProperty(_classNames3, "".concat(treeNodePrefixCls, "-draggabled"), true), _defineProperty(_classNames3, "".concat(treeNodePrefixCls, "-root"), true), _defineProperty(_classNames3, "".concat(treeNodePrefixCls, "-fb-children-pointerEvents"), forbiddenChildrenPointerEvents), _defineProperty(_classNames3, "".concat(treeNodePrefixCls, "-drag-over"), dragOver), _classNames3)),
       onDragStart: handleDragStart,
       onDragEnd: handleDragEnd,
       onDragOver: handleDragOver,
@@ -242,7 +243,9 @@ var TreeNode = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onDragEnter: handleDragEnter,
       onDrop: handleDrop,
       ref: dragRef
-    }, indent(), renderExpandIcon(), showIcon && renderNodeIcon(), checkable ? /*#__PURE__*/React.createElement(Checkbox, {
+    }, indent(), renderExpandIcon(), showIcon && renderNodeIcon(), /*#__PURE__*/React.createElement("div", {
+      className: "".concat(treeNodePrefixCls, "-title-wrap")
+    }, checkable ? /*#__PURE__*/React.createElement(Checkbox, {
       onChange: handleOnchange,
       checked: checked,
       indeterminate: !disabled && indeterminate,
@@ -251,9 +254,9 @@ var TreeNode = /*#__PURE__*/React.forwardRef(function (props, ref) {
       className: classNames("".concat(treeNodePrefixCls, "-title"), _defineProperty({}, "".concat(treeNodePrefixCls, "-title-disabled"), disabled))
     }, title)) : /*#__PURE__*/React.createElement("span", {
       className: classNames("".concat(treeNodePrefixCls, "-title"), _defineProperty({}, "".concat(treeNodePrefixCls, "-title-disabled"), disabled))
-    }, title), showDragLine && /*#__PURE__*/React.createElement("span", {
+    }, title), showDragLine && !dragOver && /*#__PURE__*/React.createElement("span", {
       className: classNames("".concat(treeNodePrefixCls, "-drag-line"))
-    })));
+    }))));
   };
 
   var handleOnchange = React.useCallback(function (e) {
@@ -278,11 +281,11 @@ var TreeNode = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (!draggable) return;
     setDragNode(nodeData);
     onDragStart && onDragStart(e, props);
-  }, [onDragStart, nodeData, props, draggable]);
+  }, [draggable, setDragNode, nodeData, onDragStart, props]);
   var handleDragOver = React.useCallback(function (e) {
     if (!draggable) return;
     e.preventDefault();
-    onDragOver && onDragOver(e, nodeData);
+    onDragOver && onDragOver(e, nodeData, dragRef.current);
   }, [onDragOver, nodeData, draggable]);
   var handleDragLeave = React.useCallback(function (e) {
     var _a;
@@ -300,7 +303,7 @@ var TreeNode = /*#__PURE__*/React.forwardRef(function (props, ref) {
     setForbiddenChildrenPointerEvents(true);
     if (!((_a = dragRef.current) === null || _a === void 0 ? void 0 : _a.isEqualNode(e.target))) return;
     setShowDragLine(true);
-    onDragEnter && onDragEnter(e, nodeData);
+    onDragEnter && onDragEnter(e, nodeData, dragRef.current);
   }, [onDragEnter, nodeData, draggable]);
   var handleDragEnd = React.useCallback(function (e) {
     if (!draggable) return;

package/es/tree/utils/treeUtils.d.ts

@@ -12,7 +12,8 @@ export declare const getExpand: (expandedKeys: string[], key: string) => boolean
 export declare const getChecked: (checkedKeys: string[], key: string) => boolean;
 export declare const getSelected: (selectedKeys: string[], key: string) => boolean;
 export declare const getHalfChecked: (halfCheckedKeys: string[], key: string) => boolean;
-export declare const getFilterData: (data: any[]) => any[];
+export declare const getAllFilterKeys: (data: any[], filterTreeNode: FunctionConstructor) => any[];
+export declare const getFilterData: (data: any[], filterTreeNode: FunctionConstructor, filterValue: string) => any[];
 export declare const getMaxLevel: (data: any[]) => number;
 /**
  *计算node的属性后返回新的 treedata
@@ -42,5 +43,6 @@ export declare const getDataCheckededStateStrictly: (checkedKeys: string[]) => {
 };
 export declare const delKey: (prevKeys: string[], delKeys: string[]) => never[] & string[];
 export declare const getAllNodeKeys: (data: any[]) => string[];
-export declare const getInitExpandedKeys: (data: any[], expandedKeys: string[], defaultExpandedKeys: string[], defaultExpandAll: boolean, defaultExpandRoot: boolean, defaultExpandParent: boolean, expandScrollkeys?: string[]) => string[];
+export declare const getInitExpandedKeys: (data: any[], expandedKeys: string[], defaultExpandedKeys: string[], defaultExpandAll: boolean, defaultExpandRoot: boolean, defaultExpandParent: boolean, expandScrollkeys: string[] | undefined, filterTreeNode: FunctionConstructor, filterValue: string) => string[];
 export declare const getExpandedKeys: (expandedKeys: string[], expandScrollkeys?: string[]) => string[];
+export declare const calcDropPosition: (event: React.MouseEvent, dropNode: HTMLElement) => 0 | 1 | -1;

package/es/tree/utils/treeUtils.js

@@ -4,10 +4,11 @@ import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
-import _startsWithInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/starts-with";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _Set from "@babel/runtime-corejs3/core-js-stable/set";
+import _startsWithInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/starts-with";
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/splice";
 
 var __rest = this && this.__rest || function (s, e) {
@@ -22,6 +23,8 @@ var __rest = this && this.__rest || function (s, e) {
   }
   return t;
 };
+
+var DRAG_OFFSET = 0.3;
 /**
  * 打平所有数组，并添加pos位置信息，
  * 方便根据expandKeys等计算节点的expand，checkedKeys计算节点checked状态
@@ -31,7 +34,6 @@ var __rest = this && this.__rest || function (s, e) {
  * @param pos
  */
 
-
 export var flattenAll = function flattenAll(treeData) {
   var newTreeData = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   var level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
@@ -94,11 +96,37 @@ var isAllParentExpand = function isAllParentExpand(data, pos) {
   return expand;
 };
 
-export var getFilterData = function getFilterData(data) {
+export var getAllFilterKeys = function getAllFilterKeys(data, filterTreeNode) {
+  var filterData = _filterInstanceProperty(data).call(data, function (item) {
+    return filterTreeNode === null || filterTreeNode === void 0 ? void 0 : filterTreeNode(item);
+  });
+
+  var filterKeys = getAllNodeKeys(filterData);
+  var allFilterKeys = [];
+
+  _mapInstanceProperty(filterKeys).call(filterKeys, function (key) {
+    var _context2;
+
+    return allFilterKeys.push.apply(allFilterKeys, _concatInstanceProperty(_context2 = _toConsumableArray(getAllParentKeys(data, key))).call(_context2, [key]));
+  });
+
+  return _toConsumableArray(new _Set(allFilterKeys));
+};
+export var getFilterData = function getFilterData(data, filterTreeNode, filterValue) {
+  var filterData = data;
+
+  if (typeof filterTreeNode === 'function' && filterValue) {
+    filterData = _filterInstanceProperty(filterData).call(filterData, function (item) {
+      var _context3;
+
+      return _includesInstanceProperty(_context3 = getAllFilterKeys(filterData, filterTreeNode)).call(_context3, item.key);
+    });
+  }
+
   var newData = [];
-  data.forEach(function (item) {
+  filterData.forEach(function (item) {
     var pos = item.pos;
-    var parentExpand = isAllParentExpand(data, pos);
+    var parentExpand = isAllParentExpand(filterData, pos);
 
     if (parentExpand) {
       newData.push(item);
@@ -230,11 +258,11 @@ export var getSpreadAttrData = function getSpreadAttrData(treeData, expandedKeys
   return newTreeData;
 };
 export var addKeys = function addKeys() {
-  var _context2;
+  var _context4;
 
   var prevKeys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var newKeys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-  return _Array$from(new _Set(_concatInstanceProperty(_context2 = []).call(_context2, _toConsumableArray(prevKeys), _toConsumableArray(newKeys))));
+  return _Array$from(new _Set(_concatInstanceProperty(_context4 = []).call(_context4, _toConsumableArray(prevKeys), _toConsumableArray(newKeys))));
 };
 export var getAllParentKeys = function getAllParentKeys(data) {
   var pos = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
@@ -287,14 +315,14 @@ export var getPos = function getPos(data, key) {
   return node === null || node === void 0 ? void 0 : node.pos;
 };
 export var getInitCheckedKeys = function getInitCheckedKeys(data, keys) {
-  var _context3;
+  var _context5;
 
   var checkedKeys = [];
   keys.forEach(function (item) {
     var pos = getPos(data, item);
     checkedKeys.push.apply(checkedKeys, _toConsumableArray(getAllChildKeys(data, pos)));
   });
-  return _Array$from(new _Set(_concatInstanceProperty(_context3 = []).call(_context3, checkedKeys, _toConsumableArray(keys))));
+  return _Array$from(new _Set(_concatInstanceProperty(_context5 = []).call(_context5, checkedKeys, _toConsumableArray(keys))));
 };
 export var getInitCheckededState = function getInitCheckededState(data) {
   var checkedKeys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
@@ -468,6 +496,8 @@ var getRootKeys = function getRootKeys(data) {
 
 export var getInitExpandedKeys = function getInitExpandedKeys(data, expandedKeys, defaultExpandedKeys, defaultExpandAll, defaultExpandRoot, defaultExpandParent) {
   var expandScrollkeys = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : [];
+  var filterTreeNode = arguments.length > 7 ? arguments[7] : undefined;
+  var filterValue = arguments.length > 8 ? arguments[8] : undefined;
   var keys = (expandedKeys === null || expandedKeys === void 0 ? void 0 : _concatInstanceProperty(expandedKeys).call(expandedKeys, expandScrollkeys)) || (defaultExpandedKeys === null || defaultExpandedKeys === void 0 ? void 0 : _concatInstanceProperty(defaultExpandedKeys).call(defaultExpandedKeys, expandScrollkeys)) || [];
 
   if (defaultExpandAll) {
@@ -490,10 +520,34 @@ export var getInitExpandedKeys = function getInitExpandedKeys(data, expandedKeys
     }
   }
 
+  if (typeof filterTreeNode === 'function' && filterValue) {
+    var _context6;
+
+    keys = _concatInstanceProperty(_context6 = []).call(_context6, _toConsumableArray(keys), _toConsumableArray(getAllFilterKeys(data, filterTreeNode)));
+  }
+
   return _Array$from(new _Set(_toConsumableArray(keys)));
 };
 export var getExpandedKeys = function getExpandedKeys(expandedKeys) {
   var expandScrollkeys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   var keys = (expandedKeys === null || expandedKeys === void 0 ? void 0 : _concatInstanceProperty(expandedKeys).call(expandedKeys, expandScrollkeys)) || [];
   return _Array$from(new _Set(_toConsumableArray(keys)));
+};
+export var calcDropPosition = function calcDropPosition(event, dropNode) {
+  var clientY = event.clientY;
+
+  var _dropNode$getBounding = dropNode.getBoundingClientRect(),
+      top = _dropNode$getBounding.top,
+      bottom = _dropNode$getBounding.bottom,
+      height = _dropNode$getBounding.height;
+
+  if (clientY <= top + height * DRAG_OFFSET) {
+    return -1;
+  }
+
+  if (clientY >= bottom - height * DRAG_OFFSET) {
+    return 1;
+  }
+
+  return 0;
 };

package/lib/anchor/anchor-link.js

@@ -65,12 +65,6 @@ var AnchorLink = function AnchorLink(props) {
   }, [href, registerLink, prevHref]);
 
   var handleClick = function handleClick(e) {
-    var anchorElement = document.getElementById(href.replace('#', ''));
-
-    if (anchorElement) {
-      anchorElement.scrollIntoView();
-    }
-
     onClick === null || onClick === void 0 ? void 0 : onClick(e, {
       title: title,
       href: href

package/lib/anchor/anchor.js

@@ -82,6 +82,85 @@ function getOffsetTop(element, container) {
   return rect.top;
 }
 
+function isWindow(obj) {
+  return obj !== null && obj !== undefined && obj === obj.window;
+}
+
+function getScroll(target, top) {
+  var _a;
+
+  if (typeof window === 'undefined') {
+    return 0;
+  }
+
+  var method = top ? 'scrollTop' : 'scrollLeft';
+  var result = 0;
+
+  if (isWindow(target)) {
+    result = target[top ? 'pageYOffset' : 'pageXOffset'];
+  } else if (target instanceof Document) {
+    result = target.documentElement[method];
+  } else if (target) {
+    result = target[method];
+  }
+
+  if (target && !isWindow(target) && typeof result !== 'number') {
+    result = (_a = (target.ownerDocument || target).documentElement) === null || _a === void 0 ? void 0 : _a[method];
+  }
+
+  return result;
+}
+
+function easeInOutCubic(t, b, c, d) {
+  var cc = c - b;
+  t /= d / 2;
+
+  if (t < 1) {
+    return cc / 2 * t * t * t + b;
+  }
+
+  return cc / 2 * ((t -= 2) * t * t + 2) + b;
+}
+
+function scrollTo(y) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var _options$getContainer = options.getContainer,
+      getContainer = _options$getContainer === void 0 ? function () {
+    return window;
+  } : _options$getContainer,
+      callback = options.callback,
+      _options$duration = options.duration,
+      duration = _options$duration === void 0 ? 450 : _options$duration;
+  var container = getContainer();
+  var scrollTop = getScroll(container, true);
+  var startTime = Date.now();
+
+  var frameFunc = function frameFunc() {
+    var timestamp = Date.now();
+    var time = timestamp - startTime;
+    var nextScrollTop = easeInOutCubic(time > duration ? duration : time, scrollTop, y, duration);
+
+    if (isWindow(container)) {
+      ;
+      container.scrollTo(window.pageXOffset, nextScrollTop);
+    } else if (container instanceof HTMLDocument || container.constructor.name === 'HTMLDocument') {
+      ;
+      container.documentElement.scrollTop = nextScrollTop;
+    } else {
+      ;
+      container.scrollTop = nextScrollTop;
+    }
+
+    if (time < duration) {
+      window.requestAnimationFrame(frameFunc);
+    } else if (typeof callback === 'function') {
+      callback();
+    }
+  };
+
+  window.requestAnimationFrame(frameFunc);
+}
+
 var InternalAnchor = function InternalAnchor(props, ref) {
   var _a;
 
@@ -100,6 +179,7 @@ var InternalAnchor = function InternalAnchor(props, ref) {
       getCurrentAnchor = anchorProps.getCurrentAnchor,
       _anchorProps$offsetTo = anchorProps.offsetTop,
       offsetTop = _anchorProps$offsetTo === void 0 ? 0 : _anchorProps$offsetTo,
+      targetOffset = anchorProps.targetOffset,
       getContainer = anchorProps.getContainer,
       _anchorProps$bounds = anchorProps.bounds,
       bounds = _anchorProps$bounds === void 0 ? 5 : _anchorProps$bounds,
@@ -312,6 +392,26 @@ var InternalAnchor = function InternalAnchor(props, ref) {
 
   var handleScrollTo = function handleScrollTo(link) {
     setCurrentActiveLink(link);
+    var container = getScrollContainer();
+    var scrollTop = getScroll(container, true);
+    var sharpLinkMatch = sharpMatcherRegx.exec(link);
+
+    if (!sharpLinkMatch) {
+      return;
+    }
+
+    var targetElement = document.getElementById(sharpLinkMatch[1]);
+
+    if (!targetElement) {
+      return;
+    }
+
+    var eleOffsetTop = getOffsetTop(targetElement, container);
+    var y = scrollTop + eleOffsetTop;
+    y -= targetOffset !== undefined ? targetOffset : offsetTop || 0;
+    scrollTo(y, {
+      getContainer: getScrollContainer
+    });
   };
 
   var setCurrentActiveLink = (0, _react.useCallback)(function (link) {
@@ -336,9 +436,9 @@ var InternalAnchor = function InternalAnchor(props, ref) {
       }
     }
 
-    var currentActiveLink = getAnchor(offsetTop || 0, bounds);
+    var currentActiveLink = getAnchor(targetOffset !== undefined ? targetOffset : offsetTop || 0, bounds);
     currentActiveLink && setCurrentActiveLink(currentActiveLink);
-  }, [affix, setFixedTop, offsetTop, bounds, getAnchor, setCurrentActiveLink, type, getScrollContainer, anchorRef]);
+  }, [affix, setFixedTop, offsetTop, bounds, getAnchor, setCurrentActiveLink, type, getScrollContainer, anchorRef, targetOffset]);
   (0, _react.useEffect)(function () {
     getScrollContainer().addEventListener('scroll', handleScroll);
     handleScroll();