@unicom-cloud/ui 0.8.98 → 0.8.100

package/segmented/index.js

@@ -0,0 +1,225 @@
+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 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",
+  disabled: !1,
+  block: !1,
+  direction: "horizontal",
+  showIndicator: !0,
+  animationDuration: 300
+}, le = te(
+  (M, d) => {
+    const { getPrefixCls: j, componentConfig: B, rtl: K } = ne(ie), L = ae(
+      M,
+      ce,
+      B?.Segmented
+    ), {
+      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`]: _,
+        [`${r}-disabled`]: f,
+        [`${r}-rtl`]: K,
+        [`${r}-${v}`]: v,
+        [`${r}-${p}`]: p
+      },
+      F
+    ), h = R !== void 0, i = h ? R : J, b = oe(() => {
+      if (!$ || !l.current) {
+        m((s) => ({ ...s, opacity: 0 }));
+        return;
+      }
+      const e = a.findIndex(
+        (s) => s?.value === i
+      );
+      if (e === -1) {
+        m((s) => ({ ...s, opacity: 0 }));
+        return;
+      }
+      const o = k.current[e];
+      if (!o) {
+        m((s) => ({ ...s, opacity: 0 }));
+        return;
+      }
+      const n = l.current.getBoundingClientRect(), t = o.getBoundingClientRect(), c = p === "vertical" ? {
+        width: t.width,
+        // 垂直模式下宽度撑满
+        top: t.top - n.top,
+        height: t.height
+      } : {
+        width: t.width,
+        left: t.left - n.left,
+        height: t.height
+        // 水平模式下高度撑满
+      };
+      m({
+        ...c,
+        opacity: 1
+      });
+    }, [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 = o;
+      switch (e.key) {
+        case "ArrowLeft":
+        case "ArrowUp":
+          e.preventDefault(), t = (o - 1 + n) % n;
+          break;
+        case "ArrowRight":
+        case "ArrowDown":
+          e.preventDefault(), t = (o + 1) % n;
+          break;
+        case "Home":
+          e.preventDefault(), t = 0;
+          break;
+        case "End":
+          e.preventDefault(), t = n - 1;
+          break;
+        default:
+          return;
+      }
+      for (; t !== o && a[t]?.disabled; )
+        t = (t + (e.key === "ArrowLeft" || e.key === "ArrowUp" ? -1 : 1) + n) % n;
+      const c = a[t]?.value;
+      c && c !== i && (z(c), k.current[t]?.focus());
+    };
+    A(() => {
+      if (!S.current) {
+        S.current = !0;
+        return;
+      }
+      if (!a.some((e) => e.value === i)) {
+        const e = a[0]?.value || "";
+        h || V(e), C?.(e);
+      }
+    }, [a, i, h, C]), A(() => {
+      b();
+    }, [i, a, b]), A(() => {
+      if (!l.current) return;
+      const e = se(
+        [l.current],
+        () => {
+          b();
+        }
+      );
+      return () => {
+        e();
+      };
+    }, [b]);
+    const X = (e, o) => {
+      if (e.render)
+        return e.render(e, o);
+      const n = !e.label && !!e.icon;
+      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__ */ D(
+      "div",
+      {
+        ref: (e) => {
+          typeof d == "function" ? d(e) : d && (d.current = e), l.current = e;
+        },
+        ...G,
+        style: U,
+        className: T,
+        role: "radiogroup",
+        children: [
+          !Array.isArray(a) || a.length === 0 ? null : a.map((e, o) => {
+            if (!e) return null;
+            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: (I) => k.current[o] = I,
+                className: E(
+                  `${r}-option`,
+                  `${r}-option-${H}`,
+                  `${r}-option-${v}`,
+                  {
+                    [`${r}-option-active`]: u,
+                    [`${r}-option-disabled`]: g,
+                    [`${r}-option-icon-only`]: Z
+                  }
+                ),
+                onClick: () => z(n, g),
+                onKeyDown: (I) => W(I, o),
+                disabled: g,
+                role: "radio",
+                "aria-checked": u,
+                "aria-disabled": g,
+                tabIndex: u ? 0 : -1,
+                ...Y,
+                children: [
+                  x && /* @__PURE__ */ w(
+                    "input",
+                    {
+                      type: "radio",
+                      name: x,
+                      value: n,
+                      checked: u,
+                      onChange: () => {
+                      },
+                      className: `${r}-input`,
+                      tabIndex: -1,
+                      "aria-hidden": "true"
+                    }
+                  ),
+                  X(e, u)
+                ]
+              },
+              n + o
+            );
+          }),
+          $ && /* @__PURE__ */ w(
+            "div",
+            {
+              className: `${r}-indicator`,
+              style: {
+                ...Q,
+                transitionDuration: `${q}ms`
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+le.displayName = "Segmented";
+export {
+  le as default
+};

package/space/index.js

@@ -1,7 +1,6 @@
 import { jsx as l } from "react/jsx-runtime";
-import { forwardRef as g, useContext as x } from "react";
-import C from "../components/common/space/index.js";
-import { SpaceVertical as J } from "../components/common/space/index.js";
+import { forwardRef as C, useContext as d } from "react";
+import u, { SpaceVertical as x } from "../components/common/space/index.js";
 import "../config-provider/ConfigProvider.js";
 import "lodash/isEqualWith";
 import "../components/common/utils/is.js";
@@ -10,43 +9,43 @@ import "lodash/isNumber";
 import "lodash/merge";
 import "../components/common/utils/dom.js";
 import "../components/common/hooks/useIntersectionObserver.js";
-import d from "../components/common/hooks/useMergeProps.js";
+import N from "../components/common/hooks/useMergeProps.js";
 import "../components/common/utils/reactDOM.js";
 import "@unicom-cloud/utils/constant";
 import "lodash/debounce";
-import u from "@unicom-cloud/utils/class-name";
+import S from "@unicom-cloud/utils/class-name";
 import $ from "../config-provider/context.js";
-const N = {
-  gap: "small",
+const g = {
+  size: "small",
   direction: "horizontal"
 };
-function S(m, a) {
-  const { getPrefixCls: s, componentConfig: n, rtl: P } = x($), c = d(
-    m,
-    N,
-    n?.Space
-  ), { className: f, direction: t, wrap: p, size: e, align: i, ...o } = c;
-  e && (o.gap = e), i && (o.alignItems = i);
-  const r = s?.("space");
+function w(e, i) {
+  const { getPrefixCls: m, componentConfig: s, rtl: a } = d($), c = N(
+    e,
+    g,
+    s?.Space
+  ), { className: n, direction: o, wrap: t, ...f } = c, r = m?.("space");
   return /* @__PURE__ */ l(
-    C,
+    u,
     {
-      ref: a,
-      className: u(
-        `${r}`,
-        p && `${r}-wrap`,
-        `${r}-${t}`,
-        f
+      ref: i,
+      className: S(
+        r,
+        t && `${r}-wrap`,
+        o && `${r}-${o}`,
+        n
       ),
-      direction: t,
-      wrap: p,
-      ...o
+      direction: o,
+      wrap: t,
+      rtl: a,
+      ...f
     }
   );
 }
-const w = g(S);
-w.displayName = "Space";
+const p = C(w);
+p.displayName = "Space";
+p.Vertical = x;
 export {
-  J as SpaceVertical,
-  w as default
+  x as SpaceVertical,
+  p 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
+};