@unicom-cloud/ui 0.8.96 → 0.8.98

package/color-picker/Panel.js

@@ -1,135 +1,135 @@
-import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
 import "../dist/tinycolor/chunk/BOzCVdr0.js";
-import { TinyColor as m } from "../dist/tinycolor/src/index.js";
-import { useContext as ar, useState as lr, useMemo as sr } from "react";
+import { TinyColor as d } from "../dist/tinycolor/src/index.js";
+import { useContext as cr, useState as ar, useMemo as sr } from "react";
 import "../config-provider/ConfigProvider.js";
-import x from "../radio/Radio.js";
+import k from "../radio/Radio.js";
 import "../radio/Group.js";
 import dr from "../select/Select.js";
-import X from "../tooltip/index.js";
+import E from "../tooltip/index.js";
 import mr from "@unicom-cloud/utils/class-name";
-import { ControlBar as S } from "./ControlBar.js";
+import { ControlBar as C } from "./ControlBar.js";
 import { InputHex as ur } from "./InputHex.js";
 import { InputRgb as pr } from "./InputRgb.js";
-import { ColorPickerMode as _ } from "./interface.js";
-import { isMultiMode as D, isGradientMode as F } from "./Mode.js";
+import { ColorPickerMode as H } from "./interface.js";
+import { isMultiMode as X, isGradientMode as _ } from "./Mode.js";
 import { Palette as gr } from "./Palette.js";
