@unicom-cloud/ui 0.8.123 → 0.8.125

package/marquee/index.js

@@ -1,17 +1,19 @@
-/* 2025-11-19 09:09:44 */
-import { jsx as o, Fragment as re, jsxs as j } from "react/jsx-runtime";
-import { forwardRef as ne, useContext as ie, useState as v, useRef as A, useCallback as B, useEffect as z, useMemo as g, Fragment as oe, Children as E } from "react";
+/* 2025-11-27 12:11:12 */
+import { jsx as s, Fragment as re, jsxs as j } from "react/jsx-runtime";
+import { forwardRef as ne, useContext as ie, useState as v, useRef as A, useCallback as I, useEffect as z, useMemo as g, Fragment as oe, Children as B, useImperativeHandle as se } from "react";
 import "../config-provider/ConfigProvider.js";
-import { useMergeProps as se } from "@unicom-cloud/ui-common/hooks";
-import { isPlainObject as ae, isNumber as le } from "@unicom-cloud/ui-common/utils/is";
+import { useMergeProps as ae } from "@unicom-cloud/ui-common/hooks";
+import "../utils/responsiveObserve.js";
+import "@unicom-cloud/ui-common/hooks/use-force-update";
+import { isPlainObject as le, isNumber as ce } from "@unicom-cloud/ui-common/utils/is";
 import "@unicom-cloud/utils/constant/keyboardCode";
 import "@unicom-cloud/ui-common/hooks/use-merge-value";
 import "lodash/merge";
 import "@unicom-cloud/ui-common/utils/dom";
