@kdcloudjs/kdesign 1.0.2

package/lib/tree/treeHooks.js

@@ -0,0 +1,193 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useVisibleDataMemo = exports.useViewportHeight = exports.useSelect = exports.useScrollToKey = exports.usePlantomHeightEffect = exports.useExpand = exports.useChecked = void 0;
+
+var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _treeUtils = require("./utils/treeUtils");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var useViewportHeight = function useViewportHeight(height, listRef) {
+  var _React$useState = _react.default.useState(0),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      viewportHeight = _React$useState2[0],
+      setViewportHeight = _React$useState2[1];
+
+  _react.default.useEffect(function () {
+    height ? setViewportHeight(height) : listRef.current && setViewportHeight(listRef.current.clientHeight);
+  }, [listRef, height]);
+
+  return [viewportHeight];
+};
+
+exports.useViewportHeight = useViewportHeight;
+
+var useVisibleDataMemo = function useVisibleDataMemo(virtual, filterData, viewportHeight, estimatedItemSize, start) {
+  var visibledCount = _react.default.useMemo(function () {
+    return Math.ceil(viewportHeight / estimatedItemSize);
+  }, [viewportHeight, estimatedItemSize]);
+
+  var viewportData = _react.default.useMemo(function () {
+    return (0, _slice.default)(filterData).call(filterData, start, start + visibledCount);
+  }, [filterData, start, visibledCount]);
+
+  var visibleData = _react.default.useMemo(function () {
+    return virtual ? viewportData : filterData;
+  }, [virtual, viewportData, filterData]);
+
+  return [visibleData];
+};
+
+exports.useVisibleDataMemo = useVisibleDataMemo;
+
+var usePlantomHeightEffect = function usePlantomHeightEffect(plantomRef, filterData, estimatedItemSize) {
+  _react.default.useEffect(function () {
+    var height = filterData.length * estimatedItemSize;
+
+    if (plantomRef.current) {
+      plantomRef.current.style.height = height + 'px';
+    }
+  }, [plantomRef, filterData, estimatedItemSize]);
+};
+
+exports.usePlantomHeightEffect = usePlantomHeightEffect;
+
+var useChecked = function useChecked(checkStrictly, checkedKeysProps, defaultCheckedKeys, flattenAllData, maxLevel, checkable) {
+  var initialCheckedState = _react.default.useMemo(function () {
+    if (!checkable) return {
+      checkedKeys: [],
+      halfCheckedKeys: []
+    };
+    return checkStrictly ? (0, _treeUtils.getDataCheckededStateStrictly)(checkedKeysProps || defaultCheckedKeys) : (0, _treeUtils.getInitCheckededState)(flattenAllData, checkedKeysProps || defaultCheckedKeys, maxLevel, true);
+  }, [flattenAllData, checkedKeysProps, defaultCheckedKeys, checkStrictly, maxLevel, checkable]);
+
+  var _React$useState3 = _react.default.useState(initialCheckedState.checkedKeys),
+      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+      checkedKeys = _React$useState4[0],
+      setCheckedKeys = _React$useState4[1];
+
+  var _React$useState5 = _react.default.useState(initialCheckedState.halfCheckedKeys),
+      _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
+      halfCheckedKeys = _React$useState6[0],
+      setHalfCheckedKeys = _React$useState6[1];
+
+  var nextCheckedKeys = initialCheckedState.checkedKeys;
+  var nextHalfCheckedKeys = initialCheckedState.halfCheckedKeys;
+  (0, _react.useEffect)(function () {
+    setCheckedKeys(nextCheckedKeys);
+  }, [nextCheckedKeys]);
+  (0, _react.useEffect)(function () {
+    setHalfCheckedKeys(nextHalfCheckedKeys);
+  }, [nextHalfCheckedKeys]);
+  return [checkedKeys, halfCheckedKeys, setCheckedKeys, setHalfCheckedKeys];
+};
+
+exports.useChecked = useChecked;
+
+var useExpand = function useExpand(flattenAllData, expandedKeysProps, defaultExpandedKeys, defaultExpandAll, defaultExpandRoot, defaultExpandParent, scrollKey, isInit) {
+  var expandScrollkeys = [];
+
+  if (scrollKey) {
+    var pos = (0, _treeUtils.getPos)(flattenAllData, scrollKey);
+    expandScrollkeys = (0, _treeUtils.getAllParentKeys)(flattenAllData, pos);
+  }
+
+  var initialExpandedKeys = _react.default.useMemo(function () {
+    return (0, _treeUtils.getInitExpandedKeys)(flattenAllData, expandedKeysProps, defaultExpandedKeys, defaultExpandAll, defaultExpandRoot, defaultExpandParent, expandScrollkeys);
+  }, [flattenAllData, expandedKeysProps, defaultExpandedKeys, defaultExpandAll, defaultExpandRoot, defaultExpandParent, scrollKey]);
+
+  var newExpandedKeys = _react.default.useMemo(function () {
+    return (0, _treeUtils.getExpandedKeys)(expandedKeysProps, expandScrollkeys);
+  }, [expandedKeysProps]);
+
+  var _React$useState7 = _react.default.useState(initialExpandedKeys),
+      _React$useState8 = (0, _slicedToArray2.default)(_React$useState7, 2),
+      expandedKeys = _React$useState8[0],
+      setExpandedKeys = _React$useState8[1];
+
+  _react.default.useEffect(function () {
+    var keys = isInit ? initialExpandedKeys : newExpandedKeys;
+    setExpandedKeys(keys);
+  }, [newExpandedKeys, initialExpandedKeys]);
+
+  return [expandedKeys, setExpandedKeys];
+};
+
+exports.useExpand = useExpand;
+
+var useScrollToKey = function useScrollToKey(scrollKey, index, estimatedItemSize, scrollRef, viewportHeight, treeNodePrefixCls) {
+  var _React$useState9 = _react.default.useState(false),
+      _React$useState10 = (0, _slicedToArray2.default)(_React$useState9, 2),
+      scroll = _React$useState10[0],
+      setScroll = _React$useState10[1];
+
+  (0, _react.useEffect)(function () {
+    setScroll(true);
+  }, [scrollKey]);
+  (0, _react.useEffect)(function () {
+    var _context;
+
+    if (!scroll) return;
+    var treeRoot = scrollRef.current;
+    var treeNode = treeRoot === null || treeRoot === void 0 ? void 0 : treeRoot.getElementsByClassName((0, _concat.default)(_context = "".concat(treeNodePrefixCls, "-item-")).call(_context, scrollKey))[0];
+
+    if (!scrollKey) {
+      setScroll(false);
+      return;
+    }
+
+    if (treeRoot && treeNode) {
+      // const treeRootScrollTop = treeRoot.scrollTop
+      var treeRootRect = treeRoot.getBoundingClientRect();
+      var treeNodeRect = treeNode.getBoundingClientRect();
+
+      if (treeRootRect.top <= treeNodeRect.top && treeRootRect.bottom >= treeNodeRect.bottom) {
+        setScroll(false);
+        return;
+      }
+    }
+
+    var _index = index;
+    var visibleDataLength = Math.ceil(viewportHeight / estimatedItemSize);
+    var halfVisibleIndex = Math.floor(visibleDataLength / 2);
+    _index = _index - halfVisibleIndex;
+    scrollRef.current.scrollTop = _index * estimatedItemSize;
+    setScroll(false);
+  }, [scroll, index, viewportHeight, estimatedItemSize]);
+};
+
+exports.useScrollToKey = useScrollToKey;
+
+var useSelect = function useSelect(selectedKeysProps, defaultSelectedKeys) {
+  var _useState = (0, _react.useState)(selectedKeysProps || defaultSelectedKeys),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      selectedKeys = _useState2[0],
+      setSelectedKeys = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    setSelectedKeys(selectedKeysProps);
+  }, [selectedKeysProps]);
+  return [selectedKeys, setSelectedKeys];
+};
+
+exports.useSelect = useSelect;

