geoiq-frontend-ui-kit/dist/index.es69.js

This project is a UI kit for GeoIQ's frontend. It's built with React, TypeScript, and Vite.

import * as e from "react";
import { useRef as f, useCallback as N, useEffect as h } from "react";
import { Spinner as x } from "./index.es60.js";
import { SheetPrimary as b } from "./index.es41.js";
import g from "./index.es139.js";
import w from "./index.es140.js";
const R = ({
  isOpen: i,
  onOpenChange: u,
  containerId: d,
  notifications: n,
  nextPage: s,
  isLoading: c,
  hasMore: m,
  onReachScrollTop: a,
  collapsed: p
}) => {
  const o = f(), l = f(null), E = N(
    (t) => {
      c || (o.current && o.current.disconnect(), o.current = new IntersectionObserver((r) => {
        r[0].isIntersecting && m && s();
      }), t && o.current.observe(t));
    },
    [c, s, m]
  );
  h(() => {
    const t = () => {
      if (!l.current) return;
      const { scrollTop: y } = l.current;
      y === 0 && a();
    }, r = l.current;
    return r && r.addEventListener("scroll", t), () => {
      r && r.removeEventListener("scroll", t);
    };
  }, [a, l.current]);
  const v = () => c ? /* @__PURE__ */ e.createElement("div", { className: "flex justify-center py-4" }, /* @__PURE__ */ e.createElement(x, { className: "stroke-brand" })) : null;
  return /* @__PURE__ */ e.createElement(
    b,
    {
      open: i,
      onOpenChange: u,
      trigger: null,
      contentProps: {
        className: `bg-light-1 pb-12 inset-y-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm ${p ? "md:!left-[66px]" : "md:!left-[218px]"}`,
        side: "custom"
      },
      bodyProps: {
        className: "p-0 h-full"
      },
      title: "Notifications",
      content: n.length || c ? /* @__PURE__ */ e.createElement("div", { className: "flex flex-col h-full min-h-0 left-60" }, n.length !== 0 && /* @__PURE__ */ e.createElement(
        "div",
        {
          ref: l,
          className: "flex flex-col flex-grow min-h-0 overflow-y-auto"
        },
        n?.map((t, r) => /* @__PURE__ */ e.createElement(
          "div",
          {
            key: t.id,
            ref: r === n.length - 1 ? E : void 0
          },
          /* @__PURE__ */ e.createElement(g, { ...t })
        ))
      ), v()) : /* @__PURE__ */ e.createElement("div", { className: "flex items-center justify-center h-full" }, /* @__PURE__ */ e.createElement(w, null)),
      container: typeof document < "u" ? document.getElementById(d || "") : void 0
    }
  );
};
export {
  R as default
};
//# sourceMappingURL=index.es69.js.map