@unicom-cloud/ui 0.8.90 → 0.8.91

package/tabs/hook/useHeaderScroll.js

@@ -0,0 +1,67 @@
+import { useRef as h, useEffect as W } from "react";
+import { on as s, off as b } from "../../components/common/utils/dom.js";
+function D(x) {
+  const {
+    headerWrapperRef: u,
+    headerOffset: i,
+    align: E,
+    isScrollable: d,
+    direction: M,
+    onScroll: l
+  } = x;
+  function m(e, t) {
+    let n = 0;
+    M === "vertical" ? n = i + t : n = E === "left" ? i + e : i - e, l == null || l(n);
+  }
+  const f = h("x");
+  function R(e) {
+    if (!d)
+      return;
+    e.preventDefault();
+    const { deltaX: t, deltaY: n } = e;
+    let o = 0;
+    const c = Math.abs(t), r = Math.abs(n);
+    c === r ? o = f.current === "x" ? t : n : c > r ? (o = t, f.current = "x") : (o = n, f.current = "y"), m(o, o);
+  }
+  const p = h({
+    clientX: 0,
+    clientY: 0
+  }), v = (e) => e && e.touches && e.touches.length && e.touches[0], Y = (e) => {
+    e.cancelable && e.preventDefault();
+    const t = v(e);
+    if (!t)
+      return;
+    const { clientX: n, clientY: o } = p.current, c = t.clientX - n, r = t.clientY - o;
+    m(-c, -r);
+  }, X = () => {
+    b(document.documentElement, "touchmove", Y), b(document.documentElement, "touchend", X);
+  }, T = (e) => {
+    if (!d)
+      return;
+    const t = v(e);
+    t && (p.current = {
+      clientX: t.clientX,
+      clientY: t.clientY
+    }, s(document.documentElement, "touchmove", Y, { passive: !1 }), s(window, "touchend", X, { passive: !1 }));
+  }, a = h(null);
+  a.current = { onWheel: R, onTouchStart: T }, W(() => {
+    s(
+      u.current,
+      "wheel",
+      (e) => {
+        a.current.onWheel(e);
+      },
+      { passive: !1 }
+    ), s(
+      u.current,
+      "touchstart",
+      (e) => {
+        a.current.onTouchStart(e);
+      },
+      { passive: !0 }
+    );
+  }, [u.current]);
+}
+export {
+  D as default
+};

package/tabs/index.js

@@ -1,9 +1,9 @@
-import { T as e } from "../chunk/DWvmq7az.js";
-import { a as s } from "../chunk/DWvmq7az.js";
-import { default as f, default as T } from "./TabPane.js";
+import e from "./Tab.js";
+import { TabsContext as r } from "./Tab.js";
+import { default as s, default as b } from "./TabPane.js";
 export {
-  f as TabPane,
-  s as TabsContext,
-  T as TabsTabPane,
+  s as TabPane,
+  r as TabsContext,
+  b as TabsTabPane,
   e as default
 };

package/tabs/tab-header/DropdownIcon.js

