@unicom-cloud/ui 0.8.102 → 0.8.104

package/marquee/index.js

@@ -1,20 +1,20 @@
-import { jsxs as S, jsx as l, Fragment as A } from "react/jsx-runtime";
-import { useContext as U, useRef as k, useState as u, useEffect as N } from "react";
+import { jsx as s, Fragment as rt, jsxs as H } from "react/jsx-runtime";
+import { forwardRef as it, useContext as ot, useState as C, useRef as j, useCallback as A, useEffect as O, useMemo as h, Fragment as nt, Children as B } from "react";
 import "../config-provider/ConfigProvider.js";
 import "lodash/isEqualWith";
 import "../components/common/utils/is.js";
 import "@unicom-cloud/utils/constant/keyboardCode";
 import "lodash/isNumber";
-import "lodash/merge";
+import at from "lodash/merge";
 import "../components/common/utils/dom.js";
 import "../components/common/hooks/useIntersectionObserver.js";
-import V from "../components/common/hooks/useMergeProps.js";
+import st from "../components/common/hooks/useMergeProps.js";
 import "../components/common/utils/reactDOM.js";
 import "@unicom-cloud/utils/constant";
 import "lodash/debounce";
 import "@unicom-cloud/utils/date";
 import "@unicom-cloud/utils/case-name";
-import Z from "@unicom-cloud/utils/class-name";
+import lt from "@unicom-cloud/utils/class-name";
 import "@unicom-cloud/utils/constant/ui";
 import "../utils/contextHolder.js";
 import "@unicom-cloud/utils/clipboard-copy";
@@ -45,7 +45,8 @@ import "../dist/react-transition-group/src/ReplaceTransition.js";
 import "../dist/react-transition-group/src/SwitchTransition.js";
 import "../dist/react-transition-group/chunk/CPfP7aNL.js";
 import "../dist/react-transition-group/src/TransitionGroup.js";
-import { resizeObserver as _ } from "../components/common/utils/resizeObserver.js";
+import { resizeObserver as mt } from "../components/common/utils/resizeObserver.js";
+import "uuid";
 import "@unicom-cloud/utils/file/saveAs";
 import "@unicom-cloud/utils/screenfull";
 import "@unicom-cloud/utils/tinycolor";
@@ -53,232 +54,153 @@ import "@unicom-cloud/utils/ui-color";
 import "@unicom-cloud/utils/constant/ui.js";
 import "react-is";
 import "@unicom-cloud/utils/tree";
-import "@unicom-cloud/utils/is";
-import "uuid";
+import { isPlainObject as pt } from "@unicom-cloud/utils/is";
 import "../dist/validate/src/index.js";
