@qsxy/element-plus-react 1.0.2 → 2.0.0

package/dist/Tree/model/useDragNode.js

@@ -0,0 +1,293 @@
+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); }
+import { useClassNames } from "../../hooks";
+import { addClass, removeClass } from 'dom-lib';
+import { useCallback, useRef } from 'react';
+import { isFunction } from "../../Util";
+export var dragEventsKey = Symbol('dragEvents');
+export function useDragNodeHandler(_ref) {
+  var props = _ref.props,
+    elRef = _ref.elRef,
+    dropIndicatorRef = _ref.dropIndicatorRef,
+    store = _ref.store;
+  var ns = useClassNames('tree');
+  var allowDrag = props.allowDrag,
+    allowDrop = props.allowDrop,
+    onNodeDragStart = props.onNodeDragStart,
+    onNodeDragEnter = props.onNodeDragEnter,
+    onNodeDragLeave = props.onNodeDragLeave,
+    onNodeDragOver = props.onNodeDragOver,
+    onNodeDragEnd = props.onNodeDragEnd,
+    onNodeDrop = props.onNodeDrop;
+
+  // const [dragState, setDragState] = useState<{
+  //     allowDrop: boolean;
+  //     dropType: NodeDropType | null;
+  //     draggingNode: TreeNode | null;
+  //     showDropIndicator: boolean;
+  //     dropNode: TreeNode | null;
+  // }>({
+  //     showDropIndicator: false,
+  //     draggingNode: null,
+  //     dropNode: null,
+  //     allowDrop: true,
+  //     dropType: null,
+  // });
+
+  // 使用ref来保存最新的dragState值
+  var dragStateRef = useRef({
+    showDropIndicator: false,
+    draggingNode: null,
+    dropNode: null,
+    allowDrop: true,
+    dropType: null
+  });
+  // dragStateRef.current = dragState;
+
+  var setDragState = useCallback(function (fn) {
+    dragStateRef.current = fn(dragStateRef.current);
+    if (!dragStateRef.current.allowDrop) {
+      elRef.current.classList.add(ns.is('drop-not-allow'));
+    } else {
+      elRef.current.classList.remove(ns.is('drop-not-allow'));
+    }
+    if (dragStateRef.current.dropType === 'inner') {
+      elRef.current.classList.add(ns.is('drop-inner'));
+    } else {
+      elRef.current.classList.remove(ns.is('drop-inner'));
+    }
+  }, [elRef, ns]);
+  var treeNodeDragStart = useCallback(function (_ref2) {
+    var event = _ref2.event,
+      treeNode = _ref2.treeNode;
+    if (!event.dataTransfer) {
+      return;
+    }
+    if (isFunction(allowDrag) && !allowDrag(treeNode.node)) {
+      event.preventDefault();
+      return false;
+    }
+    event.dataTransfer.effectAllowed = 'move';
+
+    // wrap in try catch to address IE's error when first param is 'text/plain'
+    try {
+      // setData is required for draggable to work in FireFox
+      // the content has to be '' so dragging a node out of the tree won't open a new tab in FireFox
+      event.dataTransfer.setData('text/plain', '');
+    } catch (_unused) {
+      //
+    }
+    setDragState(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        draggingNode: treeNode
+      });
+    });
+    elRef.current.classList.add(ns.is('dragging'));
+    onNodeDragStart === null || onNodeDragStart === void 0 || onNodeDragStart(treeNode.node, event);
+  }, [allowDrag, elRef, ns, onNodeDragStart, setDragState]);
+  var treeNodeDragOver = useCallback(function (_ref3) {
+    var event = _ref3.event,
+      treeNode = _ref3.treeNode;
+    if (!event.dataTransfer) {
+      return;
+    }
+    var dropNode = treeNode;
+    var oldDropNode = dragStateRef.current.dropNode;
+    if (oldDropNode && oldDropNode.node.id !== dropNode.node.id && oldDropNode.$el) {
+      removeClass(oldDropNode.$el, ns.is('drop-inner'));
+    }
+    var draggingNode = dragStateRef.current.draggingNode;
+    if (!draggingNode || !dropNode) {
+      return;
+    }
+    var dropPrev = true;
+    var dropInner = true;
+    var dropNext = true;
+    var userAllowDropInner = true;
+    if (isFunction(allowDrop)) {
+      dropPrev = allowDrop(draggingNode.node, dropNode.node, 'prev');
+      userAllowDropInner = dropInner = allowDrop(draggingNode.node, dropNode.node, 'inner');
+      dropNext = allowDrop(draggingNode.node, dropNode.node, 'next');
+    }
+    event.dataTransfer.dropEffect = dropInner || dropPrev || dropNext ? 'move' : 'none';
+    if ((dropPrev || dropInner || dropNext) && (oldDropNode === null || oldDropNode === void 0 ? void 0 : oldDropNode.node.id) !== dropNode.node.id) {
+      if (oldDropNode) {
+        onNodeDragLeave === null || onNodeDragLeave === void 0 || onNodeDragLeave(draggingNode.node, oldDropNode.node, event);
+      }
+      onNodeDragEnter === null || onNodeDragEnter === void 0 || onNodeDragEnter(draggingNode.node, dropNode.node, event);
+    }
+    if (dropPrev || dropInner || dropNext) {
+      setDragState(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          dropNode: dropNode
+        });
+      });
+    } else {
+      // Reset dragState.value.dropNode to null when allowDrop is transfer from true to false.(For issue #14704)
+      setDragState(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          dropNode: null
+        });
+      });
+    }
+    if (dropNode.node.nextSibling === draggingNode.node) {
+      dropNext = false;
+    }
+    if (dropNode.node.previousSibling === draggingNode.node) {
+      dropPrev = false;
+    }
+    if (dropNode.node.contains(draggingNode.node, false)) {
+      dropInner = false;
+    }
+    if (draggingNode.node === dropNode.node || draggingNode.node.contains(dropNode.node)) {
+      dropPrev = false;
+      dropInner = false;
+      dropNext = false;
+    }
+    var dropEl = dropNode.$el;
+
+    // find target node without children, just calc content node height
+    var targetPosition = dropEl.querySelector(".".concat(ns.be('node', 'content'))).getBoundingClientRect();
+    var treePosition = elRef.current.getBoundingClientRect();
+    var treeScrollTop = elRef.current.scrollTop;
+    var dropType;
+    var getPrevPercent = function getPrevPercent() {
+      if (!dropPrev) {
+        return Number.NEGATIVE_INFINITY;
+      }
+      if (dropInner) {
+        return 0.25;
+      }
+      if (dropNext) {
+        return 0.45;
+      }
+      return 1;
+    };
+    var getNextPercent = function getNextPercent() {
+      if (!dropNext) {
+        return Number.POSITIVE_INFINITY;
+      }
+      if (dropInner) {
+        return 0.75;
+      }
+      if (dropPrev) {
+        return 0.55;
+      }
+      return 0;
+    };
+    var prevPercent = getPrevPercent();
+    var nextPercent = getNextPercent();
+    var indicatorTop = -9999;
+    var distance = event.clientY - targetPosition.top;
+    if (distance < targetPosition.height * prevPercent) {
+      dropType = 'before';
+    } else if (distance > targetPosition.height * nextPercent) {
+      dropType = 'after';
+    } else if (dropInner) {
+      dropType = 'inner';
+    } else {
+      dropType = 'none';
+    }
+    var iconPosition = dropEl.querySelector(".".concat(ns.be('node', 'expand-icon'))).getBoundingClientRect();
+    var dropIndicator = dropIndicatorRef.current;
+    if (dropType === 'before') {
+      indicatorTop = iconPosition.top - treePosition.top + treeScrollTop;
+    } else if (dropType === 'after') {
+      indicatorTop = iconPosition.bottom - treePosition.top + treeScrollTop;
+    }
+    dropIndicator.style.top = "".concat(indicatorTop, "px");
+    dropIndicator.style.left = "".concat(iconPosition.right - treePosition.left, "px");
+    if (dropType === 'inner') {
+      addClass(dropEl, ns.is('drop-inner'));
+    } else {
+      removeClass(dropEl, ns.is('drop-inner'));
+    }
+    var showDropIndicator = dropType === 'before' || dropType === 'after';
+    dropIndicatorRef.current.style.display = showDropIndicator ? 'block' : 'none';
+    var _allowDrop = showDropIndicator || userAllowDropInner;
+    var newDragState = {
+      showDropIndicator: showDropIndicator,
+      allowDrop: _allowDrop,
+      dropType: dropType
+    };
+    setDragState(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), newDragState);
+    });
+    onNodeDragOver === null || onNodeDragOver === void 0 || onNodeDragOver(draggingNode.node, dropNode.node, event);
+  }, [allowDrop, ns, elRef, dropIndicatorRef, setDragState, onNodeDragOver, onNodeDragEnter, onNodeDragLeave]);
+  var treeNodeDragEnd = useCallback(function (event) {
+    var currentDragState = dragStateRef.current;
+    var draggingNode = currentDragState.draggingNode,
+      dropType = currentDragState.dropType,
+      dropNode = currentDragState.dropNode;
+    event.preventDefault();
+
+    // https://bugzilla.mozilla.org/show_bug.cgi?id=1911486
+    if (event.dataTransfer) {
+      event.dataTransfer.dropEffect = 'move';
+    }
+    if (draggingNode !== null && draggingNode !== void 0 && draggingNode.node.data && dropNode) {
+      var draggingNodeCopy = {
+        data: draggingNode.node.data
+      };
+      if (dropType !== 'none') {
+        draggingNode.node.remove();
+      }
+      if (dropType === 'before') {
+        var _dropNode$node$parent;
+        (_dropNode$node$parent = dropNode.node.parent) === null || _dropNode$node$parent === void 0 || _dropNode$node$parent.insertBefore(draggingNodeCopy, dropNode.node);
+      } else if (dropType === 'after') {
+        var _dropNode$node$parent2;
+        (_dropNode$node$parent2 = dropNode.node.parent) === null || _dropNode$node$parent2 === void 0 || _dropNode$node$parent2.insertAfter(draggingNodeCopy, dropNode.node);
+      } else if (dropType === 'inner') {
+        dropNode.node.insertChild(draggingNodeCopy);
+      }
+      if (dropType !== 'none') {
+        store.registerNode(draggingNodeCopy);
+        if (store.key) {
+          //restore checkbox state after dragging
+          draggingNode.node.eachNode(function (node) {
+            var _store$nodesMap$node$;
+            store === null || store === void 0 || (_store$nodesMap$node$ = store.nodesMap[node.data[store === null || store === void 0 ? void 0 : store.key]]) === null || _store$nodesMap$node$ === void 0 || _store$nodesMap$node$.setChecked(node.checked, !(store !== null && store !== void 0 && store.checkStrictly));
+          });
+        }
+      }
+      removeClass(dropNode.$el, ns.is('drop-inner'));
+      onNodeDragEnd === null || onNodeDragEnd === void 0 || onNodeDragEnd(draggingNode.node, dropNode.node, dropType, event);
+      if (dropType !== 'none') {
+        onNodeDrop === null || onNodeDrop === void 0 || onNodeDrop(draggingNode.node, dropNode.node, dropType, event);
+      }
+    }
+    if (draggingNode && !dropNode) {
+      onNodeDragEnd === null || onNodeDragEnd === void 0 || onNodeDragEnd(draggingNode.node, null, dropType, event);
+    }
+
+    // setDragState({
+    //     showDropIndicator: false,
+    //     draggingNode: null,
+    //     dropNode: null,
+    //     allowDrop: true,
+    //     dropType: null,
+    // });
+    dropIndicatorRef.current.style.display = 'none';
+    elRef.current.classList.remove(ns.is('dragging'));
+    elRef.current.classList.remove(ns.is('drop-not-allow'));
+    elRef.current.classList.remove(ns.is('drop-inner'));
+    dragStateRef.current = {
+      showDropIndicator: false,
+      draggingNode: null,
+      dropNode: null,
+      allowDrop: true,
+      dropType: null
+    };
+  }, [dropIndicatorRef, elRef, ns, onNodeDragEnd, onNodeDrop, store]);
+  return {
+    treeNodeDragStart: treeNodeDragStart,
+    treeNodeDragOver: treeNodeDragOver,
+    treeNodeDragEnd: treeNodeDragEnd
+  };
+}

