@unicom-cloud/ui 0.8.106 → 0.8.108

package/segmented/index.js

@@ -1,228 +1,279 @@
-import { jsxs as D, jsx as v, Fragment as ne } from "react/jsx-runtime";
-import { forwardRef as re, useContext as oe, useMemo as ie, useState as P, useRef as A, useCallback as se, useEffect as $ } from "react";
+import { jsx as h, jsxs as H, Fragment as $e } from "react/jsx-runtime";
+import { forwardRef as he, useContext as ye, useMemo as ze, useState as xe, useRef as L, useEffect as K, useImperativeHandle as ve } from "react";
 import "../config-provider/ConfigProvider.js";
-import ae from "../components/common/hooks/useMergeProps.js";
-import j from "@unicom-cloud/utils/class-name";
+import "lodash/isEqualWith";
 import "../components/common/utils/is.js";
-import { resizeObserver as le } from "../components/common/utils/resizeObserver.js";
-import ce from "../config-provider/context.js";
-import { isNil as ue, isFunction as de } from "@unicom-cloud/utils/is";
-const fe = {
+import "@unicom-cloud/utils/constant/keyboardCode";
+import "lodash/isNumber";
+import "lodash/merge";
+import "../components/common/utils/dom.js";
+import we from "../components/common/hooks/useForceUpdate.js";
+import "../components/common/hooks/useIntersectionObserver.js";
+import Se from "../components/common/hooks/useMergeProps.js";
+import "../components/common/utils/reactDOM.js";
+import "@unicom-cloud/utils/constant";
+import ke from "../components/common/hooks/useUpdateEffect.js";
+import "lodash/debounce";
+import M from "@unicom-cloud/utils/class-name";
+import Ce from "../config-provider/context.js";
+import { isString as Ie, isNumber as T, isFunction as W } from "@unicom-cloud/utils/is";
+const G = {
+  mini: {
+    root: {
+      fontSize: "var(--pqb-font-size-body-1)",
+      padding: "2px"
+    },
+    option: {
+      size: "var(--pqb-size-mini)",
+      padding: `${10 + 3 * 0}px`
+    }
+  },
+  small: {
+    root: {
+      fontSize: "var(--pqb-font-size-body-3)",
+      padding: "3px"
+    },
+    option: {
+      size: "var(--pqb-size-small)",
+      padding: `${10 + 3 * 1}px`
+    }
+  },
+  medium: {
+    root: {
+      fontSize: "var(--pqb-font-size-body-3)",
+      padding: "4px"
+    },
+    option: {
+      size: "var(--pqb-size-medium)",
+      padding: `${10 + 3 * 2}px`
+    }
+  },
+  large: {
+    root: {
+      fontSize: "var(--pqb-font-size-body-3)",
+      padding: "5px"
+    },
+    option: {
+      size: "var(--pqb-size-large)",
+      padding: `${10 + 3 * 3}px`
+    }
+  }
+}, Ne = {
   options: [],
   size: "medium",
   mode: "default",
   disabled: !1,
   block: !1,
+  split: !1,
   direction: "horizontal",
   showIndicator: !0,
+  keyboardSwitch: !0,
   animationDuration: 300
-}, pe = re(
-  (B, p) => {
-    const { getPrefixCls: E, componentConfig: M, rtl: F } = oe(ce), K = ae(
-      B,
-      fe,
-      M?.Segmented
-    ), {
-      style: L,
-      className: U,
-      options: O = [],
-      defaultValue: c,
-      value: R,
-      size: H,
-      mode: k,
-      disabled: m,
-      block: T,
-      direction: h,
-      showIndicator: C,
-      animationDuration: _,
-      name: x,
-      immediateTrigger: q,
-      onChange: u,
-      ...G
-    } = K, i = ie(() => O.map((e) => typeof e == "string" ? { value: e, label: e } : e), [O]), [J, S] = P(() => c && i.some((e) => e.value === c) ? c : i[0]?.value || ""), [Q, b] = P({}), d = A(null), I = A([]), V = A(!1), r = E?.("segmented"), W = j(
-      r,
-      {
-        [`${r}-block`]: T,
-        [`${r}-disabled`]: m,
-        [`${r}-rtl`]: F,
-        [`${r}-${k}`]: k,
-        [`${r}-${h}`]: h
-      },
-      U
-    ), g = R !== void 0, a = g ? R : J, w = se(() => {
-      if (!C || !d.current) {
-        b((s) => ({ ...s, opacity: 0 }));
-        return;
-      }
-      const e = i.findIndex(
-        (s) => s?.value === a
-      );
-      if (e === -1) {
-        b((s) => ({ ...s, opacity: 0 }));
-        return;
-      }
-      const o = I.current[e];
-      if (!o) {
-        b((s) => ({ ...s, opacity: 0 }));
-        return;
-      }
-      const n = d.current.getBoundingClientRect(), t = o.getBoundingClientRect(), l = h === "vertical" ? {
-        width: t.width,
-        // 垂直模式下宽度撑满
-        top: t.top - n.top,
-        height: t.height
-      } : {
-        width: t.width,
-        left: t.left - n.left,
-        height: t.height
-        // 水平模式下高度撑满
-      };
-      b({
-        ...l,
-        opacity: 1
-      });
-    }, [a, i, C, h]), z = (e, o) => {
-      o || m || (g || S(e), u?.(e));
-    }, X = (e, o) => {
-      if (m) return;
-      const n = i.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 && i[t]?.disabled; )
-        t = (t + (e.key === "ArrowLeft" || e.key === "ArrowUp" ? -1 : 1) + n) % n;
-      const l = i[t]?.value;
-      l && l !== a && (z(l), I.current[t]?.focus());
+};
+function Oe(B, J) {
+  const { getPrefixCls: Q, componentConfig: X, rtl: k } = ye(Ce), f = Se(
+    B,
+    Ne,
+    X?.Segmented
+  ), {
+    style: Y,
+    className: Z,
+    options: C = [],
+    defaultValue: _,
+    value: ee,
+    size: y = "medium",
+    gap: I,
+    mode: z = "default",
+    disabled: u = !1,
+    block: N = !1,
+    split: oe,
+    direction: x = "horizontal",
+    showIndicator: O = !0,
+    keyboardSwitch: q = !0,
+    animationDuration: A = 300,
+    name: D,
+    immediateTrigger: te = !1,
+    onChange: P,
+    ...ie
+  } = f, R = we(), o = Q?.("segmented"), ne = x === "vertical", V = z === "pill", F = "value" in f, r = ze(() => C.map((e) => Ie(e) || T(e) ? { value: e, label: e } : e), [C]), [re, se] = xe(_), U = L(null), v = L([]), a = F ? ee : re, d = G[y] || G.medium;
+  function ae() {
+    let e = I;
+    return "gap" in f ? e = I : e = d.root.padding, e;
+  }
+  const m = ae();
+  function de() {
+    const e = {
+      padding: `0 ${d.option.padding}`,
+      height: `calc(${d.option.size} - ${d.root.padding} * 2)`
     };
-    $(() => {
-      if (!V.current) {
-        V.current = !0;
-        return;
-      }
-      if (!i.some((e) => e.value === a)) {
-        const e = i[0]?.value || "";
-        g || S(e), u?.(e);
-      }
-    }, [i, a, g, u]), $(() => {
-      q && !ue(c) && de(u) && u(c);
-    }, []), $(() => {
-      w();
-    }, [a, i, w]), $(() => {
-      if (!d.current) return;
-      const e = le(
-        [d.current],
-        () => {
-          w();
-        }
-      );
-      return () => {
-        e();
-      };
-    }, [w]);
-    const Y = (e, o) => {
-      if (e.render)
-        return e.render(e, o);
-      const n = !e.label && !!e.icon;
-      return /* @__PURE__ */ D(ne, { children: [
-        e.icon && /* @__PURE__ */ v("span", { className: `${r}-option-icon`, children: e.icon }),
-        !n && e.label && /* @__PURE__ */ v("span", { className: `${r}-option-label`, children: e.label })
-      ] });
+    return V && (e.borderRadius = `calc(${e.height} / 2)`), e;
+  }
+  const b = de();
+  function le() {
+    const e = {
+      gap: m,
+      fontSize: d.root.fontSize,
+      padding: d.root.padding,
+      ...Y
     };
-    return /* @__PURE__ */ D(
-      "div",
+    if (e["--gap"] = T(m) ? `${m}px` : m, V && (e.borderRadius = `calc(${d.option.size} / 2)`), O) {
+      b.borderRadius && (e["--before-border-radius"] = b.borderRadius), A && (e["--before-transition-duration"] = `${A}ms`);
+      const i = r.findIndex((n) => n?.value === a), t = v.current[i];
+      t && (e["--before-width"] = `${t.offsetWidth}px`, e["--before-height"] = `${t.offsetHeight}px`, ne ? e["--before-top"] = `${t.offsetTop}px` : e["--before-left"] = `${t.offsetLeft}px`);
+    }
+    return e;
+  }
+  const pe = le();
+  function g(e, i, t) {
+    const n = t || r.find((p) => p.value === e);
+    F || se(e), W(P) && P(e, n);
+  }
+  function ce(e, i, t, n) {
+    n || u || g(e, i, t);
+  }
+  function fe(e) {
+    if (e.preventDefault(), !q || u)
+      return;
+    const i = r.findIndex((l) => l?.value === a);
+    let t = i;
+    const n = r.length;
+    switch (e.key) {
+      case "ArrowLeft":
+      case "ArrowUp":
+        t = (i - 1 + n) % n;
+        break;
+      case "ArrowRight":
+      case "ArrowDown":
+        t = (i + 1) % n;
+        break;
+      case "Home":
+        t = 0;
+        break;
+      case "End":
+        t = n - 1;
+        break;
+      default:
+        return;
+    }
+    for (; t !== i && r[t]?.disabled; ) {
+      const l = ["ArrowLeft", "ArrowUp"].includes(e.key) ? -1 : 1;
+      t = (t + l + n) % n;
+    }
+    const p = r[t], s = p?.value;
+    s && s !== a && (g(s, t, p), v.current[t]?.focus?.());
+  }
+  function ue(e, i, t) {
+    if (!e) return;
+    const {
+      style: n,
+      className: p,
+      value: s,
+      label: l,
+      icon: w,
+      disabled: me,
+      render: E,
+      ...be
+    } = e, c = s === a, $ = me || u, S = !l && !!w, ge = Object.assign(
+      {},
+      b,
+      S ? { padding: 0, width: b.height } : {},
+      n
+    );
+    return /* @__PURE__ */ H(
+      "button",
       {
-        ref: (e) => {
-          typeof p == "function" ? p(e) : p && (p.current = e), d.current = e;
+        ref: (j) => {
+          v.current[i] = j;
+        },
+        style: ge,
+        className: M(
+          `${o}-option`,
+          `${o}-option-size-${y}`,
+          `${o}-option-mode-${z}`,
+          `${o}-option-direction-${x}`,
+          {
+            [`${o}-option-rtl`]: k,
+            [`${o}-option-block`]: N,
+            [`${o}-option-split`]: oe,
+            [`${o}-option-active`]: c,
+            [`${o}-option-disabled`]: $
+          },
+          S ? `${o}-option-icon-only` : `${o}-option-not-icon-only`,
+          p
+        ),
+        disabled: $,
+        role: "radio",
+        "aria-checked": c,
+        "aria-disabled": $,
+        tabIndex: c ? 0 : -1,
+        onClick: (j) => {
+          ce(s, i, e, $);
         },
-        ...G,
-        style: L,
-        className: W,
-        role: "radiogroup",
+        ...be,
         children: [
-          !Array.isArray(i) || i.length === 0 ? null : i.map((e, o) => {
-            if (!e) return null;
-            const {
-              value: n,
-              label: t,
-              disabled: l,
-              icon: s,
-              render: he,
-              ...Z
-            } = e, f = n === a, y = l || m, ee = !t && !!s, te = [t, n, o].filter(Boolean).join("-");
-            return /* @__PURE__ */ D(
-              "button",
-              {
-                ref: (N) => I.current[o] = N,
-                className: j(
-                  `${r}-option`,
-                  `${r}-option-${H}`,
-                  `${r}-option-${k}`,
-                  {
-                    [`${r}-option-active`]: f,
-                    [`${r}-option-disabled`]: y,
-                    [`${r}-option-icon-only`]: ee
-                  }
-                ),
-                onClick: () => z(n, y),
-                onKeyDown: (N) => X(N, o),
-                disabled: y,
-                role: "radio",
-                "aria-checked": f,
-                "aria-disabled": y,
-                tabIndex: f ? 0 : -1,
-                ...Z,
-                children: [
-                  x && /* @__PURE__ */ v(
-                    "input",
-                    {
-                      type: "radio",
-                      name: x,
-                      value: n,
-                      checked: f,
-                      className: `${r}-input`,
-                      tabIndex: -1,
-                      "aria-hidden": "true"
-                    }
-                  ),
-                  Y(e, f)
-                ]
-              },
-              te
-            );
-          }),
-          C && /* @__PURE__ */ v(
-            "div",
+          !!D && /* @__PURE__ */ h(
+            "input",
             {
-              className: `${r}-indicator`,
-              style: {
-                ...Q,
-                transitionDuration: `${_}ms`
-              }
+              type: "radio",
+              name: D,
+              value: s,
+              checked: c,
+              className: `${o}-input`,
+              tabIndex: -1,
+              "aria-hidden": "true"
             }
-          )
+          ),
+          W(E) ? E(e, c) : /* @__PURE__ */ H($e, { children: [
+            w && /* @__PURE__ */ h("span", { className: `${o}-option-icon`, children: w }),
+            !S && /* @__PURE__ */ h("span", { className: `${o}-option-label`, children: l })
+          ] })
         ]
-      }
+      },
+      `${l}-${s}-${i}`
     );
   }
-);
-pe.displayName = "Segmented";
+  return ke(() => {
+    a === void 0 || r.some((i) => i.value === a) || g(void 0);
+  }, [r]), K(() => {
+    const e = requestAnimationFrame(() => {
+      R();
+    });
+    return () => {
+      cancelAnimationFrame(e);
+    };
+  }, [R, f]), K(() => {
+    te && g(a);
+  }, []), ve(J, () => ({
+    dom: U.current
+  })), /* @__PURE__ */ h(
+    "div",
+    {
+      ref: U,
+      ...ie,
+      style: pe,
+      className: M(
+        o,
+        {
+          [`${o}-rtl`]: k,
+          [`${o}-block`]: N,
+          [`${o}-disabled`]: u,
+          [`${o}-indicator`]: O
+        },
+        `${o}-mode-${z}`,
+        `${o}-direction-${x}`,
+        `${o}-size-${y}`,
+        Z
+      ),
+      role: "radiogroup",
+      onKeyDown: q ? (e) => {
+        fe(e);
+      } : void 0,
+      children: r.map(ue)
+    }
+  );
+}
+const qe = he(Oe);
+qe.displayName = "Segmented";
 export {
-  pe as default
+  qe as default
 };