@pdf-viewer/react
Version:
A react-pdf-viewer component for React and Next.js. Suitable for react-pdf document.
355 lines (354 loc) • 11.9 kB
JavaScript
import { jsx as d, jsxs as O } from "react/jsx-runtime";
import * as s from "react";
import { P as S, c as z, a as J, u as j, b as g, d as Q, S as Z } from "../../index-5908484b.js";
import { c as G, u as $, R as ee, A as te, D as oe, C as re, a as ne } from "../../index-18b0454c.js";
import { withRef as se } from "../../utils/withRef.js";
import '../../assets/RPTooltip.css';var ae = "VisuallyHidden", F = s.forwardRef(
(e, o) => /* @__PURE__ */ d(
S.span,
{
...e,
ref: o,
style: {
// See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
position: "absolute",
border: 0,
width: 1,
height: 1,
padding: 0,
margin: -1,
overflow: "hidden",
clip: "rect(0, 0, 0, 0)",
whiteSpace: "nowrap",
wordWrap: "normal",
...e.style
}
}
)
);
F.displayName = ae;
var ie = F, [R, De] = z("Tooltip", [
G
]), _ = G(), V = "TooltipProvider", le = 700, L = "tooltip.open", [ce, I] = R(V), B = (e) => {
const {
__scopeTooltip: o,
delayDuration: t = le,
skipDelayDuration: r = 300,
disableHoverableContent: n = !1,
children: i
} = e, [c, v] = s.useState(!0), a = s.useRef(!1), p = s.useRef(0);
return s.useEffect(() => {
const l = p.current;
return () => window.clearTimeout(l);
}, []), /* @__PURE__ */ d(
ce,
{
scope: o,
isOpenDelayed: c,
delayDuration: t,
onOpen: s.useCallback(() => {
window.clearTimeout(p.current), v(!1);
}, []),
onClose: s.useCallback(() => {
window.clearTimeout(p.current), p.current = window.setTimeout(
() => v(!0),
r
);
}, [r]),
isPointerInTransitRef: a,
onPointerInTransitChange: s.useCallback((l) => {
a.current = l;
}, []),
disableHoverableContent: n,
children: i
}
);
};
B.displayName = V;
var A = "Tooltip", [ue, D] = R(A), U = (e) => {
const {
__scopeTooltip: o,
children: t,
open: r,
defaultOpen: n = !1,
onOpenChange: i,
disableHoverableContent: c,
delayDuration: v
} = e, a = I(A, e.__scopeTooltip), p = _(o), [l, f] = s.useState(null), y = $(), u = s.useRef(0), h = c ?? a.disableHoverableContent, C = v ?? a.delayDuration, T = s.useRef(!1), [x = !1, m] = J({
prop: r,
defaultProp: n,
onChange: (N) => {
N ? (a.onOpen(), document.dispatchEvent(new CustomEvent(L))) : a.onClose(), i == null || i(N);
}
}), b = s.useMemo(() => x ? T.current ? "delayed-open" : "instant-open" : "closed", [x]), E = s.useCallback(() => {
window.clearTimeout(u.current), u.current = 0, T.current = !1, m(!0);
}, [m]), P = s.useCallback(() => {
window.clearTimeout(u.current), u.current = 0, m(!1);
}, [m]), M = s.useCallback(() => {
window.clearTimeout(u.current), u.current = window.setTimeout(() => {
T.current = !0, m(!0), u.current = 0;
}, C);
}, [C, m]);
return s.useEffect(() => () => {
u.current && (window.clearTimeout(u.current), u.current = 0);
}, []), /* @__PURE__ */ d(ee, { ...p, children: /* @__PURE__ */ d(
ue,
{
scope: o,
contentId: y,
open: x,
stateAttribute: b,
trigger: l,
onTriggerChange: f,
onTriggerEnter: s.useCallback(() => {
a.isOpenDelayed ? M() : E();
}, [a.isOpenDelayed, M, E]),
onTriggerLeave: s.useCallback(() => {
h ? P() : (window.clearTimeout(u.current), u.current = 0);
}, [P, h]),
onOpen: E,
onClose: P,
disableHoverableContent: h,
children: t
}
) });
};
U.displayName = A;
var k = "TooltipTrigger", Y = s.forwardRef(
(e, o) => {
const { __scopeTooltip: t, ...r } = e, n = D(k, t), i = I(k, t), c = _(t), v = s.useRef(null), a = j(o, v, n.onTriggerChange), p = s.useRef(!1), l = s.useRef(!1), f = s.useCallback(() => p.current = !1, []);
return s.useEffect(() => () => document.removeEventListener("pointerup", f), [f]), /* @__PURE__ */ d(te, { asChild: !0, ...c, children: /* @__PURE__ */ d(
S.button,
{
"aria-describedby": n.open ? n.contentId : void 0,
"data-state": n.stateAttribute,
...r,
ref: a,
onPointerMove: g(e.onPointerMove, (y) => {
y.pointerType !== "touch" && !l.current && !i.isPointerInTransitRef.current && (n.onTriggerEnter(), l.current = !0);
}),
onPointerLeave: g(e.onPointerLeave, () => {
n.onTriggerLeave(), l.current = !1;
}),
onPointerDown: g(e.onPointerDown, () => {
p.current = !0, document.addEventListener("pointerup", f, { once: !0 });
}),
onFocus: g(e.onFocus, () => {
p.current || n.onOpen();
}),
onBlur: g(e.onBlur, n.onClose),
onClick: g(e.onClick, n.onClose)
}
) });
}
);
Y.displayName = k;
var de = "TooltipPortal", [Oe, pe] = R(de, {
forceMount: void 0
}), w = "TooltipContent", q = s.forwardRef(
(e, o) => {
const t = pe(w, e.__scopeTooltip), { forceMount: r = t.forceMount, side: n = "top", ...i } = e, c = D(w, e.__scopeTooltip);
return /* @__PURE__ */ d(Q, { present: r || c.open, children: c.disableHoverableContent ? /* @__PURE__ */ d(W, { side: n, ...i, ref: o }) : /* @__PURE__ */ d(fe, { side: n, ...i, ref: o }) });
}
), fe = s.forwardRef((e, o) => {
const t = D(w, e.__scopeTooltip), r = I(w, e.__scopeTooltip), n = s.useRef(null), i = j(o, n), [c, v] = s.useState(null), { trigger: a, onClose: p } = t, l = n.current, { onPointerInTransitChange: f } = r, y = s.useCallback(() => {
v(null), f(!1);
}, [f]), u = s.useCallback(
(h, C) => {
const T = h.currentTarget, x = { x: h.clientX, y: h.clientY }, m = ye(x, T.getBoundingClientRect()), b = Te(x, m), E = Ce(C.getBoundingClientRect()), P = xe([...b, ...E]);
v(P), f(!0);
},
[f]
);
return s.useEffect(() => () => y(), [y]), s.useEffect(() => {
if (a && l) {
const h = (T) => u(T, l), C = (T) => u(T, a);
return a.addEventListener("pointerleave", h), l.addEventListener("pointerleave", C), () => {
a.removeEventListener("pointerleave", h), l.removeEventListener("pointerleave", C);
};
}
}, [a, l, u, y]), s.useEffect(() => {
if (c) {
const h = (C) => {
const T = C.target, x = { x: C.clientX, y: C.clientY }, m = (a == null ? void 0 : a.contains(T)) || (l == null ? void 0 : l.contains(T)), b = !me(x, c);
m ? y() : b && (y(), p());
};
return document.addEventListener("pointermove", h), () => document.removeEventListener("pointermove", h);
}
}, [a, l, c, p, y]), /* @__PURE__ */ d(W, { ...e, ref: i });
}), [ve, he] = R(A, { isInside: !1 }), W = s.forwardRef(
(e, o) => {
const {
__scopeTooltip: t,
children: r,
"aria-label": n,
onEscapeKeyDown: i,
onPointerDownOutside: c,
...v
} = e, a = D(w, t), p = _(t), { onClose: l } = a;
return s.useEffect(() => (document.addEventListener(L, l), () => document.removeEventListener(L, l)), [l]), s.useEffect(() => {
if (a.trigger) {
const f = (y) => {
const u = y.target;
u != null && u.contains(a.trigger) && l();
};
return window.addEventListener("scroll", f, { capture: !0 }), () => window.removeEventListener("scroll", f, { capture: !0 });
}
}, [a.trigger, l]), /* @__PURE__ */ d(
oe,
{
asChild: !0,
disableOutsidePointerEvents: !1,
onEscapeKeyDown: i,
onPointerDownOutside: c,
onFocusOutside: (f) => f.preventDefault(),
onDismiss: l,
children: /* @__PURE__ */ O(
re,
{
"data-state": a.stateAttribute,
...p,
...v,
ref: o,
style: {
...v.style,
"--radix-tooltip-content-transform-origin": "var(--radix-popper-transform-origin)",
"--radix-tooltip-content-available-width": "var(--radix-popper-available-width)",
"--radix-tooltip-content-available-height": "var(--radix-popper-available-height)",
"--radix-tooltip-trigger-width": "var(--radix-popper-anchor-width)",
"--radix-tooltip-trigger-height": "var(--radix-popper-anchor-height)"
},
children: [
/* @__PURE__ */ d(Z, { children: r }),
/* @__PURE__ */ d(ve, { scope: t, isInside: !0, children: /* @__PURE__ */ d(ie, { id: a.contentId, role: "tooltip", children: n || r }) })
]
}
)
}
);
}
);
q.displayName = w;
var X = "TooltipArrow", K = s.forwardRef(
(e, o) => {
const { __scopeTooltip: t, ...r } = e, n = _(t);
return he(
X,
t
).isInside ? null : /* @__PURE__ */ d(ne, { ...n, ...r, ref: o });
}
);
K.displayName = X;
function ye(e, o) {
const t = Math.abs(o.top - e.y), r = Math.abs(o.bottom - e.y), n = Math.abs(o.right - e.x), i = Math.abs(o.left - e.x);
switch (Math.min(t, r, n, i)) {
case i:
return "left";
case n:
return "right";
case t:
return "top";
case r:
return "bottom";
default:
throw new Error("unreachable");
}
}
function Te(e, o, t = 5) {
const r = [];
switch (o) {
case "top":
r.push(
{ x: e.x - t, y: e.y + t },
{ x: e.x + t, y: e.y + t }
);
break;
case "bottom":
r.push(
{ x: e.x - t, y: e.y - t },
{ x: e.x + t, y: e.y - t }
);
break;
case "left":
r.push(
{ x: e.x + t, y: e.y - t },
{ x: e.x + t, y: e.y + t }
);
break;
case "right":
r.push(
{ x: e.x - t, y: e.y - t },
{ x: e.x - t, y: e.y + t }
);
break;
}
return r;
}
function Ce(e) {
const { top: o, right: t, bottom: r, left: n } = e;
return [
{ x: n, y: o },
{ x: t, y: o },
{ x: t, y: r },
{ x: n, y: r }
];
}
function me(e, o) {
const { x: t, y: r } = e;
let n = !1;
for (let i = 0, c = o.length - 1; i < o.length; c = i++) {
const v = o[i].x, a = o[i].y, p = o[c].x, l = o[c].y;
a > r != l > r && t < (p - v) * (r - a) / (l - a) + v && (n = !n);
}
return n;
}
function xe(e) {
const o = e.slice();
return o.sort((t, r) => t.x < r.x ? -1 : t.x > r.x ? 1 : t.y < r.y ? -1 : t.y > r.y ? 1 : 0), ge(o);
}
function ge(e) {
if (e.length <= 1)
return e.slice();
const o = [];
for (let r = 0; r < e.length; r++) {
const n = e[r];
for (; o.length >= 2; ) {
const i = o[o.length - 1], c = o[o.length - 2];
if ((i.x - c.x) * (n.y - c.y) >= (i.y - c.y) * (n.x - c.x))
o.pop();
else
break;
}
o.push(n);
}
o.pop();
const t = [];
for (let r = e.length - 1; r >= 0; r--) {
const n = e[r];
for (; t.length >= 2; ) {
const i = t[t.length - 1], c = t[t.length - 2];
if ((i.x - c.x) * (n.y - c.y) >= (i.y - c.y) * (n.x - c.x))
t.pop();
else
break;
}
t.push(n);
}
return t.pop(), o.length === 1 && t.length === 1 && o[0].x === t[0].x && o[0].y === t[0].y ? o : o.concat(t);
}
const we = "_tooltipContent_12gjy_1", be = "_tooltipArrow_12gjy_8", Ee = "_fadeIn_12gjy_1", H = {
tooltipContent: we,
tooltipArrow: be,
fadeIn: Ee
}, Le = se(
({ children: e, content: o, className: t, style: r }, n) => /* @__PURE__ */ d(B, { children: /* @__PURE__ */ O(U, { delayDuration: 1e3, children: [
/* @__PURE__ */ d(Y, { asChild: !0, children: /* @__PURE__ */ d("div", { ref: n, className: t, style: r, children: e }) }),
/* @__PURE__ */ O(q, { className: H.tooltipContent, sideOffset: 5, children: [
/* @__PURE__ */ d(K, { className: H.tooltipArrow }),
/* @__PURE__ */ d("span", { children: o })
] })
] }) })
);
export {
Le as default
};