-import tt from "../config-provider/context.js";
-const et = {
+import ct from "../config-provider/context.js";
+const o = {
+  autoFill: !1,
+  play: !0,
   speed: 50,
-  // 默认50像素/秒（数值越大越快）
   direction: "left",
   pauseOnHover: !1,
-  gradient: !0,
-  loop: 0,
-  // 0表示无限循环
-  gradientSize: 50
-}, ce = (q) => {
-  const { getPrefixCls: O, componentConfig: P } = U(tt), s = O?.("marquee"), R = V(
-    q,
-    et,
-    P?.Marquee
-  );
-  let {
-    children: $,
-    style: L,
-    className: D,
-    speed: E,
-    // 默认50像素/秒（数值越大越快）
-    direction: c,
-    pauseOnHover: H,
-    gradient: W,
-    loop: a,
-    // 0表示无限循环
-    gradientSize: d,
-    onComplete: b
-  } = R;
-  const h = k(null), T = k(null), w = k(null), n = k(), [F, j] = u({ width: 0, height: 0 }), [rt, B] = u({ width: 0, height: 0 }), [y, I] = u(!1), [M, m] = u(!0), [x, p] = u(0), [X, g] = u(0), o = c === "left" || c === "right";
-  d = o ? 50 : 20;
-  const z = () => {
-    if (w.current && h.current) {
-      const r = w.current.scrollWidth, t = w.current.scrollHeight, i = h.current.offsetWidth, e = h.current.offsetHeight;
-      j({ width: r, height: t }), B({ width: i, height: e });
-      const f = o ? r > i : t > e;
-      if (I(f), f) {
-        const v = c === "right" ? -r : c === "down" ? -t : 0;
-        p(v);
+  pauseOnClick: !1,
+  delay: 0.0227,
+  // 设置非 0 为了解决 onAnimationEnd={onFinish} 立即被调用的问题
+  loop: 0
+}, ye = it(
+  function(E, I) {
+    const { getPrefixCls: z, componentConfig: V } = ot(ct), i = z?.("marquee"), t = z?.("marquee-var"), _ = st(
+      E,
+      o,
+      V?.Marquee
+    ), {
+      style: F,
+      className: D,
+      autoFill: l = o.autoFill,
+      play: c = o.play,
+      pauseOnHover: v = o.pauseOnHover,
+      pauseOnClick: M = o.pauseOnClick,
+      direction: e = o.direction,
+      speed: q = o.speed,
+      delay: W = o.delay,
+      loop: x = o.loop,
+      gradient: G,
+      onFinish: J,
+      onCycleComplete: K,
+      onMount: w,
+      children: g
+    } = _, L = e === "left" || e === "right";
+    let r = G;
+    r === !0 && (r = {}), pt(r) && (r = at(
+      { size: L ? 50 : 20, color: "#fff" },
+      r
+    ));
+    const [k, Q] = C(0), [$, T] = C(0), [y, U] = C(1), [N, X] = C(!1), Y = j(null), m = I || Y, u = j(null), d = A(() => {
+      if (u.current && m.current) {
+        const n = m.current.getBoundingClientRect(), f = u.current.getBoundingClientRect();
+        let a = n.width, p = f.width;
+        (e === "up" || e === "down") && (a = n.height, p = f.height), U(
+          l && a && p ? Math.max(2, Math.ceil(a / p)) : 1
+        ), Q(a), T(p);
       }
-    }
-  };
-  N(() => {
-    const r = _(
-      [h.current],
-      z
+    }, [l, m, e]);
+    O(() => {
+      if (!N) return;
+      d();
+      const n = mt(
+        [m.current, u.current],
+        d
+      );
+      return () => {
+        n();
+      };
+    }, [d, m, u, N]), O(() => (d(), () => {
+    }), [d, g]), O(() => (X(!0), w && w(), () => {
+    }), [w]);
+    const P = h(() => $ ? l ? $ * y / q : Math.max(k, $) / q : 0, [l, k, $, y, q]), Z = h(
+      () => ({
+        ...F,
+        [`--${t}-pause-on-hover`]: !c || v ? "paused" : "running",
+        [`--${t}-pause-on-click`]: !c || v && !M || M ? "paused" : "running",
+        [`--${t}-width`]: e === "up" || e === "down" ? "100vh" : "100%",
+        [`--${t}-transform`]: e === "up" ? "rotate(-90deg)" : e === "down" ? "rotate(90deg)" : "none"
+      }),
+      [F, t, c, v, M, e]
+    ), tt = h(
+      () => ({
+        [`--${t}-gradient-color`]: r?.color,
+        [`--${t}-gradient-width`]: typeof r?.size == "number" ? `${r?.size}px` : r?.size
+      }),
+      [r?.color, r?.size, t]
+    ), S = h(
+      () => ({
+        [`--${t}-play`]: c ? "running" : "paused",
+        [`--${t}-direction`]: e === "left" ? "normal" : "reverse",
+        [`--${t}-duration`]: `${P}s`,
+        [`--${t}-delay`]: `${W}s`,
+        [`--${t}-iteration-count`]: x ? `${x}` : "infinite",
+        [`--${t}-min-width`]: l ? "auto" : "100%"
+      }),
+      [t, c, e, P, W, x, l]
+    ), R = h(
+      () => ({
+        [`--${t}-transform`]: e === "up" ? "rotate(90deg)" : e === "down" ? "rotate(-90deg)" : "none"
+      }),
+      [e, t]
+    ), b = A(
+      (n) => Array.from({ length: n }).map((f, a) => /* @__PURE__ */ s(nt, { children: B.map(g, (p, et) => /* @__PURE__ */ s(
+        "div",
+        {
+          style: R,
+          className: `${i}-child`,
+          children: p
+        },
+        `child-${a}-${et}`
+      )) }, a)),
+      [g, R, i]
     );
-    return () => r();
-  }, []), N(() => {
-    z(), g(0);
-  }, [$]), N(() => {
-    if (!M || !y)
-      return;
-    let r = null, t = x;
-    const i = o ? F.width : F.height;
-    let e = X;
-    const f = (v) => {
-      if (!r) {
-        r = v, n.current = requestAnimationFrame(f);
-        return;
-      }
-      const Q = (v - r) / 1e3;
-      r = v;
-      const C = E * Q;
-      switch (c) {
-        case "left":
-          if (t -= C, t <= -i && (t += i, e += 1, g(e), a > 0 && e >= a)) {
-            cancelAnimationFrame(n.current), m(!1), p(0), b?.();
-            return;
-          }
-          break;
-        case "right":
-          if (t += C, t >= 0 && (t -= i, e += 1, g(e), a > 0 && e >= a)) {
-            cancelAnimationFrame(n.current), m(!1), p(-i), b?.();
-            return;
-          }
-          break;
-        case "up":
-          if (t -= C, t <= -i && (t += i, e += 1, g(e), a > 0 && e >= a)) {
-            cancelAnimationFrame(n.current), m(!1), p(0), b?.();
-            return;
-          }
-          break;
-        case "down":
-          if (t += C, t >= 0 && (t -= i, e += 1, g(e), a > 0 && e >= a)) {
-            cancelAnimationFrame(n.current), m(!1), p(-i), b?.();
-            return;
-          }
-          break;
-      }
-      p(t), n.current = requestAnimationFrame(f);
-    };
-    return n.current = requestAnimationFrame(f), () => {
-      n.current && cancelAnimationFrame(n.current);
-    };
-  }, [M, E, c, F, y, a]), N(() => (z(), () => {
-    n.current && cancelAnimationFrame(n.current);
-  }), []);
-  const Y = () => {
-    H && m(!1);
-  }, G = () => {
-    H && m(!0);
-  }, J = () => o ? `translateX(${x}px)` : `translateY(${x}px)`, K = () => {
-    const r = {
-      display: o ? "inline-block" : "block",
-      whiteSpace: o ? "nowrap" : "normal",
-      // 消除元素间默认间距
-      marginRight: o ? 0 : void 0,
-      marginBottom: o ? void 0 : 0
-    }, t = /* @__PURE__ */ l(
+    return N ? /* @__PURE__ */ s(rt, { children: /* @__PURE__ */ H(
       "div",
       {
-        ref: w,
-        style: r,
-        className: `${s}-children`,
-        children: $
-      }
-    );
-    return y ? /* @__PURE__ */ S(A, { children: [
-      t,
-      /* @__PURE__ */ l("div", { style: r, className: `${s}-children`, children: $ })
-    ] }) : t;
-  };
-  return /* @__PURE__ */ S(
-    "div",
-    {
-      ref: h,
-      className: Z(
-        s,
-        `${s}-${c}`,
-        D
-      ),
-      style: {
-        overflow: "hidden",
-        position: "relative",
-        ...L
-      },
-      onMouseEnter: Y,
-      onMouseLeave: G,
-      children: [
-        /* @__PURE__ */ l(
-          "div",
-          {
-            ref: T,
-            style: {
-              display: o ? "inline-block" : "block",
-              whiteSpace: "nowrap",
-              willChange: "transform",
-              // 启用GPU加速
-              transform: J()
-            },
-            className: `${s}-content`,
-            children: K()
-          }
-        ),
-        W && y && (o ? /* @__PURE__ */ S(A, { children: [
-          /* @__PURE__ */ l(
-            "div",
-            {
-              style: {
-                position: "absolute",
-                top: 0,
-                left: 0,
-                width: d,
-                height: "100%",
-                background: "linear-gradient(to right, #fff, transparent)",
-                pointerEvents: "none"
-              },
-              className: `${s}-linear-gradient-to-right`
-            }
-          ),
-          /* @__PURE__ */ l(
+        ref: m,
+        style: Z,
+        className: lt(i, `${i}-${e}`, D),
+        children: [
+          !!r && /* @__PURE__ */ s("div", { style: tt, className: `${i}-overlay` }),
+          /* @__PURE__ */ H(
             "div",
             {
-              style: {
-                position: "absolute",
-                top: 0,
-                right: 0,
-                width: d,
-                height: "100%",
-                background: "linear-gradient(to left, #fff, transparent)",
-                pointerEvents: "none"
-              },
-              className: `${s}-linear-gradient-to-left`
-            }
-          )
-        ] }) : /* @__PURE__ */ S(A, { children: [
-          /* @__PURE__ */ l(
-            "div",
-            {
-              style: {
-                position: "absolute",
-                top: 0,
-                left: 0,
-                width: "100%",
-                height: d,
-                background: "linear-gradient(to bottom, #fff, transparent)",
-                pointerEvents: "none"
-              },
-              className: `${s}-linear-gradient-to-bottom`
+              style: S,
+              className: `${i}-item`,
+              onAnimationIteration: K,
+              onAnimationEnd: J,
+              children: [
+                /* @__PURE__ */ s(
+                  "div",
+                  {
+                    ref: u,
+                    className: `${i}-initial-child-container`,
+                    children: B.map(g, (n, f) => /* @__PURE__ */ s(
+                      "div",
+                      {
+                        style: R,
+                        className: `${i}-child`,
+                        children: n
+                      },
+                      `original-${f}`
+                    ))
+                  }
+                ),
+                b(y - 1)
+              ]
             }
           ),
-          /* @__PURE__ */ l(
-            "div",
-            {
-              style: {
-                position: "absolute",
-                bottom: 0,
-                left: 0,
-                width: "100%",
-                height: d,
-                background: "linear-gradient(to top, #fff, transparent)",
-                pointerEvents: "none"
-              },
-              className: `${s}-linear-gradient-to-top`
-            }
-          )
-        ] }))
-      ]
-    }
-  );
-};
+          /* @__PURE__ */ s("div", { style: S, className: `${i}-item`, children: b(y) })
+        ]
+      }
+    ) }) : null;
+  }
+);
 export {
-  ce as default
+  ye as default
 };

package/marquee/interface.js

@@ -0,0 +1 @@
+

package/marquee-/index.js

@@ -0,0 +1,260 @@
+import { jsxs as z, jsx as m, Fragment as x } from "react/jsx-runtime";
+import { useContext as V, useRef as C, useState as d, useEffect as F } from "react";
+import "../config-provider/ConfigProvider.js";
+import "lodash/isEqualWith";
+import "../components/common/utils/is.js";
+import "@unicom-cloud/utils/constant/keyboardCode";
+import "lodash/isNumber";
+import Z from "lodash/merge";
+import "../components/common/utils/dom.js";
+import "../components/common/hooks/useIntersectionObserver.js";
+import _ from "../components/common/hooks/useMergeProps.js";
+import "../components/common/utils/reactDOM.js";
+import "@unicom-cloud/utils/constant";
+import "lodash/debounce";
+import "@unicom-cloud/utils/date";
+import "@unicom-cloud/utils/case-name";
+import tt from "@unicom-cloud/utils/class-name";
+import "@unicom-cloud/utils/constant/ui";
+import "../utils/contextHolder.js";
+import "@unicom-cloud/utils/clipboard-copy";
+import "../components/common/utils/dayjs.js";
+import "@unicom-cloud/utils/file/fileToURL";
+import "lodash/escapeRegExp";
+import "lodash/isArray";
+import "lodash/isString";
+import "lodash/isFunction";
+import "lodash/throttle";
+import "lodash/camelCase";
+import "lodash/capitalize";
+import "lodash/cloneDeep";
+import "lodash/get";
+import "lodash/has";
+import "lodash/kebabCase";
+import "lodash/mergeWith";
+import "lodash/set";
+import "lodash/setWith";
+import "lodash/snakeCase";
+import "lodash/startCase";
+import "lodash/uniq";
+import "lodash/upperFirst";
+import "@unicom-cloud/utils/math";
+import "lodash/isPlainObject";
+import "../dist/react-transition-group/src/CSSTransition.js";
+import "../dist/react-transition-group/src/ReplaceTransition.js";
+import "../dist/react-transition-group/src/SwitchTransition.js";
+import "../dist/react-transition-group/chunk/CPfP7aNL.js";
+import "../dist/react-transition-group/src/TransitionGroup.js";
+import { resizeObserver as et } from "../components/common/utils/resizeObserver.js";
+import "uuid";
+import "@unicom-cloud/utils/file/saveAs";
+import "@unicom-cloud/utils/screenfull";
+import "@unicom-cloud/utils/tinycolor";
+import "@unicom-cloud/utils/ui-color";
+import "@unicom-cloud/utils/constant/ui.js";
+import "react-is";
+import "@unicom-cloud/utils/tree";
+import { isPlainObject as q } from "@unicom-cloud/utils/is";
+import "../dist/validate/src/index.js";
+import rt from "../config-provider/context.js";
+const ot = {
+  speed: 50,
+  direction: "left",
+  pauseOnHover: !1,
+  loop: 0
+}, me = (R) => {
+  const { getPrefixCls: L, componentConfig: D } = V(rt), s = L?.("marquee"), E = _(
+    R,
+    ot,
+    D?.Marquee
+  ), {
+    children: N,
+    style: W,
+    className: j,
+    speed: A = 50,
+    direction: l = "left",
+    pauseOnHover: P = !1,
+    loop: a = 0,
+    gradient: T = { color: "#fff" },
+    onComplete: h
+  } = E, g = C(null), B = C(null), $ = C(null), c = C(), [S, I] = d({ width: 0, height: 0 }), [it, X] = d({ width: 0, height: 0 }), [y, Y] = d(!1), [H, p] = d(!0), [k, f] = d(0), [M, b] = d(0), i = l === "left" || l === "right";
+  let o = T;
+  q(o) && (o = Z(
+    { size: i ? 50 : 20, color: "#fff" },
+    o
+  ));
+  const O = () => {
+    if ($.current && g.current) {
+      const r = $.current.scrollWidth, t = $.current.scrollHeight, n = g.current.offsetWidth, e = g.current.offsetHeight;
+      I({ width: r, height: t }), X({ width: n, height: e });
+      const u = i ? r > n : t > e;
+      if (Y(u), u) {
+        const v = l === "right" ? -r : l === "down" ? -t : 0;
+        f(v);
+      }
+    }
+  };
+  F(() => {
+    const r = g.current;
+    if (!r)
+      return;
+    const t = et([r], O);
+    return () => t();
+  }, []), F(() => {
+    O(), b(0);
+  }, [N]), F(() => {
+    if (!H || !y)
+      return;
+    let r = null, t = k;
+    const n = i ? S.width : S.height;
+    let e = M;
+    const u = (v) => {
+      if (!r) {
+        r = v, c.current = requestAnimationFrame(u);
+        return;
+      }
+      const U = (v - r) / 1e3;
+      r = v;
+      const w = A * U;
+      switch (l) {
+        case "left":
+          if (t -= w, t <= -n && (t += n, e += 1, b(e), a > 0 && e >= a)) {
+            cancelAnimationFrame(c.current), p(!1), f(0), h?.();
+            return;
+          }
+          break;
+        case "right":
+          if (t += w, t >= 0 && (t -= n, e += 1, b(e), a > 0 && e >= a)) {
+            cancelAnimationFrame(c.current), p(!1), f(-n), h?.();
+            return;
+          }
+          break;
+        case "up":
+          if (t -= w, t <= -n && (t += n, e += 1, b(e), a > 0 && e >= a)) {
+            cancelAnimationFrame(c.current), p(!1), f(0), h?.();
+            return;
+          }
+          break;
+        case "down":
+          if (t += w, t >= 0 && (t -= n, e += 1, b(e), a > 0 && e >= a)) {
+            cancelAnimationFrame(c.current), p(!1), f(-n), h?.();
+            return;
+          }
+          break;
+      }
+      f(t), c.current = requestAnimationFrame(u);
+    };
+    return c.current = requestAnimationFrame(u), () => {
+      c.current && cancelAnimationFrame(c.current);
+    };
+  }, [
+    H,
+    A,
+    l,
+    S,
+    y,
+    a,
+    M,
+    k,
+    i,
+    h
+  ]);
+  const G = () => {
+    P && p(!1);
+  }, J = () => {
+    P && p(!0);
+  }, K = () => i ? `translateX(${k}px)` : `translateY(${k}px)`, Q = () => {
+    const r = {
+      display: i ? "inline-block" : "block",
+      whiteSpace: i ? "nowrap" : "normal",
+      marginRight: i ? 0 : void 0,
+      marginBottom: i ? void 0 : 0
+    }, t = /* @__PURE__ */ m(
+      "div",
+      {
+        ref: $,
+        style: r,
+        className: `${s}-children`,
+        children: N
+      }
+    );
+    return y ? /* @__PURE__ */ z(x, { children: [
+      t,
+      /* @__PURE__ */ m("div", { style: r, className: `${s}-children`, children: N })
+    ] }) : t;
+  };
+  return /* @__PURE__ */ z(
+    "div",
+    {
+      ref: g,
+      style: W,
+      className: tt(
+        s,
+        `${s}-${l}`,
+        j
+      ),
+      onMouseEnter: G,
+      onMouseLeave: J,
+      children: [
+        /* @__PURE__ */ m(
+          "div",
+          {
+            ref: B,
+            style: {
+              display: i ? "inline-block" : "block",
+              transform: K()
+            },
+            className: `${s}-content`,
+            children: Q()
+          }
+        ),
+        q(o) && y && (i ? /* @__PURE__ */ z(x, { children: [
+          /* @__PURE__ */ m(
+            "div",
+            {
+              style: {
+                width: o.size,
+                background: `linear-gradient(to right, ${o.color}, transparent)`
+              },
+              className: `${s}-linear-gradient-to-right`
+            }
+          ),
+          /* @__PURE__ */ m(
+            "div",
+            {
+              style: {
+                width: o.size,
+                background: `linear-gradient(to left, ${o.color}, transparent)`
+              },
+              className: `${s}-linear-gradient-to-left`
+            }
+          )
+        ] }) : /* @__PURE__ */ z(x, { children: [
+          /* @__PURE__ */ m(
+            "div",
+            {
+              style: {
+                height: o.size,
+                background: `linear-gradient(to top, ${o.color}, transparent)`
+              },
+              className: `${s}-linear-gradient-to-bottom`
+            }
+          ),
+          /* @__PURE__ */ m(
+            "div",
+            {
+              style: {
+                height: o.size,
+                background: `linear-gradient(to bottom, ${o.color}, transparent)`
+              },
+              className: `${s}-linear-gradient-to-top`
+            }
+          )
+        ] }))
+      ]
+    }
+  );
+};
+export {
+  me as default
+};

package/marquee-/interface.js

@@ -0,0 +1 @@
+

package/package.json

@@ -1 +1 @@
-{"name":"@unicom-cloud/ui","version":"0.8.102","dependencies":{"@unicom-cloud/icons":"latest"},"peerDependencies":{"dayjs":"^1.11.10","lodash":"^4.17.21","react":"^18.3.1","react-dom":"^18.3.1"},"peerDependenciesMeta":{},"type":"module","types":"types/pc/index.d.ts","main":"./index.js","publishConfig":{"registry":"https://registry.npmjs.org/","access":"public"}}
+{"name":"@unicom-cloud/ui","version":"0.8.104","dependencies":{"@unicom-cloud/icons":"latest"},"peerDependencies":{"react":"^18.3.1","react-dom":"^18.3.1","dayjs":"^1.11.10","lodash":"^4.17.21","uuid":"^11.1.0","qrcode.react":"^4.2.0"},"peerDependenciesMeta":{},"type":"module","types":"types/pc/index.d.ts","main":"./index.js","publishConfig":{"registry":"https://registry.npmjs.org/","access":"public"}}