@nivaro/react 0.3.32 → 0.3.34

package/dist/shared/components/ForceReloadBanner.js

@@ -1,41 +1,51 @@
-import { jsxs as c, jsx as s, Fragment as x } from "react/jsx-runtime";
-import { PauseCircle as N, RotateCw as F } from "lucide-react";
-import { useState as h, useRef as w, useEffect as k } from "react";
-import { markReloadFor as E } from "../lib/client-version.js";
-import { shouldObeyForceReload as j, thisTabForReload as T } from "../lib/force-reload.js";
-import { subscribeUnsavedWork as C, unsavedWorkLabels as D } from "../lib/unsaved-work.js";
-const L = "nvr:force-refresh";
-function W() {
-  const [e, R] = h(null), [y, b] = h(() => Date.now()), [g, l] = h([]), o = w(!1), m = w(!1), p = w(/* @__PURE__ */ new Set());
-  k(() => {
-    const i = (r) => {
-      const t = r.detail ?? {}, n = typeof t.id == "string" && t.id ? t.id : null;
-      if (n && p.current.has(n) || !j(t, T())) return;
-      n && p.current.add(n), m.current = !1, l([]);
-      const d = Math.max(5, Number(t.seconds) || 30), a = Date.now();
-      R({ deadline: a + d * 1e3, message: String(t.message ?? ""), id: n }), b(a);
+import { jsxs as c, jsx as d, Fragment as k } from "react/jsx-runtime";
+import { PauseCircle as T, RotateCw as C } from "lucide-react";
+import { useState as p, useRef as b, useEffect as E } from "react";
+import { markReloadFor as R } from "../lib/client-version.js";
+import { shouldObeyForceReload as D, thisTabForReload as M } from "../lib/force-reload.js";
+import { subscribeUnsavedWork as O, prepareForReload as y, beginReloadForUpdate as L, unsavedWorkLabels as S } from "../lib/unsaved-work.js";
+const F = "nvr:force-refresh";
+function B() {
+  const [r, N] = p(null), [j, g] = p(() => Date.now()), [w, l] = p([]), n = b(!1), m = b(!1), v = b(/* @__PURE__ */ new Set());
+  E(() => {
+    const o = (s) => {
+      const e = s.detail ?? {}, t = typeof e.id == "string" && e.id ? e.id : null;
+      if (t && v.current.has(t) || !D(e, M())) return;
+      t && v.current.add(t), m.current = !1, l([]);
+      const h = Math.max(5, Number(e.seconds) || 30), i = Date.now();
+      N({ deadline: i + h * 1e3, message: String(e.message ?? ""), id: t }), g(i);
     };
-    return window.addEventListener(L, i), () => window.removeEventListener(L, i);
-  }, []), k(() => {
-    if (!e) return;
-    const i = () => {
-      o.current || (o.current = !0, e.id && E(e.id), window.location.reload(), setTimeout(() => {
-        o.current = !1, m.current = !0, l(["unsaved changes on this page"]);
+    return window.addEventListener(F, o), () => window.removeEventListener(F, o);
+  }, []), E(() => {
+    if (!r) return;
+    const o = () => {
+      n.current || (n.current = !0, r.id && R(r.id), window.location.reload(), setTimeout(() => {
+        n.current = !1, m.current = !0, l(["unsaved changes on this page"]);
       }, 1500));
-    }, r = () => {
-      const d = Date.now();
-      if (b(d), d < e.deadline || o.current || m.current) return;
-      const a = D();
-      l((v) => v.join("|") === a.join("|") ? v : a), a.length === 0 && i();
-    }, t = setInterval(r, 1e3);
-    document.addEventListener("visibilitychange", r), window.addEventListener("focus", r), window.addEventListener("pageshow", r);
-    const n = C(() => setTimeout(r, 0));
+    };
+    let s = !1;
+    const e = () => {
+      const i = Date.now();
+      if (g(i), !(i < r.deadline || n.current || m.current || s)) {
+        if (S().length === 0) {
+          l((a) => a.length ? [] : a), o();
+          return;
+        }
+        s = !0, y().then((a) => {
+          l((x) => x.join("|") === a.join("|") ? x : a), a.length === 0 && (L(), o());
+        }).finally(() => {
+          s = !1;
+        });
+      }
+    }, t = setInterval(e, 1e3);
+    document.addEventListener("visibilitychange", e), window.addEventListener("focus", e), window.addEventListener("pageshow", e);
+    const h = O(() => setTimeout(e, 0));
     return () => {
-      clearInterval(t), document.removeEventListener("visibilitychange", r), window.removeEventListener("focus", r), window.removeEventListener("pageshow", r), n();
+      clearInterval(t), document.removeEventListener("visibilitychange", e), window.removeEventListener("focus", e), window.removeEventListener("pageshow", e), h();
     };
-  }, [e]);
-  const u = e ? Math.max(0, Math.ceil((e.deadline - y) / 1e3)) : 0, f = u === 0 && g.length > 0;
-  return e ? /* @__PURE__ */ c(
+  }, [r]);
+  const u = r ? Math.max(0, Math.ceil((r.deadline - j) / 1e3)) : 0, f = u === 0 && w.length > 0;
+  return r ? /* @__PURE__ */ c(
     "div",
     {
       role: "alert",
@@ -44,27 +54,27 @@ function W() {
       "data-nvr-recording-hide": !0,
       className: "fixed inset-x-0 top-0 z-[150] flex items-center justify-center gap-3 border-b border-amber-300 bg-amber-50 px-4 py-2.5 text-[13px] text-amber-900 dark:border-amber-500/40 dark:bg-[#3a2e10] dark:text-amber-200",
       children: [
-        f ? /* @__PURE__ */ s(N, { className: "h-4 w-4 shrink-0" }) : /* @__PURE__ */ s(F, { className: "h-4 w-4 shrink-0 animate-spin" }),
-        /* @__PURE__ */ s("span", { children: f ? /* @__PURE__ */ c(x, { children: [
-          /* @__PURE__ */ s("span", { className: "font-semibold", children: "A reload is waiting" }),
+        f ? /* @__PURE__ */ d(T, { className: "h-4 w-4 shrink-0" }) : /* @__PURE__ */ d(C, { className: "h-4 w-4 shrink-0 animate-spin" }),
+        /* @__PURE__ */ d("span", { children: f ? /* @__PURE__ */ c(k, { children: [
+          /* @__PURE__ */ d("span", { className: "font-semibold", children: "A reload is waiting" }),
           " — save or discard your changes (",
-          g.join(", ").toLowerCase(),
+          w.join(", ").toLowerCase(),
           ") and the page reloads."
-        ] }) : /* @__PURE__ */ c(x, { children: [
+        ] }) : /* @__PURE__ */ c(k, { children: [
           /* @__PURE__ */ c("span", { className: "font-semibold", children: [
             "This page will reload in ",
             u,
             "s"
           ] }),
-          e.message ? ` — ${e.message}` : " — an administrator pushed an update."
+          r.message ? ` — ${r.message}` : " — an administrator pushed an update."
         ] }) }),
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ d(
           "button",
           {
             type: "button",
-            onClick: () => {
-              o.current = !0, e.id && E(e.id), window.location.reload(), setTimeout(() => {
-                o.current = !1;
+            onClick: async () => {
+              n.current = !0, r.id && R(r.id), (await y()).length === 0 && L(), window.location.reload(), setTimeout(() => {
+                n.current = !1;
               }, 1500);
             },
             className: "shrink-0 rounded-md border border-amber-400 bg-white px-2.5 py-1 text-[12px] font-medium text-amber-800 hover:bg-amber-100 dark:bg-transparent dark:text-amber-200",
@@ -76,6 +86,6 @@ function W() {
   ) : null;
 }
 export {
-  L as FORCE_RELOAD_EVENT,
-  W as ForceReloadBanner
+  F as FORCE_RELOAD_EVENT,
+  B as ForceReloadBanner
 };