@josephomills/esign 0.9.4 → 0.9.6
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/dist/ui/index.cjs +104 -73
- package/dist/ui/index.cjs.map +1 -1
- package/dist/ui/index.d.cts +3 -1
- package/dist/ui/index.d.ts +3 -1
- package/dist/ui/index.js +104 -73
- package/dist/ui/index.js.map +1 -1
- package/package.json +1 -1
package/dist/ui/index.cjs
CHANGED
|
@@ -361,7 +361,8 @@ function FieldDesigner({
|
|
|
361
361
|
onChange,
|
|
362
362
|
workerSrc,
|
|
363
363
|
primaryColor = "#4f46e5",
|
|
364
|
-
hideFieldList = false
|
|
364
|
+
hideFieldList = false,
|
|
365
|
+
disabled = false
|
|
365
366
|
}) {
|
|
366
367
|
const [numPages, setNumPages] = react.useState(0);
|
|
367
368
|
const [page, setPage] = react.useState(value[0]?.page ?? 1);
|
|
@@ -421,6 +422,17 @@ function FieldDesigner({
|
|
|
421
422
|
cancelled = true;
|
|
422
423
|
};
|
|
423
424
|
}, [page, numPages]);
|
|
425
|
+
react.useEffect(() => {
|
|
426
|
+
function onKey(e) {
|
|
427
|
+
if (e.key !== "Escape") return;
|
|
428
|
+
setDrawMode(false);
|
|
429
|
+
setDrag(null);
|
|
430
|
+
setLive(null);
|
|
431
|
+
setConfigId(null);
|
|
432
|
+
}
|
|
433
|
+
window.addEventListener("keydown", onKey);
|
|
434
|
+
return () => window.removeEventListener("keydown", onKey);
|
|
435
|
+
}, []);
|
|
424
436
|
function rel(e) {
|
|
425
437
|
const r = stageRef.current.getBoundingClientRect();
|
|
426
438
|
return {
|
|
@@ -553,6 +565,7 @@ function FieldDesigner({
|
|
|
553
565
|
"button",
|
|
554
566
|
{
|
|
555
567
|
type: "button",
|
|
568
|
+
disabled,
|
|
556
569
|
onClick: () => {
|
|
557
570
|
if (active) setDrawMode(false);
|
|
558
571
|
else {
|
|
@@ -565,17 +578,17 @@ function FieldDesigner({
|
|
|
565
578
|
fontWeight: 600,
|
|
566
579
|
padding: "5px 12px",
|
|
567
580
|
borderRadius: 6,
|
|
568
|
-
border: `1px solid ${primaryColor}`,
|
|
581
|
+
border: `1px solid ${disabled ? "#d1d5db" : primaryColor}`,
|
|
569
582
|
background: active ? primaryColor : "#fff",
|
|
570
|
-
color: active ? "#fff" : primaryColor,
|
|
571
|
-
cursor: "pointer"
|
|
583
|
+
color: disabled ? "#9ca3af" : active ? "#fff" : primaryColor,
|
|
584
|
+
cursor: disabled ? "not-allowed" : "pointer"
|
|
572
585
|
},
|
|
573
586
|
children: t === "date" ? "+ Date" : "+ Signature"
|
|
574
587
|
},
|
|
575
588
|
t
|
|
576
589
|
);
|
|
577
590
|
}),
|
|
578
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12, color: "#6b7280" }, children: drawMode ? `Drag a ${pendingType} box on the page\u2026` : "or drag on the page." }),
|
|
591
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12, color: "#6b7280" }, children: disabled ? "Choose a PDF to add fields." : drawMode ? `Drag a ${pendingType} box on the page\u2026` : "or drag on the page." }),
|
|
579
592
|
numPages > 1 ? /* @__PURE__ */ jsxRuntime.jsxs("label", { style: { marginLeft: "auto", fontSize: 13, color: "#374151" }, children: [
|
|
580
593
|
"Page",
|
|
581
594
|
" ",
|
|
@@ -589,6 +602,7 @@ function FieldDesigner({
|
|
|
589
602
|
{
|
|
590
603
|
ref: stageRef,
|
|
591
604
|
onPointerDown: (e) => {
|
|
605
|
+
if (disabled) return;
|
|
592
606
|
setSelectedId(null);
|
|
593
607
|
if (drawMode || e.pointerType === "mouse") setDrag({ mode: "new", start: rel(e) });
|
|
594
608
|
},
|
|
@@ -826,75 +840,92 @@ function FieldDesigner({
|
|
|
826
840
|
] }),
|
|
827
841
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
828
842
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 12, fontWeight: 600, marginBottom: 4 }, children: "Earliest date" }),
|
|
829
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
{
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
WebkitAppearance: "none"
|
|
856
|
-
}
|
|
857
|
-
}
|
|
858
|
-
),
|
|
859
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
860
|
-
"button",
|
|
861
|
-
{
|
|
862
|
-
type: "button",
|
|
863
|
-
"aria-label": "Open calendar",
|
|
864
|
-
onClick: () => minDateRef.current?.showPicker?.(),
|
|
865
|
-
style: {
|
|
866
|
-
border: "none",
|
|
867
|
-
background: "transparent",
|
|
868
|
-
cursor: "pointer",
|
|
869
|
-
fontSize: 14,
|
|
870
|
-
lineHeight: 1,
|
|
871
|
-
padding: "4px 8px 4px 2px"
|
|
872
|
-
},
|
|
873
|
-
children: "\u{1F4C5}"
|
|
843
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
844
|
+
"div",
|
|
845
|
+
{
|
|
846
|
+
style: {
|
|
847
|
+
display: "inline-flex",
|
|
848
|
+
alignItems: "center",
|
|
849
|
+
border: "1px solid #d1d5db",
|
|
850
|
+
borderRadius: 6,
|
|
851
|
+
background: "#fff"
|
|
852
|
+
},
|
|
853
|
+
children: [
|
|
854
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
855
|
+
"input",
|
|
856
|
+
{
|
|
857
|
+
ref: minDateRef,
|
|
858
|
+
type: "date",
|
|
859
|
+
value: configField.minDate ?? "",
|
|
860
|
+
onChange: (e) => setConfig(configField.id, { minDate: e.target.value || null }),
|
|
861
|
+
style: {
|
|
862
|
+
border: "none",
|
|
863
|
+
outline: "none",
|
|
864
|
+
background: "transparent",
|
|
865
|
+
padding: "5px 4px 5px 8px",
|
|
866
|
+
fontSize: 13,
|
|
867
|
+
appearance: "none",
|
|
868
|
+
WebkitAppearance: "none"
|
|
874
869
|
}
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
870
|
+
}
|
|
871
|
+
),
|
|
872
|
+
configField.minDate ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
873
|
+
"button",
|
|
874
|
+
{
|
|
875
|
+
type: "button",
|
|
876
|
+
"aria-label": "Clear earliest date",
|
|
877
|
+
onClick: () => setConfig(configField.id, { minDate: null }),
|
|
878
|
+
style: {
|
|
879
|
+
border: "none",
|
|
880
|
+
background: "transparent",
|
|
881
|
+
color: "#dc2626",
|
|
882
|
+
cursor: "pointer",
|
|
883
|
+
fontSize: 16,
|
|
884
|
+
lineHeight: 1,
|
|
885
|
+
padding: "2px 4px"
|
|
886
|
+
},
|
|
887
|
+
children: "\xD7"
|
|
888
|
+
}
|
|
889
|
+
) : null,
|
|
890
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
891
|
+
"button",
|
|
892
|
+
{
|
|
893
|
+
type: "button",
|
|
894
|
+
"aria-label": "Open calendar",
|
|
895
|
+
onClick: () => minDateRef.current?.showPicker?.(),
|
|
896
|
+
style: {
|
|
897
|
+
display: "inline-flex",
|
|
898
|
+
alignItems: "center",
|
|
899
|
+
border: "none",
|
|
900
|
+
background: "transparent",
|
|
901
|
+
color: "#6b7280",
|
|
902
|
+
cursor: "pointer",
|
|
903
|
+
padding: "4px 8px 4px 4px"
|
|
904
|
+
},
|
|
905
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
906
|
+
"svg",
|
|
907
|
+
{
|
|
908
|
+
width: "15",
|
|
909
|
+
height: "15",
|
|
910
|
+
viewBox: "0 0 24 24",
|
|
911
|
+
fill: "none",
|
|
912
|
+
stroke: "currentColor",
|
|
913
|
+
strokeWidth: "2",
|
|
914
|
+
strokeLinecap: "round",
|
|
915
|
+
strokeLinejoin: "round",
|
|
916
|
+
"aria-hidden": "true",
|
|
917
|
+
children: [
|
|
918
|
+
/* @__PURE__ */ jsxRuntime.jsx("rect", { width: "18", height: "18", x: "3", y: "4", rx: "2" }),
|
|
919
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 10h18M8 2v4M16 2v4" })
|
|
920
|
+
]
|
|
921
|
+
}
|
|
922
|
+
)
|
|
923
|
+
}
|
|
924
|
+
)
|
|
925
|
+
]
|
|
926
|
+
}
|
|
927
|
+
),
|
|
928
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#9ca3af", fontSize: 11, display: "block", marginTop: 4 }, children: "Leave blank to use the document's creation date." })
|
|
898
929
|
] })
|
|
899
930
|
]
|
|
900
931
|
}
|