@unicom-cloud/ui 0.8.44 → 0.8.46

package/tree/Node.js

@@ -0,0 +1,215 @@
+import { jsxs as x, Fragment as q, jsx as s } from "react/jsx-runtime";
+import z from "@unicom-cloud/icons/IconUiCaretDown";
+import G from "@unicom-cloud/icons/IconUiDragDotVertical";
+import J from "@unicom-cloud/icons/IconUiFile";
+import K from "@unicom-cloud/icons/IconUiLoading";
+import h from "lodash/isFunction";
+import Q, { forwardRef as W, useContext as R, useRef as X, useState as Z, useCallback as b } from "react";
+/* empty css                  */
+/* empty css                           */
+import ee from "../checkbox/Checkbox.js";
+import "../config-provider/ConfigProvider.js";
+import ie from "../IconHover.js";
+import $ from "@unicom-cloud/utils/class-name";
+import ae from "../utils/throttleByRaf.js";
+import ne from "./Animation.js";
+import { TreeContext as oe } from "./Context.js";
+import { ConfigContext as te } from "../config-provider/context.js";
+function re(n, S) {
+  const i = R(oe), { getPrefixCls: U } = R(te), w = X(), [t, f] = Z({
+    isAllowDrop: !0,
+    isDragOver: !1,
+    dragPosition: 0,
+    isDragging: !1
+  }), {
+    _key: u = "",
+    title: Y,
+    icon: I,
+    checkable: O,
+    selected: F,
+    disabled: N,
+    disableCheckbox: H,
+    isLeaf: P,
+    draggable: d,
+    expanded: g,
+    showLine: v,
+    loading: M,
+    selectable: p = !0
+  } = n, o = U("tree-node"), j = $(
+    o,
+    {
+      [`${o}-selected`]: F,
+      [`${o}-is-leaf`]: P,
+      [`${o}-expanded`]: g,
+      [`${o}-disabled-selectable`]: !p,
+      [`${o}-disabled`]: N,
+      [`${o}-draggable`]: d
+    },
+    n.className
+  ), c = (() => {
+    const e = h(i.icons) ? i.icons(n) : i.icons, a = h(n.icons) ? n.icons(n) : n.icons;
+    return { ...e, ...a };
+  })(), C = b(
+    (e) => {
+      var a;
+      e !== g && ((a = i.onExpand) == null || a.call(i, e, u));
+    },
+    [g, i.onExpand]
+  ), T = b(async () => {
+    var r;
+    const { isLeaf: e, expanded: a } = n;
+    e || (!((r = n.childrenData) != null && r.length) && h(i.loadMore) && !a ? await i.loadMore(n) : C(!a));
+  }, [n, C, i.loadMore]), B = () => {
+    if (M)
+      return "loadingIcon" in c ? c.loadingIcon : /* @__PURE__ */ s(K, {});
+    let e = null, a = !1;
+    if (P)
+      v && (e = "switcherIcon" in c ? c.switcherIcon : /* @__PURE__ */ s(J, {}), a = !0);
+    else {
+      const r = v ? /* @__PURE__ */ s("span", { className: `${o}-${g ? "minus" : "plus"}-icon` }) : /* @__PURE__ */ s(z, {});
+      e = "switcherIcon" in c ? c.switcherIcon : r, a = !v;
+    }
+    if (e)
+      return e = /* @__PURE__ */ s(
+        "span",
+        {
+          className: `${o}-switcher-icon`,
+          "aria-label": g ? "fold button" : "expand button",
+          role: "button",
+          tabIndex: 0,
+          onClick: T,
+          children: e
+        }
+      ), a ? /* @__PURE__ */ s(ie, { prefix: o, children: e }) : e;
+  }, D = b(
+    ae((e) => {
+      var L;
+      const a = w.current;
+      if (!a) return;
+      const r = a.getBoundingClientRect(), m = window.pageYOffset + r.top, l = e.pageY, A = r.height / 4, E = l - m, k = E < A ? -1 : E < r.height - A ? 0 : 1, V = i.allowDrop(n, k);
+      f({
+        ...t,
+        isAllowDrop: V,
+        isDragOver: !0,
+        dragPosition: k
+      }), (L = i.onNodeDragOver) == null || L.call(i, e, n, k);
+    }),
+    [i.onNodeDragOver]
+  ), y = b(
+    (e, a) => {
+      var l;
+      const { disableCheckbox: r, disabled: m } = n;
+      r || m || (l = i.onCheck) == null || l.call(i, e, u, a);
+    },
+    [n.disabled, n.disableCheckbox]
+  );
+  return /* @__PURE__ */ x(q, { children: [
+    /* @__PURE__ */ x(
+      "div",
+      {
+        style: n.style,
+        className: j,
+        ref: S,
+        role: "treeitem",
+        "aria-disabled": N,
+        "aria-expanded": g,
+        "aria-level": n._level,
+        children: [
+          /* @__PURE__ */ s("span", { className: `${o}-indent`, "aria-hidden": !0, children: [...Array(n._level)].map((e, a) => /* @__PURE__ */ s(
+            "span",
+            {
+              className: $(`${o}-indent-block`, {
+                [`${o}-indent-block-lineless`]: n._lineless && n._lineless[a]
+              })
+            },
+            a
+          )) }),
+          /* @__PURE__ */ s(
+            "span",
+            {
+              className: $(`${o}-switcher`, {
+                [`${o}-switcher-expanded`]: g
+              }),
+              children: B()
+            }
+          ),
+          O ? /* @__PURE__ */ s(
+            ee,
+            {
+              disabled: H || N,
+              value: u,
+              indeterminate: n.indeterminated,
+              checked: n.checked,
+              onChange: y
+            }
+          ) : null,
+          /* @__PURE__ */ x(
+            "span",
+            {
+              "aria-grabbed": t.isDragging,
+              ref: w,
+              className: $(`${o}-title`, {
+                [`${o}-title-draggable`]: d,
+                [`${o}-title-gap-top`]: t.isDragOver && t.isAllowDrop && t.dragPosition < 0,
+                [`${o}-title-gap-bottom`]: t.isDragOver && t.isAllowDrop && t.dragPosition > 0,
+                [`${o}-title-highlight`]: !t.isDragging && t.isDragOver && t.isAllowDrop && t.dragPosition === 0,
+                [`${o}-title-dragging`]: t.isDragging,
+                [`${o}-title-block`]: n.blockNode
+              }),
+              onClick: (e) => {
+                const { onSelect: a, onSelect_: r, actionOnClick: m } = i;
+                if (!n.disabled) {
+                  const l = [].concat(m);
+                  p && l.indexOf("select") > -1 && (a == null || a(u, e)), r == null || r(n), l.indexOf("expand") > -1 && T(), O && l.indexOf("check") > -1 && y(!n.checked, e);
+                }
+              },
+              draggable: d,
+              onDrop: (e) => {
+                var a;
+                e.stopPropagation(), e.preventDefault(), (a = i.onNodeDrop) == null || a.call(i, e, n, t.dragPosition), D.cancel(), f({
+                  ...t,
+                  isDragOver: !1,
+                  dragPosition: 0
+                });
+              },
+              onDragStart: (e) => {
+                var a;
+                if (d) {
+                  e.stopPropagation(), f({ ...t, isDragging: !0 }), (a = i.onNodeDragStart) == null || a.call(i, e, n);
+                  try {
+                    e.dataTransfer.setData("text/plain", "");
+                  } catch {
+                  }
+                }
+              },
+              onDragEnd: (e) => {
+                var a;
+                d && (e.stopPropagation(), D.cancel(), f({ ...t, isDragOver: !1, isDragging: !1 }), (a = i.onNodeDragEnd) == null || a.call(i, e, n));
+              },
+              onDragOver: (e) => {
+                e.preventDefault(), e.stopPropagation(), e.persist(), D(e);
+              },
+              onDragLeave: (e) => {
+                var a;
+                d && (e.stopPropagation(), D.cancel(), f({ ...t, isDragOver: !1 }), (a = i.onNodeDragLeave) == null || a.call(i, e, n));
+              },
+              children: [
+                I && /* @__PURE__ */ s("span", { className: `${o}-icon ${o}-custom-icon`, children: I }),
+                /* @__PURE__ */ s("span", { className: `${o}-title-text`, children: h(i.renderTitle) ? i.renderTitle(n) : Y }),
+                d && /* @__PURE__ */ s("span", { className: `${o}-icon ${o}-drag-icon`, children: "dragIcon" in c ? c.dragIcon : /* @__PURE__ */ s(G, {}) })
+              ]
+            }
+          ),
+          h(i.renderExtra) && i.renderExtra(n)
+        ]
+      }
+    ),
+    /* @__PURE__ */ s(ne, { ...n })
+  ] });
+}
+const _ = W(re);
+_.displayName = "TreeNode";
+const Ie = Q.memo(_);
+export {
+  Ie as default
+};