-import { renderBackground as br, sortGradientColors as J, getColorByGradients as vr } from "./utils.js";
-import fr from "../config-provider/context.js";
-const hr = x.Group, Er = ({
-  value: K,
-  mode: C,
-  activeMode: N,
-  gradientColors: u,
-  activeColorId: L,
-  activeColorIdRef: O,
-  color: s,
-  alpha: p,
-  disabledAlpha: k,
-  historyColors: R,
-  presetColors: g,
-  showHistory: G,
-  showPreset: P,
-  renderPreset: B,
-  renderHistory: M,
-  renderPickSection: I,
-  renderFooter: T,
-  onHsvChange: d,
-  onAlphaChange: b,
-  onActiveModeChange: Q,
-  onGradientColorsChange: j,
-  onActiveColorIdChange: z
+import { renderBackground as br, sortGradientColors as D, getColorByGradients as fr } from "./utils.js";
+import vr from "../config-provider/context.js";
+const hr = k.Group, Er = ({
+  value: F,
+  mode: y,
+  activeMode: h,
+  gradientColors: m,
+  activeColorId: J,
+  activeColorIdRef: K,
+  color: a,
+  alpha: u,
+  disabledAlpha: $,
+  historyColors: w,
+  presetColors: L,
+  showHistory: x,
+  showPreset: S,
+  renderPreset: P,
+  renderHistory: R,
+  renderPickSection: G,
+  renderFooter: B,
+  onHsvChange: s,
+  onAlphaChange: p,
+  onActiveModeChange: O,
+  onGradientColorsChange: M,
+  onActiveColorIdChange: I
 }) => {
-  const { getPrefixCls: y, locale: t } = ar(fr), r = y == null ? void 0 : y("color-picker"), [q, U] = lr("hex"), v = sr(() => {
-    const n = new Set(R ?? []);
+  const { getPrefixCls: Q, locale: g } = cr(vr), r = Q?.("color-picker"), [T, U] = ar("hex"), j = sr(() => {
+    const n = new Set(w ?? []);
     return Array.from(n);
-  }, [R]), { h: E, s: V, v: W } = s.hsv, { r: f, g: h, b: $ } = s.rgb, Y = (n) => {
-    let a = new m(n);
-    a.ok || (a = new m({
+  }, [w]), { h: z, s: V, v: W } = a.hsv, { r: b, g: f, b: v } = a.rgb, Y = (n) => {
+    let i = new d(n);
+    i.ok || (i = new d({
       r: 255,
       g: 0,
       b: 0
     }));
-    const o = a.toHsv_();
-    d(o);
-  }, Z = () => /* @__PURE__ */ c(
+    const t = i.toHsv_();
+    s(t);
+  }, Z = () => /* @__PURE__ */ l(
     hr,
     {
       className: `${r}-panel-control-gradient-tag`,
       type: "button",
       size: "small",
-      value: N,
-      onChange: Q,
+      value: h,
+      onChange: O,
       children: [
-        /* @__PURE__ */ e(x, { value: _.Single, children: t == null ? void 0 : t.ColorPicker.singleColor }),
-        /* @__PURE__ */ e(x, { value: _.Gradient, children: t == null ? void 0 : t.ColorPicker.gradientColor })
+        /* @__PURE__ */ e(k, { value: H.Single, children: g?.ColorPicker.singleColor }),
+        /* @__PURE__ */ e(k, { value: H.Gradient, children: g?.ColorPicker.gradientColor })
       ]
     }
   ), A = (n) => {
-    const a = Math.round(n * 100);
-    j((o) => J(
-      o.map((i) => i.id === O.current ? {
-        ...i,
-        percent: a
-      } : i)
+    const i = Math.round(n * 100);
+    M((t) => D(
+      t.map((o) => o.id === K.current ? {
+        ...o,
+        percent: i
+      } : o)
     ));
   }, rr = () => {
-    const n = (o) => {
-      const i = Math.round(o * 100), l = vr(u, i), w = J(u.concat(l));
-      j(w), z(l.id), d(l.color.hsv), b(l.alpha);
-    }, a = (o) => {
-      const i = u.find((l) => l.id === o);
-      z(o), d(i.color.hsv), b(i.alpha);
+    const n = (t) => {
+      const o = Math.round(t * 100), c = fr(m, o), N = D(m.concat(c));
+      M(N), I(c.id), s(c.color.hsv), p(c.alpha);
+    }, i = (t) => {
+      const o = m.find((c) => c.id === t);
+      I(t), s(o.color.hsv), p(o.alpha);
     };
     return /* @__PURE__ */ e("div", { className: `${r}-control-bar-gradient`, children: /* @__PURE__ */ e(
-      S,
+      C,
       {
         multiple: !0,
-        value: u.map(({ percent: o, id: i }) => ({
-          value: o / 100,
-          key: i
+        value: m.map(({ percent: t, id: o }) => ({
+          value: t / 100,
+          key: o
         })),
         onAdd: n,
         onChange: A,
-        onActive: a,
+        onActive: i,
         style: {
-          background: br(K)
+          background: br(F)
         },
-        renderHandlerStyle: (o) => L === o ? {
+        renderHandlerStyle: (t) => J === t ? {
           outline: "1px solid rgb(var(--pqb-primary-6))"
         } : {},
-        renderHandlerCenterStyle: (o) => {
+        renderHandlerCenterStyle: (t) => {
           const {
             color: {
-              rgb: { r: i, g: l, b: w }
+              rgb: { r: o, g: c, b: N }
             },
-            alpha: ir
-          } = u.find((cr) => cr.id === o);
+            alpha: lr
+          } = m.find((ir) => ir.id === t);
           return {
-            background: new m({ r: i, g: l, b: w, a: ir }).toRgbaString()
+            background: new d({ r: o, g: c, b: N, a: lr }).toRgbaString()
           };
         }
       }
     ) });
-  }, er = () => q === "rgb" ? /* @__PURE__ */ e(
+  }, er = () => T === "rgb" ? /* @__PURE__ */ e(
     pr,
     {
-      color: s,
-      alpha: p,
-      onHsvChange: d,
-      onAlphaChange: b,
-      disabledAlpha: k
+      color: a,
+      alpha: u,
+      onHsvChange: s,
+      onAlphaChange: p,
+      disabledAlpha: $
     }
   ) : /* @__PURE__ */ e(
     ur,
     {
-      color: s,
-      alpha: p,
-      onHsvChange: d,
-      onAlphaChange: b,
-      disabledAlpha: k
+      color: a,
+      alpha: u,
+      onHsvChange: s,
+      onAlphaChange: p,
+      disabledAlpha: $
     }
-  ), H = (n) => /* @__PURE__ */ e(X, { mini: !0, content: n, color: n, children: /* @__PURE__ */ e(
+  ), q = (n) => /* @__PURE__ */ e(E, { mini: !0, content: n, color: n, children: /* @__PURE__ */ e(
     "div",
     {
       className: `${r}-color-block`,
@@ -145,91 +145,88 @@ const hr = x.Group, Er = ({
       )
     },
     n
-  ) }, n), nr = () => M ? M() : G ? /* @__PURE__ */ c("div", { className: `${r}-colors-section`, children: [
-    /* @__PURE__ */ e("div", { className: `${r}-colors-text`, children: t == null ? void 0 : t.ColorPicker.history }),
-    /* @__PURE__ */ e("div", { className: `${r}-colors-wrapper`, children: v != null && v.length ? /* @__PURE__ */ e("div", { className: `${r}-colors-list`, children: v.map(H) }) : /* @__PURE__ */ e("span", { className: `${r}-colors-empty`, children: t == null ? void 0 : t.ColorPicker.empty }) })
-  ] }) : null, tr = () => {
-    var n;
-    return B ? B() : P ? /* @__PURE__ */ c("div", { className: `${r}-colors-section`, children: [
-      /* @__PURE__ */ e("div", { className: `${r}-colors-text`, children: t == null ? void 0 : t.ColorPicker.preset }),
-      /* @__PURE__ */ e("div", { className: `${r}-colors-wrapper`, children: /* @__PURE__ */ e("div", { className: `${r}-colors-list`, children: (n = g == null ? void 0 : g.map) == null ? void 0 : n.call(g, H) }) })
-    ] }) : null;
-  }, or = () => I ? I() : G || P ? /* @__PURE__ */ c("div", { className: `${r}-panel-colors`, children: [
+  ) }, n), nr = () => R ? R() : x ? /* @__PURE__ */ l("div", { className: `${r}-colors-section`, children: [
+    /* @__PURE__ */ e("div", { className: `${r}-colors-text`, children: g?.ColorPicker.history }),
+    /* @__PURE__ */ e("div", { className: `${r}-colors-wrapper`, children: j?.length ? /* @__PURE__ */ e("div", { className: `${r}-colors-list`, children: j.map(q) }) : /* @__PURE__ */ e("span", { className: `${r}-colors-empty`, children: g?.ColorPicker.empty }) })
+  ] }) : null, tr = () => P ? P() : S ? /* @__PURE__ */ l("div", { className: `${r}-colors-section`, children: [
+    /* @__PURE__ */ e("div", { className: `${r}-colors-text`, children: g?.ColorPicker.preset }),
+    /* @__PURE__ */ e("div", { className: `${r}-colors-wrapper`, children: /* @__PURE__ */ e("div", { className: `${r}-colors-list`, children: L?.map?.(q) }) })
+  ] }) : null, or = () => G ? G() : x || S ? /* @__PURE__ */ l("div", { className: `${r}-panel-colors`, children: [
     nr(),
     tr()
   ] }) : null;
-  return /* @__PURE__ */ c("div", { className: `${r}-panel`, children: [
-    /* @__PURE__ */ c(
+  return /* @__PURE__ */ l("div", { className: `${r}-panel`, children: [
+    /* @__PURE__ */ l(
       "div",
       {
         className: mr(
-          (D(C) || F(N)) && `${r}-panel-control-gradient`
+          (X(y) || _(h)) && `${r}-panel-control-gradient`
         ),
         children: [
-          D(C) && Z(),
-          F(N) && rr(),
+          X(y) && Z(),
+          _(h) && rr(),
           /* @__PURE__ */ e(
             gr,
             {
-              color: s,
-              onChange: (n, a) => {
-                d({ h: E, s: n, v: a });
+              color: a,
+              onChange: (n, i) => {
+                s({ h: z, s: n, v: i });
               }
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ c("div", { className: `${r}-panel-control`, children: [
-      /* @__PURE__ */ c("div", { className: `${r}-control-wrapper`, children: [
-        /* @__PURE__ */ c("div", { children: [
+    /* @__PURE__ */ l("div", { className: `${r}-panel-control`, children: [
+      /* @__PURE__ */ l("div", { className: `${r}-control-wrapper`, children: [
+        /* @__PURE__ */ l("div", { children: [
           /* @__PURE__ */ e(
-            S,
+            C,
             {
               className: `${r}-control-bar-hue`,
-              value: E,
-              onChange: (n) => d({ h: n, s: V, v: W }),
+              value: z,
+              onChange: (n) => s({ h: n, s: V, v: W }),
               renderHandlerCenterStyle: () => ({
-                background: new m({ r: f, g: h, b: $ }).toRgbString()
+                background: new d({ r: b, g: f, b: v }).toRgbString()
               })
             }
           ),
-          !k && /* @__PURE__ */ e("div", { className: `${r}-control-bar-bg`, children: /* @__PURE__ */ e(
-            S,
+          !$ && /* @__PURE__ */ e("div", { className: `${r}-control-bar-bg`, children: /* @__PURE__ */ e(
+            C,
             {
               className: `${r}-control-bar-alpha`,
               style: {
-                background: `linear-gradient(to right, rgba(0, 0, 0, 0), rgb(${f}, ${h}, ${$}))`
+                background: `linear-gradient(to right, rgba(0, 0, 0, 0), rgb(${b}, ${f}, ${v}))`
               },
-              value: p,
-              onChange: b,
+              value: u,
+              onChange: p,
               renderHandlerCenterStyle: () => ({
-                background: new m({
-                  r: f,
-                  g: h,
-                  b: $,
-                  a: p
+                background: new d({
+                  r: b,
+                  g: f,
+                  b: v,
+                  a: u
                 }).toRgbaString()
               })
             }
           ) })
         ] }),
-        /* @__PURE__ */ e(X, { mini: !0, content: s.hex8String, color: s.string, children: /* @__PURE__ */ e(
+        /* @__PURE__ */ e(E, { mini: !0, content: a.hex8String, color: a.string, children: /* @__PURE__ */ e(
           "div",
           {
             className: `${r}-preview`,
             style: {
-              backgroundColor: new m({
-                r: f,
-                g: h,
-                b: $,
-                a: p
+              backgroundColor: new d({
+                r: b,
+                g: f,
+                b: v,
+                a: u
               }).toRgbaString()
             }
           }
         ) })
       ] }),
-      /* @__PURE__ */ c("div", { className: `${r}-input-wrapper`, children: [
+      /* @__PURE__ */ l("div", { className: `${r}-input-wrapper`, children: [
         /* @__PURE__ */ e(
           dr,
           {
@@ -249,7 +246,7 @@ const hr = x.Group, Er = ({
                 label: "RGB"
               }
             ],
-            value: q,
+            value: T,
             triggerProps: {
               className: `${r}-type-dropdown`,
               getPopupContainer() {
@@ -263,7 +260,7 @@ const hr = x.Group, Er = ({
       ] })
     ] }),
     or(),
-    typeof T == "function" ? T() : null
+    typeof B == "function" ? B() : null
   ] });
 };
 export {

package/color-picker/hooks/useColorPicker.js

@@ -1,128 +1,125 @@
 import "../../dist/tinycolor/chunk/BOzCVdr0.js";
-import { TinyColor as F } from "../../dist/tinycolor/src/index.js";
-import { useState as v, useRef as q, useMemo as M, useCallback as E, useEffect as y } from "react";
-import w from "../../components/common/hooks/useIsFirstRender.js";
-import T from "../../components/common/hooks/useMergeValue.js";
-import { ColorPickerMode as H } from "../interface.js";
-import { getModeByValue as ee, isGradientMode as R, isSingleMode as oe } from "../Mode.js";
-import { mapValueToGradientColor as te, getColorFromHsv as B, formatRgba as re, formatHex as ne, isEqualsColors as ie, equalsHsv as se, getRandomId as j } from "../utils.js";
-const me = (r) => {
-  var k;
+import { TinyColor as P } from "../../dist/tinycolor/src/index.js";
+import { useState as C, useRef as k, useMemo as G, useCallback as F, useEffect as M } from "react";
+import Z from "../../components/common/hooks/useIsFirstRender.js";
+import q from "../../components/common/hooks/useMergeValue.js";
+import { ColorPickerMode as y } from "../interface.js";
+import { getModeByValue as $, isGradientMode as H, isSingleMode as w } from "../Mode.js";
+import { mapValueToGradientColor as ee, getColorFromHsv as E, formatRgba as oe, formatHex as te, isEqualsColors as re, equalsHsv as ne, getRandomId as T } from "../utils.js";
+const Ce = (s) => {
   const {
-    mode: z = H.Single,
-    defaultValue: D,
-    format: _,
-    onChange: h,
-    disabledAlpha: p
-  } = r, J = w(), [b, K] = T(!1, {
-    defaultValue: r.defaultPopupVisible,
-    value: r.popupVisible
-  }), [s, L] = v(
-    ee(
-      r.value,
-      D,
-      z
+    mode: B = y.Single,
+    defaultValue: j,
+    format: R,
+    onChange: z,
+    disabledAlpha: h
+  } = s, D = Z(), [p, J] = q(!1, {
+    defaultValue: s.defaultPopupVisible,
+    value: s.popupVisible
+  }), [i, K] = C(
+    $(
+      s.value,
+      j,
+      B
     )
-  ), [n, N] = T(
-    s === H.Gradient ? void 0 : "",
-    r
-  ), [x, O] = v(
-    R(s) && Array.isArray(n) ? te(n, p) : []
-  ), [Q, U] = v((k = x[0]) == null ? void 0 : k.id), C = q(x), A = q(Q), t = C.current, V = A.current, m = (e) => {
-    O(e), C.current = typeof e == "function" ? e(C.current) : e;
-  }, S = (e) => {
-    U(e), A.current = e;
-  }, c = M(() => {
-    const e = t.findIndex(
-      (o) => o.id === V
+  ), [r, L] = q(
+    i === y.Gradient ? void 0 : "",
+    s
+  ), [_, N] = C(
+    H(i) && Array.isArray(r) ? ee(r, h) : []
+  ), [O, Q] = C(_[0]?.id), v = k(_), b = k(O), o = v.current, A = b.current, m = (e) => {
+    N(e), v.current = typeof e == "function" ? e(v.current) : e;
+  }, x = (e) => {
+    Q(e), b.current = e;
+  }, c = G(() => {
+    const e = o.findIndex(
+      (t) => t.id === A
     );
     return e !== -1 ? e : 0;
-  }, [t, V]), u = Array.isArray(n) ? new F(n[c].color).toHsv_() : new F(n).toHsv_(), [d, P] = v({
+  }, [o, A]), u = Array.isArray(r) ? new P(r[c].color).toHsv_() : new P(r).toHsv_(), [d, S] = C({
     h: u.h,
     s: u.s,
     v: u.v
-  }), [i, I] = v(u.a), f = M(() => B(d), [d]), G = E(
-    (e, o, a, l) => _ === "rgb" ? re(e, o, a, l) : ne(e, o, a, l),
-    [_]
-  ), g = M(() => {
-    if (oe(s)) {
-      const { r: e, g: o, b: a } = f.rgb;
-      return G(e, o, a, i);
+  }), [n, V] = C(u.a), f = G(() => E(d), [d]), I = F(
+    (e, t, a, l) => R === "rgb" ? oe(e, t, a, l) : te(e, t, a, l),
+    [R]
+  ), g = G(() => {
+    if (w(i)) {
+      const { r: e, g: t, b: a } = f.rgb;
+      return I(e, t, a, n);
     }
-    return t.map((e) => {
-      const { r: o, g: a, b: l } = e.color.rgb;
+    return o.map((e) => {
+      const { r: t, g: a, b: l } = e.color.rgb;
       return {
-        color: G(o, a, l, e.alpha),
+        color: I(t, a, l, e.alpha),
         percent: e.percent
       };
     });
-  }, [s, t, f.rgb, G, i]);
-  y(() => {
-    N(g), !J && !ie(n, g) && (h == null || h(g));
+  }, [i, o, f.rgb, I, n]);
+  M(() => {
+    L(g), !D && !re(r, g) && z?.(g);
   }, [g]);
-  const W = E(
+  const U = F(
     (e) => {
-      var o;
-      if (e && n !== g) {
-        const { h: a, s: l, v: Z, a: $ } = u;
-        P({ h: a, s: l, v: Z }), I($);
+      if (e && r !== g) {
+        const { h: t, s: a, v: l, a: Y } = u;
+        S({ h: t, s: a, v: l }), V(Y);
       }
-      e !== b && ((o = r.onVisibleChange) == null || o.call(r, e), "popupVisible" in r || K(e));
+      e !== p && (s.onVisibleChange?.(e), "popupVisible" in s || J(e));
     },
-    [r.onVisibleChange, b, n]
-  ), X = (e) => {
-    P(e), p && i !== 100 && I(100);
-  }, Y = (e) => {
-    I(e);
+    [s.onVisibleChange, p, r]
+  ), W = (e) => {
+    S(e), h && n !== 100 && V(100);
+  }, X = (e) => {
+    V(e);
   };
-  return y(() => {
-    if (!R(s) || !t.length || se(t[c].color.hsv, d)) return;
-    const e = [...t];
+  return M(() => {
+    if (!H(i) || !o.length || ne(o[c].color.hsv, d)) return;
+    const e = [...o];
     e[c] = {
       ...e[c],
-      color: B(d)
+      color: E(d)
     }, m(e);
-  }, [d]), y(() => {
-    if (!R(s) || !t.length || t[c].alpha === i) return;
-    const e = [...t];
+  }, [d]), M(() => {
+    if (!H(i) || !o.length || o[c].alpha === n) return;
+    const e = [...o];
     e[c] = {
       ...e[c],
-      alpha: p ? 100 : i
+      alpha: h ? 100 : n
     }, m(e);
-  }, [i]), {
-    value: n,
-    activeMode: s,
-    gradientColors: t,
-    gradientColorsRef: C,
-    activeColorId: V,
-    activeColorIdRef: A,
-    popupVisible: b,
+  }, [n]), {
+    value: r,
+    activeMode: i,
+    gradientColors: o,
+    gradientColorsRef: v,
+    activeColorId: A,
+    activeColorIdRef: b,
+    popupVisible: p,
     color: f,
-    alpha: i,
-    onHsvChange: X,
-    onAlphaChange: Y,
-    onVisibleChange: W,
+    alpha: n,
+    onHsvChange: W,
+    onAlphaChange: X,
+    onVisibleChange: U,
     onActiveModeChange: (e) => {
-      var o;
-      e !== s && (e === H.Single ? S((o = t[0]) == null ? void 0 : o.id) : m([
+      e !== i && (e === y.Single ? x(o[0]?.id) : m([
         {
-          id: j(),
+          id: T(),
           color: f,
-          alpha: i,
+          alpha: n,
           percent: 0
         },
         {
-          id: j(),
+          id: T(),
           color: f,
-          alpha: i,
+          alpha: n,
           percent: 100
         }
-      ]), L(e));
+      ]), K(e));
     },
-    onActiveColorIdChange: S,
+    onActiveColorIdChange: x,
     onGradientColorsChange: m
   };
 };
 export {
-  me as useColorPicker
+  Ce as useColorPicker
 };