@qsxy/element-plus-react 1.0.2 → 2.0.0

package/dist/Tree/Tree.js

@@ -1,90 +1,364 @@
-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 _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 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 _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure " + obj); }
+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 classNames from 'classnames';
-import React, { forwardRef, useMemo } from 'react';
-import RcTree from "./RCTree";
+import isEqual from 'lodash/isEqual';
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useConfigProvider } from "../ConfigProvider/ConfigProviderContext";
+import { useClassNames, useForceUpdate } from "../hooks";
+import { mergeDefaultProps } from "../Util";
+import TreeStore from "./model/tree-store";
+import { useDragNodeHandler } from "./model/useDragNode";
+import { useNodeExpandEventBroadcast } from "./model/useNodeExpandEventBroadcast";
+import { getNodeKey as getNodeKeyUtil, handleCurrentChange } from "./model/util";
+import { DragEventsContext, TreeContext, TreeNodeExpandContext } from "./TreeContext";
 import TreeNode from "./TreeNode";
-import DropIndicatorRender from "./utils/dropIndicator";
-import renderSwitcherIcon from "./utils/iconUtil";
-import collapseMotion from "./utils/motion";
+// 主组件
+var Tree = /*#__PURE__*/forwardRef(function (props, ref) {
+  props = mergeDefaultProps({
+    renderAfterExpand: true,
+    expandOnClickNode: true,
+    checkOnClickLeaf: true,
+    autoExpandParent: true,
+    indent: 18,
+    props: {
+      children: 'children',
+      label: 'label',
+      disabled: 'disabled',
+      isLeaf: 'isLeaf',
+      class: null
+    }
+  }, props);
+  var _props = props,
+    nodeKey = _props.nodeKey,
+    tableData = _props.data,
+    lazy = _props.lazy,
+    treeProps = _props.props,
+    load = _props.load,
+    currentNodeKey = _props.currentNodeKey,
+    checkStrictly = _props.checkStrictly,
+    checkDescendants = _props.checkDescendants,
+    defaultCheckedKeys = _props.defaultCheckedKeys,
+    defaultExpandedKeys = _props.defaultExpandedKeys,
+    autoExpandParent = _props.autoExpandParent,
+    defaultExpandAll = _props.defaultExpandAll,
+    filterNodeMethod = _props.filterNodeMethod,
+    accordion = _props.accordion,
+    renderAfterExpand = _props.renderAfterExpand,
+    showCheckbox = _props.showCheckbox,
+    renderContent = _props.renderContent,
+    highlightCurrent = _props.highlightCurrent,
+    emptyText = _props.emptyText,
+    renderEmpty = _props.renderEmpty,
+    onNodeExpand = _props.onNodeExpand;
+  var _useConfigProvider = useConfigProvider(),
+    locale = _useConfigProvider.locale;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var ns = useClassNames('tree');
+  var _useForceUpdate = useForceUpdate(),
+    forceUpdate = _useForceUpdate.forceUpdate;
 
-// [Legacy] Compatible for v3
+  // 初始化 TreeStore
+  var _useState = useState(function () {
+      var initialStore = new TreeStore({
+        key: nodeKey,
+        data: tableData,
+        lazy: lazy,
+        props: treeProps,
+        load: load,
+        currentNodeKey: currentNodeKey || null,
+        checkStrictly: checkStrictly,
+        checkDescendants: checkDescendants,
+        defaultCheckedKeys: defaultCheckedKeys || [],
+        defaultExpandedKeys: defaultExpandedKeys || [],
+        autoExpandParent: autoExpandParent,
+        defaultExpandAll: defaultExpandAll,
+        filterNodeMethod: filterNodeMethod,
+        forceUpdate: forceUpdate
+      });
+      initialStore.initialize();
+      return initialStore;
+    }),
+    _useState2 = _slicedToArray(_useState, 1),
+    store = _useState2[0];
+  var root = useMemo(function () {
+    return store.root;
+  }, [store.root]);
+  // const [currentNode, setCurNode] = useState<Node>(null);
+  var elRef = useRef(null);
+  var dropIndicatorRef = useRef(null);
+  var oldTableData = useRef(null);
+  var _useNodeExpandEventBr = useNodeExpandEventBroadcast(props),
+    broadcastExpanded = _useNodeExpandEventBr.broadcastExpanded,
+    parentNodeMap = _useNodeExpandEventBr.parentNodeMap;
+  var _useDragNodeHandler = useDragNodeHandler({
+      props: props,
+      elRef: elRef,
+      dropIndicatorRef: dropIndicatorRef,
+      store: store
+    }),
+    dragEvents = Object.assign({}, (_objectDestructuringEmpty(_useDragNodeHandler), _useDragNodeHandler));
 
-function InternalTree(props, ref) {
-  var _props$prefixCls = props.prefixCls,
-    prefixCls = _props$prefixCls === void 0 ? 'el-tree' : _props$prefixCls,
-    className = props.className,
-    showIcon = props.showIcon,
-    showLine = props.showLine,
-    _switcherIcon = props.switcherIcon,
-    blockNode = props.blockNode,
-    children = props.children,
-    checkable = props.checkable,
-    selectable = props.selectable,
-    draggable = props.draggable;
-  var newProps = _objectSpread(_objectSpread({}, props), {}, {
-    showLine: Boolean(showLine),
-    dropIndicatorRender: DropIndicatorRender
-  });
-  var draggableConfig = useMemo(function () {
-    if (!draggable) {
-      return false;
+  // useKeydown(elRef, store);
+
+  // 检查是否为选择树
+  var isSelectTree = useMemo(function () {
+    // let parent = instanceRef.current?.parent;
+    // while (parent) {
+    //     if (parent.type?.name === 'ElTreeSelect') {
+    //         return true;
+    //     }
+    //     parent = parent.parent;
+    // }
+    return false;
+  }, []);
+
+  // 判断是否为空
+  var isEmpty = useCallback(function () {
+    var childNodes = root.childNodes;
+    return (!childNodes || childNodes.length === 0 || childNodes.every(function (_ref) {
+      var visible = _ref.visible;
+      return !visible;
+    })) && !isSelectTree;
+  }, [root, isSelectTree]);
+
+  // 监听属性变化 - currentNodeKey
+  useEffect(function () {
+    store.setCurrentNodeKey(currentNodeKey || null);
+  }, [currentNodeKey]);
+
+  // 监听属性变化 - defaultCheckedKeys
+  useEffect(function () {
+    if (!isEqual(props.defaultCheckedKeys, prevDefaultCheckedKeysRef.current)) {
+      store.setDefaultCheckedKey(props.defaultCheckedKeys || []);
     }
-    var mergedDraggable = {};
-    switch (_typeof(draggable)) {
-      case 'function':
-        mergedDraggable.nodeDraggable = draggable;
-        break;
-      case 'object':
-        mergedDraggable = _objectSpread({}, draggable);
-        break;
-      default:
-      // Do nothing
+    prevDefaultCheckedKeysRef.current = props.defaultCheckedKeys;
+  }, [props.defaultCheckedKeys]);
+
+  // 监听属性变化 - defaultExpandedKeys
+  useEffect(function () {
+    store.setDefaultExpandedKeys(props.defaultExpandedKeys || []);
+  }, [props.defaultExpandedKeys]);
+
+  // 监听属性变化 - data
+  useEffect(function () {
+    if (oldTableData.current != null && !isEqual(props.data, oldTableData.current)) {
+      store.setData(props.data);
+      forceUpdate();
     }
+    oldTableData.current = props.data;
+  }, [props.data]);
 
-    // if (mergedDraggable.icon !== false) {
-    //     mergedDraggable.icon = mergedDraggable.icon || <HolderOutlined />;
-    // }
+  // 监听属性变化 - checkStrictly
+  useEffect(function () {
+    store.checkStrictly = props.checkStrictly;
+  }, [props.checkStrictly]);
 
-    return mergedDraggable;
-  }, [draggable]);
-  return (
-    /*#__PURE__*/
-    // @ts-ignore
-    React.createElement(RcTree, _extends({
-      itemHeight: props.itemHeight,
-      ref: ref,
-      virtual: props.virtual
-    }, newProps, {
-      prefixCls: prefixCls,
-      className: classNames(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-icon-hide"), !showIcon), "".concat(prefixCls, "-block-node"), blockNode), "".concat(prefixCls, "-unselectable"), !selectable), className)
-      // direction={props.direction}
-      ,
-      checkable: checkable ? /*#__PURE__*/React.createElement("span", {
-        className: "".concat(prefixCls, "-checkbox-inner")
-      }) : checkable,
-      selectable: selectable,
-      switcherIcon: function switcherIcon(nodeProps) {
-        return renderSwitcherIcon(prefixCls, _switcherIcon, showLine, nodeProps);
-      },
-      draggable: draggableConfig
-    }), children)
-  );
-}
-var ForwardTree = /*#__PURE__*/forwardRef(InternalTree);
-var Tree = ForwardTree;
-Tree.TreeNode = TreeNode;
-Tree.defaultProps = {
-  checkable: false,
-  selectable: true,
-  showIcon: false,
-  motion: collapseMotion,
-  blockNode: false,
-  itemHeight: 20
-};
+  // 保存前一个值的 ref
+  var prevDefaultCheckedKeysRef = useRef(props.defaultCheckedKeys);
+
+  // 方法定义
+  var filter = useCallback(function (value) {
+    if (!props.filterNodeMethod) {
+      throw new Error('[Tree] filterNodeMethod is required when filter');
+    }
+    store.filter(value);
+  }, [props.filterNodeMethod, store]);
+  var getNodeKey = useCallback(function (node) {
+    return getNodeKeyUtil(props.nodeKey, node.data);
+  }, [props.nodeKey]);
+  var requireNodeKey = useCallback(function (methodName) {
+    if (!props.nodeKey) {
+      throw new Error("[Tree] nodeKey is required in ".concat(methodName));
+    }
+  }, [props.nodeKey]);
+  var getNodePath = useCallback(function (data) {
+    requireNodeKey('getNodePath');
+    var node = store.getNode(data);
+    if (!node) {
+      return [];
+    }
+    var path = [node.data];
+    var parent = node.parent;
+    while (parent && parent !== root) {
+      path.push(parent.data);
+      parent = parent.parent;
+    }
+    return path.reverse();
+  }, [requireNodeKey, store, root]);
+  var getCheckedNodes = useCallback(function (leafOnly, includeHalfChecked) {
+    return store.getCheckedNodes(leafOnly, includeHalfChecked);
+  }, [store]);
+  var getCheckedKeys = useCallback(function (leafOnly) {
+    return store.getCheckedKeys(leafOnly);
+  }, [store]);
+  var getCurrentNode = useCallback(function () {
+    var curNode = store.getCurrentNode();
+    return curNode ? curNode.data : null;
+  }, [store]);
+  var getCurrentKey = useCallback(function () {
+    requireNodeKey('getCurrentKey');
+    var curNode = getCurrentNode();
+    return curNode ? curNode[props.nodeKey] : null;
+  }, [getCurrentNode, requireNodeKey, props.nodeKey]);
+  var setCheckedNodes = useCallback(function (nodes, leafOnly) {
+    requireNodeKey('setCheckedNodes');
+    store.setCheckedNodes(nodes, leafOnly);
+    forceUpdate();
+  }, [forceUpdate, requireNodeKey, store]);
+  var setCheckedKeys = useCallback(function (keys, leafOnly) {
+    requireNodeKey('setCheckedKeys');
+    store.setCheckedKeys(keys, leafOnly);
+    forceUpdate();
+  }, [forceUpdate, requireNodeKey, store]);
+  var setChecked = useCallback(function (data, checked, deep) {
+    store.setChecked(data, checked, deep);
+    forceUpdate();
+  }, [forceUpdate, store]);
+  var getHalfCheckedNodes = useCallback(function () {
+    return store.getHalfCheckedNodes();
+  }, [store]);
+  var getHalfCheckedKeys = useCallback(function () {
+    return store.getHalfCheckedKeys();
+  }, [store]);
+  var setCurrentNode = useCallback(function (node) {
+    var shouldAutoExpandParent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    requireNodeKey('setCurrentNode');
+    handleCurrentChange(store, props.onCurrentChange, function () {
+      broadcastExpanded(node);
+      store.setUserCurrentNode(node, shouldAutoExpandParent);
+      forceUpdate();
+    });
+  }, [requireNodeKey, store, props.onCurrentChange, forceUpdate, broadcastExpanded]);
+  var setCurrentKey = useCallback(function () {
+    var key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+    var shouldAutoExpandParent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    requireNodeKey('setCurrentKey');
+    handleCurrentChange(store, props.onCurrentChange, function () {
+      broadcastExpanded();
+      store.setCurrentNodeKey(key, shouldAutoExpandParent);
+    });
+  }, [broadcastExpanded, requireNodeKey, store, props]);
+  var getNode = useCallback(function (data) {
+    return store.getNode(data);
+  }, [store]);
+  var remove = useCallback(function (data) {
+    store.remove(data);
+  }, [store]);
+  var append = useCallback(function (data, parentNode) {
+    store.append(data, parentNode);
+  }, [store]);
+  var insertBefore = useCallback(function (data, refNode) {
+    store.insertBefore(data, refNode);
+  }, [store]);
+  var insertAfter = useCallback(function (data, refNode) {
+    store.insertAfter(data, refNode);
+  }, [store]);
+  var handleNodeExpand = useCallback(function (nodeData, node, instance) {
+    broadcastExpanded(node);
+    onNodeExpand === null || onNodeExpand === void 0 || onNodeExpand(nodeData, node, instance);
+  }, [broadcastExpanded, onNodeExpand]);
+  var updateKeyChildren = useCallback(function (key, data) {
+    requireNodeKey('updateKeyChild');
+    store.updateChildren(key, data);
+  }, [requireNodeKey, store]);
+  useImperativeHandle(ref, function () {
+    return {
+      filter: filter,
+      getNodeKey: getNodeKey,
+      getNode: getNode,
+      getCheckedNodes: getCheckedNodes,
+      getCheckedKeys: getCheckedKeys,
+      getHalfCheckedNodes: getHalfCheckedNodes,
+      getHalfCheckedKeys: getHalfCheckedKeys,
+      getCurrentNode: getCurrentNode,
+      getCurrentKey: getCurrentKey,
+      setCurrentNode: setCurrentNode,
+      setCurrentKey: setCurrentKey,
+      remove: remove,
+      append: append,
+      insertBefore: insertBefore,
+      insertAfter: insertAfter,
+      updateKeyChildren: updateKeyChildren,
+      getNodePath: getNodePath,
+      setCheckedNodes: setCheckedNodes,
+      setCheckedKeys: setCheckedKeys,
+      setChecked: setChecked,
+      refresh: forceUpdate,
+      store: store
+    };
+  });
+
+  // 提供上下文
+  var contextValue = useMemo(function () {
+    return {
+      // ctx: { emit: noop },
+      props: props,
+      store: store,
+      // storeRef,
+      // actions,
+      root: root,
+      forceUpdate: forceUpdate
+      // currentNode,
+      // setCurrentNode: setCurNode,
+    };
+  }, [props, store, root, forceUpdate]);
+
+  // 渲染函数
+  var renderTreeNodes = function renderTreeNodes() {
+    if (isEmpty()) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: ns.e('empty-block')
+      }, renderEmpty ? renderEmpty() : /*#__PURE__*/React.createElement("span", {
+        className: ns.e('empty-text')
+      }, emptyText || t('el.tree.emptyText', {
+        lng: locale
+      })));
+    }
+    return root.childNodes.map(function (child) {
+      return /*#__PURE__*/React.createElement(TreeNode, {
+        key: getNodeKey(child),
+        node: child,
+        props: treeProps,
+        accordion: accordion,
+        renderAfterExpand: renderAfterExpand,
+        showCheckbox: showCheckbox,
+        renderContent: renderContent,
+        onNodeExpand: handleNodeExpand
+      });
+    });
+  };
+  return /*#__PURE__*/React.createElement(TreeContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement(DragEventsContext.Provider, {
+    value: dragEvents
+  }, /*#__PURE__*/React.createElement(TreeNodeExpandContext.Provider, {
+    value: {
+      parentNodeMap: parentNodeMap
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: elRef,
+    className: classNames(ns.b(), // ns.is({ dragging: !!dragState.draggingNode, 'drop-not-allow': !dragState.allowDrop, 'drop-inner': dragState.dropType === 'inner' }),
+    _defineProperty({}, ns.m('highlight-current'), highlightCurrent), props.className),
+    style: props.style,
+    role: "tree"
+  }, renderTreeNodes(), /*#__PURE__*/React.createElement("div", {
+    /* style={{ display: dragState.showDropIndicator ? 'block' : 'none' }} */style: {
+      display: 'none'
+    },
+    ref: dropIndicatorRef,
+    className: ns.e('drop-indicator')
+  })))));
+});
+Tree.displayName = 'ElTree';
 export default Tree;