package/dist/Tree/model/useKeydown.js

@@ -0,0 +1,104 @@
+// import { RefObject } from 'react';
+// import { EVENT_CODE } from '../../config/Constants';
+// import { useClassNames } from '../../hooks';
+// import TreeStore from './tree-store';
+
+// interface UseKeydownOption {
+//     elRef: RefObject<HTMLElement | null>;
+// }
+// export function useKeydown({ elRef }: UseKeydownOption, store: TreeStore) {
+//     const ns = useClassNames('tree');
+
+//     onMounted(() => {
+//         initTabIndex();
+//     });
+
+//     onUpdated(() => {
+//         elRef.current?.querySelectorAll('input[type=checkbox]').forEach(checkbox => {
+//             checkbox.setAttribute('tabindex', '-1');
+//         });
+//     });
+
+//     function canNodeFocus(treeItems: HTMLElement[], nextIndex: number): boolean {
+//         const currentNode = store.getNode(treeItems[nextIndex].dataset.key!);
+//         return currentNode.canFocus && currentNode.visible && (currentNode.parent?.expanded || currentNode.parent?.level === 0);
+//     }
+
+//     const handleKeydown = (ev: KeyboardEvent): void => {
+//         const currentItem = ev.target as HTMLDivElement;
+//         if (!currentItem.className.includes(ns.b('node'))) {
+//             return;
+//         }
+//         const code = getEventCode(ev);
+//         const treeItems: HTMLElement[] = Array.from(elRef.current!.querySelectorAll(`.${ns.is('focusable')}[role=treeitem]`));
+//         const currentIndex = treeItems.indexOf(currentItem);
+//         let nextIndex;
+//         if ([EVENT_CODE.up, EVENT_CODE.down].includes(code)) {
+//             ev.preventDefault();
+//             if (code === EVENT_CODE.up) {
+//                 nextIndex = currentIndex === -1 ? 0 : currentIndex !== 0 ? currentIndex - 1 : treeItems.length - 1;
+//                 const startIndex = nextIndex;
+//                 while (true) {
+//                     if (canNodeFocus(treeItems, nextIndex)) {
+//                         break;
+//                     }
+
+//                     nextIndex--;
+//                     if (nextIndex === startIndex) {
+//                         nextIndex = -1;
+//                         break;
+//                     }
+//                     if (nextIndex < 0) {
+//                         nextIndex = treeItems.length - 1;
+//                     }
+//                 }
+//             } else {
+//                 nextIndex = currentIndex === -1 ? 0 : currentIndex < treeItems.length - 1 ? currentIndex + 1 : 0;
+//                 const startIndex = nextIndex;
+//                 while (true) {
+//                     if (canNodeFocus(treeItems, nextIndex)) {
+//                         break;
+//                     }
+
+//                     nextIndex++;
+//                     if (nextIndex === startIndex) {
+//                         nextIndex = -1;
+//                         break;
+//                     }
+//                     if (nextIndex >= treeItems.length) {
+//                         nextIndex = 0;
+//                     }
+//                 }
+//             }
+//             nextIndex !== -1 && treeItems[nextIndex].focus();
+//         }
+//         if ([EVENT_CODE.left, EVENT_CODE.right].includes(code)) {
+//             ev.preventDefault();
+//             currentItem.click();
+//         }
+//         const hasInput = currentItem.querySelector('[type="checkbox"]') as Nullable<HTMLInputElement>;
+//         if ([EVENT_CODE.enter, EVENT_CODE.numpadEnter, EVENT_CODE.space].includes(code) && hasInput) {
+//             ev.preventDefault();
+//             hasInput.click();
+//         }
+//     };
+
+//     elRef.current.addEventListener('keydown', handleKeydown);
+
+//     const initTabIndex = (): void => {
+//         if (!elRef.current) {
+//             return;
+//         }
+//         const treeItems = Array.from(elRef.current.querySelectorAll(`.${ns.is('focusable')}[role=treeitem]`));
+//         const checkboxItems = Array.from(elRef.current.querySelectorAll('input[type=checkbox]'));
+//         checkboxItems.forEach(checkbox => {
+//             checkbox.setAttribute('tabindex', '-1');
+//         });
+//         const checkedItem = elRef.current.querySelectorAll(`.${ns.is('checked')}[role=treeitem]`);
+//         if (checkedItem.length) {
+//             checkedItem[0].setAttribute('tabindex', '0');
+//             return;
+//         }
+//         treeItems[0]?.setAttribute('tabindex', '0');
+//     };
+// }