@@ -0,0 +1,66 @@
+import { jsx as c } from "react/jsx-runtime";
+import I from "@unicom-cloud/icons/IconUiDown";
+import z from "lodash/isNull";
+import { useMemo as b } from "react";
+import D from "../../dropdown/index.js";
+import R from "../../icon-hover/index.js";
+import x from "../../menu/Menu.js";
+function T(s) {
+  const {
+    prefixCls: d,
+    currentOffset: n,
+    headerSize: m,
+    headerWrapperSize: l,
+    getTitleRef: C,
+    paneChildren: h,
+    direction: u,
+    icon: g
+  } = s, i = h.map((e) => e.key), k = u === "vertical" ? m.height : m.width, a = u === "vertical" ? l.height : l.width, f = b(() => {
+    const e = {}, t = l.domRect;
+    return i.map((r) => {
+      const p = C(r);
+      if (!p)
+        return;
+      const o = p.getBoundingClientRect();
+      e[r] = {
+        left: o.left - t.left,
+        right: o.left - t.left + o.width,
+        top: o.top - t.top,
+        bottom: o.top - t.top + o.height
+      };
+    }), e;
+  }, [i.join(","), k, a]), w = b(() => {
+    let e = -1, t = -1;
+    for (const r in f) {
+      const { left: p, right: o } = f[r];
+      if (p >= n && o - n <= a && e === -1 && (e = i.indexOf(r), t = e), p >= n && o - n > a) {
+        t = i.indexOf(r);
+        break;
+      }
+    }
+    return [e, t];
+  }, [f, i.join(","), n]);
+  return z(g) ? null : /* @__PURE__ */ c(
+    D,
+    {
+      trigger: "click",
+      droplist: /* @__PURE__ */ c(x, { onClickMenuItem: s.onClickTab, children: h.map((e, t) => {
+        if (t < w[0] || t >= w[1])
+          return /* @__PURE__ */ c(x.Item, { disabled: e.disabled, children: e.props.title }, e.key);
+      }) }),
+      children: /* @__PURE__ */ c(
+        R,
+        {
+          role: "button",
+          "aria-label": "expand tabs",
+          prefix: `${d}-dropdown`,
+          className: `${d}-dropdown-icon`,
+          children: g || /* @__PURE__ */ c(I, {})
+        }
+      )
+    }
+  );
+}
+export {
+  T as default
+};

package/tabs/tab-header/TabInk.js

@@ -0,0 +1,66 @@
+import { jsx as m } from "react/jsx-runtime";
+import y from "lodash/isEqualWith";
+import { useRef as p, useEffect as g } from "react";
+import { getRectDiff as k } from "../util.js";
+import R from "@unicom-cloud/utils/class-name";
+import { throttleByRaf as w } from "../../components/common/utils/throttleByRaf.js";
+const b = (t, e, s) => {
+  let r = { left: "", width: "", top: "", height: "" };
+  if (e) {
+    const n = k(e, s);
+    t === "vertical" ? r = {
+      top: `${n.top}px`,
+      height: `${e.offsetHeight}px`,
+      left: "",
+      width: ""
+    } : r = {
+      left: `${n.left}px`,
+      width: `${e.offsetWidth}px`,
+      top: "",
+      height: ""
+    };
+  }
+  return r;
+}, q = ({
+  prefixCls: t,
+  animation: e,
+  disabled: s,
+  direction: r,
+  getTitleRef: n,
+  activeTab: u,
+  getHeaderRef: $,
+  inkBarSize: c
+}) => {
+  const a = p(), h = p();
+  return g(() => {
+    const f = w(() => {
+      var d;
+      const i = n(u), o = b(
+        r,
+        i,
+        $("headerRef").current
+      );
+      o && !y(h.current, o) && (h.current = o, (d = a.current) != null && d.style && Object.keys(o).forEach((l) => {
+        a.current.style[l] = o[l];
+      }));
+    });
+    return f(), () => {
+      var i;
+      (i = f.cancel) == null || i.call(f);
+    };
+  }), /* @__PURE__ */ m(
+    "div",
+    {
+      className: R(`${t}-header-ink`, {
+        [`${t}-header-ink-no-animation`]: !e,
+        [`${t}-header-ink-disabled`]: s,
+        [`${t}-header-ink-custom`]: c
+      }),
+      ref: a,
+      children: c && /* @__PURE__ */ m("div", { style: c, className: `${t}-header-ink-inner` })
+    }
+  );
+};
+export {
+  q as default
+};

package/tabs/tab-header/TabNavIcon.js

