@unicom-cloud/ui 0.8.44 → 0.8.46

package/checkbox/Group.js

@@ -0,0 +1,97 @@
+import { jsx as i } from "react/jsx-runtime";
+import p from "lodash/isArray";
+import n from "lodash/isPlainObject";
+import { createContext as O, useState as y, useContext as P, useCallback as A } from "react";
+/* empty css                  */
+import "../config-provider/ConfigProvider.js";
+import R from "../hooks/useMergeValue.js";
+import j from "@unicom-cloud/utils/class-name";
+import { pickTriggerPropsFromRest as w } from "../utils/constant.js";
+import S from "./Checkbox.js";
+import { ConfigContext as z } from "../config-provider/context.js";
+const F = {
+  isCheckboxGroup: !1,
+  checkboxGroupValue: [],
+  onGroupChange: () => {
+  },
+  registerValue: () => {
+  },
+  unRegisterValue: () => {
+  }
+}, M = O(F);
+function T(r) {
+  const [o, C] = R([], {
+    defaultValue: "defaultValue" in r ? r.defaultValue || [] : void 0,
+    value: "value" in r ? r.value || [] : void 0
+  }), [s, c] = y([]), { getPrefixCls: x, rtl: g } = P(z), {
+    disabled: m,
+    options: f,
+    style: b,
+    className: V,
+    error: k,
+    children: v,
+    direction: d = "horizontal"
+  } = r, u = x("checkbox"), G = j(
+    `${u}-group`,
+    {
+      [`${u}-group-is-error`]: k,
+      [`${u}-group-direction-${d}`]: d,
+      [`${u}-group-rtl`]: g
+    },
+    V
+  ), N = A(
+    (e, l, a) => {
+      var h;
+      const t = o.slice();
+      l ? t.push(e) : t.splice(o.indexOf(e), 1), C(t), (h = r.onChange) == null || h.call(
+        r,
+        t.filter(($) => s.indexOf($) > -1),
+        a
+      );
+    },
+    [o, r.onChange, s]
+  );
+  return /* @__PURE__ */ i(
+    "span",
+    {
+      className: G,
+      style: b,
+      ...w(r),
+      children: /* @__PURE__ */ i(
+        M.Provider,
+        {
+          value: {
+            isCheckboxGroup: !0,
+            checkboxGroupValue: o,
+            onGroupChange: N,
+            disabled: m,
+            registerValue: (e) => {
+              c((l) => Array.from(/* @__PURE__ */ new Set([...l, e])));
+            },
+            unRegisterValue: (e) => {
+              c((l) => l.filter((a) => a !== e));
+            }
+          },
+          children: p(f) ? f.map((e) => {
+            const l = n(e) ? e.label : e, a = n(e) ? e.value : e, t = n(e) ? e.icon : void 0;
+            return /* @__PURE__ */ i(
+              S,
+              {
+                disabled: m || n(e) && e.disabled,
+                value: a,
+                icon: t,
+                children: l
+              },
+              a
+            );
+          }) : v
+        }
+      )
+    }
+  );
+}
+T.displayName = "CheckboxGroup";
+export {
+  M as CheckboxGroupContext,
+  T as default
+};

package/checkbox/useCheckbox.js

@@ -0,0 +1,45 @@
+import u from "lodash/isArray";
+import { useState as y, useMemo as m } from "react";
+const k = (c, g) => {
+  const [t, s] = y([...g || []]), { isSelected: n, setValueSelected: p } = m(() => ({
+    isSelected: (l) => t.indexOf(l) > -1,
+    setValueSelected: (l, r) => {
+      const o = u(l) ? l : [l];
+      let e;
+      r ? e = [...t, ...o] : e = t.filter((d) => o.indexOf(d) === -1), s(Array.from(new Set(e)));
+    }
+  }), [t]), { selectAll: x, unSelectAll: P, toggle: V, isAllSelected: h, isPartialSelected: w } = m(() => {
+    const S = () => {
+      s(c);
+    }, f = () => {
+      s([]);
+    }, l = (e = c) => {
+      const d = u(e) ? e : [e], i = [...t];
+      d.forEach((A) => {
+        const a = i.indexOf(A);
+        a > -1 ? i.splice(a, 1) : i.push(A);
+      }), s(i);
+    }, r = () => c.every((e) => n(e));
+    return {
+      selectAll: S,
+      unSelectAll: f,
+      toggle: l,
+      isAllSelected: r,
+      isPartialSelected: () => c.some((e) => n(e)) && !r()
+    };
+  }, [t, c, n]);
+  return {
+    selected: t,
+    setSelected: s,
+    setValueSelected: p,
+    selectAll: x,
+    unSelectAll: P,
+    toggle: V,
+    isSelected: n,
+    isAllSelected: h,
+    isPartialSelected: w
+  };
+};
+export {
+  k as default
+};

