@unicom-cloud/ui 0.8.99 → 0.8.100

package/segmented/index.js

@@ -1,11 +1,11 @@
-import { jsxs as C, jsx as b, Fragment as W } from "react/jsx-runtime";
-import { forwardRef as X, useContext as Y, useMemo as Z, useState as V, useRef as k, useCallback as _, useEffect as I } from "react";
+import { jsxs as D, jsx as w, Fragment as ee } from "react/jsx-runtime";
+import { forwardRef as te, useContext as ne, useMemo as re, useState as P, useRef as N, useCallback as oe, useEffect as A } from "react";
 import "../config-provider/ConfigProvider.js";
-import ee from "../components/common/hooks/useMergeProps.js";
-import S from "@unicom-cloud/utils/class-name";
-import { resizeObserver as te } from "../components/common/utils/resizeObserver.js";
-import ne from "../config-provider/context.js";
-const re = {
+import ae from "../components/common/hooks/useMergeProps.js";
+import E from "@unicom-cloud/utils/class-name";
+import { resizeObserver as se } from "../components/common/utils/resizeObserver.js";
+import ie from "../config-provider/context.js";
+const ce = {
   options: [],
   size: "medium",
   mode: "default",
@@ -14,56 +14,56 @@ const re = {
   direction: "horizontal",
   showIndicator: !0,
   animationDuration: 300
-}, ae = X(
-  (z, u) => {
-    const { getPrefixCls: P, componentConfig: E, rtl: M } = Y(ne), j = ee(
-      z,
-      re,
-      E?.Segmented
+}, le = te(
+  (M, d) => {
+    const { getPrefixCls: j, componentConfig: B, rtl: K } = ne(ie), L = ae(
+      M,
+      ce,
+      B?.Segmented
     ), {
-      style: B,
-      className: K,
-      options: D = [],
-      defaultValue: v,
-      value: N,
-      size: L,
-      mode: g,
-      disabled: d,
-      block: U,
-      direction: f,
-      showIndicator: w,
-      animationDuration: F,
-      name: A,
-      onChange: y,
-      ...H
-    } = j, o = Z(() => D.map((e) => typeof e == "string" ? { value: e, label: e } : e), [D]), [q, O] = V(() => v && o.some((e) => e.value === v) ? v : o[0]?.value || ""), [G, m] = V({}), c = k(null), $ = k([]), R = k(!1), r = P?.("segmented"), J = S(
+      style: U,
+      className: F,
+      options: O = [],
+      defaultValue: y,
+      value: R,
+      size: H,
+      mode: v,
+      disabled: f,
+      block: _,
+      direction: p,
+      showIndicator: $,
+      animationDuration: q,
+      name: x,
+      onChange: C,
+      ...G
+    } = L, a = re(() => O.map((e) => typeof e == "string" ? { value: e, label: e } : e), [O]), [J, V] = P(() => y && a.some((e) => e.value === y) ? y : a[0]?.value || ""), [Q, m] = P({}), l = N(null), k = N([]), S = N(!1), r = j?.("segmented"), T = E(
       r,
       {
-        [`${r}-block`]: U,
-        [`${r}-disabled`]: d,
-        [`${r}-rtl`]: M,
-        [`${r}-${g}`]: g,
-        [`${r}-${f}`]: f
+        [`${r}-block`]: _,
+        [`${r}-disabled`]: f,
+        [`${r}-rtl`]: K,
+        [`${r}-${v}`]: v,
+        [`${r}-${p}`]: p
       },
-      K
-    ), p = N !== void 0, i = p ? N : q, h = _(() => {
-      if (!w || !c.current) {
+      F
+    ), h = R !== void 0, i = h ? R : J, b = oe(() => {
+      if (!$ || !l.current) {
         m((s) => ({ ...s, opacity: 0 }));
         return;
       }
-      const e = o.findIndex(
+      const e = a.findIndex(
         (s) => s?.value === i
       );
       if (e === -1) {
         m((s) => ({ ...s, opacity: 0 }));
         return;
       }
-      const a = $.current[e];
-      if (!a) {
+      const o = k.current[e];
+      if (!o) {
         m((s) => ({ ...s, opacity: 0 }));
         return;
       }
-      const n = c.current.getBoundingClientRect(), t = a.getBoundingClientRect(), l = f === "vertical" ? {
+      const n = l.current.getBoundingClientRect(), t = o.getBoundingClientRect(), c = p === "vertical" ? {
         width: t.width,
         // 垂直模式下宽度撑满
         top: t.top - n.top,
@@ -75,24 +75,24 @@ const re = {
         // 水平模式下高度撑满
       };
       m({
-        ...l,
+        ...c,
         opacity: 1
       });
-    }, [i, o, w, f]), x = (e, a) => {
-      a || d || (p || O(e), y?.(e));
-    }, Q = (e, a) => {
-      if (d) return;
-      const n = o.length;
+    }, [i, a, $, p]), z = (e, o) => {
+      o || f || (h || V(e), C?.(e));
+    }, W = (e, o) => {
+      if (f) return;
+      const n = a.length;
       if (n === 0) return;
-      let t = a;
+      let t = o;
       switch (e.key) {
         case "ArrowLeft":
         case "ArrowUp":
-          e.preventDefault(), t = (a - 1 + n) % n;
+          e.preventDefault(), t = (o - 1 + n) % n;
           break;
         case "ArrowRight":
         case "ArrowDown":
-          e.preventDefault(), t = (a + 1) % n;
+          e.preventDefault(), t = (o + 1) % n;
           break;
         case "Home":
           e.preventDefault(), t = 0;
@@ -103,86 +103,94 @@ const re = {
         default:
           return;
       }
-      for (; t !== a && o[t]?.disabled; )
+      for (; t !== o && a[t]?.disabled; )
         t = (t + (e.key === "ArrowLeft" || e.key === "ArrowUp" ? -1 : 1) + n) % n;
-      const l = o[t]?.value;
-      l && l !== i && (x(l), $.current[t]?.focus());
+      const c = a[t]?.value;
+      c && c !== i && (z(c), k.current[t]?.focus());
     };
-    I(() => {
-      if (!R.current) {
-        R.current = !0;
+    A(() => {
+      if (!S.current) {
+        S.current = !0;
         return;
       }
-      if (!o.some((e) => e.value === i)) {
-        const e = o[0]?.value || "";
-        p || O(e), y?.(e);
+      if (!a.some((e) => e.value === i)) {
+        const e = a[0]?.value || "";
+        h || V(e), C?.(e);
       }
-    }, [o, i, p, y]), I(() => {
-      h();
-    }, [i, o, h]), I(() => {
-      if (!c.current) return;
-      const e = te(
-        [c.current],
+    }, [a, i, h, C]), A(() => {
+      b();
+    }, [i, a, b]), A(() => {
+      if (!l.current) return;
+      const e = se(
+        [l.current],
         () => {
-          h();
+          b();
         }
       );
       return () => {
         e();
       };
-    }, [h]);
-    const T = (e, a) => {
+    }, [b]);
+    const X = (e, o) => {
       if (e.render)
-        return e.render(e, a);
+        return e.render(e, o);
       const n = !e.label && !!e.icon;
-      return /* @__PURE__ */ C(W, { children: [
-        e.icon && /* @__PURE__ */ b("span", { className: `${r}-option-icon`, children: e.icon }),
-        !n && e.label && /* @__PURE__ */ b("span", { className: `${r}-option-label`, children: e.label })
+      return /* @__PURE__ */ D(ee, { children: [
+        e.icon && /* @__PURE__ */ w("span", { className: `${r}-option-icon`, children: e.icon }),
+        !n && e.label && /* @__PURE__ */ w("span", { className: `${r}-option-label`, children: e.label })
       ] });
     };
-    return /* @__PURE__ */ C(
+    return /* @__PURE__ */ D(
       "div",
       {
         ref: (e) => {
-          typeof u == "function" ? u(e) : u && (u.current = e), c.current = e;
+          typeof d == "function" ? d(e) : d && (d.current = e), l.current = e;
         },
-        ...H,
-        style: B,
-        className: J,
+        ...G,
+        style: U,
+        className: T,
         role: "radiogroup",
         children: [
-          !Array.isArray(o) || o.length === 0 ? null : o.map((e, a) => {
+          !Array.isArray(a) || a.length === 0 ? null : a.map((e, o) => {
             if (!e) return null;
-            const n = e.value === i, t = e.disabled || d, l = !e.label && !!e.icon;
-            return /* @__PURE__ */ C(
+            const {
+              value: n,
+              label: t,
+              disabled: c,
+              icon: s,
+              render: de,
+              ...Y
+            } = e, u = n === i, g = c || f, Z = !t && !!s;
+            return /* @__PURE__ */ D(
               "button",
               {
-                ref: (s) => $.current[a] = s,
-                className: S(
+                ref: (I) => k.current[o] = I,
+                className: E(
                   `${r}-option`,
-                  `${r}-option-${L}`,
-                  `${r}-option-${g}`,
+                  `${r}-option-${H}`,
+                  `${r}-option-${v}`,
                   {
-                    [`${r}-option-active`]: n,
-                    [`${r}-option-disabled`]: t,
-                    [`${r}-option-icon-only`]: l
+                    [`${r}-option-active`]: u,
+                    [`${r}-option-disabled`]: g,
+                    [`${r}-option-icon-only`]: Z
                   }
                 ),
-                onClick: () => x(e.value, t),
-                onKeyDown: (s) => Q(s, a),
-                disabled: t,
+                onClick: () => z(n, g),
+                onKeyDown: (I) => W(I, o),
+                disabled: g,
                 role: "radio",
-                "aria-checked": n,
-                "aria-disabled": t,
-                tabIndex: n ? 0 : -1,
+                "aria-checked": u,
+                "aria-disabled": g,
+                tabIndex: u ? 0 : -1,
+                ...Y,
                 children: [
-                  A && /* @__PURE__ */ b(
+                  x && /* @__PURE__ */ w(
                     "input",
                     {
                       type: "radio",
-                      name: A,
-                      value: e.value,
-                      checked: n,
+                      name: x,
+                      value: n,
+                      checked: u,
                       onChange: () => {
                       },
                       className: `${r}-input`,
@@ -190,19 +198,19 @@ const re = {
                       "aria-hidden": "true"
                     }
                   ),
-                  T(e, n)
+                  X(e, u)
                 ]
               },
-              e.value || a
+              n + o
             );
           }),
-          w && /* @__PURE__ */ b(
+          $ && /* @__PURE__ */ w(
             "div",
             {
               className: `${r}-indicator`,
               style: {
-                ...G,
-                transitionDuration: `${F}ms`
+                ...Q,
+                transitionDuration: `${q}ms`
               }
             }
           )
@@ -211,7 +219,7 @@ const re = {
     );
   }
 );
-ae.displayName = "Segmented";
+le.displayName = "Segmented";
 export {
-  ae as default
+  le as default
 };

package/spin/index.js

@@ -1,80 +1,93 @@
-import { jsx as n, jsxs as r, Fragment as u } from "react/jsx-runtime";
-import E from "@unicom-cloud/icons/IconUiLoading";
-import I from "lodash/debounce";
-import h, { useContext as j, useState as w, useCallback as P, useRef as D, useImperativeHandle as F, useEffect as H } from "react";
+import { jsx as n, jsxs as $, Fragment as h } from "react/jsx-runtime";
+import w from "@unicom-cloud/icons/IconUiLoading";
+import P from "lodash/debounce";
+import y, { useContext as _, useState as D, useCallback as F, useRef as H, useImperativeHandle as M, useEffect as U } from "react";
 import "../config-provider/ConfigProvider.js";
-import M from "../components/common/hooks/useMergeProps.js";
-import N from "@unicom-cloud/utils/class-name";
-import { isEmptyReactNode as U } from "../components/common/utils/is.js";
-import _ from "./DotLoading.js";
-import q from "../config-provider/context.js";
-function A($, y) {
-  const { getPrefixCls: S, componentConfig: C } = j(q), x = M($, {}, C?.Spin), {
-    style: v,
-    className: L,
-    children: l,
+import q from "../components/common/hooks/useMergeProps.js";
+import a from "@unicom-cloud/utils/class-name";
+import { isEmptyReactNode as A } from "../components/common/utils/is.js";
+import B from "./DotLoading.js";
+import G from "../config-provider/context.js";
+function J(S, C) {
+  const { getPrefixCls: x, componentConfig: v } = _(G), L = q(S, {}, v?.Spin), {
+    style: b,
+    className: z,
+    children: r,
     loading: s,
-    size: t,
-    icon: c,
-    element: b,
-    tip: o,
-    dot: R,
+    size: o,
+    icon: f,
+    element: R,
+    tip: c,
+    dot: k,
     delay: i,
-    block: z = !1,
-    ...k
-  } = x, [d, m] = w(i ? !1 : s), a = P(I(m, i), [i]), p = i ? d : s, e = S?.("spin"), f = D(null);
-  F(y, () => ({
+    block: E = !1,
+    fullscreen: p,
+    ...I
+  } = L, [u, g] = D(i ? !1 : s), l = F(P(g, i), [i]), d = i ? u : s, e = x?.("spin"), N = H(null);
+  M(C, () => ({
     // 潘启宝添加于 2023年10月23日 星期一 10时52分55秒 CST
-    dom: f.current,
-    loading: d,
-    setLoading: m,
-    debouncedSetLoading: a
-  })), H(() => (i && a(s), () => {
-    a && a.cancel();
+    dom: N.current,
+    loading: u,
+    setLoading: g,
+    debouncedSetLoading: l
+  })), U(() => (i && l(s), () => {
+    l && l.cancel();
   }), [s]);
-  const g = /* @__PURE__ */ n("span", { className: `${e}-icon`, children: c ? h.cloneElement(c, {
-    className: N(`${e.replace("-spin", "-icon")}-loading`),
+  const j = /* @__PURE__ */ n("span", { className: `${e}-icon`, children: f ? y.cloneElement(f, {
+    className: a(`${e.replace("-spin", "-icon")}-loading`),
     style: {
-      fontSize: t
+      fontSize: o
     }
-  }) : b || (R ? /* @__PURE__ */ n(_, { size: t }) : /* @__PURE__ */ n(E, { style: { fontSize: t } })) });
-  return /* @__PURE__ */ n(
+  }) : R || (k ? /* @__PURE__ */ n(B, { size: o }) : /* @__PURE__ */ n(w, { style: { fontSize: o } })) }), m = /* @__PURE__ */ $(h, { children: [
+    j,
+    c ? /* @__PURE__ */ n("div", { className: `${e}-tip`, children: c }) : null
+  ] });
+  let t;
+  return A(r) ? p ? d && (t = /* @__PURE__ */ n(
     "div",
     {
-      ref: f,
-      className: N(
+      className: a(
+        `${e}-loading-layer`,
+        `${e}-fullscreen`
+      ),
+      style: { fontSize: o },
+      children: m
+    }
+  )) : t = m : t = /* @__PURE__ */ $(h, { children: [
+    /* @__PURE__ */ n("div", { className: `${e}-children`, children: r }),
+    d && /* @__PURE__ */ n(
+      "div",
+      {
+        className: a(
+          `${e}-loading-layer`,
+          p && `${e}-fullscreen`
+          // 潘启宝添加
+        ),
+        style: { fontSize: o },
+        children: /* @__PURE__ */ n("span", { className: `${e}-loading-layer-inner`, children: m })
+      }
+    )
+  ] }), /* @__PURE__ */ n(
+    "div",
+    {
+      ref: N,
+      className: a(
         e,
         {
-          [`${e}-block`]: z,
-          [`${e}-loading`]: p,
-          [`${e}-with-tip`]: o && !l
+          [`${e}-block`]: E,
+          [`${e}-loading`]: d,
+          [`${e}-with-tip`]: c && !r
         },
-        L
+        z
       ),
-      style: v,
-      ...k,
-      children: U(l) ? /* @__PURE__ */ r(u, { children: [
-        g,
-        o ? /* @__PURE__ */ n("div", { className: `${e}-tip`, children: o }) : null
-      ] }) : /* @__PURE__ */ r(u, { children: [
-        /* @__PURE__ */ n("div", { className: `${e}-children`, children: l }),
-        p && /* @__PURE__ */ n(
-          "div",
-          {
-            className: `${e}-loading-layer`,
-            style: { fontSize: t },
-            children: /* @__PURE__ */ r("span", { className: `${e}-loading-layer-inner`, children: [
-              g,
-              o ? /* @__PURE__ */ n("div", { className: `${e}-tip`, children: o }) : null
-            ] })
-          }
-        )
-      ] })
+      style: b,
+      ...I,
+      children: t
     }
   );
 }
-const B = h.forwardRef(A);
-B.displayName = "Spin";
+const K = y.forwardRef(J);
+K.displayName = "Spin";
 export {
-  B as default
+  K as default
 };

package/splitter/Panel.js

@@ -0,0 +1,39 @@
+import { jsx as f } from "react/jsx-runtime";
+import p, { forwardRef as x } from "react";
+import "../config-provider/ConfigProvider.js";
+import d from "@unicom-cloud/utils/class-name";
+import C from "../config-provider/context.js";
+const N = x((t, a) => {
+  const { getPrefixCls: l } = p.useContext(C), {
+    prefixCls: n,
+    className: r,
+    children: i,
+    size: e,
+    style: c = {}
+  } = t, s = l?.("panel", n), m = d(
+    s,
+    {
+      [`${s}-hidden`]: e === 0
+    },
+    r
+  ), o = e !== void 0;
+  return /* @__PURE__ */ f(
+    "div",
+    {
+      ref: a,
+      className: m,
+      style: {
+        ...c,
+        flexBasis: o ? e : "auto",
+        flexGrow: o ? 0 : 1
+      },
+      children: i
+    }
+  );
+});
+process.env.NODE_ENV !== "production" && (N.displayName = "Panel");
+const z = () => null;
+export {
+  N as InternalPanel,
+  z as default
+};

package/splitter/SplitBar.js

@@ -0,0 +1,157 @@
+import { jsxs as H, jsx as l } from "react/jsx-runtime";
+import J from "@unicom-cloud/icons/IconUiDown";
+import K from "@unicom-cloud/icons/IconUiLeft";
+import Q from "@unicom-cloud/icons/IconUiRight";
+import W from "@unicom-cloud/icons/IconUiUp";
+import x from "react";
+import "../config-provider/ConfigProvider.js";
+import d from "@unicom-cloud/utils/class-name";
+import y from "./hooks/useEvent.js";
+import Z from "../config-provider/context.js";
+function L(f) {
+  return typeof f == "number" && !Number.isNaN(f) ? Math.round(f) : 0;
+}
+const le = (f) => {
+  const { getPrefixCls: z } = x.useContext(Z), {
+    prefixCls: I,
+    vertical: n,
+    index: s,
+    active: T,
+    ariaNow: $,
+    ariaMin: C,
+    ariaMax: E,
+    resizable: M,
+    startCollapsible: j,
+    endCollapsible: k,
+    onOffsetStart: O,
+    onOffsetUpdate: N,
+    onOffsetEnd: b,
+    onCollapse: S,
+    lazy: a,
+    containerSize: m
+  } = f, e = z?.("bar", I), [r, v] = x.useState(
+    null
+  ), [h, P] = x.useState(0), A = n ? 0 : h, D = n ? h : 0, R = (t) => {
+    M && t.currentTarget && (v([t.pageX, t.pageY]), O(s));
+  }, V = (t) => {
+    if (M && t.touches.length === 1) {
+      const o = t.touches[0];
+      v([o.pageX, o.pageY]), O(s);
+    }
+  }, B = (t) => {
+    const o = m * $ / 100, c = o + t, w = Math.max(0, m * C / 100), i = Math.min(m, m * E / 100);
+    return Math.max(w, Math.min(i, c)) - o;
+  }, U = y((t, o) => {
+    const c = B(
+      n ? o : t
+    );
+    P(c);
+  }), X = y(() => {
+    N(s, A, D, !0), P(0), b(!0);
+  });
+  x.useEffect(() => {
+    if (r) {
+      const t = (i) => {
+        const { pageX: u, pageY: g } = i, p = u - r[0], Y = g - r[1];
+        a ? U(p, Y) : N(s, p, Y);
+      }, o = () => {
+        a ? X() : b(), v(null);
+      }, c = (i) => {
+        if (i.touches.length === 1) {
+          const u = i.touches[0], g = u.pageX - r[0], p = u.pageY - r[1];
+          a ? U(g, p) : N(s, g, p);
+        }
+      }, w = () => {
+        a ? X() : b(), v(null);
+      };
+      return window.addEventListener("touchmove", c), window.addEventListener("touchend", w), window.addEventListener("mousemove", t), window.addEventListener("mouseup", o), () => {
+        window.removeEventListener("mousemove", t), window.removeEventListener("mouseup", o), window.removeEventListener("touchmove", c), window.removeEventListener("touchend", w);
+      };
+    }
+  }, [
+    r,
+    a,
+    n,
+    s,
+    m,
+    $,
+    C,
+    E
+  ]);
+  const q = {
+    [`--${e}-preview-offset`]: `${h}px`
+  }, F = n ? W : K, G = n ? J : Q;
+  return /* @__PURE__ */ H(
+    "div",
+    {
+      className: e,
+      role: "separator",
+      "aria-valuenow": L($),
+      "aria-valuemin": L(C),
+      "aria-valuemax": L(E),
+      children: [
+        a && /* @__PURE__ */ l(
+          "div",
+          {
+            className: d(`${e}-preview`, {
+              [`${e}-preview-active`]: !!h
+            }),
+            style: q
+          }
+        ),
+        /* @__PURE__ */ l(
+          "div",
+          {
+            className: d(`${e}-dragger`, {
+              [`${e}-dragger-disabled`]: !M,
+              [`${e}-dragger-active`]: T
+            }),
+            onMouseDown: R,
+            onTouchStart: V
+          }
+        ),
+        j && /* @__PURE__ */ l(
+          "div",
+          {
+            className: d(
+              `${e}-collapse-bar`,
+              `${e}-collapse-bar-start`
+            ),
+            onClick: () => S(s, "start"),
+            children: /* @__PURE__ */ l(
+              F,
+              {
+                className: d(
+                  `${e}-collapse-icon`,
+                  `${e}-collapse-start`
+                )
+              }
+            )
+          }
+        ),
+        k && /* @__PURE__ */ l(
+          "div",
+          {
+            className: d(
+              `${e}-collapse-bar`,
+              `${e}-collapse-bar-end`
+            ),
+            onClick: () => S(s, "end"),
+            children: /* @__PURE__ */ l(
+              G,
+              {
+                className: d(
+                  `${e}-collapse-icon`,
+                  `${e}-collapse-end`
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  le as default
+};