package/lib/tree/treeNode.d.ts

@@ -0,0 +1,40 @@
+import React, { MouseEvent } from 'react';
+import { TreeNodeData } from './index';
+export interface TreeNodeProps {
+    nodeKey?: string;
+    title?: string;
+    selectable?: boolean;
+    checkable?: boolean;
+    className?: string;
+    disabled?: boolean;
+    draggable?: boolean;
+    disableCheckbox?: boolean;
+    icon?: React.ReactNode | ((props: any) => React.ReactNode);
+    showLine?: boolean | {
+        showLeafIcon: boolean;
+    };
+    showIcon?: boolean;
+    selected?: boolean;
+    style?: Map<string, string>;
+    hasChildNode?: boolean;
+    expand?: boolean;
+    level?: number;
+    switcherIcon?: React.ReactNode | ((props: any) => React.ReactNode);
+    indeterminate?: boolean;
+    checked?: boolean;
+    pos?: string;
+    estimatedItemSize?: number;
+    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;
+    onDragStart?: (event: React.MouseEvent<MouseEvent>, node: React.ReactNode) => void;
+    onDragOver?: (event: React.MouseEvent<MouseEvent>, node: React.ReactNode) => void;
+    onDragLeave?: (event: React.MouseEvent<MouseEvent>, node: React.ReactNode) => void;
+    onDragEnter?: (event: React.MouseEvent<MouseEvent>, node: React.ReactNode) => void;
+    onDragEnd?: (event: React.MouseEvent<MouseEvent>, node: React.ReactNode) => void;
+    onDrop?: (event: React.MouseEvent<MouseEvent>, node: React.ReactNode, dragNode: React.ReactNode) => void;
+    setDragNode?: (nodeData: TreeNodeData) => void;
+    getDragNode?: () => TreeNodeData;
+}
+declare const TreeNode: React.ForwardRefExoticComponent<TreeNodeProps & React.RefAttributes<unknown>>;
+export default TreeNode;

