ono-react-element 0.0.6 → 0.0.8

package/dist/es/Toast-BadlA1yD.js

@@ -0,0 +1,42 @@
+import { j as s } from "./dependencies-CbQbPZZ-.js";
+import { useEffect as e, useRef as t } from "react";
+import { i } from "./InjunctiveBox-D0V-K9Pn.js";
+const a = "_enter_3s92l_32";
+let r = [];
+const c = { success: { light: "#52c41a", dark: "#49aa19" }, error: { light: "#ff4d4f", dark: "#a61d24" }, warning: { light: "#faad14", dark: "#d89614" }, promise: { light: "", dark: "" } }, o = (s2, e2) => c[s2][e2], n = (e2) => {
+  switch (e2) {
+    case "success":
+      return s.jsx("svg", { viewBox: "0 0 1024 1024", focusable: "false", "data-icon": "check-circle", width: "24px", height: "24px", fill: o(e2, "light"), "aria-hidden": "true", children: s.jsx("path", { d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z" }) });
+    case "error":
+      return s.jsx("svg", { viewBox: "0 0 1024 1024", focusable: "false", "data-icon": "close-circle", width: "24px", height: "24px", fill: o(e2, "light"), "aria-hidden": "true", children: s.jsx("path", { d: "M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z" }) });
+    case "warning":
+      return s.jsx("svg", { viewBox: "0 0 1024 1024", focusable: "false", "data-icon": "exclamation-circle", width: "24px", height: "24px", fill: o(e2, "light"), "aria-hidden": "true", children: s.jsx("path", { d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z" }) });
+  }
+}, l = ({ type: i2, speed: r2 = 200, message: c2, duration: o2 = 2e3, className: l2, style: m2, isUseEnterAnimation: d = true, promiseOptions: h, toastList: u, handleDestroy: g }) => {
+  const y = t(null);
+  return e(() => {
+    y.current && (y.current.style.setProperty("--speed", r2 / 1e3 + "s"), d && y.current.classList.add(a), "promise" !== i2 && setTimeout(() => {
+      var _a, _b;
+      (_a = y.current) == null ? void 0 : _a.classList.remove(a), (_b = y.current) == null ? void 0 : _b.classList.add("_leave_3s92l_36");
+    }, o2 - r2));
+  }, [y]), e(() => {
+    "promise" === i2 ? ("function" == typeof c2 ? c2() : c2).then((s2) => setTimeout(() => {
+      g(), p({ type: "success", message: "function" == typeof (h == null ? void 0 : h.success) ? h.success(s2) : (h == null ? void 0 : h.success) || "", isUseEnterAnimation: false, toastList: u });
+    }, r2)).catch((s2) => setTimeout(() => {
+      g(), p({ type: "error", message: "function" == typeof (h == null ? void 0 : h.error) ? h.error(s2) : (h == null ? void 0 : h.error) || "", isUseEnterAnimation: false, toastList: u });
+    }, r2)) : setTimeout(() => g(() => u = []), o2);
+  }, [i2]), s.jsxs("div", { ref: y, className: ["promise" === i2 ? "_promise_3s92l_15" : "_base_3s92l_15", l2].join(" "), style: m2, onClick: () => {
+  }, children: [s.jsx("div", { className: "_icon_3s92l_40", children: n(i2) }), s.jsx("p", { children: "string" == typeof c2 ? c2 : h && h.loading })] });
+}, p = ({ type: t2, speed: a2 = 200, message: r2, duration: c2 = 2e3, zIndex: o2 = 9999, className: n2, style: p2, isUseEnterAnimation: m2 = true, promiseOptions: d, toastList: h }) => i({ className: "_container_3s92l_1", isSingle: true, style: { zIndex: o2 }, content: (i2) => (e(() => {
+}, [h]), s.jsx(l, { className: n2, style: p2, type: t2, message: r2, speed: a2, duration: c2, isUseEnterAnimation: m2, promiseOptions: d, handleDestroy: i2, toastList: h })) }), m = { success: (s2) => {
+  r.push({ type: "success", message: s2 }), p("string" == typeof s2 ? { type: "success", message: s2, toastList: r } : { type: "success", ...s2, toastList: r });
+}, error: (s2) => {
+  r.push({ type: "error", message: s2 }), p("string" == typeof s2 ? { type: "error", message: s2, toastList: r } : { type: "error", ...s2, toastList: r });
+}, warning: (s2) => {
+  r.push({ type: "warning", message: s2 }), p("string" == typeof s2 ? { type: "warning", message: s2, toastList: r } : { type: "warning", ...s2, toastList: r });
+}, promise: (s2, e2) => {
+  r.push({ type: "promise", message: s2 }), p({ type: "promise", message: s2, promiseOptions: e2, toastList: r });
+} };
+export {
+  m as t
+};

package/dist/es/Tooltip-C5OFmxWo.js

@@ -0,0 +1,29 @@
+import { j as e } from "./dependencies-CbQbPZZ-.js";
+import { createPopper as r } from "@popperjs/core";
+import { useState as t, useRef as n, useEffect as o } from "react";
+import { c } from "./hooks-Dew3_cmY.js";
+let s = null, l = null;
+const p = ({ children: p2, content: i, onOpenChange: u, trigger: a = "hover", placement: m = "top", popperOptions: d = {}, className: f, style: h, isShowArrow: w = true, sameWidth: x, autoAdjustOverflow: j = true }) => {
+  const [v, y] = t(false), g = n(null), k = n(null), b = (e2) => {
+    u == null ? void 0 : u(e2), y(e2);
+  };
+  return c(k, () => {
+    "click" !== a && "contextmenu" !== a || b(false);
+  }, { event: ["click", "contextmenu"], deps: [a, u] }), o(() => {
+    (() => {
+      if (!k.current) return;
+      const e2 = Array.from(k.current.children);
+      if (e2.length > 1) throw new Error("Tooltip only support one child");
+      k.current.style.width = e2[0].getBoundingClientRect().width + "px";
+    })();
+  }, [k, p2]), o(() => {
+    k.current && ("hover" === a ? (k.current.onmouseenter = () => b(true), k.current.onmouseleave = () => b(false)) : "click" === a ? k.current.onclick = () => b(!v) : "focus" === a ? (k.current.onfocus = () => b(true), k.current.onblur = () => b(false)) : k.current.oncontextmenu = () => b(!v)), v && k.current && g.current ? l = r(k.current, g.current, { placement: m, modifiers: [{ name: "offset", options: { offset: [0, 6] } }, x ? { name: "sameWidth", enabled: true, phase: "beforeWrite", requires: ["computeStyles"], fn({ state: e2 }) {
+      e2.styles.popper.width = `${e2.rects.reference.width}px`;
+    }, effect({ state: e2 }) {
+      e2.elements.popper.style.width = `${e2.elements.reference.offsetWidth}px`;
+    } } : {}, j ? { name: "flip", enabled: true } : {}], ...d }) : l && (l.destroy(), l = null, s && s.remove(), s = null);
+  }, [v, k, g]), e.jsxs(e.Fragment, { children: [v && e.jsxs("div", { ref: g, style: h, className: ["ono-tooltip-popper", f].join(" "), "data-popper-placement": d.placement || m, children: [e.jsx("div", { children: i instanceof Function ? i() : i }), w && e.jsx("div", { className: "ono-tooltip-popper-arrow", "data-popper-arrow": true })] }), e.jsx("div", { ref: k, children: p2 instanceof Function ? p2() : p2 })] });
+};
+export {
+  p as T
+};

package/dist/es/VirtualList-BeDq637Z.js

@@ -0,0 +1,65 @@
+import { j as e } from "./dependencies-CbQbPZZ-.js";
+import { memo as t, useState as r, useMemo as i, useRef as n, useEffect as l } from "react";
+import { a } from "./hooks-Dew3_cmY.js";
+const s = t(({ containerClassName: t2, dataSource: s2, containerStyle: d2 = {}, onEndCallback: c, refreshSpeed: o = 50, wrapperClassName: h, wrapperStyle: u = {}, estimatedSize: p = 35, updateDataSourceScroll2Top: f, direction: g = "vertical" }) => {
+  const [v, S] = r({ viewSize: 0, startIndex: 0, listSize: 0, renderCount: 0, prevLen: 0 }), [x, m] = r([]), z = "number" == typeof p ? p : p(), w = i(() => Math.min(s2.length, v.startIndex + v.renderCount), [s2, v]), I = i(() => {
+    var _a;
+    return v.startIndex > 0 ? (_a = x[v.startIndex - 1]) == null ? void 0 : _a.end : 0;
+  }, [v.startIndex, x]), y = i(() => s2.slice(v.startIndex, w).map(({ id: t3, data: r2 }) => e.jsx("li", { "data-virtual-id": t3, style: "vertical" === g ? { width: "100%" } : { height: "100%" }, children: r2 }, t3)), [w, s2, v.startIndex, g]), C = i(() => ({ display: "flex", listStyle: "none", flexDirection: "vertical" === g ? "column" : "row", height: "vertical" === g ? v.listSize - I + "px" : "100%", width: "vertical" === g ? "auto" : v.listSize - I + "px", transform: "vertical" === g ? `translate3d(0, ${I}px, 0)` : `translate3d(${I}px, 0, 0)` }), [v.listSize, I, g]), j = n(null), L = n(null), N = (e2) => S((t3) => ({ ...t3, ...e2 })), b = /* @__PURE__ */ ((e2, t3 = 300) => {
+    let r2 = 0;
+    return () => {
+      const i2 = Date.now();
+      i2 - r2 >= t3 && (e2(), r2 = i2);
+    };
+  })(() => {
+    const { scrollTop: e2, clientHeight: t3, scrollHeight: r2, scrollLeft: i2, clientWidth: n2, scrollWidth: l2 } = j.current, a2 = "vertical" === g ? r2 - t3 - e2 : l2 - n2 - i2;
+    N({ startIndex: A(x, "vertical" === g ? e2 : i2) }), ("vertical" === g ? e2 === z / 2 : i2 === z / 2) && N({ startIndex: 0 }), a2 <= 20 && c && c();
+  }, o), A = (e2, t3) => {
+    let r2 = 0, i2 = e2.length - 1, n2 = -1;
+    for (; r2 <= i2; ) {
+      const l2 = r2 + Math.floor((i2 - r2) / 2), a2 = e2[l2].end;
+      if (a2 === t3) return l2 + 1;
+      a2 < t3 ? r2 = l2 + 1 : ((-1 === n2 || n2 > l2) && (n2 = l2), i2 = l2 - 1);
+    }
+    return n2;
+  };
+  return a("scroll", b, { target: j.current, deps: [x, g] }), l(() => {
+    (() => {
+      if (!j.current) return;
+      const e2 = ("vertical" === g ? j.current.offsetHeight : j.current.offsetWidth) || 0;
+      N({ viewSize: e2, renderCount: Math.ceil(e2 / z) + 1 });
+    })();
+  }, [j, g]), l(() => {
+    s2.length && L && (() => {
+      var _a;
+      const e2 = [], t3 = s2.length - v.prevLen, r2 = t3 > 0 ? x.length : 0, i2 = r2 > 0 ? x[r2 - 1].end : 0;
+      for (let r3 = 0; r3 < (t3 > 0 ? t3 : s2.length); r3++) {
+        const n2 = s2[(t3 > 0 ? v.prevLen : 0) + r3];
+        e2.push({ index: n2.id, size: z, start: i2 ? i2 + r3 * z : n2.id * z, end: i2 ? i2 + (r3 + 1) * z : (n2.id + 1) * z, dSize: 0 });
+      }
+      m((r3) => [...t3 > 0 ? r3 : [], ...e2]), N({ prevLen: s2.length }), f && ((_a = j.current) == null ? void 0 : _a.scrollTo(0, 0));
+    })();
+  }, [L, s2, f]), l(() => {
+    (() => {
+      if (!L.current || 0 === x.length) return;
+      const e2 = Array.from(L.current.childNodes);
+      if (!e2.length) return;
+      e2.forEach((e3) => {
+        const t4 = e3.getBoundingClientRect(), r3 = +e3.getAttribute("data-virtual-id"), i3 = x[r3], n2 = i3.size - ("vertical" === g ? t4.height : t4.width);
+        n2 && (i3.size = "vertical" === g ? t4.height : t4.width, i3.end = i3.end - n2, i3.dSize = n2);
+      });
+      const t3 = +e2[0].getAttribute("data-virtual-id"), r2 = x.length;
+      let i2 = x[t3].dSize;
+      x[t3].dSize = 0;
+      for (let e3 = t3 + 1; e3 < r2; e3++) {
+        const t4 = x[e3];
+        t4.start = x[e3 - 1].end, t4.end = t4.end - i2, t4.dSize && (i2 += t4.dSize, t4.dSize = 0);
+      }
+      N({ listSize: x[r2 - 1].end });
+    })();
+  }, [L, x, v.startIndex, g]), e.jsx("div", { ref: j, className: t2, style: { width: "100%", height: "100%", overflow: "auto", ...d2 }, children: e.jsx("ul", { ref: L, className: h, style: { ...C, ...u }, children: y }) });
+}), d = (e2, t2) => e2.map((e3, r2) => ({ id: r2, data: t2(e3, r2) }));
+export {
+  s as E,
+  d as c
+};

package/dist/es/Waterfall-a_c3urjB.js

@@ -0,0 +1,55 @@
+import { j as e } from "./dependencies-CbQbPZZ-.js";
+import { useState as t, useRef as a, useCallback as i, useEffect as n } from "react";
+import { a as o } from "./hooks-Dew3_cmY.js";
+const r = ({ options: r2, pageSize: l, children: s, request: d, reloadData: c, className: m, style: g, updateData: p, loading: h = true, bottomThreshold: u = 50 }) => {
+  const [f, x] = t({ page: 1, reloadData: c, loading: false, isFinish: false, gap: "number" == typeof r2 ? 0 : r2.gap, imageWidth: "number" == typeof r2 ? r2 : 0, columns: "number" == typeof r2 ? 0 : r2.columns, imageList: [] }), [y, w] = t([]), [W, b] = t([]), j = a(null), v = a(null), D = a(null), L = (e2) => x((t2) => ({ ...t2, ...e2 })), N = async (e2, t2) => {
+    const a2 = c && f.reloadData !== c;
+    if (f.isFinish) return;
+    L({ loading: true });
+    const i2 = await d(e2, t2);
+    F(i2), L({ isFinish: !i2.length, imageList: a2 ? [...i2] : [...f.imageList, ...i2], page: e2 + 1, loading: false });
+  }, F = (e2) => x((t2) => {
+    const a2 = c && f.reloadData !== c, i2 = a2 ? [] : [...W], n2 = a2 ? Array(t2.columns).fill(0) : [..."[]" !== JSON.stringify(y) ? y : Array(t2.columns).fill(0)];
+    return e2.forEach((e3) => {
+      const a3 = ((e4) => {
+        let t3 = 0, a4 = 0;
+        return t3 = e4.indexOf(Math.min(...e4)), a4 = e4[t3], { index: t3, height: a4 };
+      })(n2), o2 = Math.floor(e3.height * t2.imageWidth / e3.width);
+      i2.push({ x: a3.index % t2.columns !== 0 ? a3.index * t2.imageWidth + t2.gap * a3.index : a3.index * t2.imageWidth, y: a3.height }), n2[a3.index] += o2 + t2.gap, w(n2);
+    }), b(i2), t2;
+  }), M = i(() => {
+    if (!D.current) return;
+    const e2 = D.current.clientWidth;
+    let t2 = 0, a2 = f.page;
+    if (c && f.reloadData !== c && (x({ page: 1, reloadData: c, loading: false, isFinish: false, gap: "number" == typeof r2 ? 0 : r2.gap, imageWidth: "number" == typeof r2 ? r2 : 0, columns: "number" == typeof r2 ? 0 : r2.columns, imageList: [] }), w([]), b([]), a2 = 1), "number" == typeof r2) {
+      const a3 = Math.floor(e2 / f.imageWidth);
+      t2 = a3 - 1;
+      const i2 = t2 ? (e2 - a3 * f.imageWidth) / t2 : 0;
+      L({ columns: a3, gap: i2 });
+    } else {
+      t2 = f.columns - 1;
+      const a3 = (e2 - t2 * f.gap) / f.columns;
+      L({ imageWidth: a3 });
+    }
+    N(a2, l);
+  }, [f, c]), T = () => {
+    j.current && clearTimeout(j.current), j.current = setTimeout(M, 50);
+  }, z = /* @__PURE__ */ ((e2, t2 = 50) => {
+    let a2 = 0;
+    return () => {
+      const i2 = Date.now();
+      i2 - a2 >= t2 && (e2(), a2 = i2);
+    };
+  })(() => {
+    const { scrollTop: e2, clientHeight: t2, scrollHeight: a2 } = v.current;
+    a2 - t2 - e2 > u || !f.loading && N(f.page, l);
+  });
+  return o("scroll", z, { target: v.current, deps: [f.loading, f.page] }), n(() => (M(), window.addEventListener("resize", T), () => {
+    window.removeEventListener("resize", T);
+  }), [D, c]), n(() => {
+    p && N(f.page, l);
+  }, [p, f.loading, f.page, v.current]), e.jsxs("div", { className: "ono-waterfall-container", children: [e.jsx("div", { ref: v, className: [m, "ono-waterfall-content"].join(" ").trim(), style: g, children: e.jsx("div", { ref: D, className: "ono-waterfall-wrapper", style: { height: Math.max(...y) - f.gap + "px" }, children: f.imageList.map((t2, a2) => e.jsx("div", { className: "ono-waterfall-item", style: { width: `${f.imageWidth}px`, transform: `translate(${W[a2].x}px,${W[a2].y}px)` }, children: s(t2, a2) }, t2.id)) }) }), f.loading && ("function" == typeof h ? h() : h && "boolean" == typeof h ? e.jsx("div", { className: "ono-waterfall-loading", children: "loading..." }) : h)] });
+};
+export {
+  r as W
+};