@unicom-cloud/ui 0.8.44 → 0.8.46

package/resize-box/SplitGroup.js

@@ -0,0 +1,204 @@
+import { jsx as B, jsxs as wt } from "react/jsx-runtime";
+import dt from "lodash/isFunction";
+import Mt from "lodash/isNumber";
+import S from "lodash/isPlainObject";
+import Ot from "lodash/isString";
+import W from "lodash/isUndefined";
+import Ct, { forwardRef as xt, useContext as St, useRef as z, useState as b, useEffect as L, useImperativeHandle as zt } from "react";
+/* empty css                  */
+import "../config-provider/ConfigProvider.js";
+import Pt from "@unicom-cloud/utils/class-name";
+import { on as P, off as R } from "../utils/dom.js";
+import Rt from "../utils/omit.js";
+import Nt from "./ResizeTrigger.js";
+import { ConfigContext as pt } from "../config-provider/context.js";
+const D = "horizontal", Y = "vertical";
+function Tt(c, _) {
+  const {
+    panes: a,
+    style: J,
+    className: U,
+    component: Z = "div",
+    direction: q = "horizontal",
+    icon: K,
+    ...Q
+  } = c, { getPrefixCls: tt, rtl: j } = St(pt), et = 1 / a.length, g = z(), y = z(
+    new Array(a.length).fill({
+      moving: !1,
+      startOffset: 0,
+      startPosition: 0
+    })
+  ), nt = z([]), N = z(0), p = z([]), [l, A] = b(
+    new Array(a.length).fill(et)
+  ), [ot, k] = b(!1), [E, rt] = b(
+    new Array(a.length).fill(0)
+  ), [w, st] = b(
+    new Array(Math.max(a.length - 1, 0)).fill({ prev: !1, next: !1 })
+  ), d = tt("resizebox-split-group"), v = q === D, ct = v && j, I = !v, it = Pt(
+    d,
+    `${d}-${v ? D : Y}`,
+    { [`${d}-moving`]: ot },
+    { [`${d}-rtl`]: j },
+    U
+  ), ft = Z, at = () => {
+    let t = [];
+    a.forEach((o) => {
+      const { size: s } = o;
+      W(s) ? t.push(void 0) : t.push(M(s));
+    });
+    const e = t.filter((o) => !o), r = (1 - t.reduce((o, s) => (o || 0) + (s || 0), 0)) / e.length;
+    return t = t.map((o) => W(o) ? r : o), t;
+  }, lt = (t) => {
+    const e = E[t - 1] || 0, n = E[t];
+    return `calc(${l[t] * 100}% - ${(e + n) / 2}px)`;
+  };
+  function M(t) {
+    const e = v ? g.current.offsetWidth : g.current.offsetHeight;
+    if (!t || Mt(t) && t < 0)
+      return 0;
+    const n = Ot(t) ? parseFloat(t) / e : t;
+    return Math.min(n, 1);
+  }
+  const H = (t) => {
+    const e = Math.min(t + 1, a.length - 1), n = l[t] + l[e], r = M(a[t].min) || 0;
+    let o = M(a[t].max) || n;
+    const s = M(a[e].min) || 0;
+    let i = M(a[e].max) || n;
+    return o = Math.min(n - s, o), i = Math.min(n - r, i), {
+      currentMin: r,
+      currentMax: o,
+      nextMin: s,
+      nextMax: i
+    };
+  }, ut = (t, e, n) => {
+    const r = N.current, o = r + 1, s = [...l], i = ct ? -1 : 1, h = l[r], C = l[o], x = h + C, { currentMin: m, currentMax: f } = H(r);
+    let u = t + M(`${(n - e) * i}px`);
+    return u = Math.max(m, u), u = Math.min(f, u), s[r] = u, s[o] = x - u, s;
+  };
+  function mt(t, e) {
+    const { contentRect: n } = t[0], r = n[I ? "height" : "width"], o = [...E];
+    o[e] = r, rt(o);
+  }
+  const gt = (t) => {
+    let e = a[t].collapsible;
+    S(e) || (e = e ? { prev: !0, next: !0 } : {});
+    const { prev: n, next: r } = e;
+    if (!n && !r)
+      return {};
+    if (!w[t])
+      return {};
+    const o = !!n || !n && w[t].next, s = !!r || !r && w[t].prev;
+    return { hasPrev: o, hasNext: s };
+  };
+  function vt(t, e) {
+    var r;
+    (r = c.onMovingStart) == null || r.call(c, e), N.current = e;
+    const n = y.current[e];
+    n.moving = !0, n.startOffset = l[e], n.startPosition = v ? t.pageX : t.pageY, k(!0), P(window, "mousemove", T), P(window, "touchmove", T), P(window, "mouseup", O), P(window, "touchend", O), P(window, "contextmenu", O), document.body.style.cursor = I ? "row-resize" : "col-resize";
+  }
+  function T(t) {
+    var o;
+    const e = N.current, n = y.current[e], r = v ? g.current.offsetWidth : g.current.offsetHeight;
+    if (n.moving) {
+      const s = ut(
+        n.startOffset,
+        n.startPosition,
+        v ? t.pageX : t.pageY
+      );
+      A(s), p.current = s, (o = c == null ? void 0 : c.onMoving) == null || o.call(
+        c,
+        t,
+        s.map((i) => `${i * r}px`),
+        e
+      );
+    }
+  }
+  function O() {
+    var e;
+    const t = N.current;
+    y.current[t].moving = !1, k(!1), R(window, "mousemove", T), R(window, "touchmove", T), R(window, "mouseup", O), R(window, "touchend", O), R(window, "contextmenu", O), document.body.style.cursor = "default", (e = c.onMovingEnd) == null || e.call(c, t);
+  }
+  function F(t, e, n, r) {
+    var G, V;
+    const o = e + 1, s = [...l], i = l[e], h = l[o], C = i + h, x = v ? g.current.offsetWidth : g.current.offsetHeight, { currentMin: m, nextMin: f } = H(e);
+    let u = p.current[e], $ = p.current[o], X = w[e][n];
+    n === "prev" ? (h !== f || $ === f) && (u = m, $ = C - m, X = !0) : (i !== m || u === m) && (u = C - f, $ = f, X = !0), s[e] = u, s[o] = $, (G = c == null ? void 0 : c.onMoving) == null || G.call(
+      c,
+      t,
+      s.map((ht) => `${ht * x}px`),
+      e
+    ), (V = c.onMovingEnd) == null || V.call(c, e), A(s), dt(r) && r(t, e, n, X);
+  }
+  return L(() => {
+    const t = at();
+    A(t), p.current = t;
+  }, [JSON.stringify(a.map((t) => t.size))]), zt(_, () => g.current, []), L(() => {
+    const t = [];
+    l.forEach((e, n) => {
+      const r = { prev: !1, next: !1 }, o = n + 1, { currentMin: s, nextMin: i } = H(n);
+      e === s ? r.prev = !0 : l[o] === i && (r.next = !0), t.push(r);
+    }), st(t);
+  }, [l]), /* @__PURE__ */ B(
+    ft,
+    {
+      ...Rt(Q, [
+        "onMovingStart",
+        "onPaneResize",
+        "onMoving",
+        "onMovingEnd"
+      ]),
+      style: J,
+      className: it,
+      ref: g,
+      children: a.map((t, e) => {
+        const {
+          content: n,
+          disabled: r,
+          trigger: o,
+          resizable: s = !0,
+          collapsible: i = {}
+        } = t, { hasPrev: h, hasNext: C } = gt(e), x = S(i) && S(i.prev) ? i.prev : {}, m = S(i) && S(i.next) ? i.next : {};
+        return /* @__PURE__ */ wt(Ct.Fragment, { children: [
+          /* @__PURE__ */ B(
+            "div",
+            {
+              className: `${d}-pane`,
+              style: { flexBasis: lt(e) },
+              ref: (f) => nt.current[e] = f,
+              children: n
+            }
+          ),
+          !r && e !== a.length - 1 && /* @__PURE__ */ B(
+            Nt,
+            {
+              className: `${d}-trigger`,
+              direction: I ? D : Y,
+              icon: K,
+              onResize: (f) => mt(f, e),
+              onMouseDown: (f) => vt(f, e),
+              collapsible: {
+                prev: h ? {
+                  onClick: (f) => F(f, e, "prev", x.onClick),
+                  icon: x.icon,
+                  collapsed: w[e].prev
+                } : void 0,
+                next: C ? {
+                  onClick: (f) => F(f, e, "next", m.onClick),
+                  icon: m.icon,
+                  collapsed: w[e].next
+                } : void 0
+              },
+              resizable: s,
+              renderChildren: o
+            }
+          )
+        ] }, e);
+      })
+    }
+  );
+}
+const $t = xt(Tt);
+$t.displayName = "ResizeBoxSplitGroup";
+export {
+  $t as default
+};