@@ -0,0 +1,66 @@
+import { jsx as o } from "react/jsx-runtime";
+import P from "@unicom-cloud/icons/IconUiDown";
+import I from "@unicom-cloud/icons/IconUiLeft";
+import O from "@unicom-cloud/icons/IconUiRight";
+import S from "@unicom-cloud/icons/IconUiUp";
+import j from "lodash/isNull";
+import { useMemo as p } from "react";
+import L from "../../icon-hover/index.js";
+import R from "@unicom-cloud/utils/class-name";
+const T = {
+  prev: "left",
+  next: "right"
+}, V = {
+  prev: "up",
+  next: "down"
+}, Q = (n) => {
+  const {
+    direction: c,
+    headerSize: N,
+    headerWrapperSize: b,
+    prefixCls: s,
+    iconPos: h,
+    currentOffset: e,
+    align: l,
+    rtl: v,
+    icon: g
+  } = n, { height: d, width: a } = b, { height: x, width: z } = N, m = x - d, f = z - a, H = {
+    up: /* @__PURE__ */ o(S, {}),
+    down: /* @__PURE__ */ o(P, {}),
+    left: v ? /* @__PURE__ */ o(O, {}) : /* @__PURE__ */ o(I, {}),
+    right: v ? /* @__PURE__ */ o(I, {}) : /* @__PURE__ */ o(O, {})
+  }, w = (t) => {
+    var r;
+    t !== n.currentOffset && ((r = n == null ? void 0 : n.onChange) == null || r.call(n, t));
+  }, U = (t, r) => {
+    t.preventDefault();
+    let i;
+    l === "left" ? i = r === "left" ? e - a : e + a : i = r === "left" ? e + a : e - a, w(i);
+  }, k = (t, r) => {
+    t.preventDefault();
+    let i;
+    if (r === "up")
+      i = e - d;
+    else if (i = e + d, i >= x)
+      return;
+    w(i);
+  }, D = p(() => l === "left" ? e <= 0 : c === "vertical" ? e >= m : e >= f, [l, c, e, f, e]), W = p(() => l === "left" ? c === "vertical" ? e >= m : e >= f : e <= 0, [l, c, m, f, e]);
+  if (j(g))
+    return null;
+  const u = c === "horizontal" ? T[h] : V[h], C = h === "prev" ? D : W, $ = R(`${s}-${u}-icon`, {
+    [`${s}-nav-icon-disabled`]: C
+  }), M = c === "vertical" ? k : U;
+  return /* @__PURE__ */ o(
+    L,
+    {
+      disabled: C,
+      className: $,
+      prefix: s,
+      onClick: (t) => M(t, u),
+      children: g || H[u]
+    }
+  );
+};
+export {
+  Q as default
+};

package/tabs/tab-header/TabTitle.js

@@ -0,0 +1,78 @@
+import { jsxs as y, jsx as r } from "react/jsx-runtime";
+import v from "@unicom-cloud/icons/IconUiClose";
+import T from "lodash/isFunction";
+import N from "react";
+import w from "../../icon-hover/index.js";
+import { getKeyDownEvent as D } from "../util.js";
+import E from "@unicom-cloud/utils/class-name";
+import { Enter as H } from "@unicom-cloud/utils/constant/keyboardCode";
+const I = ({
+  prefixCls: t,
+  onDeleteTab: h,
+  tabKey: c,
+  isActive: a,
+  onClickTab: f,
+  disabled: e = !1,
+  title: p,
+  editable: n,
+  renderTitle: i,
+  deleteIcon: k,
+  deleteButton: u,
+  getIdPrefix: m,
+  index: l
+}, $) => {
+  const b = T(i) ? i : (o) => o, s = (o) => {
+    o.stopPropagation(), !e && h();
+  }, d = (o) => {
+    e || f(o);
+  };
+  return b(
+    /* @__PURE__ */ y(
+      "div",
+      {
+        ref: $,
+        className: E(`${t}-header-title`, {
+          [`${t}-header-title-active`]: a,
+          [`${t}-header-title-editable`]: n,
+          [`${t}-header-title-disabled`]: e
+        }),
+        role: "tab",
+        "aria-selected": a,
+        tabIndex: e ? -1 : 0,
+        "aria-disabled": e || void 0,
+        id: m(l).tab,
+        "aria-controls": m(l).tabpane,
+        onClick: d,
+        onKeyDown: (o) => {
+          o.key === H.key && d(o);
+        },
+        children: [
+          /* @__PURE__ */ r("span", { className: `${t}-header-title-text`, children: p }),
+          n && /* @__PURE__ */ r(
+            "span",
+            {
+              role: "button",
+              "aria-label": "remove tab",
+              "aria-disabled": e || void 0,
+              tabIndex: e ? -1 : 0,
+              className: `${t}-close-icon`,
+              ...D({ onPressEnter: s }),
+              onClick: s,
+              children: u || /* @__PURE__ */ r(w, { prefix: t, children: k || /* @__PURE__ */ r(v, {}) })
+            }
+          )
+        ]
+      },
+      c
+    ),
+    {
+      key: c,
+      isActive: a,
+      disabled: e,
+      editable: n
+    }
+  );
+}, B = N.forwardRef(I);
+export {
+  B as default
+};