-import ce from "@unicom-cloud/ui-common/hooks/use-resize-observers";
-import ue from "@unicom-cloud/ui-common/utils/className";
-import { merge as de } from "@unicom-cloud/ui-common/utils/lodash";
-import me from "../config-provider/context.js";
+import ue from "@unicom-cloud/ui-common/hooks/use-resize-observers";
+import de from "@unicom-cloud/ui-common/utils/className";
+import { merge as me } from "@unicom-cloud/ui-common/utils/lodash";
+import pe from "../config-provider/context.js";
 const i = {
   autoFill: !1,
   play: !0,
@@ -22,26 +24,26 @@ const i = {
   delay: 0.0227,
   // 设置非 0 为了解决 onAnimationEnd={onFinish} 立即被调用的问题
   loop: 0
-}, ze = ne(
-  function(I, V) {
+}, Pe = ne(
+  function(V, F) {
     const {
-      prefixCls: fe,
-      getPrefixCls: F,
+      prefixCls: he,
+      getPrefixCls: W,
       componentConfig: _
-    } = ie(me), n = F?.("marquee"), e = F?.("marquee-var"), D = se(
-      I,
+    } = ie(pe), n = W?.("marquee"), e = W?.("marquee-var"), D = ae(
+      V,
       i,
       _?.Marquee
     ), {
-      style: W,
+      style: P,
       className: G,
-      autoFill: s = i.autoFill,
+      autoFill: a = i.autoFill,
       play: d = i.play,
-      pauseOnHover: x = i.pauseOnHover,
-      pauseOnClick: M = i.pauseOnClick,
+      pauseOnHover: M = i.pauseOnHover,
+      pauseOnClick: x = i.pauseOnClick,
       direction: t = i.direction,
       speed: q = i.speed,
-      delay: P = i.delay,
+      delay: b = i.delay,
       loop: N = i.loop,
       gradient: J,
       onFinish: K,
@@ -50,66 +52,66 @@ const i = {
       children: $
     } = D, Q = t === "left" || t === "right";
     let r = J;
-    r === !0 && (r = {}), ae(r) && (r = de(
+    r === !0 && (r = {}), le(r) && (r = me(
       { size: Q ? 50 : 20, color: "#fff" },
       r
     ));
-    const [b, T] = v(0), [y, U] = v(0), [C, X] = v(1), [R, Y] = v(!1), Z = A(null), a = V || Z, m = A(null), p = B(
+    const [k, T] = v(0), [y, U] = v(0), [C, X] = v(1), [R, Y] = v(!1), Z = A(null), o = F || Z, m = A(null), p = I(
       (l) => {
-        if (m.current && a.current) {
-          const f = a.current.getBoundingClientRect(), h = m.current.getBoundingClientRect();
+        if (m.current && o.current) {
+          const f = o.current.getBoundingClientRect(), h = m.current.getBoundingClientRect();
           let c = f.width, u = h.width;
           (t === "up" || t === "down") && (c = f.height, u = h.height), X(
-            s && c && u ? Math.max(2, Math.ceil(c / u)) : 1
+            a && c && u ? Math.max(2, Math.ceil(c / u)) : 1
           ), T(c), U(u);
         }
       },
-      [s, a, t]
+      [a, o, t]
     );
-    ce(
+    ue(
       (l) => {
         p(l);
       },
-      [a.current, m.current]
+      [o.current, m.current]
     ), z(() => {
       if (R)
         return p(), () => {
         };
-    }, [p, a, m, R]), z(() => (p(), () => {
+    }, [p, o, m, R]), z(() => (p(), () => {
     }), [p, $]), z(() => (Y(!0), w && w(), () => {
     }), [w]);
-    const k = g(() => y ? s ? y * C / q : Math.max(b, y) / q : 0, [s, b, y, C, q]), ee = g(
+    const H = g(() => y ? a ? y * C / q : Math.max(k, y) / q : 0, [a, k, y, C, q]), ee = g(
       () => ({
-        ...W,
-        [`--${e}-pause-on-hover`]: !d || x ? "paused" : "running",
-        [`--${e}-pause-on-click`]: !d || x && !M || M ? "paused" : "running",
+        ...P,
+        [`--${e}-pause-on-hover`]: !d || M ? "paused" : "running",
+        [`--${e}-pause-on-click`]: !d || M && !x || x ? "paused" : "running",
         [`--${e}-width`]: t === "up" || t === "down" ? "100vh" : "100%",
         [`--${e}-transform`]: t === "up" ? "rotate(-90deg)" : t === "down" ? "rotate(90deg)" : "none"
       }),
-      [W, e, d, x, M, t]
+      [P, e, d, M, x, t]
     ), te = g(
       () => ({
         [`--${e}-gradient-color`]: r?.color,
-        [`--${e}-gradient-width`]: le(r?.size) ? `${r?.size}px` : r?.size
+        [`--${e}-gradient-width`]: ce(r?.size) ? `${r?.size}px` : r?.size
       }),
       [r?.color, r?.size, e]
     ), S = g(
       () => ({
         [`--${e}-play`]: d ? "running" : "paused",
         [`--${e}-direction`]: t === "left" ? "normal" : "reverse",
-        [`--${e}-duration`]: `${k}s`,
-        [`--${e}-delay`]: `${P}s`,
+        [`--${e}-duration`]: `${H}s`,
+        [`--${e}-delay`]: `${b}s`,
         [`--${e}-iteration-count`]: N ? `${N}` : "infinite",
-        [`--${e}-min-width`]: s ? "auto" : "100%"
+        [`--${e}-min-width`]: a ? "auto" : "100%"
       }),
-      [e, d, t, k, P, N, s]
+      [e, d, t, H, b, N, a]
     ), O = g(
       () => ({
         [`--${e}-transform`]: t === "up" ? "rotate(90deg)" : t === "down" ? "rotate(-90deg)" : "none"
       }),
       [t, e]
-    ), H = B(
-      (l) => Array.from({ length: l }).map((f, h) => /* @__PURE__ */ o(oe, { children: E.map($, (c, u) => /* @__PURE__ */ o(
+    ), E = I(
+      (l) => Array.from({ length: l }).map((f, h) => /* @__PURE__ */ s(oe, { children: B.map($, (c, u) => /* @__PURE__ */ s(
         "div",
         {
           style: O,
@@ -120,14 +122,18 @@ const i = {
       )) }, h)),
       [$, O, n]
     );
-    return R ? /* @__PURE__ */ o(re, { children: /* @__PURE__ */ j(
+    return se(F, () => ({
+      getRootElement() {
+        return o.current;
+      }
+    })), R ? /* @__PURE__ */ s(re, { children: /* @__PURE__ */ j(
       "div",
       {
-        ref: a,
+        ref: o,
         style: ee,
-        className: ue(n, `${n}-${t}`, G),
+        className: de(n, `${n}-${t}`, G),
         children: [
-          !!r && /* @__PURE__ */ o("div", { style: te, className: `${n}-overlay` }),
+          !!r && /* @__PURE__ */ s("div", { style: te, className: `${n}-overlay` }),
           /* @__PURE__ */ j(
             "div",
             {
@@ -136,12 +142,12 @@ const i = {
               onAnimationIteration: L,
               onAnimationEnd: K,
               children: [
-                /* @__PURE__ */ o(
+                /* @__PURE__ */ s(
                   "div",
                   {
                     ref: m,
                     className: `${n}-initial-child-container`,
-                    children: E.map($, (l, f) => /* @__PURE__ */ o(
+                    children: B.map($, (l, f) => /* @__PURE__ */ s(
                       "div",
                       {
                         style: O,
@@ -152,16 +158,16 @@ const i = {
                     ))
                   }
                 ),
-                H(C - 1)
+                E(C - 1)
               ]
             }
           ),
-          /* @__PURE__ */ o("div", { style: S, className: `${n}-item`, children: H(C) })
+          /* @__PURE__ */ s("div", { style: S, className: `${n}-item`, children: E(C) })
         ]
       }
     ) }) : null;
   }
 );
 export {
-  ze as default
+  Pe as default
 };

package/masonry/Masonry.js

@@ -0,0 +1,169 @@
+/* 2025-11-27 12:11:12 */
+import { jsx as C } from "react/jsx-runtime";
+import E from "@unicom-cloud/ui-common/hooks/useUpdateLayoutEffect";
+import { CSSMotionList as X } from "@unicom-cloud/ui-common/motion";
+import { composeRef as Y } from "@unicom-cloud/ui-common/utils/ref";
+import s, { useContext as Z, useImperativeHandle as ee } from "react";
+import "../config-provider/ConfigProvider.js";
+import te from "../hooks/use-breakpoint/index.js";
+import oe from "@unicom-cloud/ui-common/hooks/use-merge-props";
+import se from "@unicom-cloud/ui-common/hooks/use-resize-observers";
+import N from "@unicom-cloud/ui-common/utils/className";
+import { isEqual as v } from "@unicom-cloud/ui-common/utils/is";
+import { responsiveArray as re } from "../utils/responsiveObserve.js";
+import ne from "./hooks/useDelay.js";
+import ie from "./hooks/useGutter.js";
+import me from "./hooks/usePositions.js";
+import ce from "./hooks/useRefs.js";
+import ae from "./MasonryItem.js";
+import le from "../config-provider/context.js";
+const ue = {
+  className: ""
+}, fe = s.forwardRef((M, S) => {
+  const {
+    prefixCls: pe,
+    getPrefixCls: P,
+    componentConfig: $,
+    rtl: k
+  } = Z(le), w = oe(
+    M,
+    ue,
+    $?.Masonry
+  ), {
+    className: z,
+    style: L,
+    columns: r,
+    prefixCls: H,
+    gutter: b = 0,
+    items: m,
+    itemRender: B,
+    onLayoutChange: p,
+    fresh: G
+  } = w, c = P?.("masonry", H), a = s.useRef(null), [K, A] = ce(), [l, D] = s.useState([]);
+  s.useEffect(() => {
+    D(m || []);
+  }, [m]);
+  const d = te(), O = ie(b, d), [y = 0, j = y] = O, g = s.useMemo(() => {
+    if (!r)
+      return 3;
+    if (typeof r == "number")
+      return r;
+    const e = re.find(
+      (t) => d[t] && r[t] !== void 0
+    );
+    return e ? r[e] : r.xs ?? 1;
+  }, [r, d]), [q, U] = s.useState([]), i = ne(() => {
+    const e = l.map((t, o) => {
+      const n = t.key ?? o, f = A(n)?.getBoundingClientRect();
+      return [n, f ? f.height : 0, t.column];
+    });
+    U(
+      (t) => v(t, e) ? t : e
+    );
+  }), [I, V] = me(
+    q,
+    g,
+    j
+  ), u = s.useMemo(
+    () => l.map((e, t) => {
+      const o = e.key ?? t;
+      return {
+        item: e,
+        itemIndex: t,
+        // CSSMotion will transform key to string.
+        // Let's keep the original key here.
+        itemKey: o,
+        key: o,
+        position: I.get(o)
+      };
+    }),
+    [l, I]
+  );
+  s.useEffect(() => {
+    i();
+  }, [l, g]);
+  const [h, W] = s.useState([]);
+  return E(() => {
+    p && u.every(({ position: e }) => e) && W((e) => {
+      const t = u.map(
+        ({ item: o, position: n }) => [o, n.column]
+      );
+      return v(e, t) ? e : t;
+    });
+  }, [u]), E(() => {
+    p && m && m.length === h.length && p(
+      h.map(([e, t]) => ({ ...e, column: t }))
+    );
+  }, [h]), se(
+    (e) => {
+      i();
+    },
+    [a.current],
+    { immediate: !0 }
+  ), ee(S, () => ({
+    nativeElement: a.current,
+    getRootElement() {
+      return a.current;
+    }
+  })), /* @__PURE__ */ C(
+    "div",
+    {
+      ref: a,
+      className: N(c, z, {
+        [`${c}-rtl`]: k
+      }),
+      style: {
+        height: V,
+        ...L
+      },
+      onLoad: i,
+      onError: i,
+      children: /* @__PURE__ */ C(
+        X,
+        {
+          keys: u,
+          component: !1,
+          motionAppear: !0,
+          motionLeave: !0,
+          motionName: `${c}-item-fade`,
+          children: (e, t) => {
+            const {
+              item: o,
+              itemKey: n,
+              position: x = {},
+              itemIndex: f,
+              key: _,
+              className: F,
+              style: J
+            } = e, { column: R = 0 } = x, Q = {
+              "--item-width": `calc((100% + ${y}px) / ${g})`,
+              insetInlineStart: `calc(var(--item-width) * ${R})`,
+              width: `calc(var(--item-width) - ${y}px)`,
+              top: x.top,
+              position: "absolute"
+            };
+            return /* @__PURE__ */ C(
+              ae,
+              {
+                prefixCls: c,
+                item: o,
+                style: { ...J, ...Q },
+                className: N(F),
+                ref: Y(t, (T) => K(n, T)),
+                index: f,
+                itemRender: B,
+                column: R,
+                onResize: G ? i : null
+              },
+              _
+            );
+          }
+        }
+      )
+    }
+  );
+});
+process.env.NODE_ENV !== "production" && (fe.displayName = "Masonry");
+export {
+  fe as default
+};

package/masonry/MasonryItem.js

@@ -0,0 +1,30 @@
+/* 2025-11-27 12:11:12 */
+import { jsx as m } from "react/jsx-runtime";
+import N from "@unicom-cloud/ui-common/resize-observer";
+import u, { useMemo as x } from "react";
+import R from "@unicom-cloud/ui-common/utils/className";
+import { isFunction as y } from "@unicom-cloud/ui-common/utils/is";
+const h = u.forwardRef(
+  (n, a) => {
+    const {
+      item: e,
+      style: c,
+      prefixCls: d,
+      itemRender: o,
+      className: l,
+      index: s,
+      column: t,
+      onResize: i
+    } = n, f = `${d}-item`, p = x(() => e.children ?? o?.({
+      ...e,
+      index: s,
+      column: t
+    }), [e, o, t, s]);
+    let r = /* @__PURE__ */ m("div", { ref: a, style: c, className: R(f, l), children: p });
+    return y(i) && (r = /* @__PURE__ */ m(N, { onResize: i, children: r })), r;
+  }
+);
+process.env.NODE_ENV !== "production" && (h.displayName = "MasonryItem");
+export {
+  h as default
+};

package/masonry/hooks/useDelay.js

@@ -0,0 +1,14 @@
+/* 2025-11-27 12:11:12 */
+import a from "@unicom-cloud/ui-common/hooks/use-event";
+import t from "react";
+function u(n) {
+  const e = t.useRef(0), r = () => {
+    cancelAnimationFrame(e.current);
+  };
+  return t.useEffect(() => r, []), a(() => {
+    r(), e.current = requestAnimationFrame(n);
+  });
+}
+export {
+  u as default
+};

package/masonry/hooks/useGutter.js

@@ -0,0 +1,28 @@
+/* 2025-11-27 12:11:12 */
+import { isArray as a } from "@unicom-cloud/ui-common/utils/is";
+import { responsiveArray as n } from "../../utils/responsiveObserve.js";
+function d(e, u) {
+  const t = [void 0, void 0], l = a(e) ? e : [e, void 0], f = u || {
+    xs: !0,
+    sm: !0,
+    md: !0,
+    lg: !0,
+    xl: !0,
+    xxl: !0
+  };
+  return l.forEach((r, i) => {
+    if (typeof r == "object" && r !== null)
+      for (let o = 0; o < n.length; o++) {
+        const s = n[o];
+        if (f[s] && r[s] !== void 0) {
+          t[i] = r[s];
+          break;
+        }
+      }
+    else
+      t[i] = r;
+  }), t;
+}
+export {
+  d as default
+};

package/masonry/hooks/usePositions.js

@@ -0,0 +1,25 @@
+/* 2025-11-27 12:11:12 */
+import c from "react";
+function x(e, n, i) {
+  const [a, r] = c.useMemo(() => {
+    const t = new Array(n).fill(0), m = /* @__PURE__ */ new Map();
+    for (let s = 0; s < e.length; s += 1) {
+      const [l, f, h] = e[s];
+      let o = h ?? t.indexOf(Math.min(...t));
+      o = Math.min(o, n - 1);
+      const M = t[o];
+      m.set(l, {
+        column: o,
+        top: M
+      }), t[o] += f + i;
+    }
+    return [
+      m,
+      Math.max(0, Math.max(...t) - i)
+    ];
+  }, [n, e, i]);
+  return [a, r];
+}
+export {
+  x as default
+};

package/masonry/hooks/useRefs.js

@@ -0,0 +1,11 @@
+/* 2025-11-27 12:11:12 */
+import n from "react";
+function c() {
+  const e = n.useRef(null);
+  return e.current === null && (e.current = /* @__PURE__ */ new Map()), [(t, r) => {
+    e.current.set(t, r);
+  }, (t) => e.current.get(t)];
+}
+export {
+  c as default
+};

package/masonry/index.js

@@ -0,0 +1,5 @@
+/* 2025-11-27 12:11:12 */
+import r from "./Masonry.js";
+export {
+  r as default
+};