@unicom-cloud/ui 0.8.44 → 0.8.46

package/tabs/tab-header/TabInk.js

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

package/tabs/tab-header/TabNavIcon.js

@@ -0,0 +1,65 @@
+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 "../../IconHover.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 "../../IconHover.js";
+import { getKeyDownEvent as D } from "../util.js";
+import E from "@unicom-cloud/utils/class-name";
+import { Enter as H } from "../../utils/keyCode.js";
+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,335 @@
+import { jsx as s, jsxs as G } from "react/jsx-runtime";
+import jt from "@unicom-cloud/icons/IconUiPlus";
+import rt from "lodash/isNumber";
+import Gt from "lodash/isPlainObject";
+import Kt from "lodash/throttle";
+import Vt, { useContext as ht, useRef as Xt, useState as mt, useMemo as Ft, useCallback as Ot, useEffect as P } from "react";
+/* empty css                     */
+import "../../config-provider/ConfigProvider.js";
+import Ut from "../../IconHover.js";
+import { TabsContext as Yt } from "../Tab.js";
+import L from "../hook/useDomSize.js";
+import qt from "../hook/useHeaderScroll.js";
+import { updateScrollOffset as Jt, getRectDiff as St, getKeyDownEvent as Qt } from "../util.js";
+import nt from "@unicom-cloud/utils/class-name";
+import { setTransformStyle as Zt } from "../../utils/style.js";
+import zt from "./DropdownIcon.js";
+import te from "./TabInk.js";
+import pt from "./TabNavIcon.js";
+import ee from "./TabTitle.js";
+import { ConfigContext as re } from "../../config-provider/context.js";
+const ot = "vertical", K = "right", V = "left", gt = {
+  delete: !0,
+  add: !0
+}, ne = ({
+  direction: C,
+  align: W = V,
+  headerOffset: S
+}) => {
+  let u = `translateX(${-S}px)`;
+  return W === K && (u = `translateX(${S}px)`), C === ot && (u = `translateY(${-S}px)`), Zt(u);
+}, oe = ({
+  direction: C,
+  align: W = V,
+  headerDom: S,
+  headerWrapperDom: u
+}) => {
+  const a = St(S, u);
+  return C === ot ? -a.top : W === K ? a.right : -a.left;
+}, ae = Vt.forwardRef((C, W) => {
+  const S = ht(Yt), { rtl: u } = ht(re), a = { ...C, ...S }, [f, y, xt] = L(), [x, h, Tt] = L(), [X, F, wt] = L(), [b, O, $t] = L(), [k, U, Ct] = L(), B = Xt({}), [N, at] = mt(0), [yt, Y] = mt(!0), {
+    paneChildren: q,
+    editable: bt,
+    prefixCls: n,
+    onAddTab: J,
+    direction: c,
+    type: T = "line",
+    overflow: ct = "scroll",
+    activeTab: M,
+    showAddButton: kt,
+    size: Nt = "default",
+    style: It,
+    tabPosition: Ht,
+    className: vt,
+    extra: lt,
+    animation: Dt,
+    icons: l,
+    deleteButton: Rt,
+    addButton: At,
+    renderTabTitle: Pt,
+    scrollAfterEdit: ft,
+    scrollPosition: m = "auto",
+    inkBarSize: Wt
+  } = a, it = Gt(ft) ? { ...gt, ...ft } : gt, [Mt, Et] = u ? [K, V] : [V, K], I = T === "capsule" ? Et : Mt, w = Ft(() => {
+    const t = F.height - O.height - U.height, e = F.width - O.width - U.width;
+    return a.direction === "vertical" ? t < h.height : e < h.width;
+  }, [
+    a.direction,
+    F,
+    O,
+    h,
+    U
+  ]), Lt = () => {
+    if (X.current) {
+      const t = X.current;
+      wt({
+        height: t.offsetHeight,
+        width: t.offsetWidth
+      });
+    }
+  }, _ = (t) => Kt((e) => {
+    Lt();
+    const r = e[0] && e[0].target;
+    r && t({
+      height: r.offsetHeight,
+      width: r.offsetWidth,
+      domRect: r.getBoundingClientRect()
+    });
+  }, 200), H = _(xt), v = _(Tt), D = _($t), R = _(Ct), Q = Ot(
+    (t) => {
+      const e = c === ot ? h.height - y.height : h.width - y.width;
+      let r = t;
+      return r = Math.min(e, r), r = Math.max(r, 0), r;
+    },
+    [c, h, y]
+  ), Z = (t) => {
+    const e = Q(t);
+    e !== N && at(e);
+  };
+  P(() => () => {
+    var t, e, r, o;
+    (t = v == null ? void 0 : v.cancel) == null || t.call(v), (e = H == null ? void 0 : H.cancel) == null || e.call(H), (r = D == null ? void 0 : D.cancel) == null || r.call(D), (o = R == null ? void 0 : R.cancel) == null || o.call(R);
+  }, []), P(() => {
+    if (!yt) {
+      Y(!0);
+      return;
+    }
+    const t = () => {
+      const r = B.current[M];
+      if (!r || !w)
+        return 0;
+      const o = St(r, f.current), p = oe({
+        direction: c,
+        align: I,
+        headerDom: x.current,
+        headerWrapperDom: f.current
+      });
+      if (c === "vertical") {
+        let g = p, i = m;
+        const d = p + o.top, $ = p + o.bottom;
+        return i === "auto" && (i = o.top < 0 ? "start" : o.bottom > 0 ? "end" : m), i === "start" ? g = d : i === "end" ? g = $ : i === "center" ? g = d - (o.top - o.bottom) / 2 : rt(i) && (g = Math.max(d - i, $)), g;
+      }
+      if (I === "right") {
+        const g = p - o.left, i = p - o.right;
+        let d = m, $ = p;
+        return m === "auto" && (d = o.left < 0 ? "start" : o.right > 0 ? "end" : m), d === "start" ? $ = g : d === "end" ? $ = i : d === "center" ? $ = g + (o.left - o.right) / 2 : rt(d) && ($ = Math.min(g + d, i)), $;
+      }
+      let E = p, A = m;
+      const et = p + o.left, ut = p + o.right;
+      return m === "auto" && (A = o.left < 0 ? "start" : o.right > 0 ? "end" : m), A === "start" ? E = et : A === "end" ? E = ut : A === "center" ? E = et - (o.left - o.right) / 2 : rt(A) && (E = Math.max(et - A, ut)), E;
+    };
+    Jt(f.current, c);
+    let e = t();
+    e = Q(e), at(e);
+  }, [
+    M,
+    c,
+    ct,
+    w,
+    T,
+    Q,
+    m
+  ]);
+  const Bt = ne({
+    direction: c,
+    align: I,
+    headerOffset: N
+  }), z = w && ct === "dropdown" && c !== "vertical", tt = w && !z, j = bt && (T === "card" || T === "card-gutter" || T === "line"), _t = (t) => {
+    var e;
+    (e = a.onDeleteTab) == null || e.call(a, t.key), Y(it.delete);
+  }, dt = () => {
+    J == null || J(), Y(it.add);
+  };
+  P(() => {
+    let t;
+    return k.current && (t = new ResizeObserver(R), t.observe(k.current)), () => {
+      var e, r;
+      k.current && ((e = t == null ? void 0 : t.unobserve) == null || e.call(t, k.current)), (r = t == null ? void 0 : t.disconnect) == null || r.call(t), t = null;
+    };
+  }, [k.current]), P(() => {
+    let t;
+    return f.current && (t = new ResizeObserver(H), t.observe(f.current)), () => {
+      var e, r;
+      f.current && ((e = t == null ? void 0 : t.unobserve) == null || e.call(t, f.current)), (r = t == null ? void 0 : t.disconnect) == null || r.call(t), t = null;
+    };
+  }, [f.current]), P(() => {
+    let t;
+    return x.current && (t = new ResizeObserver(v), t.observe(x.current)), () => {
+      var e, r;
+      x.current && ((e = t == null ? void 0 : t.unobserve) == null || e.call(t, x.current)), (r = t == null ? void 0 : t.disconnect) == null || r.call(t), t = null;
+    };
+  }, [x.current]), P(() => {
+    let t;
+    return b.current && (t = new ResizeObserver(D), t.observe(b.current)), () => {
+      var e, r;
+      b.current && ((e = t == null ? void 0 : t.unobserve) == null || e.call(t, b.current)), (r = t == null ? void 0 : t.disconnect) == null || r.call(t), t = null;
+    };
+  }, [b.current]);
+  const st = (t) => t && kt && /* @__PURE__ */ s(
+    "div",
+    {
+      className: `${n}-add-icon`,
+      "aria-label": "add tab",
+      tabIndex: 0,
+      role: "button",
+      ref: k,
+      onClick: dt,
+      ...Qt({ onPressEnter: dt }),
+      children: At || /* @__PURE__ */ s(Ut, { prefix: `${n}-add`, children: /* @__PURE__ */ s("span", { className: `${n}-add`, children: (l == null ? void 0 : l.add) || /* @__PURE__ */ s(jt, {}) }) })
+    }
+  );
+  return qt({
+    headerWrapperRef: f,
+    headerOffset: N,
+    align: I,
+    direction: c,
+    isScrollable: w,
+    onScroll(t) {
+      Z(t);
+    }
+  }), /* @__PURE__ */ s(
+    "div",
+    {
+      className: nt(
+        `${n}-header-nav`,
+        `${n}-header-nav-${c}`,
+        `${n}-header-nav-${Ht}`,
+        `${n}-header-size-${Nt}`,
+        `${n}-header-nav-${T}`,
+        { [`${n}-header-nav-sticky`]: a.headerSticky },
+        // 潘启宝添加
+        vt
+      ),
+      style: { ...It, ...a.headerSticky },
+      ref: W,
+      children: /* @__PURE__ */ G(
+        "div",
+        {
+          className: nt(`${n}-header-scroll`, {
+            [`${n}-header-overflow-scroll`]: tt,
+            [`${n}-header-overflow-dropdown`]: z
+          }),
+          ref: X,
+          children: [
+            tt && /* @__PURE__ */ s(
+              pt,
+              {
+                iconPos: "prev",
+                rtl: u,
+                icon: l == null ? void 0 : l.prev,
+                prefixCls: n,
+                currentOffset: N,
+                headerSize: h,
+                headerWrapperSize: y,
+                direction: c,
+                align: I,
+                onChange: Z
+              }
+            ),
+            /* @__PURE__ */ G("div", { className: `${n}-header-wrapper`, ref: f, children: [
+              /* @__PURE__ */ G(
+                "div",
+                {
+                  className: nt(`${n}-header`, {
+                    [`${n}-header-no-padding`]: !C.headerPadding && c === "horizontal" && ["line", "text"].indexOf(T) > -1
+                  }),
+                  ref: x,
+                  style: Bt,
+                  children: [
+                    q.map((t, e) => /* @__PURE__ */ s(
+                      ee,
+                      {
+                        ref: (r) => {
+                          B.current[t.key] = r;
+                        },
+                        tabKey: t.key,
+                        ...t.props,
+                        prefixCls: n,
+                        onDeleteTab: () => _t(t),
+                        renderTitle: C.children || Pt,
+                        onClickTab: () => {
+                          var r;
+                          (r = a.onClickTab) == null || r.call(a, t.key);
+                        },
+                        isActive: M === t.key,
+                        editable: j && t.props.closable !== !1,
+                        deleteIcon: l == null ? void 0 : l.delete,
+                        deleteButton: Rt,
+                        getIdPrefix: S.getIdPrefix,
+                        index: e
+                      },
+                      e
+                    )),
+                    T === "line" && /* @__PURE__ */ s(
+                      te,
+                      {
+                        disabled: !!q.find(
+                          (t) => t && t.props && t.props.disabled && t.key === M
+                        ),
+                        prefixCls: n,
+                        animation: Dt,
+                        direction: c,
+                        getTitleRef: (t) => B.current[t],
+                        activeTab: M,
+                        getHeaderRef: () => x,
+                        inkBarSize: Wt
+                      }
+                    )
+                  ]
+                }
+              ),
+              !w && st(j)
+            ] }),
+            tt && /* @__PURE__ */ s(
+              pt,
+              {
+                prefixCls: n,
+                rtl: u,
+                iconPos: "next",
+                icon: l == null ? void 0 : l.next,
+                currentOffset: N,
+                headerSize: h,
+                headerWrapperSize: y,
+                direction: c,
+                align: I,
+                onChange: Z
+              }
+            ),
+            z && /* @__PURE__ */ s(
+              zt,
+              {
+                onClickTab: a.onClickTab,
+                paneChildren: q,
+                prefixCls: n,
+                currentOffset: N,
+                headerSize: h,
+                icon: l == null ? void 0 : l.dropdown,
+                headerWrapperSize: y,
+                getTitleRef: (t) => B.current[t],
+                direction: c
+              }
+            ),
+            (j && w || lt) && /* @__PURE__ */ G("div", { className: `${n}-header-extra`, ref: b, children: [
+              w && st(j),
+              lt
+            ] })
+          ]
+        }
+      )
+    }
+  );
+});
+ae.displayName = "TabHeader";
+export {
+  ae as default
+};

package/tabs/util.js

@@ -0,0 +1,22 @@
+import { Enter as n } from "../utils/keyCode.js";
+const i = (e, t) => {
+  const c = e.getBoundingClientRect(), o = t.getBoundingClientRect(), l = t.offsetWidth / o.width, s = t.offsetHeight / o.height;
+  return {
+    left: (c.left - o.left) * l,
+    top: (c.top - o.top) * s,
+    right: (c.right - o.right) * l,
+    bottom: (c.bottom - o.bottom) * s
+  };
+}, r = (e, t) => {
+  const c = e.scrollLeft, o = e.scrollTop;
+  t === "horizontal" && c && e.scrollTo({ left: -1 * c }), t === "vertical" && o && e.scrollTo({ top: -1 * o });
+}, g = ({ onPressEnter: e }) => ({
+  onKeyDown: (t) => {
+    t.key === n.key && e(t);
+  }
+});
+export {
+  g as getKeyDownEvent,
+  i as getRectDiff,
+  r as updateScrollOffset
+};