ono-react-element 0.0.0

package/dist/es/Toast-CkC8zQdq.js

@@ -0,0 +1,174 @@
+import { j as s } from "./dependencies-DWmdjl5u.js";
+import { useEffect as y, useRef as L } from "react";
+import { i as T } from "./InjunctiveBox-CmZg4sIq.js";
+const b = "_container_3s92l_1", m = "_base_3s92l_15", z = "_promise_3s92l_15", M = "_enter_3s92l_32", C = "_leave_3s92l_36", B = "_icon_3s92l_40", i = {
+  container: b,
+  base: m,
+  promise: z,
+  enter: M,
+  leave: C,
+  icon: B
+};
+let t = [];
+const E = {
+  success: { light: "#52c41a", dark: "#49aa19" },
+  error: { light: "#ff4d4f", dark: "#a61d24" },
+  warning: { light: "#faad14", dark: "#d89614" },
+  promise: { light: "", dark: "" }
+}, v = (e, r) => E[e][r], I = (e) => {
+  switch (e) {
+    case "success":
+      return /* @__PURE__ */ s.jsx(
+        "svg",
+        {
+          viewBox: "0 0 1024 1024",
+          focusable: "false",
+          "data-icon": "check-circle",
+          width: "24px",
+          height: "24px",
+          fill: v(e, "light"),
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ 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 /* @__PURE__ */ s.jsx(
+        "svg",
+        {
+          viewBox: "0 0 1024 1024",
+          focusable: "false",
+          "data-icon": "close-circle",
+          width: "24px",
+          height: "24px",
+          fill: v(e, "light"),
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ 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 /* @__PURE__ */ s.jsx(
+        "svg",
+        {
+          viewBox: "0 0 1024 1024",
+          focusable: "false",
+          "data-icon": "exclamation-circle",
+          width: "24px",
+          height: "24px",
+          fill: v(e, "light"),
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ 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" })
+        }
+      );
+  }
+}, P = ({
+  type: e,
+  speed: r = 200,
+  message: l,
+  duration: f = 2e3,
+  className: x,
+  style: g,
+  isUseEnterAnimation: _ = !0,
+  promiseOptions: c,
+  toastList: h,
+  handleDestroy: o
+}) => {
+  const a = L(null), j = () => {
+    a.current && (a.current.style.setProperty("--speed", `${r / 1e3}s`), _ && a.current.classList.add(i.enter), e !== "promise" && setTimeout(() => {
+      var d, u;
+      (d = a.current) == null || d.classList.remove(i.enter), (u = a.current) == null || u.classList.add(i.leave);
+    }, f - r));
+  }, w = () => typeof l == "string" ? l : c && c.loading, k = () => {
+    (typeof l == "function" ? l() : l).then(
+      (u) => setTimeout(() => {
+        o(), n({
+          type: "success",
+          message: typeof (c == null ? void 0 : c.success) == "function" ? c.success(u) : (c == null ? void 0 : c.success) || "",
+          isUseEnterAnimation: !1,
+          toastList: h
+        });
+      }, r)
+    ).catch(
+      (u) => setTimeout(() => {
+        o(), n({
+          type: "error",
+          message: typeof (c == null ? void 0 : c.error) == "function" ? c.error(u) : (c == null ? void 0 : c.error) || "",
+          isUseEnterAnimation: !1,
+          toastList: h
+        });
+      }, r)
+    );
+  };
+  return y(() => {
+    j();
+  }, [a]), y(() => {
+    e === "promise" ? k() : setTimeout(() => o(() => h = []), f);
+  }, [e]), /* @__PURE__ */ s.jsxs(
+    "div",
+    {
+      ref: a,
+      className: [
+        e === "promise" ? i.promise : i.base,
+        x
+      ].join(" "),
+      style: g,
+      onClick: () => console.log("click"),
+      children: [
+        /* @__PURE__ */ s.jsx("div", { className: i.icon, children: I(e) }),
+        /* @__PURE__ */ s.jsx("p", { children: w() })
+      ]
+    }
+  );
+}, n = ({
+  type: e,
+  speed: r = 200,
+  message: l,
+  duration: f = 2e3,
+  zIndex: x = 9999,
+  className: g,
+  style: _,
+  isUseEnterAnimation: c = !0,
+  promiseOptions: h,
+  toastList: o
+}) => T({
+  className: i.container,
+  isSingle: !0,
+  style: { zIndex: x },
+  content: (a) => (y(() => {
+    console.log(o);
+  }, [o]), /* @__PURE__ */ s.jsx(
+    P,
+    {
+      className: g,
+      style: _,
+      type: e,
+      message: l,
+      speed: r,
+      duration: f,
+      isUseEnterAnimation: c,
+      promiseOptions: h,
+      handleDestroy: a,
+      toastList: o
+    }
+  ))
+}), A = {
+  success: (e) => {
+    t.push({ type: "success", message: e }), n(typeof e == "string" ? { type: "success", message: e, toastList: t } : { type: "success", ...e, toastList: t });
+  },
+  error: (e) => {
+    t.push({ type: "error", message: e }), n(typeof e == "string" ? { type: "error", message: e, toastList: t } : { type: "error", ...e, toastList: t });
+  },
+  warning: (e) => {
+    t.push({ type: "warning", message: e }), n(typeof e == "string" ? { type: "warning", message: e, toastList: t } : { type: "warning", ...e, toastList: t });
+  },
+  promise: (e, r) => {
+    t.push({ type: "promise", message: e }), n({
+      type: "promise",
+      message: e,
+      promiseOptions: r,
+      toastList: t
+    });
+  }
+};
+export {
+  A as t
+};

package/dist/es/Tooltip-C_gPojr9.js

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

package/dist/es/VirtualList-D8M5JJ-W.js

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

package/dist/es/Waterfall-BXE2_5Sj.js

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