package/dist/Tree/TreeContext.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { DragEventsContextProps, TreeContextProps, TreeNodeExpandContextProps } from './typings';
+export declare const TreeContext: import("react").Context<TreeContextProps>;
+export declare const TreeNodeExpandContext: import("react").Context<TreeNodeExpandContextProps>;
+export declare const DragEventsContext: import("react").Context<DragEventsContextProps>;
+export declare const useTreeContext: () => TreeContextProps;
+export declare const useTreeNodeExpandContext: () => TreeNodeExpandContextProps;
+export declare const useDragEventsContext: () => DragEventsContextProps;
+export default useTreeContext;

package/dist/Tree/TreeContext.js

@@ -0,0 +1,14 @@
+import { createContext, useContext } from 'react';
+export var TreeContext = /*#__PURE__*/createContext({});
+export var TreeNodeExpandContext = /*#__PURE__*/createContext({});
+export var DragEventsContext = /*#__PURE__*/createContext({});
+export var useTreeContext = function useTreeContext() {
+  return useContext(TreeContext);
+};
+export var useTreeNodeExpandContext = function useTreeNodeExpandContext() {
+  return useContext(TreeNodeExpandContext);
+};
+export var useDragEventsContext = function useDragEventsContext() {
+  return useContext(DragEventsContext);
+};
+export default useTreeContext;

package/dist/Tree/TreeNode.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
-import type { TreeNodeProps } from './typings';
-export type { TreeNodeProps } from './typings';
-declare const TreeNode: React.FC<Readonly<TreeNodeProps>>;
+import { TreeNodeProps } from './typings';
+declare const TreeNode: {
+    (props: TreeNodeProps): React.JSX.Element;
+    displayName: string;
+};
 export default TreeNode;