@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.js
CHANGED
|
@@ -355,7 +355,8 @@ function FieldDesigner({
|
|
|
355
355
|
onChange,
|
|
356
356
|
workerSrc,
|
|
357
357
|
primaryColor = "#4f46e5",
|
|
358
|
-
hideFieldList = false
|
|
358
|
+
hideFieldList = false,
|
|
359
|
+
disabled = false
|
|
359
360
|
}) {
|
|
360
361
|
const [numPages, setNumPages] = useState(0);
|
|
361
362
|
const [page, setPage] = useState(value[0]?.page ?? 1);
|
|
@@ -415,6 +416,17 @@ function FieldDesigner({
|
|
|
415
416
|
cancelled = true;
|
|
416
417
|
};
|
|
417
418
|
}, [page, numPages]);
|
|
419
|
+
useEffect(() => {
|
|
420
|
+
function onKey(e) {
|
|
421
|
+
if (e.key !== "Escape") return;
|
|
422
|
+
setDrawMode(false);
|
|
423
|
+
setDrag(null);
|
|
424
|
+
setLive(null);
|
|
425
|
+
setConfigId(null);
|
|
426
|
+
}
|
|
427
|
+
window.addEventListener("keydown", onKey);
|
|
428
|
+
return () => window.removeEventListener("keydown", onKey);
|
|
429
|
+
}, []);
|
|
418
430
|
function rel(e) {
|
|
419
431
|
const r = stageRef.current.getBoundingClientRect();
|
|
420
432
|
return {
|
|
@@ -547,6 +559,7 @@ function FieldDesigner({
|
|
|
547
559
|
"button",
|
|
548
560
|
{
|
|
549
561
|
type: "button",
|
|
562
|
+
disabled,
|
|
550
563
|
onClick: () => {
|
|
551
564
|
if (active) setDrawMode(false);
|
|
552
565
|
else {
|
|
@@ -559,17 +572,17 @@ function FieldDesigner({
|
|
|
559
572
|
fontWeight: 600,
|
|
560
573
|
padding: "5px 12px",
|
|
561
574
|
borderRadius: 6,
|
|
562
|
-
border: `1px solid ${primaryColor}`,
|
|
575
|
+
border: `1px solid ${disabled ? "#d1d5db" : primaryColor}`,
|
|
563
576
|
background: active ? primaryColor : "#fff",
|
|
564
|
-
color: active ? "#fff" : primaryColor,
|
|
565
|
-
cursor: "pointer"
|
|
577
|
+
color: disabled ? "#9ca3af" : active ? "#fff" : primaryColor,
|
|
578
|
+
cursor: disabled ? "not-allowed" : "pointer"
|
|
566
579
|
},
|
|
567
580
|
children: t === "date" ? "+ Date" : "+ Signature"
|
|
568
581
|
},
|
|
569
582
|
t
|
|
570
583
|
);
|
|
571
584
|
}),
|
|
572
|
-
/* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "#6b7280" }, children: drawMode ? `Drag a ${pendingType} box on the page\u2026` : "or drag on the page." }),
|
|
585
|
+
/* @__PURE__ */ 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." }),
|
|
573
586
|
numPages > 1 ? /* @__PURE__ */ jsxs("label", { style: { marginLeft: "auto", fontSize: 13, color: "#374151" }, children: [
|
|
574
587
|
"Page",
|
|
575
588
|
" ",
|
|
@@ -583,6 +596,7 @@ function FieldDesigner({
|
|
|
583
596
|
{
|
|
584
597
|
ref: stageRef,
|
|
585
598
|
onPointerDown: (e) => {
|
|
599
|
+
if (disabled) return;
|
|
586
600
|
setSelectedId(null);
|
|
587
601
|
if (drawMode || e.pointerType === "mouse") setDrag({ mode: "new", start: rel(e) });
|
|
588
602
|
},
|
|
@@ -820,75 +834,92 @@ function FieldDesigner({
|
|
|
820
834
|
] }),
|
|
821
835
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
822
836
|
/* @__PURE__ */ jsx("div", { style: { fontSize: 12, fontWeight: 600, marginBottom: 4 }, children: "Earliest date" }),
|
|
823
|
-
/* @__PURE__ */ jsxs(
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
{
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
WebkitAppearance: "none"
|
|
850
|
-
}
|
|
851
|
-
}
|
|
852
|
-
),
|
|
853
|
-
/* @__PURE__ */ jsx(
|
|
854
|
-
"button",
|
|
855
|
-
{
|
|
856
|
-
type: "button",
|
|
857
|
-
"aria-label": "Open calendar",
|
|
858
|
-
onClick: () => minDateRef.current?.showPicker?.(),
|
|
859
|
-
style: {
|
|
860
|
-
border: "none",
|
|
861
|
-
background: "transparent",
|
|
862
|
-
cursor: "pointer",
|
|
863
|
-
fontSize: 14,
|
|
864
|
-
lineHeight: 1,
|
|
865
|
-
padding: "4px 8px 4px 2px"
|
|
866
|
-
},
|
|
867
|
-
children: "\u{1F4C5}"
|
|
837
|
+
/* @__PURE__ */ jsxs(
|
|
838
|
+
"div",
|
|
839
|
+
{
|
|
840
|
+
style: {
|
|
841
|
+
display: "inline-flex",
|
|
842
|
+
alignItems: "center",
|
|
843
|
+
border: "1px solid #d1d5db",
|
|
844
|
+
borderRadius: 6,
|
|
845
|
+
background: "#fff"
|
|
846
|
+
},
|
|
847
|
+
children: [
|
|
848
|
+
/* @__PURE__ */ jsx(
|
|
849
|
+
"input",
|
|
850
|
+
{
|
|
851
|
+
ref: minDateRef,
|
|
852
|
+
type: "date",
|
|
853
|
+
value: configField.minDate ?? "",
|
|
854
|
+
onChange: (e) => setConfig(configField.id, { minDate: e.target.value || null }),
|
|
855
|
+
style: {
|
|
856
|
+
border: "none",
|
|
857
|
+
outline: "none",
|
|
858
|
+
background: "transparent",
|
|
859
|
+
padding: "5px 4px 5px 8px",
|
|
860
|
+
fontSize: 13,
|
|
861
|
+
appearance: "none",
|
|
862
|
+
WebkitAppearance: "none"
|
|
868
863
|
}
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
864
|
+
}
|
|
865
|
+
),
|
|
866
|
+
configField.minDate ? /* @__PURE__ */ jsx(
|
|
867
|
+
"button",
|
|
868
|
+
{
|
|
869
|
+
type: "button",
|
|
870
|
+
"aria-label": "Clear earliest date",
|
|
871
|
+
onClick: () => setConfig(configField.id, { minDate: null }),
|
|
872
|
+
style: {
|
|
873
|
+
border: "none",
|
|
874
|
+
background: "transparent",
|
|
875
|
+
color: "#dc2626",
|
|
876
|
+
cursor: "pointer",
|
|
877
|
+
fontSize: 16,
|
|
878
|
+
lineHeight: 1,
|
|
879
|
+
padding: "2px 4px"
|
|
880
|
+
},
|
|
881
|
+
children: "\xD7"
|
|
882
|
+
}
|
|
883
|
+
) : null,
|
|
884
|
+
/* @__PURE__ */ jsx(
|
|
885
|
+
"button",
|
|
886
|
+
{
|
|
887
|
+
type: "button",
|
|
888
|
+
"aria-label": "Open calendar",
|
|
889
|
+
onClick: () => minDateRef.current?.showPicker?.(),
|
|
890
|
+
style: {
|
|
891
|
+
display: "inline-flex",
|
|
892
|
+
alignItems: "center",
|
|
893
|
+
border: "none",
|
|
894
|
+
background: "transparent",
|
|
895
|
+
color: "#6b7280",
|
|
896
|
+
cursor: "pointer",
|
|
897
|
+
padding: "4px 8px 4px 4px"
|
|
898
|
+
},
|
|
899
|
+
children: /* @__PURE__ */ jsxs(
|
|
900
|
+
"svg",
|
|
901
|
+
{
|
|
902
|
+
width: "15",
|
|
903
|
+
height: "15",
|
|
904
|
+
viewBox: "0 0 24 24",
|
|
905
|
+
fill: "none",
|
|
906
|
+
stroke: "currentColor",
|
|
907
|
+
strokeWidth: "2",
|
|
908
|
+
strokeLinecap: "round",
|
|
909
|
+
strokeLinejoin: "round",
|
|
910
|
+
"aria-hidden": "true",
|
|
911
|
+
children: [
|
|
912
|
+
/* @__PURE__ */ jsx("rect", { width: "18", height: "18", x: "3", y: "4", rx: "2" }),
|
|
913
|
+
/* @__PURE__ */ jsx("path", { d: "M3 10h18M8 2v4M16 2v4" })
|
|
914
|
+
]
|
|
915
|
+
}
|
|
916
|
+
)
|
|
917
|
+
}
|
|
918
|
+
)
|
|
919
|
+
]
|
|
920
|
+
}
|
|
921
|
+
),
|
|
922
|
+
/* @__PURE__ */ jsx("span", { style: { color: "#9ca3af", fontSize: 11, display: "block", marginTop: 4 }, children: "Leave blank to use the document's creation date." })
|
|
892
923
|
] })
|
|
893
924
|
]
|
|
894
925
|
}
|