package/dist/Tree/model/useNodeExpandEventBroadcast.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type Node from './node';
+interface NodeMap {
+    treeNodeExpand(node?: Node): void;
+    children: Set<NodeMap>;
+}
+interface Props {
+    node?: Node;
+    accordion?: boolean;
+}
+export declare function useNodeExpandEventBroadcast(props: Props): {
+    parentNodeMap: import("react").MutableRefObject<NodeMap>;
+    broadcastExpanded: (node?: Node) => void;
+};
+export {};

package/dist/Tree/model/useNodeExpandEventBroadcast.js

@@ -0,0 +1,54 @@
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+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; }
+import { useRef } from 'react';
+import { useTreeNodeExpandContext } from "../TreeContext";
+export function useNodeExpandEventBroadcast(props) {
+  var _useTreeNodeExpandCon = useTreeNodeExpandContext(),
+    parentNodeMap = _useTreeNodeExpandCon.parentNodeMap;
+  // const currentNodeMap = useRef(null);
+
+  var currentNodeMap = useRef({
+    treeNodeExpand: function treeNodeExpand(node) {
+      if (props.node !== node) {
+        var _props$node;
+        (_props$node = props.node) === null || _props$node === void 0 || _props$node.collapse();
+      }
+    },
+    children: new Set()
+  });
+  if (parentNodeMap !== null && parentNodeMap !== void 0 && parentNodeMap.current) {
+    parentNodeMap.current.children.add(currentNodeMap.current);
+  }
+  // useEffect(() => {
+  //     // parentNodeMap.current = currentNodeMap.current;
+
+  //     return () => {
+  //         if (parentNodeMap?.current) {
+  //             parentNodeMap.current.children.delete(currentNodeMap.current);
+  //         }
+  //         currentNodeMap.current = null;
+  //     };
+  // });
+
+  return {
+    parentNodeMap: currentNodeMap,
+    broadcastExpanded: function broadcastExpanded(node) {
+      if (!props.accordion) {
+        return;
+      }
+      var _iterator = _createForOfIteratorHelper(currentNodeMap.current.children),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var childNode = _step.value;
+          childNode.treeNodeExpand(node);
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    }
+  };
+}

