pdf-tsx 0.11.0 → 0.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +43 -2
- package/dist/cjs/components/PDFViewer.cjs +1 -1
- package/dist/cjs/components/PDFViewer.module.cjs +1 -1
- package/dist/cjs/components/features/PDFAnnotations.cjs +1 -1
- package/dist/cjs/components/features/PDFAnnotations.module.cjs +1 -1
- package/dist/cjs/components/features/PDFAttachments.cjs +1 -1
- package/dist/cjs/components/features/PDFChangeFile.cjs +1 -1
- package/dist/cjs/components/features/PDFDownloadButton.cjs +1 -1
- package/dist/cjs/components/features/PDFNavigation.cjs +1 -1
- package/dist/cjs/components/features/PDFOutline.cjs +1 -1
- package/dist/cjs/components/features/PDFPageFit.cjs +1 -1
- package/dist/cjs/components/features/PDFPrintButton.cjs +1 -1
- package/dist/cjs/components/features/PDFRotationControl.cjs +1 -1
- package/dist/cjs/components/features/PDFSearch.cjs +1 -1
- package/dist/cjs/components/features/PDFSidebarToggle.cjs +1 -1
- package/dist/cjs/components/features/PDFSignatures.cjs +1 -1
- package/dist/cjs/components/features/PDFThemeToggle.cjs +1 -1
- package/dist/cjs/components/features/PDFThumbnails.cjs +1 -1
- package/dist/cjs/components/features/PDFZoomControls.cjs +1 -1
- package/dist/cjs/components/ui/PDFToolbar.cjs +1 -1
- package/dist/cjs/context/LabelsContext.cjs +1 -0
- package/dist/cjs/context/labelsContextValue.cjs +1 -0
- package/dist/cjs/hooks/useAnnotationLayer.cjs +1 -1
- package/dist/cjs/hooks/useAnnotations.cjs +1 -1
- package/dist/cjs/hooks/useLabels.cjs +1 -0
- package/dist/cjs/index.cjs +1 -1
- package/dist/cjs/labels.cjs +1 -0
- package/dist/cjs/pdf-tsx.css +1 -1
- package/dist/components/PDFViewer.d.ts +1 -0
- package/dist/components/features/PDFChangeFile.d.ts +1 -1
- package/dist/components/features/PDFDownloadButton.d.ts +1 -1
- package/dist/components/features/PDFNavigation.d.ts +1 -1
- package/dist/components/features/PDFPageFit.d.ts +1 -1
- package/dist/components/features/PDFPrintButton.d.ts +1 -1
- package/dist/components/features/PDFRotationControl.d.ts +1 -1
- package/dist/components/features/PDFSearch.d.ts +3 -2
- package/dist/components/features/PDFSidebarToggle.d.ts +1 -1
- package/dist/components/features/PDFThemeToggle.d.ts +1 -1
- package/dist/components/features/PDFZoomControls.d.ts +1 -1
- package/dist/context/LabelsContext.d.ts +7 -0
- package/dist/context/labelsContextValue.d.ts +2 -0
- package/dist/es/components/PDFViewer.js +309 -191
- package/dist/es/components/PDFViewer.module.js +21 -16
- package/dist/es/components/features/PDFAnnotations.js +132 -62
- package/dist/es/components/features/PDFAnnotations.module.js +12 -12
- package/dist/es/components/features/PDFAttachments.js +42 -41
- package/dist/es/components/features/PDFChangeFile.js +17 -16
- package/dist/es/components/features/PDFDownloadButton.js +15 -14
- package/dist/es/components/features/PDFNavigation.js +39 -38
- package/dist/es/components/features/PDFOutline.js +46 -45
- package/dist/es/components/features/PDFPageFit.js +19 -18
- package/dist/es/components/features/PDFPrintButton.js +14 -13
- package/dist/es/components/features/PDFRotationControl.js +12 -11
- package/dist/es/components/features/PDFSearch.js +71 -55
- package/dist/es/components/features/PDFSidebarToggle.js +13 -12
- package/dist/es/components/features/PDFSignatures.js +87 -84
- package/dist/es/components/features/PDFThemeToggle.js +12 -11
- package/dist/es/components/features/PDFThumbnails.js +33 -32
- package/dist/es/components/features/PDFZoomControls.js +23 -22
- package/dist/es/components/ui/PDFToolbar.js +56 -55
- package/dist/es/context/LabelsContext.js +14 -0
- package/dist/es/context/labelsContextValue.js +5 -0
- package/dist/es/hooks/useAnnotationLayer.js +37 -20
- package/dist/es/hooks/useAnnotations.js +5 -3
- package/dist/es/hooks/useLabels.js +9 -0
- package/dist/es/index.js +22 -21
- package/dist/es/labels.js +124 -0
- package/dist/es/pdf-tsx.css +1 -1
- package/dist/hooks/useAnnotationLayer.d.ts +15 -1
- package/dist/hooks/useLabels.d.ts +2 -0
- package/dist/index.d.ts +2 -0
- package/dist/labels.d.ts +51 -0
- package/package.json +2 -1
|
@@ -1,25 +1,26 @@
|
|
|
1
1
|
import { usePDFViewer as e } from "../../context/PDFViewerContext.js";
|
|
2
2
|
import { computeFit as t } from "../../utils/pdfFit.js";
|
|
3
|
-
import {
|
|
4
|
-
import r from "
|
|
5
|
-
import
|
|
6
|
-
import {
|
|
3
|
+
import { useLabels as n } from "../../hooks/useLabels.js";
|
|
4
|
+
import { useSignatures as r } from "../../hooks/useSignatures.js";
|
|
5
|
+
import i from "./PDFSignatures.module.js";
|
|
6
|
+
import { memo as a, useCallback as o } from "react";
|
|
7
|
+
import { jsx as s, jsxs as c } from "react/jsx-runtime";
|
|
7
8
|
//#region src/components/features/PDFSignatures.tsx
|
|
8
|
-
function
|
|
9
|
+
function l(e) {
|
|
9
10
|
if (!e) return;
|
|
10
11
|
let t = e.match(/D:(\d{4})(\d{2})(\d{2})(\d{2})?(\d{2})?(\d{2})?/);
|
|
11
12
|
if (!t) return e;
|
|
12
13
|
let [, n, r, i, a = "00", o = "00"] = t;
|
|
13
14
|
return `${i}/${r}/${n} ${a}:${o}`;
|
|
14
15
|
}
|
|
15
|
-
function
|
|
16
|
-
return /* @__PURE__ */
|
|
16
|
+
function u() {
|
|
17
|
+
return /* @__PURE__ */ s("svg", {
|
|
17
18
|
width: "10",
|
|
18
19
|
height: "10",
|
|
19
20
|
viewBox: "0 0 10 10",
|
|
20
21
|
fill: "none",
|
|
21
22
|
"aria-hidden": !0,
|
|
22
|
-
children: /* @__PURE__ */
|
|
23
|
+
children: /* @__PURE__ */ s("path", {
|
|
23
24
|
d: "M1.5 5L3.8 7.5L8.5 2.5",
|
|
24
25
|
stroke: "currentColor",
|
|
25
26
|
strokeWidth: "1.6",
|
|
@@ -28,14 +29,14 @@ function l() {
|
|
|
28
29
|
})
|
|
29
30
|
});
|
|
30
31
|
}
|
|
31
|
-
function
|
|
32
|
-
return /* @__PURE__ */
|
|
32
|
+
function d() {
|
|
33
|
+
return /* @__PURE__ */ s("svg", {
|
|
33
34
|
width: "10",
|
|
34
35
|
height: "10",
|
|
35
36
|
viewBox: "0 0 10 10",
|
|
36
37
|
fill: "none",
|
|
37
38
|
"aria-hidden": !0,
|
|
38
|
-
children: /* @__PURE__ */
|
|
39
|
+
children: /* @__PURE__ */ s("circle", {
|
|
39
40
|
cx: "5",
|
|
40
41
|
cy: "5",
|
|
41
42
|
r: "3.7",
|
|
@@ -45,115 +46,117 @@ function u() {
|
|
|
45
46
|
})
|
|
46
47
|
});
|
|
47
48
|
}
|
|
48
|
-
var
|
|
49
|
-
let
|
|
50
|
-
className:
|
|
51
|
-
children: [/* @__PURE__ */
|
|
52
|
-
className:
|
|
53
|
-
children: [/* @__PURE__ */
|
|
54
|
-
className:
|
|
49
|
+
var f = a(function({ sig: e, labels: t, onNavigate: n }) {
|
|
50
|
+
let r = !!e.rect, a = `${i.card} ${e.signed ? i.cardSigned : ""} ${r ? i.cardClickable : ""}`, f = o(() => n(e), [n, e]), p = /* @__PURE__ */ c("div", {
|
|
51
|
+
className: i.cardBody,
|
|
52
|
+
children: [/* @__PURE__ */ c("div", {
|
|
53
|
+
className: i.cardHeader,
|
|
54
|
+
children: [/* @__PURE__ */ s("span", {
|
|
55
|
+
className: i.fieldName,
|
|
55
56
|
children: e.fieldName
|
|
56
|
-
}), /* @__PURE__ */
|
|
57
|
-
className: `${
|
|
58
|
-
children: [e.signed ? /* @__PURE__ */
|
|
57
|
+
}), /* @__PURE__ */ c("span", {
|
|
58
|
+
className: `${i.statusChip} ${e.signed ? i.statusChipSigned : ""}`,
|
|
59
|
+
children: [e.signed ? /* @__PURE__ */ s(u, {}) : /* @__PURE__ */ s(d, {}), e.signed ? t.signatureSigned : t.signatureUnsigned]
|
|
59
60
|
})]
|
|
60
|
-
}), (e.signerName || e.signDate || e.reason || e.location) && /* @__PURE__ */
|
|
61
|
-
className:
|
|
61
|
+
}), (e.signerName || e.signDate || e.reason || e.location) && /* @__PURE__ */ c("div", {
|
|
62
|
+
className: i.fieldList,
|
|
62
63
|
children: [
|
|
63
|
-
e.signerName && /* @__PURE__ */
|
|
64
|
-
className:
|
|
65
|
-
children: [/* @__PURE__ */
|
|
66
|
-
className:
|
|
67
|
-
children:
|
|
68
|
-
}), /* @__PURE__ */
|
|
69
|
-
className:
|
|
64
|
+
e.signerName && /* @__PURE__ */ c("div", {
|
|
65
|
+
className: i.fieldRow,
|
|
66
|
+
children: [/* @__PURE__ */ s("span", {
|
|
67
|
+
className: i.fieldLabel,
|
|
68
|
+
children: t.signatureSignerLabel
|
|
69
|
+
}), /* @__PURE__ */ s("span", {
|
|
70
|
+
className: i.fieldValue,
|
|
70
71
|
children: e.signerName
|
|
71
72
|
})]
|
|
72
73
|
}),
|
|
73
|
-
e.signDate && /* @__PURE__ */
|
|
74
|
-
className:
|
|
75
|
-
children: [/* @__PURE__ */
|
|
76
|
-
className:
|
|
77
|
-
children:
|
|
78
|
-
}), /* @__PURE__ */
|
|
79
|
-
className:
|
|
80
|
-
children:
|
|
74
|
+
e.signDate && /* @__PURE__ */ c("div", {
|
|
75
|
+
className: i.fieldRow,
|
|
76
|
+
children: [/* @__PURE__ */ s("span", {
|
|
77
|
+
className: i.fieldLabel,
|
|
78
|
+
children: t.signatureDateLabel
|
|
79
|
+
}), /* @__PURE__ */ s("span", {
|
|
80
|
+
className: i.fieldValue,
|
|
81
|
+
children: l(e.signDate)
|
|
81
82
|
})]
|
|
82
83
|
}),
|
|
83
|
-
e.reason && /* @__PURE__ */
|
|
84
|
-
className:
|
|
85
|
-
children: [/* @__PURE__ */
|
|
86
|
-
className:
|
|
87
|
-
children:
|
|
88
|
-
}), /* @__PURE__ */
|
|
89
|
-
className:
|
|
84
|
+
e.reason && /* @__PURE__ */ c("div", {
|
|
85
|
+
className: i.fieldRow,
|
|
86
|
+
children: [/* @__PURE__ */ s("span", {
|
|
87
|
+
className: i.fieldLabel,
|
|
88
|
+
children: t.signatureReasonLabel
|
|
89
|
+
}), /* @__PURE__ */ s("span", {
|
|
90
|
+
className: i.fieldValue,
|
|
90
91
|
children: e.reason
|
|
91
92
|
})]
|
|
92
93
|
}),
|
|
93
|
-
e.location && /* @__PURE__ */
|
|
94
|
-
className:
|
|
95
|
-
children: [/* @__PURE__ */
|
|
96
|
-
className:
|
|
97
|
-
children:
|
|
98
|
-
}), /* @__PURE__ */
|
|
99
|
-
className:
|
|
94
|
+
e.location && /* @__PURE__ */ c("div", {
|
|
95
|
+
className: i.fieldRow,
|
|
96
|
+
children: [/* @__PURE__ */ s("span", {
|
|
97
|
+
className: i.fieldLabel,
|
|
98
|
+
children: t.signatureLocationLabel
|
|
99
|
+
}), /* @__PURE__ */ s("span", {
|
|
100
|
+
className: i.fieldValue,
|
|
100
101
|
children: e.location
|
|
101
102
|
})]
|
|
102
103
|
})
|
|
103
104
|
]
|
|
104
105
|
})]
|
|
105
106
|
});
|
|
106
|
-
return
|
|
107
|
+
return r ? /* @__PURE__ */ s("button", {
|
|
107
108
|
type: "button",
|
|
108
|
-
className:
|
|
109
|
-
onClick:
|
|
110
|
-
children:
|
|
111
|
-
}) : /* @__PURE__ */
|
|
112
|
-
className:
|
|
113
|
-
children:
|
|
109
|
+
className: a,
|
|
110
|
+
onClick: f,
|
|
111
|
+
children: p
|
|
112
|
+
}) : /* @__PURE__ */ s("div", {
|
|
113
|
+
className: a,
|
|
114
|
+
children: p
|
|
114
115
|
});
|
|
115
116
|
});
|
|
116
|
-
function
|
|
117
|
-
let { pdf:
|
|
118
|
-
return /* @__PURE__ */
|
|
119
|
-
className:
|
|
120
|
-
children: [t, !
|
|
121
|
-
className:
|
|
117
|
+
function p({ icon: t }) {
|
|
118
|
+
let { pdf: n } = e(), { signatures: a, loading: o } = r({ pdf: n }), l = a.length;
|
|
119
|
+
return /* @__PURE__ */ c("span", {
|
|
120
|
+
className: i.iconWrapper,
|
|
121
|
+
children: [t, !o && l > 0 && /* @__PURE__ */ s("span", {
|
|
122
|
+
className: i.badge,
|
|
122
123
|
children: l > 99 ? "99+" : l
|
|
123
124
|
})]
|
|
124
125
|
});
|
|
125
126
|
}
|
|
126
|
-
function
|
|
127
|
-
let { pdf:
|
|
128
|
-
|
|
127
|
+
function m() {
|
|
128
|
+
let { pdf: a, goToPage: l, setHighlight: u, setZoom: d, setFitMode: p, rotation: m, containerRef: h } = e(), g = n(), { signatures: _, loading: v } = r({ pdf: a }), y = o(async (e) => {
|
|
129
|
+
p("page"), a && h.current && d(await t("page", a, h.current, m)), l(e.page), e.rect && u({
|
|
129
130
|
page: e.page,
|
|
130
131
|
pdfRect: e.rect
|
|
131
132
|
});
|
|
132
133
|
}, [
|
|
133
|
-
|
|
134
|
+
a,
|
|
135
|
+
h,
|
|
136
|
+
m,
|
|
137
|
+
l,
|
|
138
|
+
d,
|
|
134
139
|
p,
|
|
135
|
-
|
|
136
|
-
c,
|
|
137
|
-
u,
|
|
138
|
-
l
|
|
140
|
+
u
|
|
139
141
|
]);
|
|
140
|
-
return /* @__PURE__ */
|
|
141
|
-
className:
|
|
142
|
+
return /* @__PURE__ */ c("div", {
|
|
143
|
+
className: i.list,
|
|
142
144
|
children: [
|
|
143
|
-
|
|
144
|
-
className:
|
|
145
|
-
children:
|
|
145
|
+
v && /* @__PURE__ */ s("div", {
|
|
146
|
+
className: i.emptyState,
|
|
147
|
+
children: g.signaturesLoading
|
|
146
148
|
}),
|
|
147
|
-
!
|
|
148
|
-
className:
|
|
149
|
-
children:
|
|
149
|
+
!v && _.length === 0 && /* @__PURE__ */ s("div", {
|
|
150
|
+
className: i.emptyState,
|
|
151
|
+
children: g.signaturesEmpty
|
|
150
152
|
}),
|
|
151
|
-
!
|
|
153
|
+
!v && _.map((e, t) => /* @__PURE__ */ s(f, {
|
|
152
154
|
sig: e,
|
|
153
|
-
|
|
155
|
+
labels: g,
|
|
156
|
+
onNavigate: y
|
|
154
157
|
}, t))
|
|
155
158
|
]
|
|
156
159
|
});
|
|
157
160
|
}
|
|
158
161
|
//#endregion
|
|
159
|
-
export {
|
|
162
|
+
export { m as PDFSignatures, p as PDFSignaturesIcon };
|
|
@@ -1,16 +1,17 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { useLabels as e } from "../../hooks/useLabels.js";
|
|
2
|
+
import { ToolbarButton as t } from "../ui/ToolbarButton.js";
|
|
3
|
+
import { useTheme as n } from "../../hooks/useTheme.js";
|
|
3
4
|
import "react";
|
|
4
|
-
import { jsx as
|
|
5
|
+
import { jsx as r } from "react/jsx-runtime";
|
|
5
6
|
//#region src/components/features/PDFThemeToggle.tsx
|
|
6
|
-
function
|
|
7
|
-
let { isDark:
|
|
8
|
-
return /* @__PURE__ */
|
|
9
|
-
onClick:
|
|
10
|
-
title:
|
|
11
|
-
children:
|
|
7
|
+
function i({ lightIcon: i, darkIcon: a }) {
|
|
8
|
+
let { isDark: o, toggleTheme: s } = n(), c = e();
|
|
9
|
+
return /* @__PURE__ */ r(t, {
|
|
10
|
+
onClick: s,
|
|
11
|
+
title: o ? c.switchToLightTitle : c.switchToDarkTitle,
|
|
12
|
+
children: o ? i : a
|
|
12
13
|
});
|
|
13
14
|
}
|
|
14
|
-
|
|
15
|
+
i.toolbarLabelKey = "themeToolbarLabel";
|
|
15
16
|
//#endregion
|
|
16
|
-
export {
|
|
17
|
+
export { i as PDFThemeToggle };
|
|
@@ -1,54 +1,55 @@
|
|
|
1
1
|
import { usePDFViewer as e } from "../../context/PDFViewerContext.js";
|
|
2
|
-
import {
|
|
3
|
-
import n from "
|
|
4
|
-
import
|
|
5
|
-
import {
|
|
2
|
+
import { useLabels as t } from "../../hooks/useLabels.js";
|
|
3
|
+
import { useThumbnails as n } from "../../hooks/useThumbnails.js";
|
|
4
|
+
import r from "./PDFThumbnails.module.js";
|
|
5
|
+
import { useEffect as i, useRef as a, useState as o } from "react";
|
|
6
|
+
import { jsx as s, jsxs as c } from "react/jsx-runtime";
|
|
6
7
|
//#region src/components/features/PDFThumbnails.tsx
|
|
7
|
-
var
|
|
8
|
-
function
|
|
8
|
+
var l = 3;
|
|
9
|
+
function u(e, t, n) {
|
|
9
10
|
let r = new Set(t);
|
|
10
11
|
for (let t of e) {
|
|
11
12
|
if (!t.isIntersecting) continue;
|
|
12
13
|
let e = Number(t.target.dataset.page);
|
|
13
|
-
for (let t = Math.max(1, e -
|
|
14
|
+
for (let t = Math.max(1, e - l); t <= Math.min(n, e + l); t++) r.add(t);
|
|
14
15
|
}
|
|
15
16
|
let i = Array.from(r).sort((e, t) => e - t);
|
|
16
17
|
return i.join(",") === t.join(",") ? t : i;
|
|
17
18
|
}
|
|
18
|
-
function
|
|
19
|
-
let { pdf:
|
|
20
|
-
pdf:
|
|
21
|
-
rotation:
|
|
22
|
-
visiblePages:
|
|
19
|
+
function d() {
|
|
20
|
+
let { pdf: l, rotation: d, currentPage: f, goToPage: p, numPages: m } = e(), h = t(), g = a([]), [_, v] = o([]), { thumbnails: y } = n({
|
|
21
|
+
pdf: l,
|
|
22
|
+
rotation: d,
|
|
23
|
+
visiblePages: _
|
|
23
24
|
});
|
|
24
|
-
return
|
|
25
|
-
if (
|
|
26
|
-
let e = new IntersectionObserver((e) =>
|
|
27
|
-
return
|
|
25
|
+
return i(() => {
|
|
26
|
+
if (m === 0) return;
|
|
27
|
+
let e = new IntersectionObserver((e) => v((t) => u(e, t, m)), { threshold: 0 });
|
|
28
|
+
return g.current.forEach((t) => {
|
|
28
29
|
t && e.observe(t);
|
|
29
30
|
}), () => e.disconnect();
|
|
30
|
-
}, [
|
|
31
|
-
className:
|
|
32
|
-
children: Array.from({ length:
|
|
33
|
-
let
|
|
34
|
-
return /* @__PURE__ */
|
|
35
|
-
className: `${
|
|
36
|
-
onClick: () =>
|
|
31
|
+
}, [m]), /* @__PURE__ */ s("div", {
|
|
32
|
+
className: r.thumbnailList,
|
|
33
|
+
children: Array.from({ length: m }, (e, t) => {
|
|
34
|
+
let n = t + 1, i = y[t], a = f === n;
|
|
35
|
+
return /* @__PURE__ */ c("div", {
|
|
36
|
+
className: `${r.thumbnailItem} ${a ? r.thumbnailItemActive : ""}`,
|
|
37
|
+
onClick: () => p(n),
|
|
37
38
|
ref: (e) => {
|
|
38
|
-
|
|
39
|
+
g.current[t] = e;
|
|
39
40
|
},
|
|
40
|
-
"data-page":
|
|
41
|
-
children: [i ? /* @__PURE__ */
|
|
41
|
+
"data-page": n,
|
|
42
|
+
children: [i ? /* @__PURE__ */ s("img", {
|
|
42
43
|
src: i,
|
|
43
|
-
className: `${
|
|
44
|
-
alt:
|
|
45
|
-
}) : /* @__PURE__ */
|
|
46
|
-
className: `${
|
|
47
|
-
children:
|
|
44
|
+
className: `${r.thumbnailImg} ${a ? r.thumbnailImgActive : ""}`,
|
|
45
|
+
alt: `${h.thumbnailAlt} ${n}`
|
|
46
|
+
}) : /* @__PURE__ */ s("div", { className: r.thumbnailSkeleton }), /* @__PURE__ */ s("div", {
|
|
47
|
+
className: `${r.thumbnailLabel} ${a ? r.thumbnailLabelActive : ""}`,
|
|
48
|
+
children: n
|
|
48
49
|
})]
|
|
49
50
|
}, t);
|
|
50
51
|
})
|
|
51
52
|
});
|
|
52
53
|
}
|
|
53
54
|
//#endregion
|
|
54
|
-
export {
|
|
55
|
+
export { d as PDFThumbnails };
|
|
@@ -1,30 +1,31 @@
|
|
|
1
1
|
import { usePDFViewer as e } from "../../context/PDFViewerContext.js";
|
|
2
|
-
import {
|
|
3
|
-
import n from "
|
|
4
|
-
import
|
|
5
|
-
import {
|
|
2
|
+
import { useLabels as t } from "../../hooks/useLabels.js";
|
|
3
|
+
import { ToolbarButton as n } from "../ui/ToolbarButton.js";
|
|
4
|
+
import r from "./PDFZoomControls.module.js";
|
|
5
|
+
import { useCallback as i } from "react";
|
|
6
|
+
import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
|
|
6
7
|
//#region src/components/features/PDFZoomControls.tsx
|
|
7
|
-
function
|
|
8
|
-
let { zoom:
|
|
9
|
-
|
|
10
|
-
}, [
|
|
11
|
-
return /* @__PURE__ */
|
|
12
|
-
/* @__PURE__ */
|
|
13
|
-
onClick:
|
|
14
|
-
title:
|
|
15
|
-
children:
|
|
8
|
+
function c({ zoomOutIcon: c, zoomInIcon: l }) {
|
|
9
|
+
let { zoom: u, setZoom: d, setFitMode: f } = e(), p = t(), m = i((e) => {
|
|
10
|
+
f(null), d((t) => Math.min(Math.max(t + e, .2), 3));
|
|
11
|
+
}, [f, d]), h = i(() => m(-.2), [m]), g = i(() => m(.2), [m]);
|
|
12
|
+
return /* @__PURE__ */ s(a, { children: [
|
|
13
|
+
/* @__PURE__ */ o(n, {
|
|
14
|
+
onClick: h,
|
|
15
|
+
title: p.zoomOutTitle,
|
|
16
|
+
children: c
|
|
16
17
|
}),
|
|
17
|
-
/* @__PURE__ */
|
|
18
|
-
className:
|
|
19
|
-
children: [Math.round(
|
|
18
|
+
/* @__PURE__ */ s("span", {
|
|
19
|
+
className: r.zoomLabel,
|
|
20
|
+
children: [Math.round(u * 100), "%"]
|
|
20
21
|
}),
|
|
21
|
-
/* @__PURE__ */
|
|
22
|
-
onClick:
|
|
23
|
-
title:
|
|
24
|
-
children:
|
|
22
|
+
/* @__PURE__ */ o(n, {
|
|
23
|
+
onClick: g,
|
|
24
|
+
title: p.zoomInTitle,
|
|
25
|
+
children: l
|
|
25
26
|
})
|
|
26
27
|
] });
|
|
27
28
|
}
|
|
28
|
-
|
|
29
|
+
c.toolbarLabelKey = "zoomToolbarLabel";
|
|
29
30
|
//#endregion
|
|
30
|
-
export {
|
|
31
|
+
export { c as PDFZoomControls };
|
|
@@ -1,85 +1,86 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import t from "./
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import {
|
|
1
|
+
import { useLabels as e } from "../../hooks/useLabels.js";
|
|
2
|
+
import { ToolbarButton as t } from "./ToolbarButton.js";
|
|
3
|
+
import n from "./PDFToolbar.module.js";
|
|
4
|
+
import { PDFToolbarDropdownContext as r } from "./PDFToolbarDropdownContext.js";
|
|
5
|
+
import i, { useCallback as a, useEffect as o, useLayoutEffect as s, useRef as c, useState as l } from "react";
|
|
6
|
+
import { jsx as u, jsxs as d } from "react/jsx-runtime";
|
|
6
7
|
//#region src/components/ui/PDFToolbar.tsx
|
|
7
|
-
var
|
|
8
|
-
function
|
|
9
|
-
let
|
|
10
|
-
let e =
|
|
8
|
+
var f = 40;
|
|
9
|
+
function p({ children: p, overflowIcon: m = "···" }) {
|
|
10
|
+
let h = e(), g = c(null), _ = c([]), v = c([]), [y, b] = l(null), [x, S] = l(!1), C = c(null), w = i.Children.toArray(p), T = a(() => {
|
|
11
|
+
let e = g.current, t = v.current;
|
|
11
12
|
if (!e || t.length === 0) return;
|
|
12
13
|
let n = e.offsetWidth;
|
|
13
14
|
if (t.reduce((e, t) => e + t, 0) <= n) {
|
|
14
|
-
|
|
15
|
+
b(null);
|
|
15
16
|
return;
|
|
16
17
|
}
|
|
17
18
|
let r = 0, i = 0;
|
|
18
|
-
for (let e = 0; e < t.length && r + t[e] +
|
|
19
|
-
|
|
19
|
+
for (let e = 0; e < t.length && r + t[e] + f <= n; e++) r += t[e], i++;
|
|
20
|
+
b(i);
|
|
20
21
|
}, []);
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
}, []),
|
|
24
|
-
let e =
|
|
22
|
+
s(() => {
|
|
23
|
+
v.current = _.current.slice(0, w.length).map((e) => e?.offsetWidth ?? 0), T();
|
|
24
|
+
}, []), o(() => {
|
|
25
|
+
let e = g.current;
|
|
25
26
|
if (!e) return;
|
|
26
|
-
let t = new ResizeObserver(() =>
|
|
27
|
+
let t = new ResizeObserver(() => T());
|
|
27
28
|
return t.observe(e), () => t.disconnect();
|
|
28
|
-
}, [
|
|
29
|
-
if (!
|
|
29
|
+
}, [T]), o(() => {
|
|
30
|
+
if (!x) return;
|
|
30
31
|
let e = (e) => {
|
|
31
|
-
|
|
32
|
+
C.current?.contains(e.target) || S(!1);
|
|
32
33
|
};
|
|
33
34
|
return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
|
|
34
|
-
}, [
|
|
35
|
-
let
|
|
36
|
-
return /* @__PURE__ */
|
|
37
|
-
ref:
|
|
38
|
-
className:
|
|
39
|
-
children: [
|
|
35
|
+
}, [x]);
|
|
36
|
+
let E = y !== null && y < w.length, D = E ? w.slice(y) : [];
|
|
37
|
+
return /* @__PURE__ */ d("div", {
|
|
38
|
+
ref: g,
|
|
39
|
+
className: n.toolbar,
|
|
40
|
+
children: [w.map((e, t) => /* @__PURE__ */ u("div", {
|
|
40
41
|
ref: (e) => {
|
|
41
|
-
|
|
42
|
+
_.current[t] = e;
|
|
42
43
|
},
|
|
43
|
-
className:
|
|
44
|
-
style:
|
|
44
|
+
className: n.item,
|
|
45
|
+
style: y !== null && t >= y ? { display: "none" } : void 0,
|
|
45
46
|
children: e
|
|
46
|
-
},
|
|
47
|
-
ref:
|
|
48
|
-
className:
|
|
49
|
-
children: [/* @__PURE__ */
|
|
50
|
-
onClick: () =>
|
|
51
|
-
"aria-label":
|
|
52
|
-
"aria-expanded":
|
|
47
|
+
}, t)), E && /* @__PURE__ */ d("div", {
|
|
48
|
+
ref: C,
|
|
49
|
+
className: n.overflowWrapper,
|
|
50
|
+
children: [/* @__PURE__ */ u(t, {
|
|
51
|
+
onClick: () => S((e) => !e),
|
|
52
|
+
"aria-label": h.toolbarMoreOptions,
|
|
53
|
+
"aria-expanded": x,
|
|
53
54
|
"aria-haspopup": "true",
|
|
54
|
-
title:
|
|
55
|
-
className:
|
|
56
|
-
children:
|
|
57
|
-
}),
|
|
58
|
-
className:
|
|
55
|
+
title: h.toolbarMoreOptions,
|
|
56
|
+
className: x ? n.overflowBtnActive : void 0,
|
|
57
|
+
children: m
|
|
58
|
+
}), x && /* @__PURE__ */ u("div", {
|
|
59
|
+
className: n.dropdown,
|
|
59
60
|
role: "menu",
|
|
60
|
-
children:
|
|
61
|
-
let a =
|
|
62
|
-
return /* @__PURE__ */
|
|
63
|
-
className:
|
|
61
|
+
children: D.map((e, t) => {
|
|
62
|
+
let a = i.isValidElement(e) ? e.type.toolbarLabelKey : void 0, o = a ? h[a] : void 0;
|
|
63
|
+
return /* @__PURE__ */ u("div", {
|
|
64
|
+
className: n.dropdownItem,
|
|
64
65
|
role: "menuitem",
|
|
65
|
-
children:
|
|
66
|
-
className:
|
|
67
|
-
children: [/* @__PURE__ */
|
|
68
|
-
className:
|
|
69
|
-
children:
|
|
70
|
-
}), /* @__PURE__ */
|
|
71
|
-
className:
|
|
66
|
+
children: o ? /* @__PURE__ */ d("div", {
|
|
67
|
+
className: n.labeledItem,
|
|
68
|
+
children: [/* @__PURE__ */ u("span", {
|
|
69
|
+
className: n.itemLabel,
|
|
70
|
+
children: o
|
|
71
|
+
}), /* @__PURE__ */ u("div", {
|
|
72
|
+
className: n.itemContent,
|
|
72
73
|
children: e
|
|
73
74
|
})]
|
|
74
|
-
}) : /* @__PURE__ */
|
|
75
|
+
}) : /* @__PURE__ */ u(r.Provider, {
|
|
75
76
|
value: !0,
|
|
76
77
|
children: e
|
|
77
78
|
})
|
|
78
|
-
},
|
|
79
|
+
}, t);
|
|
79
80
|
})
|
|
80
81
|
})]
|
|
81
82
|
})]
|
|
82
83
|
});
|
|
83
84
|
}
|
|
84
85
|
//#endregion
|
|
85
|
-
export {
|
|
86
|
+
export { p as PDFToolbar };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { englishLabels as e, italianLabels as t } from "../labels.js";
|
|
2
|
+
import { LabelsContext as n } from "./labelsContextValue.js";
|
|
3
|
+
import { useMemo as r } from "react";
|
|
4
|
+
import { jsx as i } from "react/jsx-runtime";
|
|
5
|
+
//#region src/context/LabelsContext.tsx
|
|
6
|
+
function a({ children: a, language: o }) {
|
|
7
|
+
let s = r(() => o === "it" ? t : e, [o]);
|
|
8
|
+
return /* @__PURE__ */ i(n.Provider, {
|
|
9
|
+
value: s,
|
|
10
|
+
children: a
|
|
11
|
+
});
|
|
12
|
+
}
|
|
13
|
+
//#endregion
|
|
14
|
+
export { a as LabelsProvider };
|