package/tabs/tab-header/index.js

@@ -0,0 +1,331 @@
+import { jsx as f, jsxs as L } from "react/jsx-runtime";
+import _e from "@unicom-cloud/icons/IconUiPlus";
+import ne from "lodash/isNumber";
+import je from "lodash/isPlainObject";
+import Ge from "lodash/throttle";
+import Ke, { useContext as me, useRef as Ve, useState as pe, useMemo as Xe, useCallback as Fe, useEffect as H } from "react";
+import "../../config-provider/ConfigProvider.js";
+import Ue from "../../icon-hover/index.js";
+import { TabsContext as Ye } from "../Tab.js";
+import E from "../hook/useDomSize.js";
+import qe from "../hook/useHeaderScroll.js";
+import { updateScrollOffset as Je, getRectDiff as Se, getKeyDownEvent as Qe } from "../util.js";
+import oe from "@unicom-cloud/utils/class-name";
+import { resizeObserverEffect as B } from "../../components/common/utils/resizeObserverEffect.js";
+import { setTransformStyle as Ze } from "../../components/common/utils/style.js";
+import et from "./DropdownIcon.js";
+import tt from "./TabInk.js";
+import ge from "./TabNavIcon.js";
+import rt from "./TabTitle.js";
+import nt from "../../config-provider/context.js";
+const ae = "vertical", _ = "right", j = "left", be = {
+  delete: !0,
+  add: !0
+}, ot = ({
+  direction: x,
+  align: D = j,
+  headerOffset: g
+}) => {
+  let d = `translateX(${-g}px)`;
+  return D === _ && (d = `translateX(${g}px)`), x === ae && (d = `translateY(${-g}px)`), Ze(d);
+}, at = ({
+  direction: x,
+  align: D = j,
+  headerDom: g,
+  headerWrapperDom: d
+}) => {
+  const a = Se(g, d);
+  return x === ae ? -a.top : D === _ ? a.right : -a.left;
+}, st = Ke.forwardRef((x, D) => {
+  const g = me(Ye), { rtl: d } = me(nt), a = { ...x, ...g }, [O, T, ve] = E(), [A, h, xe] = E(), [G, K, Oe] = E(), [V, X, Te] = E(), [F, U, $e] = E(), M = Ve({}), [$, se] = pe(0), [Ce, Y] = pe(!0), {
+    paneChildren: q,
+    editable: we,
+    prefixCls: n,
+    onAddTab: J,
+    direction: s,
+    type: b = "line",
+    overflow: ie = "scroll",
+    activeTab: P,
+    showAddButton: ye,
+    size: ke = "default",
+    style: Ne,
+    tabPosition: Ie,
+    className: He,
+    extra: le,
+    animation: De,
+    icons: i,
+    deleteButton: Ae,
+    addButton: Pe,
+    renderTabTitle: We,
+    scrollAfterEdit: ce,
+    scrollPosition: u = "auto",
+    inkBarSize: Ee
+  } = a, fe = je(ce) ? { ...be, ...ce } : be, [Me, Re] = d ? [_, j] : [j, _], C = b === "capsule" ? Re : Me, S = Xe(() => {
+    const e = K.height - X.height - U.height, t = K.width - X.width - U.width;
+    return a.direction === "vertical" ? e < h.height : t < h.width;
+  }, [
+    a.direction,
+    K,
+    X,
+    h,
+    U
+  ]), ze = () => {
+    if (G.current) {
+      const e = G.current;
+      Oe({
+        height: e.offsetHeight,
+        width: e.offsetWidth
+      });
+    }
+  }, R = (e) => Ge((t) => {
+    ze();
+    const r = t[0] && t[0].target;
+    r && e({
+      height: r.offsetHeight,
+      width: r.offsetWidth,
+      domRect: r.getBoundingClientRect()
+    });
+  }, 200), w = R(ve), y = R(xe), k = R(Te), N = R($e), Q = Fe(
+    (e) => {
+      const t = s === ae ? h.height - T.height : h.width - T.width;
+      let r = e;
+      return r = Math.min(t, r), r = Math.max(r, 0), r;
+    },
+    [s, h, T]
+  ), Z = (e) => {
+    const t = Q(e);
+    t !== $ && se(t);
+  };
+  H(() => () => {
+    var e, t, r, o;
+    (e = y == null ? void 0 : y.cancel) == null || e.call(y), (t = w == null ? void 0 : w.cancel) == null || t.call(w), (r = k == null ? void 0 : k.cancel) == null || r.call(k), (o = N == null ? void 0 : N.cancel) == null || o.call(N);
+  }, []), H(() => {
+    if (!Ce) {
+      Y(!0);
+      return;
+    }
+    const e = () => {
+      const r = M.current[P];
+      if (!r || !S)
+        return 0;
+      const o = Se(r, O.current), m = at({
+        direction: s,
+        align: C,
+        headerDom: A.current,
+        headerWrapperDom: O.current
+      });
+      if (s === "vertical") {
+        let p = m, l = u;
+        const c = m + o.top, v = m + o.bottom;
+        return l === "auto" && (l = o.top < 0 ? "start" : o.bottom > 0 ? "end" : u), l === "start" ? p = c : l === "end" ? p = v : l === "center" ? p = c - (o.top - o.bottom) / 2 : ne(l) && (p = Math.max(c - l, v)), p;
+      }
+      if (C === "right") {
+        const p = m - o.left, l = m - o.right;
+        let c = u, v = m;
+        return u === "auto" && (c = o.left < 0 ? "start" : o.right > 0 ? "end" : u), c === "start" ? v = p : c === "end" ? v = l : c === "center" ? v = p + (o.left - o.right) / 2 : ne(c) && (v = Math.min(p + c, l)), v;
+      }
+      let W = m, I = u;
+      const re = m + o.left, ue = m + o.right;
+      return u === "auto" && (I = o.left < 0 ? "start" : o.right > 0 ? "end" : u), I === "start" ? W = re : I === "end" ? W = ue : I === "center" ? W = re - (o.left - o.right) / 2 : ne(I) && (W = Math.max(re - I, ue)), W;
+    };
+    Je(O.current, s);
+    let t = e();
+    t = Q(t), se(t);
+  }, [
+    P,
+    s,
+    ie,
+    S,
+    b,
+    Q,
+    u
+  ]);
+  const Le = ot({
+    direction: s,
+    align: C,
+    headerOffset: $
+  }), ee = S && ie === "dropdown" && s !== "vertical", te = S && !ee, z = we && (b === "card" || b === "card-gutter" || b === "line"), Be = (e) => {
+    var t;
+    (t = a.onDeleteTab) == null || t.call(a, e.key), Y(fe.delete);
+  }, de = () => {
+    J == null || J(), Y(fe.add);
+  };
+  H(() => {
+    const e = B([F.current], N);
+    return () => {
+      e();
+    };
+  }, [F.current]), H(() => {
+    const e = B([O.current], w);
+    return () => {
+      e();
+    };
+  }, [O.current]), H(() => {
+    const e = B([A.current], y);
+    return () => {
+      e();
+    };
+  }, [A.current]), H(() => {
+    const e = B([V.current], k);
+    return () => {
+      e();
+    };
+  }, [V.current]);
+  const he = (e) => e && ye && /* @__PURE__ */ f(
+    "div",
+    {
+      className: `${n}-add-icon`,
+      "aria-label": "add tab",
+      tabIndex: 0,
+      role: "button",
+      ref: F,
+      onClick: de,
+      ...Qe({ onPressEnter: de }),
+      children: Pe || /* @__PURE__ */ f(Ue, { prefix: `${n}-add`, children: /* @__PURE__ */ f("span", { className: `${n}-add`, children: (i == null ? void 0 : i.add) || /* @__PURE__ */ f(_e, {}) }) })
+    }
+  );
+  return qe({
+    headerWrapperRef: O,
+    headerOffset: $,
+    align: C,
+    direction: s,
+    isScrollable: S,
+    onScroll(e) {
+      Z(e);
+    }
+  }), /* @__PURE__ */ f(
+    "div",
+    {
+      className: oe(
+        `${n}-header-nav`,
+        `${n}-header-nav-${s}`,
+        `${n}-header-nav-${Ie}`,
+        `${n}-header-size-${ke}`,
+        `${n}-header-nav-${b}`,
+        { [`${n}-header-nav-sticky`]: a.headerSticky },
+        // 潘启宝添加
+        He
+      ),
+      style: { ...Ne, ...a.headerSticky },
+      ref: D,
+      children: /* @__PURE__ */ L(
+        "div",
+        {
+          className: oe(`${n}-header-scroll`, {
+            [`${n}-header-overflow-scroll`]: te,
+            [`${n}-header-overflow-dropdown`]: ee
+          }),
+          ref: G,
+          children: [
+            te && /* @__PURE__ */ f(
+              ge,
+              {
+                iconPos: "prev",
+                rtl: d,
+                icon: i == null ? void 0 : i.prev,
+                prefixCls: n,
+                currentOffset: $,
+                headerSize: h,
+                headerWrapperSize: T,
+                direction: s,
+                align: C,
+                onChange: Z
+              }
+            ),
+            /* @__PURE__ */ L("div", { className: `${n}-header-wrapper`, ref: O, children: [
+              /* @__PURE__ */ L(
+                "div",
+                {
+                  className: oe(`${n}-header`, {
+                    [`${n}-header-no-padding`]: !x.headerPadding && s === "horizontal" && ["line", "text"].indexOf(b) > -1
+                  }),
+                  ref: A,
+                  style: Le,
+                  children: [
+                    q.map((e, t) => /* @__PURE__ */ f(
+                      rt,
+                      {
+                        ref: (r) => {
+                          M.current[e.key] = r;
+                        },
+                        tabKey: e.key,
+                        ...e.props,
+                        prefixCls: n,
+                        onDeleteTab: () => Be(e),
+                        renderTitle: x.children || We,
+                        onClickTab: () => {
+                          var r;
+                          (r = a.onClickTab) == null || r.call(a, e.key);
+                        },
+                        isActive: P === e.key,
+                        editable: z && e.props.closable !== !1,
+                        deleteIcon: i == null ? void 0 : i.delete,
+                        deleteButton: Ae,
+                        getIdPrefix: g.getIdPrefix,
+                        index: t
+                      },
+                      t
+                    )),
+                    b === "line" && /* @__PURE__ */ f(
+                      tt,
+                      {
+                        disabled: !!q.find(
+                          (e) => e && e.props && e.props.disabled && e.key === P
+                        ),
+                        prefixCls: n,
+                        animation: De,
+                        direction: s,
+                        getTitleRef: (e) => M.current[e],
+                        activeTab: P,
+                        getHeaderRef: () => A,
+                        inkBarSize: Ee
+                      }
+                    )
+                  ]
+                }
+              ),
+              !S && he(z)
+            ] }),
+            te && /* @__PURE__ */ f(
+              ge,
+              {
+                prefixCls: n,
+                rtl: d,
+                iconPos: "next",
+                icon: i == null ? void 0 : i.next,
+                currentOffset: $,
+                headerSize: h,
+                headerWrapperSize: T,
+                direction: s,
+                align: C,
+                onChange: Z
+              }
+            ),
+            ee && /* @__PURE__ */ f(
+              et,
+              {
+                onClickTab: a.onClickTab,
+                paneChildren: q,
+                prefixCls: n,
+                currentOffset: $,
+                headerSize: h,
+                icon: i == null ? void 0 : i.dropdown,
+                headerWrapperSize: T,
+                getTitleRef: (e) => M.current[e],
+                direction: s
+              }
+            ),
+            (z && S || le) && /* @__PURE__ */ L("div", { className: `${n}-header-extra`, ref: V, children: [
+              S && he(z),
+              le
+            ] })
+          ]
+        }
+      )
+    }
+  );
+});
+st.displayName = "TabHeader";
+export {
+  st as default
+};