@unicom-cloud/ui 0.8.99 → 0.8.100

package/splitter/Splitter.js

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