@pdf-viewer/react
Version:
A react-pdf-viewer component for React and Next.js. Suitable for react-pdf document.
151 lines (150 loc) • 5.65 kB
JavaScript
import * as r from "react";
import { u as R, P as w, a as h, f as _, g as U } from "./index-6e0e48fa.js";
import { jsx as T } from "react/jsx-runtime";
function b(t) {
const e = r.useRef(t);
return r.useEffect(() => {
e.current = t;
}), r.useMemo(() => (...n) => {
var s;
return (s = e.current) == null ? void 0 : s.call(e, ...n);
}, []);
}
function z(t, e = globalThis == null ? void 0 : globalThis.document) {
const n = b(t);
r.useEffect(() => {
const s = (i) => {
i.key === "Escape" && n(i);
};
return e.addEventListener("keydown", s, { capture: !0 }), () => e.removeEventListener("keydown", s, { capture: !0 });
}, [n, e]);
}
var H = "DismissableLayer", p = "dismissableLayer.update", M = "dismissableLayer.pointerDownOutside", K = "dismissableLayer.focusOutside", g, S = r.createContext({
layers: /* @__PURE__ */ new Set(),
layersWithOutsidePointerEventsDisabled: /* @__PURE__ */ new Set(),
branches: /* @__PURE__ */ new Set()
}), j = r.forwardRef(
(t, e) => {
const {
disableOutsidePointerEvents: n = !1,
onEscapeKeyDown: s,
onPointerDownOutside: i,
onFocusOutside: a,
onInteractOutside: l,
onDismiss: d,
...E
} = t, u = r.useContext(S), [c, B] = r.useState(null), f = (c == null ? void 0 : c.ownerDocument) ?? (globalThis == null ? void 0 : globalThis.document), [, F] = r.useState({}), I = R(e, (o) => B(o)), m = Array.from(u.layers), [W] = [...u.layersWithOutsidePointerEventsDisabled].slice(-1), A = m.indexOf(W), P = c ? m.indexOf(c) : -1, N = u.layersWithOutsidePointerEventsDisabled.size > 0, D = P >= A, k = $((o) => {
const v = o.target, C = [...u.branches].some((y) => y.contains(v));
!D || C || (i == null || i(o), l == null || l(o), o.defaultPrevented || d == null || d());
}, f), L = q((o) => {
const v = o.target;
[...u.branches].some((y) => y.contains(v)) || (a == null || a(o), l == null || l(o), o.defaultPrevented || d == null || d());
}, f);
return z((o) => {
P === u.layers.size - 1 && (s == null || s(o), !o.defaultPrevented && d && (o.preventDefault(), d()));
}, f), r.useEffect(() => {
if (c)
return n && (u.layersWithOutsidePointerEventsDisabled.size === 0 && (g = f.body.style.pointerEvents, f.body.style.pointerEvents = "none"), u.layersWithOutsidePointerEventsDisabled.add(c)), u.layers.add(c), O(), () => {
n && u.layersWithOutsidePointerEventsDisabled.size === 1 && (f.body.style.pointerEvents = g);
};
}, [c, f, n, u]), r.useEffect(() => () => {
c && (u.layers.delete(c), u.layersWithOutsidePointerEventsDisabled.delete(c), O());
}, [c, u]), r.useEffect(() => {
const o = () => F({});
return document.addEventListener(p, o), () => document.removeEventListener(p, o);
}, []), /* @__PURE__ */ T(
w.div,
{
...E,
ref: I,
style: {
pointerEvents: N ? D ? "auto" : "none" : void 0,
...t.style
},
onFocusCapture: h(t.onFocusCapture, L.onFocusCapture),
onBlurCapture: h(t.onBlurCapture, L.onBlurCapture),
onPointerDownCapture: h(
t.onPointerDownCapture,
k.onPointerDownCapture
)
}
);
}
);
j.displayName = H;
var X = "DismissableLayerBranch", Y = r.forwardRef((t, e) => {
const n = r.useContext(S), s = r.useRef(null), i = R(e, s);
return r.useEffect(() => {
const a = s.current;
if (a)
return n.branches.add(a), () => {
n.branches.delete(a);
};
}, [n.branches]), /* @__PURE__ */ T(w.div, { ...t, ref: i });
});
Y.displayName = X;
function $(t, e = globalThis == null ? void 0 : globalThis.document) {
const n = b(t), s = r.useRef(!1), i = r.useRef(() => {
});
return r.useEffect(() => {
const a = (d) => {
if (d.target && !s.current) {
let E = function() {
x(
M,
n,
u,
{ discrete: !0 }
);
};
const u = { originalEvent: d };
d.pointerType === "touch" ? (e.removeEventListener("click", i.current), i.current = E, e.addEventListener("click", i.current, { once: !0 })) : E();
} else
e.removeEventListener("click", i.current);
s.current = !1;
}, l = window.setTimeout(() => {
e.addEventListener("pointerdown", a);
}, 0);
return () => {
window.clearTimeout(l), e.removeEventListener("pointerdown", a), e.removeEventListener("click", i.current);
};
}, [e, n]), {
// ensures we check React component tree (not just DOM tree)
onPointerDownCapture: () => s.current = !0
};
}
function q(t, e = globalThis == null ? void 0 : globalThis.document) {
const n = b(t), s = r.useRef(!1);
return r.useEffect(() => {
const i = (a) => {
a.target && !s.current && x(K, n, { originalEvent: a }, {
discrete: !1
});
};
return e.addEventListener("focusin", i), () => e.removeEventListener("focusin", i);
}, [e, n]), {
onFocusCapture: () => s.current = !0,
onBlurCapture: () => s.current = !1
};
}
function O() {
const t = new CustomEvent(p);
document.dispatchEvent(t);
}
function x(t, e, n, { discrete: s }) {
const i = n.originalEvent.target, a = new CustomEvent(t, { bubbles: !1, cancelable: !0, detail: n });
e && i.addEventListener(t, e, { once: !0 }), s ? _(i, a) : i.dispatchEvent(a);
}
var G = r[" useId ".trim().toString()] || (() => {
}), J = 0;
function Z(t) {
const [e, n] = r.useState(G());
return U(() => {
t || n((s) => s ?? String(J++));
}, [t]), t || (e ? `radix-${e}` : "");
}
export {
j as D,
Z as a,
b as u
};