package/dist/Tree/model/util.d.ts

@@ -0,0 +1,7 @@
+import { TreeKey, TreeNodeData } from '../typings';
+import type Node from './node';
+import TreeStore from './tree-store';
+export declare const NODE_KEY = "$treeNodeId";
+export declare const markNodeData: (node: Node, data: TreeNodeData | null) => void;
+export declare const getNodeKey: (key: TreeKey | undefined, data: TreeNodeData) => any;
+export declare const handleCurrentChange: (store: TreeStore, onCurrentChange: (data: TreeNodeData, currentNode: Node) => void, setCurrent: () => void) => void;

package/dist/Tree/model/util.js

@@ -0,0 +1,24 @@
+export var NODE_KEY = '$treeNodeId';
+export var markNodeData = function markNodeData(node, data) {
+  if (!data || data[NODE_KEY]) {
+    return;
+  }
+  Object.defineProperty(data, NODE_KEY, {
+    value: node.id,
+    enumerable: false,
+    configurable: false,
+    writable: false
+  });
+};
+export var getNodeKey = function getNodeKey(key, data) {
+  return data === null || data === void 0 ? void 0 : data[key || NODE_KEY];
+};
+export var handleCurrentChange = function handleCurrentChange(store, onCurrentChange, setCurrent) {
+  var preCurrentNode = store.currentNode;
+  setCurrent();
+  var currentNode = store.currentNode;
+  if (preCurrentNode === currentNode) {
+    return;
+  }
+  onCurrentChange === null || onCurrentChange === void 0 || onCurrentChange(currentNode ? currentNode.data : null, currentNode);
+};