package/collapse/Collapse.js

@@ -0,0 +1,90 @@
+import { jsx as r } from "react/jsx-runtime";
+import z from "@unicom-cloud/icons/IconUiCaretLeft";
+import u from "@unicom-cloud/icons/IconUiCaretRight";
+import F from "lodash/isFunction";
+import M, { createContext as O, useContext as T } from "react";
+/* empty css                  */
+import "../config-provider/ConfigProvider.js";
+import U from "../hooks/useMergeProps.js";
+import V from "../hooks/useMergeValue.js";
+import j from "@unicom-cloud/utils/class-name";
+import H from "../utils/omit.js";
+import L from "./Item.js";
+import { ConfigContext as q } from "../config-provider/context.js";
+const f = (s, a) => {
+  const i = [].concat(s);
+  return a ? i.slice(0, 1) : i;
+}, B = {
+  bordered: !0,
+  lazyload: !0,
+  expandIconPosition: "left"
+}, D = O({
+  expandIconPosition: "left",
+  expandIcon: /* @__PURE__ */ r(u, {}),
+  activeKeys: [],
+  onToggle: () => {
+  }
+});
+function E(s, a) {
+  const { getPrefixCls: i, componentConfig: c, rtl: C } = T(q), e = U(
+    s,
+    B,
+    c == null ? void 0 : c.Collapse
+  ), [o, v] = V([], {
+    defaultValue: "defaultActiveKey" in e ? f(e.defaultActiveKey, e.accordion) : void 0,
+    value: "activeKey" in e ? f(e.activeKey, e.accordion) : void 0
+  }), {
+    children: g,
+    className: y,
+    style: I,
+    bordered: K,
+    lazyload: P,
+    expandIcon: h,
+    expandIconPosition: d,
+    destroyOnHide: A,
+    accordion: R,
+    triggerRegion: N,
+    onChange: p,
+    ...b
+  } = e, l = i("collapse"), $ = (n, w) => {
+    let t = [...o || []];
+    const m = o == null ? void 0 : o.indexOf(n);
+    m > -1 ? t.splice(m, 1) : R ? t = [n] : t.push(n), "activeKey" in e || v(t), F(p) && p(n, t, w);
+  };
+  return /* @__PURE__ */ r(
+    D.Provider,
+    {
+      value: {
+        activeKeys: o,
+        triggerRegion: N,
+        lazyload: P,
+        destroyOnHide: A,
+        expandIconPosition: d,
+        onToggle: $,
+        expandIcon: "expandIcon" in e ? h : d === "right" ? /* @__PURE__ */ r(z, {}) : /* @__PURE__ */ r(u, {})
+      },
+      children: /* @__PURE__ */ r(
+        "div",
+        {
+          ref: a,
+          ...H(b, ["activeKey", "defaultActiveKey"]),
+          className: j(
+            l,
+            `${l}-${K ? "border" : "borderless"}`,
+            { [`${l}-rtl`]: C },
+            y
+          ),
+          style: I,
+          children: g
+        }
+      )
+    }
+  );
+}
+const G = M.forwardRef(E), x = G;
+x.displayName = "Collapse";
+x.Item = L;
+export {
+  D as CollapseContext,
+  x as default
+};

package/collapse/Item.js

