@unicom-cloud/ui 0.8.95 → 0.8.97

package/tabs/tab-header/index.js

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