package/lib/tree/treeNode.js

@@ -0,0 +1,374 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _ConfigContext = _interopRequireDefault(require("../config-provider/ConfigContext"));
+
+var _utils = require("../_utils");
+
+var _checkbox = _interopRequireDefault(require("./../checkbox"));
+
+var _icon = _interopRequireDefault(require("../icon"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof _getOwnPropertySymbols.default === "function") for (var i = 0, p = (0, _getOwnPropertySymbols.default)(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+var TreeNode = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var _context;
+
+  var _useContext = (0, _react.useContext)(_ConfigContext.default),
+      getPrefixCls = _useContext.getPrefixCls,
+      prefixCls = _useContext.prefixCls,
+      userDefaultProps = _useContext.compDefaultProps;
+
+  var TreeNodeProps = (0, _utils.getCompProps)('TreeNode', userDefaultProps, props); // 按钮属性需要合并一遍用户定义的默认属性
+
+  var nodeKey = TreeNodeProps.nodeKey,
+      customPrefixcls = TreeNodeProps.prefixCls,
+      selectable = TreeNodeProps.selectable,
+      checkable = TreeNodeProps.checkable,
+      className = TreeNodeProps.className,
+      icon = TreeNodeProps.icon,
+      switcherIcon = TreeNodeProps.switcherIcon,
+      disabled = TreeNodeProps.disabled,
+      draggable = TreeNodeProps.draggable,
+      pos = TreeNodeProps.pos,
+      checked = TreeNodeProps.checked,
+      level = TreeNodeProps.level,
+      getDragNode = TreeNodeProps.getDragNode,
+      hasChildNode = TreeNodeProps.hasChildNode,
+      expand = TreeNodeProps.expand,
+      title = TreeNodeProps.title,
+      showLine = TreeNodeProps.showLine,
+      showIcon = TreeNodeProps.showIcon,
+      selected = TreeNodeProps.selected,
+      setDragNode = TreeNodeProps.setDragNode,
+      style = TreeNodeProps.style,
+      indeterminate = TreeNodeProps.indeterminate,
+      estimatedItemSize = TreeNodeProps.estimatedItemSize,
+      onExpand = TreeNodeProps.onExpand,
+      onCheck = TreeNodeProps.onCheck,
+      onDragStart = TreeNodeProps.onDragStart,
+      onDragOver = TreeNodeProps.onDragOver,
+      onDragLeave = TreeNodeProps.onDragLeave,
+      onDragEnter = TreeNodeProps.onDragEnter,
+      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"]);
+
+  var nodeData = _react.default.useMemo(function () {
+    return (0, _extends2.default)({
+      selectable: selectable,
+      checkable: checkable,
+      expand: expand,
+      key: nodeKey,
+      level: level,
+      title: title,
+      disabled: disabled,
+      draggable: draggable,
+      checked: checked,
+      pos: pos,
+      hasChildNode: hasChildNode,
+      indeterminate: indeterminate,
+      icon: icon,
+      switcherIcon: switcherIcon,
+      // showLine,
+      showIcon: showIcon,
+      selected: selected
+    }, others);
+  }, [selectable, checkable, expand, nodeKey, level, title, disabled, draggable, checked, pos, hasChildNode, indeterminate, icon, switcherIcon, showIcon, selected]);
+
+  var useExpand = function useExpand(value) {
+    var _React$useState = _react.default.useState(value),
+        _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+        expand = _React$useState2[0],
+        setExpand = _React$useState2[1];
+
+    var setExpandState = function setExpandState(value) {
+      return setExpand(value);
+    };
+
+    (0, _react.useEffect)(function () {
+      setExpand(value);
+    }, [value]);
+    return [expand, setExpandState];
+  };
+
+  var dragRef = _react.default.useRef(null);
+
+  var _useExpand = useExpand(expand),
+      _useExpand2 = (0, _slicedToArray2.default)(_useExpand, 2),
+      expandState = _useExpand2[0],
+      setExpandState = _useExpand2[1];
+
+  var _React$useState3 = _react.default.useState(false),
+      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+      showDragLine = _React$useState4[0],
+      setShowDragLine = _React$useState4[1];
+
+  var _React$useState5 = _react.default.useState(false),
+      _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
+      forbiddenChildrenPointerEvents = _React$useState6[0],
+      setForbiddenChildrenPointerEvents = _React$useState6[1];
+
+  var treeNodePrefixCls = getPrefixCls(prefixCls, 'tree-node', customPrefixcls); // 按钮样式前缀
+
+  var renderIcon = function renderIcon(icon) {
+    if (typeof icon === 'function') {
+      var nodeProps = {
+        selectable: selectable,
+        checkable: checkable,
+        disabled: disabled,
+        title: title,
+        draggable: draggable,
+        checked: checked,
+        hasChildNode: hasChildNode,
+        expand: expand,
+        nodeKey: nodeKey,
+        icon: icon,
+        switcherIcon: switcherIcon,
+        showIcon: showIcon,
+        selected: selected,
+        indeterminate: indeterminate
+      };
+      return icon((0, _extends2.default)({}, nodeProps));
+    }
+
+    return icon;
+  };
+
+  var indent = function indent() {
+    var _classNames;
+
+    var indentArr = [];
+    var className = (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(treeNodePrefixCls, "-indent"), true), (0, _defineProperty2.default)(_classNames, "".concat(treeNodePrefixCls, "-indent-line"), !!showLine), _classNames));
+
+    for (var i = 0; i < level; i++) {
+      indentArr.push( /*#__PURE__*/_react.default.createElement("span", {
+        className: className,
+        key: i,
+        style: {
+          height: "".concat(estimatedItemSize)
+        }
+      }, "\xA0\xA0\xA0\xA0"));
+    }
+
+    return indentArr;
+  }; // line的两种模式， 图标被替换和图标不被替换
+
+
+  var renderExpandIcon = function renderExpandIcon() {
+    // todo 图标被替换则 line样式改变
+    // if(switcherIcon){
+    // }
+    if (hasChildNode) {
+      var _classNames2;
+
+      // todo    showLine模式 使用+ -符号图标
+      // if(!!showLine){
+      //   return (
+      //     <span
+      //     onClick={handleClick}
+      //     className={classNames(`${treeNodePrefixCls}-icon`)}
+      //   >
+      //     {expand ? <Icon type='search' /> : <Icon type='add' />}
+      //   </span>
+      //   )
+      // }
+      if (Array.isArray(switcherIcon) && switcherIcon.length === 2) {
+        return /*#__PURE__*/_react.default.createElement("span", {
+          className: (0, _classnames.default)("".concat(treeNodePrefixCls, "-icon"))
+        }, expandState ? renderIcon(switcherIcon[1]) : renderIcon(switcherIcon[0]));
+      }
+
+      return /*#__PURE__*/_react.default.createElement("span", {
+        className: (0, _classnames.default)("".concat(treeNodePrefixCls, "-icon"), (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, "".concat(treeNodePrefixCls, "-animation-expand"), expandState), (0, _defineProperty2.default)(_classNames2, "".concat(treeNodePrefixCls, "-animation-collapse"), !expandState), _classNames2))
+      }, renderIcon(switcherIcon || /*#__PURE__*/_react.default.createElement(_icon.default, {
+        type: "arrow-right-solid"
+      })));
+    } else {
+      // if(typeof showLine === 'object' && !showLine.showLeafIcon){
+      //   return (
+      //     <span
+      //       className={classNames(`${treeNodePrefixCls}-icon-hidden`)}
+      //     >
+      //       {/* todo  renderLeafLine() */}
+      //       {renderIcon(leafIcon)}
+      //     </span>
+      //   )
+      // }else if(typeof showLine === 'object' && showLine.showLeafIcon || showLine === true){
+      //   return (
+      //     <span
+      //       className={classNames(`${treeNodePrefixCls}-leaf-icon`)}
+      //     >
+      //       {renderIcon(leafIcon)}
+      //     </span>
+      //   )
+      // }
+      // 叶子结点 隐藏展开按钮
+      return /*#__PURE__*/_react.default.createElement("span", {
+        className: "".concat(treeNodePrefixCls, "-icon-hidden")
+      });
+    }
+  };
+
+  var renderNodeIcon = function renderNodeIcon() {
+    return /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(treeNodePrefixCls, "-leaf-icon")
+    }, renderIcon(icon));
+  };
+
+  var renderNode = function renderNode() {
+    var _classNames3;
+
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      draggable: draggable && !disabled,
+      className: (0, _classnames.default)((_classNames3 = {}, (0, _defineProperty2.default)(_classNames3, "".concat(treeNodePrefixCls, "-draggabled"), true), (0, _defineProperty2.default)(_classNames3, "".concat(treeNodePrefixCls, "-root"), true), (0, _defineProperty2.default)(_classNames3, "".concat(treeNodePrefixCls, "-fb-children-pointerEvents"), forbiddenChildrenPointerEvents), _classNames3)),
+      onDragStart: handleDragStart,
+      onDragEnd: handleDragEnd,
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDragEnter: handleDragEnter,
+      onDrop: handleDrop,
+      ref: dragRef
+    }, indent(), renderExpandIcon(), showIcon && renderNodeIcon(), checkable ? /*#__PURE__*/_react.default.createElement(_checkbox.default, {
+      onChange: handleOnchange,
+      checked: checked,
+      indeterminate: !disabled && indeterminate,
+      disabled: disabled
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      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 && /*#__PURE__*/_react.default.createElement("span", {
+      className: (0, _classnames.default)("".concat(treeNodePrefixCls, "-drag-line"))
+    })));
+  };
+
+  var handleOnchange = _react.default.useCallback(function (e) {
+    var value = e.target.checked;
+    onCheck && onCheck(nodeKey, value, nodeData, e, pos);
+  }, [onCheck, nodeKey, nodeData, pos]);
+
+  var handleSelect = _react.default.useCallback(function (e) {
+    selectable && !disabled && onSelect && onSelect(e, nodeData, nodeKey);
+  }, [onSelect, selectable, disabled, nodeData, nodeKey]);
+
+  _react.default.useImperativeHandle(ref, function () {
+    return {
+      selectNode: handleSelect
+    };
+  });
+
+  var handleClick = _react.default.useCallback(function (e) {
+    e.stopPropagation();
+    setExpandState(!expandState);
+    onExpand && onExpand(nodeKey, !expandState, nodeData);
+    handleSelect(e);
+  }, [setExpandState, expandState, onExpand, nodeKey, nodeData, handleSelect]);
+
+  var handleDragStart = _react.default.useCallback(function (e) {
+    if (!draggable) return;
+    setDragNode(nodeData);
+    onDragStart && onDragStart(e, props);
+  }, [onDragStart, nodeData, props, draggable]);
+
+  var handleDragOver = _react.default.useCallback(function (e) {
+    if (!draggable) return;
+    e.preventDefault();
+    onDragOver && onDragOver(e, nodeData);
+  }, [onDragOver, nodeData, draggable]);
+
+  var handleDragLeave = _react.default.useCallback(function (e) {
+    var _a;
+
+    if (!draggable) return;
+    if (!((_a = dragRef.current) === null || _a === void 0 ? void 0 : _a.isEqualNode(e.target))) return;
+    setForbiddenChildrenPointerEvents(false);
+    setShowDragLine(false);
+    onDragLeave && onDragLeave(e, nodeData);
+  }, [onDragLeave, nodeData, draggable]);
+
+  var handleDragEnter = _react.default.useCallback(function (e) {
+    var _a;
+
+    if (!draggable) return;
+    setForbiddenChildrenPointerEvents(true);
+    if (!((_a = dragRef.current) === null || _a === void 0 ? void 0 : _a.isEqualNode(e.target))) return;
+    setShowDragLine(true);
+    onDragEnter && onDragEnter(e, nodeData);
+  }, [onDragEnter, nodeData, draggable]);
+
+  var handleDragEnd = _react.default.useCallback(function (e) {
+    if (!draggable) return;
+    onDragEnd && onDragEnd(e, nodeData);
+    setDragNode(undefined);
+  }, [onDragEnd, nodeData, draggable]);
+
+  var handleDrop = _react.default.useCallback(function (e) {
+    if (!draggable) return;
+    setShowDragLine(false);
+    var data = getDragNode();
+    var sourceKey = data === null || data === void 0 ? void 0 : data.key;
+
+    if (sourceKey) {
+      var targetKey = nodeKey;
+
+      if (targetKey !== sourceKey) {
+        onDrop && onDrop(e, nodeData, data, sourceKey);
+      }
+    }
+  }, [onDrop, nodeData, nodeKey]);
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)("".concat(treeNodePrefixCls, "-item"), (0, _defineProperty2.default)({}, "".concat(treeNodePrefixCls, "-item-hover"), !disabled && selectable), (0, _defineProperty2.default)({}, "".concat(treeNodePrefixCls, "-selected"), selected && selectable && !disabled), (0, _defineProperty2.default)({}, "".concat(treeNodePrefixCls, "-disabled"), disabled), (0, _defineProperty2.default)({}, "".concat(treeNodePrefixCls, "-opened"), expandState), (0, _concat.default)(_context = "".concat(treeNodePrefixCls, "-item-")).call(_context, nodeKey), className),
+    style: (0, _extends2.default)({
+      height: "".concat(estimatedItemSize)
+    }, style),
+    onClick: handleClick
+  }, renderNode());
+});
+
+TreeNode.displayName = 'TreeNode';
+var _default = TreeNode;
+exports.default = _default;

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