@@ -0,0 +1,165 @@
+import { jsxs as y, jsx as r } from "react/jsx-runtime";
+import { Transition as T } from "@unicom-cloud/react-transition-group";
+import w, { useContext as $, useRef as L } from "react";
+/* empty css                  */
+import "../config-provider/ConfigProvider.js";
+import j from "../hooks/useKeyboardEvent.js";
+import K from "../IconHover.js";
+import c from "@unicom-cloud/utils/class-name";
+import { off as z, on as S } from "../utils/dom.js";
+import { CollapseContext as q } from "./Collapse.js";
+import { ConfigContext as A } from "../config-provider/context.js";
+function B(d, v) {
+  var u;
+  const { getPrefixCls: E } = $(A), t = $(q), C = j(), {
+    children: I,
+    name: l,
+    header: N,
+    className: b,
+    style: H,
+    contentStyle: R,
+    extra: f,
+    disabled: i,
+    destroyOnHide: p,
+    expandIcon: O,
+    showExpandIcon: k = !0,
+    ...P
+  } = d, o = L(null), n = E("collapse-item"), s = ((u = t.activeKeys) == null ? void 0 : u.indexOf(l)) > -1, h = k ? "expandIcon" in d ? O : t.expandIcon : null, m = (e, a) => {
+    var x;
+    if (i) return;
+    const { triggerRegion: g } = t;
+    (a === (g === "icon" ? 0 : g === "header" ? 1 : 2) || // When triggerRegion is set to header, clicking icon should trigger onChange as well
+    g === "header" && [0, 1].includes(a)) && ((x = t.onToggle) == null || x.call(t, l, e));
+  };
+  return /* @__PURE__ */ y(
+    "div",
+    {
+      ref: v,
+      ...P,
+      className: c(
+        n,
+        {
+          [`${n}-active`]: s,
+          [`${n}-no-icon`]: !h,
+          [`${n}-disabled`]: i
+        },
+        b
+      ),
+      style: H,
+      children: [
+        /* @__PURE__ */ y(
+          "div",
+          {
+            role: "button",
+            "aria-disabled": i,
+            "aria-expanded": s,
+            "data-active-region": t.triggerRegion,
+            tabIndex: i ? -1 : 0,
+            className: c(
+              `${n}-header`,
+              `${n}-header-${t.expandIconPosition}`,
+              {
+                [`${n}-header-disabled`]: i
+              }
+            ),
+            onClick: (e) => m(e, 2),
+            ...C({
+              onPressEnter: (e) => {
+                !i && t.onToggle(l, e);
+              }
+            }),
+            children: [
+              h && /* @__PURE__ */ r(
+                K,
+                {
+                  prefix: n,
+                  disabled: i,
+                  className: c({
+                    [`${n}-icon-hover-right`]: t.expandIconPosition === "right",
+                    [`${n}-header-icon-right`]: t.expandIconPosition === "right"
+                  }),
+                  onClick: (e) => m(e, 0),
+                  children: /* @__PURE__ */ r(
+                    "span",
+                    {
+                      className: c(`${n}-header-icon`, {
+                        [`${n}-header-icon-down`]: s
+                      }),
+                      children: h
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ r(
+                "div",
+                {
+                  className: `${n}-header-title`,
+                  onClick: (e) => m(e, 1),
+                  children: N
+                }
+              ),
+              f && /* @__PURE__ */ r(
+                "div",
+                {
+                  className: `${n}-header-extra`,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                  },
+                  children: f
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ r(
+          T,
+          {
+            nodeRef: o,
+            in: s,
+            addEndListener: (e, a) => {
+              z(e, "transitionend", a), S(e, "transitionend", a);
+            },
+            mountOnEnter: "destroyOnHide" in d ? p : t.destroyOnHide || t.lazyload,
+            unmountOnExit: "destroyOnHide" in d ? p : t.destroyOnHide,
+            onEnter: (e) => {
+              o.current.style.height = 0, o.current.style.display = "block";
+            },
+            onEntering: (e) => {
+              o.current.style.height = `${o.current.scrollHeight}px`;
+            },
+            onEntered: (e) => {
+              o.current.style.height = "auto";
+            },
+            onExit: (e) => {
+              o.current.style.display = "block", o.current.style.height = `${o.current.offsetHeight}px`, o.current.offsetHeight;
+            },
+            onExiting: (e) => {
+              o.current.style.height = 0;
+            },
+            onExited: (e) => {
+              o.current.style.display = "none", o.current.style.height = "auto";
+            },
+            children: /* @__PURE__ */ r(
+              "div",
+              {
+                ref: o,
+                role: "region",
+                className: c(`${n}-content`, {
+                  [`${n}-content-expanded`]: s
+                }),
+                children: /* @__PURE__ */ r("div", { style: R, className: `${n}-content-box`, children: I })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+const D = w.forwardRef(
+  B
+);
+D.displayName = "CollapseItem";
+export {
+  D as default
+};

package/color-picker/ControlBar.js

@@ -0,0 +1,64 @@
+import { jsx as o } from "react/jsx-runtime";
+import { useContext as $ } from "react";
+/* empty css                  */
+import "../config-provider/ConfigProvider.js";
+import s from "@unicom-cloud/utils/class-name";
+import { useControlBlock as u } from "./hooks/useControlBlock.js";
+import { ConfigContext as C } from "../config-provider/context.js";
+const j = ({
+  x: e,
+  type: i = "hue",
+  color: n,
+  onChange: m,
+  style: t
+}) => {
+  const { getPrefixCls: d } = $(C), r = d("color-picker"), { r: f, g: b, b: h } = n.rgb, { blockRef: a, handlerRef: g, onMouseDown: l } = u({
+    value: [e, 0],
+    onChange: (p) => m(p[0])
+  }), c = () => /* @__PURE__ */ o(
+    "div",
+    {
+      ref: g,
+      style: {
+        left: `${e * 100}%`
+      },
+      className: `${r}-handler`,
+      children: /* @__PURE__ */ o(
+        "div",
+        {
+          className: `${r}-handler-center`,
+          style: { backgroundColor: n.string }
+        }
+      )
+    }
+  );
+  return i === "alpha" ? /* @__PURE__ */ o("div", { className: `${r}-control-bar-bg`, children: /* @__PURE__ */ o(
+    "div",
+    {
+      ref: a,
+      className: s(
+        `${r}-control-bar`,
+        `${r}-control-bar-alpha`,
+        `${r}-control-bar-alpha`
+      ),
+      style: {
+        background: `linear-gradient(to right, rgba(0, 0, 0, 0), rgb(${f}, ${b}, ${h}))`,
+        ...t
+      },
+      onMouseDown: l,
+      children: c()
+    }
+  ) }) : /* @__PURE__ */ o(
+    "div",
+    {
+      ref: a,
+      style: t,
+      className: s(`${r}-control-bar`, `${r}-control-bar-hue`),
+      onMouseDown: l,
+      children: c()
+    }
+  );
+};
+export {
+  j as ControlBar
+};

package/color-picker/InputAlpha.js

@@ -0,0 +1,24 @@
+import { jsx as m } from "react/jsx-runtime";
+import { useContext as e } from "react";
+/* empty css                  */
+import "../config-provider/ConfigProvider.js";
+import p from "../InputNumber.js";
+import { ConfigContext as s } from "../config-provider/context.js";
+const c = ({ value: o, onChange: t }) => {
+  const { getPrefixCls: r } = e(s), n = r("color-picker");
+  return /* @__PURE__ */ m(
+    p,
+    {
+      className: `${n}-input-alpha`,
+      size: "mini",
+      min: 0,
+      max: 100,
+      value: Math.round(o * 100),
+      suffix: "%",
+      onChange: (i) => t(i / 100)
+    }
+  );
+};
+export {
+  c as InputAlpha
+};

package/color-picker/InputHex.js

@@ -0,0 +1,59 @@
+import { jsxs as v, jsx as m } from "react/jsx-runtime";
+import c from "@unicom-cloud/utils/tinycolor";
+import { useContext as I, useState as j, useEffect as D } from "react";
+/* empty css                  */
+import "../config-provider/ConfigProvider.js";
+/* empty css                         */
+/* empty css                        */
+import f from "../input/Input.js";
+import { InputAlpha as H } from "./InputAlpha.js";
+import { ConfigContext as P } from "../config-provider/context.js";
+const y = ({
+  color: o,
+  alpha: u,
+  onHsvChange: x,
+  onAlphaChange: h,
+  disabledAlpha: l
+}) => {
+  const { getPrefixCls: g } = I(P), r = g("color-picker"), [n, s] = j(o.hex);
+  D(() => {
+    o.hex !== n && s(o.hex);
+  }, [o]);
+  const i = (e) => {
+    var a;
+    const t = ((a = e.match(/[a-fA-F0-9]*/g)) == null ? void 0 : a.join("")) ?? "";
+    t !== n && s(t.toUpperCase());
+  }, p = () => {
+    let e = new c(n);
+    e.ok || (e = new c({
+      r: 255,
+      g: 0,
+      b: 0
+    }));
+    const t = e.toHsv_();
+    x(t);
+  }, C = (e) => {
+    let t = e.clipboardData.getData("Text");
+    t.startsWith("#") && (t = t.slice(1)), i(t), e.preventDefault();
+  };
+  return /* @__PURE__ */ v(f.Group, { className: `${r}-input-group`, compact: !0, children: [
+    /* @__PURE__ */ m(
+      f,
+      {
+        className: `${r}-input-hex`,
+        prefix: "#",
+        size: "mini",
+        maxLength: 6,
+        value: n,
+        onChange: i,
+        onBlur: p,
+        onPressEnter: p,
+        onPaste: C
+      }
+    ),
+    !l && /* @__PURE__ */ m(H, { value: u, onChange: h })
+  ] });
+};
+export {
+  y as InputHex
+};

package/color-picker/InputRgb.js

@@ -0,0 +1,66 @@
+import { jsxs as h, jsx as r } from "react/jsx-runtime";
+import f from "@unicom-cloud/utils/tinycolor";
+import { useContext as x } from "react";
+/* empty css                  */
+import "../config-provider/ConfigProvider.js";
+/* empty css                         */
+/* empty css                        */
+import b from "../input/Input.js";
+import m from "../InputNumber.js";
+import { InputAlpha as I } from "./InputAlpha.js";
+import { ConfigContext as d } from "../config-provider/context.js";
+const R = ({
+  color: p,
+  alpha: s,
+  onHsvChange: u,
+  onAlphaChange: C,
+  disabledAlpha: a
+}) => {
+  const { getPrefixCls: g } = x(d), c = g("color-picker"), n = (o) => {
+    const l = new f({
+      r: o.r,
+      g: o.g,
+      b: o.b
+    }).toHsv_();
+    u(l);
+  }, { r: t, g: i, b: e } = p.rgb;
+  return /* @__PURE__ */ h(b.Group, { className: `${c}-input-group`, compact: !0, children: [
+    /* @__PURE__ */ r(
+      m,
+      {
+        size: "mini",
+        min: 0,
+        max: 255,
+        hideControl: !0,
+        value: t,
+        onChange: (o) => n({ r: o, g: i, b: e })
+      }
+    ),
+    /* @__PURE__ */ r(
+      m,
+      {
+        size: "mini",
+        min: 0,
+        max: 255,
+        hideControl: !0,
+        value: i,
+        onChange: (o) => n({ r: t, g: o, b: e })
+      }
+    ),
+    /* @__PURE__ */ r(
+      m,
+      {
+        size: "mini",
+        min: 0,
+        max: 255,
+        hideControl: !0,
+        value: e,
+        onChange: (o) => n({ r: t, g: i, b: o })
+      }
+    ),
+    !a && /* @__PURE__ */ r(I, { value: s, onChange: C })
+  ] });
+};
+export {
+  R as InputRgb
+};

package/color-picker/Palette.js

@@ -0,0 +1,36 @@
+import { jsx as s } from "react/jsx-runtime";
+import u from "@unicom-cloud/utils/tinycolor";
+import { useContext as d, useMemo as h } from "react";
+/* empty css                  */
+import "../config-provider/ConfigProvider.js";
+import { useControlBlock as g } from "./hooks/useControlBlock.js";
+import { ConfigContext as x } from "../config-provider/context.js";
+const M = ({ color: l, onChange: c }) => {
+  const { getPrefixCls: i } = d(x), e = i("color-picker"), { h: r, s: t, v: n } = l.hsv, { blockRef: m, handlerRef: f, onMouseDown: p } = g({
+    value: [t, 1 - n],
+    onChange: (o) => c(o[0], 1 - o[1])
+  }), a = h(() => new u({ h: r * 360, s: 100, v: 100 }).toRgbString(), [r]), C = () => /* @__PURE__ */ s(
+    "div",
+    {
+      ref: f,
+      className: `${e}-handler`,
+      style: {
+        top: `${(1 - n) * 100}%`,
+        left: `${t * 100}%`
+      }
+    }
+  );
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      ref: m,
+      className: `${e}-palette`,
+      style: { backgroundColor: a },
+      onMouseDown: p,
+      children: C()
+    }
+  );
+};
+export {
+  M as Palette
+};