@unicom-cloud/ui 0.8.99 → 0.8.101

package/splitter/SplitBar.js

@@ -0,0 +1,157 @@
+import { jsxs as H, jsx as l } from "react/jsx-runtime";
+import J from "@unicom-cloud/icons/IconUiDown";
+import K from "@unicom-cloud/icons/IconUiLeft";
+import Q from "@unicom-cloud/icons/IconUiRight";
+import W from "@unicom-cloud/icons/IconUiUp";
+import x from "react";
+import "../config-provider/ConfigProvider.js";
+import d from "@unicom-cloud/utils/class-name";
+import y from "./hooks/useEvent.js";
+import Z from "../config-provider/context.js";
+function L(f) {
+  return typeof f == "number" && !Number.isNaN(f) ? Math.round(f) : 0;
+}
+const le = (f) => {
+  const { getPrefixCls: z } = x.useContext(Z), {
+    prefixCls: I,
+    vertical: n,
+    index: s,
+    active: T,
+    ariaNow: $,
+    ariaMin: C,
+    ariaMax: E,
+    resizable: M,
+    startCollapsible: j,
+    endCollapsible: k,
+    onOffsetStart: O,
+    onOffsetUpdate: N,
+    onOffsetEnd: b,
+    onCollapse: S,
+    lazy: a,
+    containerSize: m
+  } = f, e = z?.("bar", I), [r, v] = x.useState(
+    null
+  ), [h, P] = x.useState(0), A = n ? 0 : h, D = n ? h : 0, R = (t) => {
+    M && t.currentTarget && (v([t.pageX, t.pageY]), O(s));
+  }, V = (t) => {
+    if (M && t.touches.length === 1) {
+      const o = t.touches[0];
+      v([o.pageX, o.pageY]), O(s);
+    }
+  }, B = (t) => {
+    const o = m * $ / 100, c = o + t, w = Math.max(0, m * C / 100), i = Math.min(m, m * E / 100);
+    return Math.max(w, Math.min(i, c)) - o;
+  }, U = y((t, o) => {
+    const c = B(
+      n ? o : t
+    );
+    P(c);
+  }), X = y(() => {
+    N(s, A, D, !0), P(0), b(!0);
+  });
+  x.useEffect(() => {
+    if (r) {
+      const t = (i) => {
+        const { pageX: u, pageY: g } = i, p = u - r[0], Y = g - r[1];
+        a ? U(p, Y) : N(s, p, Y);
+      }, o = () => {
+        a ? X() : b(), v(null);
+      }, c = (i) => {
+        if (i.touches.length === 1) {
+          const u = i.touches[0], g = u.pageX - r[0], p = u.pageY - r[1];
+          a ? U(g, p) : N(s, g, p);
+        }
+      }, w = () => {
+        a ? X() : b(), v(null);
+      };
+      return window.addEventListener("touchmove", c), window.addEventListener("touchend", w), window.addEventListener("mousemove", t), window.addEventListener("mouseup", o), () => {
+        window.removeEventListener("mousemove", t), window.removeEventListener("mouseup", o), window.removeEventListener("touchmove", c), window.removeEventListener("touchend", w);
+      };
+    }
+  }, [
+    r,
+    a,
+    n,
+    s,
+    m,
+    $,
+    C,
+    E
+  ]);
+  const q = {
+    [`--${e}-preview-offset`]: `${h}px`
+  }, F = n ? W : K, G = n ? J : Q;
+  return /* @__PURE__ */ H(
+    "div",
+    {
+      className: e,
+      role: "separator",
+      "aria-valuenow": L($),
+      "aria-valuemin": L(C),
+      "aria-valuemax": L(E),
+      children: [
+        a && /* @__PURE__ */ l(
+          "div",
+          {
+            className: d(`${e}-preview`, {
+              [`${e}-preview-active`]: !!h
+            }),
+            style: q
+          }
+        ),
+        /* @__PURE__ */ l(
+          "div",
+          {
+            className: d(`${e}-dragger`, {
+              [`${e}-dragger-disabled`]: !M,
+              [`${e}-dragger-active`]: T
+            }),
+            onMouseDown: R,
+            onTouchStart: V
+          }
+        ),
+        j && /* @__PURE__ */ l(
+          "div",
+          {
+            className: d(
+              `${e}-collapse-bar`,
+              `${e}-collapse-bar-start`
+            ),
+            onClick: () => S(s, "start"),
+            children: /* @__PURE__ */ l(
+              F,
+              {
+                className: d(
+                  `${e}-collapse-icon`,
+                  `${e}-collapse-start`
+                )
+              }
+            )
+          }
+        ),
+        k && /* @__PURE__ */ l(
+          "div",
+          {
+            className: d(
+              `${e}-collapse-bar`,
+              `${e}-collapse-bar-end`
+            ),
+            onClick: () => S(s, "end"),
+            children: /* @__PURE__ */ l(
+              G,
+              {
+                className: d(
+                  `${e}-collapse-icon`,
+                  `${e}-collapse-end`
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  le as default
+};

package/splitter/Splitter.js

@@ -0,0 +1,135 @@
+import { jsxs as I, jsx as h } from "react/jsx-runtime";
+import p, { useState as re, useRef as ie, useEffect as ae, useImperativeHandle as le } from "react";
+import "../config-provider/ConfigProvider.js";
+import ce from "../components/common/hooks/useMergeProps.js";
+import fe from "@unicom-cloud/utils/class-name";
+import { resizeObserver as me } from "../components/common/utils/resizeObserver.js";
+import m from "./hooks/useEvent.js";
+import pe from "./hooks/useItems.js";
+import ue from "./hooks/useResizable.js";
+import ze from "./hooks/useResize.js";
+import Se from "./hooks/useSizes.js";
+import { InternalPanel as Ce } from "./Panel.js";
+import de from "./SplitBar.js";
+import he from "../config-provider/context.js";
+const ge = {
+  layout: "horizontal"
+};
+function Me(N, P) {
+  const { getPrefixCls: O, componentConfig: x, rtl: l } = p.useContext(he), y = ce(
+    N,
+    ge,
+    x?.Splitter
+  ), {
+    prefixCls: $,
+    className: k,
+    style: H,
+    layout: g = "horizontal",
+    children: U,
+    onResizeStart: j,
+    onResize: M,
+    onResizeEnd: u,
+    lazy: w,
+    ...B
+  } = y, n = O?.("splitter", $), c = g === "vertical", r = pe(U), [z, D] = re(), o = ie(null), V = () => {
+    const t = o.current?.offsetWidth, e = o.current?.offsetHeight, s = c ? e : t;
+    s !== 0 && D(s);
+  }, [
+    W,
+    S,
+    C,
+    R,
+    b,
+    F
+  ] = Se(r, z), v = ue(r, S, l), [_, q, A, G, E] = ze(
+    r,
+    v,
+    C,
+    z,
+    F,
+    l
+  ), J = m((t) => {
+    _(t), j?.(S);
+  }), K = m(
+    (t, e, s) => {
+      const a = q(t, e);
+      s ? u?.(a) : M?.(a);
+    }
+  ), L = m((t) => {
+    A(), t || u?.(S);
+  }), Q = m(
+    (t, e) => {
+      const s = G(t, e);
+      M?.(s), u?.(s);
+    }
+  ), T = fe(
+    n,
+    k,
+    `${n}-${g}`,
+    l && [`${n}-rtl`]
+  ), i = p.useMemo(() => {
+    const t = [];
+    let e = 0;
+    for (let s = 0; s < r.length; s += 1)
+      e += C[s], t.push(e);
+    return t;
+  }, [C]);
+  return ae(() => {
+    const t = me([o.current], () => {
+      V();
+    });
+    return () => {
+      t();
+    };
+  }, [o.current]), le(P, () => ({ dom: o.current })), /* @__PURE__ */ I("div", { style: H, className: T, ref: o, ...B, children: [
+    r.map((t, e) => {
+      const s = /* @__PURE__ */ h(
+        Ce,
+        {
+          ...t,
+          prefixCls: n,
+          size: W[e]
+        }
+      );
+      let a = null;
+      const f = v[e];
+      if (f) {
+        const X = (i[e - 1] || 0) + R[e], Y = (i[e + 1] || 100) - b[e + 1], Z = (i[e - 1] || 0) + b[e], ee = (i[e + 1] || 100) - R[e + 1];
+        a = /* @__PURE__ */ h(
+          de,
+          {
+            lazy: w,
+            index: e,
+            active: E === e,
+            prefixCls: n,
+            vertical: c,
+            resizable: f.resizable,
+            ariaNow: i[e] * 100,
+            ariaMin: Math.max(X, Y) * 100,
+            ariaMax: Math.min(Z, ee) * 100,
+            startCollapsible: f.startCollapsible,
+            endCollapsible: f.endCollapsible,
+            onOffsetStart: J,
+            onOffsetUpdate: (te, se, ne, oe) => {
+              let d = c ? ne : se;
+              l && !c && (d = -d), K(te, d, oe);
+            },
+            onOffsetEnd: L,
+            onCollapse: Q,
+            containerSize: z || 0
+          }
+        );
+      }
+      return /* @__PURE__ */ I(p.Fragment, { children: [
+        s,
+        a
+      ] }, `split-panel-${e}`);
+    }),
+    typeof E == "number" && /* @__PURE__ */ h("div", { "aria-hidden": !0, className: `${n}-mask` })
+  ] });
+}
+const Re = p.forwardRef(Me);
+process.env.NODE_ENV !== "production" && (Re.displayName = "Splitter");
+export {
+  Re as default
+};

package/splitter/hooks/useEvent.js

@@ -0,0 +1,12 @@
+import n from "react";
+function c(r) {
+  const e = n.useRef();
+  return e.current = r, n.useCallback(function(...t) {
+    if (!e.current)
+      throw new Error("Callback is not defined");
+    return e.current.apply(void 0, t);
+  }, []);
+}
+export {
+  c as default
+};

package/splitter/hooks/useItems.js

@@ -0,0 +1,26 @@
+import o from "react";
+import { toArray as i } from "../../components/common/utils/toArray.js";
+function p(t) {
+  if (t && typeof t == "object")
+    return t;
+  const e = !!t;
+  return {
+    start: e,
+    end: e
+  };
+}
+function f(t) {
+  return o.useMemo(
+    () => i(t).filter((r) => o.isValidElement(r)).map((r) => {
+      const { props: s } = r, { collapsible: n, ...m } = s;
+      return {
+        ...m,
+        collapsible: p(n)
+      };
+    }),
+    [t]
+  );
+}
+export {
+  f as default
+};

package/splitter/hooks/useResizable.js

@@ -0,0 +1,26 @@
+import v from "react";
+function I(l, s, o) {
+  return v.useMemo(() => {
+    const r = [];
+    for (let e = 0; e < l.length - 1; e += 1) {
+      const p = l[e], u = l[e + 1], t = s[e], n = s[e + 1], {
+        resizable: z = !0,
+        min: d,
+        collapsible: a
+      } = p, {
+        resizable: C = !0,
+        min: f,
+        collapsible: i
+      } = u, m = z && C && (t !== 0 || !d) && (n !== 0 || !f), b = a.end && t > 0 || i.start && n === 0 && t > 0, c = i.start && n > 0 || a.end && t === 0 && n > 0;
+      r[e] = {
+        resizable: m,
+        startCollapsible: !!(o ? c : b),
+        endCollapsible: !!(o ? b : c)
+      };
+    }
+    return r;
+  }, [s, l, o]);
+}
+export {
+  I as default
+};

package/splitter/hooks/useResize.js

@@ -0,0 +1,68 @@
+import x from "react";
+import { getPtg as q } from "./useSizes.js";
+function J(b, v, P, j, C, k) {
+  const i = b.map((t) => [t.min, t.max]), S = j || 0, M = (t) => t * S;
+  function a(t, f) {
+    return typeof t == "string" ? M(q(t)) : t ?? f;
+  }
+  const [O, y] = x.useState([]), I = x.useRef([]), [g, p] = x.useState(null), U = () => P.map(M);
+  return [
+    (t) => {
+      y(U()), p({
+        index: t,
+        confirmed: !1
+      });
+    },
+    (t, f) => {
+      let n = null;
+      if ((!g || !g.confirmed) && f !== 0) {
+        if (f > 0)
+          n = t, p({
+            index: t,
+            confirmed: !0
+          });
+        else
+          for (let r = t; r >= 0; r -= 1)
+            if (O[r] > 0 && v[r].resizable) {
+              n = r, p({
+                index: r,
+                confirmed: !0
+              });
+              break;
+            }
+      }
+      const c = n ?? g?.index ?? t, e = [...O], s = c + 1, l = a(i[c][0], 0), d = a(i[s][0], 0), u = a(
+        i[c][1],
+        S
+      ), m = a(
+        i[s][1],
+        S
+      );
+      let o = f;
+      return e[c] + o < l && (o = l - e[c]), e[s] - o < d && (o = e[s] - d), e[c] + o > u && (o = u - e[c]), e[s] - o > m && (o = e[s] - m), e[c] += o, e[s] -= o, C(e), e;
+    },
+    () => {
+      p(null);
+    },
+    (t, f) => {
+      const n = U(), c = k ? f === "start" ? "end" : "start" : f, e = c === "start" ? t : t + 1, s = c === "start" ? t + 1 : t, l = n[e], d = n[s];
+      if (l !== 0 && d !== 0)
+        n[e] = 0, n[s] += l, I.current[t] = l;
+      else {
+        const u = l + d, m = a(i[e][0], 0), o = a(
+          i[e][1],
+          S
+        ), r = a(i[s][0], 0), E = a(
+          i[s][1],
+          S
+        ), L = Math.max(m, u - E), T = Math.min(o, u - r), R = r || (T - L) / 2, z = I.current[t], h = u - z;
+        z && z <= E && z >= r && h <= o && h >= m ? (n[s] = z, n[e] = h) : (n[e] -= R, n[s] += R);
+      }
+      return C(n), n;
+    },
+    g?.index
+  ];
+}
+export {
+  J as default
+};

package/splitter/hooks/useSizes.js

@@ -0,0 +1,60 @@
+import i from "react";
+function l(s) {
+  return Number(s.slice(0, -1)) / 100;
+}
+function z(s) {
+  return typeof s == "string" && s.endsWith("%");
+}
+function C(s, u) {
+  const S = s.map((e) => e.size), c = s.length, o = u || 0, M = (e) => e * o, [d, x] = i.useState(() => s.map((e) => e.defaultSize)), a = i.useMemo(() => {
+    const e = [];
+    for (let r = 0; r < c; r += 1)
+      e[r] = S[r] ?? d[r];
+    return e;
+  }, [c, d, S]), p = i.useMemo(() => {
+    let e = [], r = 0;
+    for (let n = 0; n < c; n += 1) {
+      const t = a[n];
+      if (z(t))
+        e[n] = l(t);
+      else if (t || t === 0) {
+        const g = Number(t);
+        Number.isNaN(g) || (e[n] = g / o);
+      } else
+        r += 1, e[n] = void 0;
+    }
+    const f = e.reduce((n, t) => n + (t || 0), 0);
+    if (f > 1 || !r) {
+      const n = 1 / f;
+      e = e.map((t) => t === void 0 ? 0 : t * n);
+    } else {
+      const n = (1 - f) / r;
+      e = e.map((t) => t === void 0 ? n : t);
+    }
+    return e;
+  }, [a, o]), m = i.useMemo(
+    () => p.map(M),
+    [p, o]
+  ), P = i.useMemo(
+    () => s.map((e) => z(e.min) ? l(e.min) : (e.min || 0) / o),
+    [s, o]
+  ), N = i.useMemo(
+    () => s.map((e) => z(e.max) ? l(e.max) : (e.max || o) / o),
+    [s, o]
+  );
+  return [
+    i.useMemo(
+      () => u ? m : a,
+      [m, u]
+    ),
+    m,
+    p,
+    P,
+    N,
+    x
+  ];
+}
+export {
+  C as default,
+  l as getPtg
+};

package/splitter/index.js

@@ -1,117 +1,8 @@
-import { jsxs as k, jsx as f } from "react/jsx-runtime";
-import { useState as P, useRef as m, useCallback as i, useEffect as C } from "react";
-const I = {
-  direction: "horizontal",
-  initialSize: 0.5,
-  minSize: "10%",
-  maxSize: "90%",
-  gutterSize: 8,
-  disabled: !1
-}, A = (b) => {
-  const {
-    direction: e,
-    initialSize: D,
-    minSize: M,
-    maxSize: E,
-    gutterSize: c,
-    gutterStyle: W,
-    disabled: a,
-    onDragStart: h,
-    onDragEnd: z,
-    onDrag: p,
-    firstPane: L,
-    secondPane: N,
-    style: H,
-    className: R
-  } = { ...I, ...b }, [o, j] = P(D), [r, S] = P(!1), n = m(null), g = m(0), v = m(0), y = i(
-    (t) => {
-      if (typeof t == "string") {
-        if (t.endsWith("%"))
-          return parseFloat(t) / 100;
-        if (t.endsWith("px") && n.current) {
-          const w = parseFloat(t), d = e === "horizontal" ? n.current.offsetWidth : n.current.offsetHeight;
-          return w / d;
-        }
-      }
-      return t;
-    },
-    [e]
-  ), x = y(M), $ = y(E), F = i(
-    (t) => {
-      a || (S(!0), g.current = e === "horizontal" ? t.clientX : t.clientY, v.current = o, document.body.style.cursor = e === "horizontal" ? "col-resize" : "row-resize", document.body.style.userSelect = "none", h?.());
-    },
-    [e, a, o, h]
-  ), l = i(
-    (t) => {
-      if (!r || !n.current) return;
-      const d = (e === "horizontal" ? t.clientX : t.clientY) - g.current, Y = e === "horizontal" ? n.current.offsetWidth : n.current.offsetHeight;
-      let s = v.current + d / Y;
-      s = Math.max(x, Math.min($, s)), j(s), p?.(s);
-    },
-    [r, e, x, $, p]
-  ), u = i(() => {
-    r && (S(!1), document.body.style.cursor = "", document.body.style.userSelect = "", z?.(o));
-  }, [r, o, z]);
-  C(() => (document.addEventListener("mousemove", l), document.addEventListener("mouseup", u), () => {
-    document.removeEventListener("mousemove", l), document.removeEventListener("mouseup", u);
-  }), [l, u]);
-  const V = `calc(${o * 100}% - ${c / 2}px)`, X = `calc(${(1 - o) * 100}% - ${c / 2}px)`;
-  return /* @__PURE__ */ k(
-    "div",
-    {
-      ref: n,
-      className: `splitter-container ${e} ${R}`,
-      style: {
-        display: "flex",
-        flexDirection: e === "horizontal" ? "row" : "column",
-        width: "100%",
-        height: "100%",
-        overflow: "hidden",
-        ...H
-      },
-      children: [
-        /* @__PURE__ */ f(
-          "div",
-          {
-            className: "splitter-pane first",
-            style: {
-              flex: `0 0 ${V}`,
-              overflow: "auto",
-              minWidth: 0,
-              minHeight: 0
-            },
-            children: L
-          }
-        ),
-        /* @__PURE__ */ f(
-          "div",
-          {
-            className: `splitter-gutter ${e} ${r ? "active" : ""} ${a ? "disabled" : ""}`,
-            style: {
-              [e === "horizontal" ? "width" : "height"]: c,
-              ...W
-            },
-            onMouseDown: F
-          }
-        ),
-        /* @__PURE__ */ f(
-          "div",
-          {
-            className: "splitter-pane second",
-            style: {
-              flex: `0 0 ${X}`,
-              overflow: "auto",
-              minWidth: 0,
-              minHeight: 0
-            },
-            children: N
-          }
-        )
-      ]
-    }
-  );
-};
+import t from "./Panel.js";
+import e from "./Splitter.js";
+const r = e;
+r.Panel = t;
 export {
-  A as Splitter,
-  A as default
+  t as SplitterPanel,
+  r as default
 };