@@ -0,0 +1,46 @@
+import { TreeNodeData } from '../tree';
+/**
+ * 打平所有数组，并添加pos位置信息，
+ * 方便根据expandKeys等计算节点的expand，checkedKeys计算节点checked状态
+ * @param treeData [{key:'',title:'',children:[]}]
+ * @param newTreeData[{key:'',title:'',children:[], pos:'', hasChildNode, level}]
+ * @param level
+ * @param pos
+ */
+export declare const flattenAll: (treeData: any[], newTreeData?: TreeNodeData[], level?: number, pos?: string | undefined) => TreeNodeData[];
+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 getMaxLevel: (data: any[]) => number;
+/**
+ *计算node的属性后返回新的 treedata
+ * @param treeData  打平后的treeData [{key:'',title:'',children:[], pos:''}]
+ * @param defaultExpandRoot
+ * @param expandedKeys
+ * @param defaultExpandAll
+ */
+export declare const getSpreadAttrData: (treeData: any[], expandedKeys: string[]) => any[];
+export declare const addKeys: (prevKeys?: string[], newKeys?: string[]) => string[];
+export declare const getAllParentKeys: (data: any[], pos?: string) => string[];
+export declare const getAllParentPos: (data: any[], pos?: string) => string[];
+export declare const getAllChildKeys: (data: any[], pos?: string) => string[];
+export declare const getPos: (data: any[], key: string) => any;
+export declare const getInitCheckedKeys: (data: any[], keys: string[]) => any[];
+export declare const getInitCheckededState: (data: any[], checkedKeys: string[] | undefined, maxLevel: number, init?: boolean) => {
+    checkedKeys: string[];
+    halfCheckedKeys: string[];
+};
+export declare const getDataCheckededState: (data: any[], checkedKeys: string[], halfCheckedKeys: string[], maxLevel: number, init: boolean | undefined, pos: string, value?: boolean | undefined) => {
+    checkedKeys: string[];
+    halfCheckedKeys: string[];
+};
+export declare const getDataCheckededStateStrictly: (checkedKeys: string[]) => {
+    checkedKeys: string[];
+    halfCheckedKeys: never[];
+};
+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 getExpandedKeys: (expandedKeys: string[], expandScrollkeys?: string[]) => string[];