package/tree/NodeList.js

@@ -0,0 +1,84 @@
+import { jsx as L } from "react/jsx-runtime";
+import { forwardRef as R, useRef as h, useMemo as p, useImperativeHandle as N, createElement as P } from "react";
+import V from "../utils/scrollIntoView.js";
+/* empty css                  */
+/* empty css                               */
+import b from "../virtual-list/VirtualList.js";
+import g from "./Node.js";
+function H(s) {
+  return s.key || s._key;
+}
+function j(s, v) {
+  const {
+    className: m,
+    style: K,
+    filterNode: a,
+    virtualListProps: c,
+    expandedKeys: w,
+    currentExpandKeys: k,
+    nodeList: i,
+    getNodeProps: S,
+    getDataSet: E
+  } = s, x = (c == null ? void 0 : c.threshold) !== null, l = h(), d = h(), D = h(), I = p(() => new Set(w), [w]), u = p(() => {
+    const e = /* @__PURE__ */ new Set(), r = new Set(k);
+    return i.forEach((t) => {
+      (t.pathParentKeys || []).every(
+        (n) => !r.has(n) && I.has(n)
+      ) && e.add(t._key);
+    }), e;
+  }, [I, k, i]), M = () => i.filter((e) => !!((!a || (a == null ? void 0 : a(e))) && u.has(e.key))), f = p(() => M(), [i, a, u]);
+  return N(v, () => ({
+    // index: 第几个dom元素, 如果传入的是字符串，会作为 node 的 key去查找。
+    // nodeProps: _index 是 key 时，对应的node
+    scrollIntoView: (e, r) => {
+      let t = e;
+      if (typeof e == "string") {
+        let n = e;
+        !u.has(e) && r && r.pathParentKeys && (n = [...r.pathParentKeys].reverse().find((o) => u.has(o)) || t), t = f.findIndex(({ _key: o }) => o === n);
+      }
+      if (!x && d.current) {
+        const n = d.current, o = n ? n.children[t] : null;
+        o && V(o, {
+          boundary: n.parentElement
+        });
+      } else l.current && l.current.scrollTo({ index: t });
+    }
+  })), x ? /* @__PURE__ */ L(
+    b,
+    {
+      className: m,
+      style: K,
+      ref: l,
+      data: f,
+      isStaticItemHeight: !1,
+      itemKey: H,
+      onMouseDown: s.onMouseDown,
+      ...s.ariaProps,
+      ...c,
+      children: (e, r, { itemIndex: t }) => {
+        t === 0 && (D.current = E());
+        const y = S(e, D.current);
+        return /* @__PURE__ */ P(g, { ...e, key: e.key, ...y });
+      }
+    }
+  ) : /* @__PURE__ */ L(
+    "div",
+    {
+      role: "tree",
+      tabIndex: 0,
+      className: m,
+      style: K,
+      ref: d,
+      ...s.ariaProps,
+      onMouseDown: s.onMouseDown,
+      children: f.map((e) => {
+        const r = S(e);
+        return /* @__PURE__ */ P(g, { ...r, key: e.key });
+      })
+    }
+  );
+}
+const B = R(j);
+export {
+  B as default
+};