Skip to content

Commit b8f8869

Browse files
andrew-opensignlabsandrew-opensignlabs
authored
Merge pull request #488 from OpenSignLabs/feat_label
2 parents b47d1cf + 17660da commit b8f8869

File tree

4 files changed

+64
-113
lines changed

4 files changed

+64
-113
lines changed

‎apps/OpenSign/src/components/pdf/Placeholder.js‎

Lines changed: 49 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,10 @@ function Placeholder(props) {
114114
props.pos?.options?.validation?.format
115115
)
116116
);
117+
const [getCheckboxRenderWidth, setGetCheckboxRenderWidth] = useState({
118+
width: null,
119+
height: null
120+
});
117121
const dateFormatArr = [
118122
"L",
119123
"DD-MM-YYYY",
@@ -125,6 +129,21 @@ function Placeholder(props) {
125129
"DD MMM, YYYY",
126130
"DD MMMM, YYYY"
127131
];
132+
133+
useEffect(() => {
134+
const updateWidth = () => {
135+
const rndElement = document.getElementById(props.pos.key);
136+
if (rndElement) {
137+
const { width, height } = rndElement.getBoundingClientRect();
138+
setGetCheckboxRenderWidth({ width: width, height: height });
139+
}
140+
};
141+
142+
// Delay to ensure rendering is complete
143+
const timer = setTimeout(updateWidth, 0);
144+
145+
return () => clearTimeout(timer);
146+
}, [props.pos]);
128147
//function change format array list with selected date and format
129148
const changeDateFormat = () => {
130149
const updateDate = [];
@@ -168,8 +187,8 @@ function Placeholder(props) {
168187
};
169188
}, [isShowDateFormat]);
170189

171-
//onclick placeholder function to open signature pad
172-
const handlePlaceholderClick = () => {
190+
//`handleWidgetIdandPopup` is used to set current widget id and open relative popup
191+
const handleWidgetIdandPopup = () => {
173192
if (props.setSelectWidgetId) {
174193
props.setSelectWidgetId(props.pos.key);
175194
}
@@ -238,9 +257,18 @@ function Placeholder(props) {
238257
}
239258
}
240259
};
241-
242-
//function to set state value of onclick on widget's setting icon
243-
const handleWidgetsOnclick = () => {
260+
const handleOnClickPlaceholder = () => {
261+
if (!props.isNeedSign) {
262+
props.setWidgetType(props.pos.type);
263+
}
264+
if (props.isNeedSign && props.data?.signerObjId === props.signerObjId) {
265+
handleWidgetIdandPopup();
266+
} else if (props.isPlaceholder || props.isSignYourself) {
267+
handleWidgetIdandPopup();
268+
}
269+
};
270+
//`handleOnClickSettingIcon` is used set current widget details and open setting of it
271+
const handleOnClickSettingIcon = () => {
244272
if (props.pos.type === radioButtonWidget) {
245273
props.setIsRadio(true);
246274
} else if (props.pos.type === "dropdown") {
@@ -312,17 +340,17 @@ function Placeholder(props) {
312340
<i
313341
onClick={(e) => {
314342
e.stopPropagation();
315-
handleWidgetsOnclick();
343+
handleOnClickSettingIcon();
316344
}}
317345
onTouchEnd={(e) => {
318346
e.stopPropagation();
319-
handleWidgetsOnclick();
347+
handleOnClickSettingIcon();
320348
}}
321349
className="fa-solid fa-gear settingIcon"
322350
style={{
323351
color: "#188ae2",
324-
right: "9px",
325-
top: "-28px"
352+
right: "29px",
353+
top: "-19px"
326354
}}
327355
></i>
328356
) : (
@@ -335,26 +363,14 @@ function Placeholder(props) {
335363
<i
336364
onClick={(e) => {
337365
e.stopPropagation();
338-
handleWidgetsOnclick();
366+
handleOnClickSettingIcon();
339367
}}
340368
onTouchEnd={(e) => {
341369
e.stopPropagation();
342-
handleWidgetsOnclick();
370+
handleOnClickSettingIcon();
343371
}}
344372
className="fa-solid fa-gear settingIcon"
345-
style={{
346-
color: "#188ae2",
347-
right: ["checkbox", radioButtonWidget].includes(
348-
props.pos.type
349-
)
350-
? "24px"
351-
: "47px",
352-
top: ["checkbox", radioButtonWidget].includes(
353-
props.pos.type
354-
)
355-
? "-28px"
356-
: "-19px"
357-
}}
373+
style={{ color: "#188ae2", right: "47px", top: "-19px" }}
358374
></i>
359375
)
360376
)}
@@ -373,19 +389,7 @@ function Placeholder(props) {
373389
props.handleLinkUser(props.data.Id);
374390
props.setUniqueId(props.data.Id);
375391
}}
376-
style={{
377-
color: "#188ae2",
378-
right:
379-
props.pos.type === "checkbox" ||
380-
props.pos.type === radioButtonWidget
381-
? "8px"
382-
: "32px",
383-
top:
384-
props.pos.type === "checkbox" ||
385-
props.pos.type === radioButtonWidget
386-
? "-28px"
387-
: "-18px"
388-
}}
392+
style={{ color: "#188ae2", right: "32px", top: "-18px" }}
389393
></i>
390394
)}
391395
</>
@@ -463,19 +467,7 @@ function Placeholder(props) {
463467
className="fa-regular fa-copy signCopy"
464468
onClick={(e) => handleCopyPlaceholder(e)}
465469
onTouchEnd={(e) => handleCopyPlaceholder(e)}
466-
style={{
467-
color: "#188ae2",
468-
right:
469-
props.pos.type === "checkbox" ||
470-
props.pos.type === radioButtonWidget
471-
? "-9px"
472-
: "12px",
473-
top:
474-
props.pos.type === "checkbox" ||
475-
props.pos.type === radioButtonWidget
476-
? "-28px"
477-
: "-18px"
478-
}}
470+
style={{ color: "#188ae2", right: "12px", top: "-18px" }}
479471
></i>
480472
<i
481473
className="fa-regular fa-circle-xmark signCloseBtn"
@@ -498,19 +490,7 @@ function Placeholder(props) {
498490
props.setIsStamp(false);
499491
}
500492
}}
501-
style={{
502-
color: "#188ae2",
503-
right:
504-
props.pos.type === "checkbox" ||
505-
props.pos.type === radioButtonWidget
506-
? "-27px"
507-
: "-8px",
508-
top:
509-
props.pos.type === "checkbox" ||
510-
props.pos.type === radioButtonWidget
511-
? "-28px"
512-
: "-18px"
513-
}}
493+
style={{ color: "#188ae2", right: "-8px", top: "-18px" }}
514494
></i>
515495
</>
516496
)
@@ -519,6 +499,7 @@ function Placeholder(props) {
519499

520500
return (
521501
<Rnd
502+
id={props.pos.key}
522503
data-tut={props.pos.key === props.unSignedWidgetId ? "IsSigned" : ""}
523504
key={props.pos.key}
524505
lockAspectRatio={
@@ -622,33 +603,13 @@ function Placeholder(props) {
622603
false
623604
);
624605
}}
625-
onClick={() => {
626-
!props.isNeedSign && props.setWidgetType(props.pos.type);
627-
props.isNeedSign && props.data?.signerObjId === props.signerObjId
628-
? handlePlaceholderClick()
629-
: props.isPlaceholder
630-
? handlePlaceholderClick()
631-
: props.isSignYourself && handlePlaceholderClick();
632-
}}
606+
onClick={() => handleOnClickPlaceholder()}
633607
>
634608
{props.isShowBorder &&
635609
props.pos.type !== radioButtonWidget &&
636610
props.pos.type !== "checkbox" &&
637611
props.pos.key === props.selectWidgetId ? (
638-
<BorderResize
639-
right={
640-
props.pos.type === "checkbox" ||
641-
props.pos.type === radioButtonWidget
642-
? -21
643-
: -12
644-
}
645-
top={
646-
props.pos.type === "checkbox" ||
647-
props.pos.type === radioButtonWidget
648-
? -21
649-
: -11
650-
}
651-
/>
612+
<BorderResize right={-12} top={-11} />
652613
) : props.data && props.isNeedSign && props.pos.type !== "checkbox" ? (
653614
props.data?.signerObjId === props.signerObjId &&
654615
props.pos.type !== radioButtonWidget &&
@@ -668,25 +629,19 @@ function Placeholder(props) {
668629
setDraggingEnabled={setDraggingEnabled}
669630
pos={props.pos}
670631
isPlaceholder={props.isPlaceholder}
632+
getCheckboxRenderWidth={getCheckboxRenderWidth}
671633
/>
672634
)}
673635
{isMobile ? (
674636
<div
675637
style={{
676638
left: props.xPos(props.pos, props.isSignYourself),
677639
top: props.yPos(props.pos, props.isSignYourself),
678-
width: props.posWidth(props.pos, props.isSignYourself),
640+
width: "auto", //props.posWidth(props.pos, props.isSignYourself),
679641
// height: props.posHeight(props.pos, props.isSignYourself),
680642
zIndex: "10"
681643
}}
682-
onTouchEnd={() => {
683-
!props.isNeedSign && props.setWidgetType(props.pos.type);
684-
props.isNeedSign && props.data?.signerObjId === props.signerObjId
685-
? handlePlaceholderClick()
686-
: props.isPlaceholder
687-
? handlePlaceholderClick()
688-
: props.isSignYourself && handlePlaceholderClick();
689-
}}
644+
onTouchEnd={() => handleOnClickPlaceholder()}
690645
>
691646
{props.pos.key === props.selectWidgetId && <PlaceholderIcon />}
692647

‎apps/OpenSign/src/components/pdf/PlaceholderBorder.js‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,13 @@ import {
66
resizeBorderExtraWidth
77
} from "../../constant/Utils";
88
function PlaceholderBorder(props) {
9-
const getResizeBorderExtraWidth =
10-
props.pos.type === "checkbox" || props.pos.type === radioButtonWidget
11-
? 38
12-
: resizeBorderExtraWidth();
9+
const getResizeBorderExtraWidth = resizeBorderExtraWidth();
1310
const defaultWidth = defaultWidthHeight(props.pos.type).width;
1411
const defaultHeight = defaultWidthHeight(props.pos.type).height;
1512

1613
const handleMinWidth = () => {
1714
if (props.pos.type === "checkbox" || props.pos.type === radioButtonWidget) {
18-
return "120%";
15+
return props.getCheckboxRenderWidth.width + getResizeBorderExtraWidth;
1916
} else {
2017
return props.pos.Width
2118
? props.pos.Width + getResizeBorderExtraWidth
@@ -24,7 +21,7 @@ function PlaceholderBorder(props) {
2421
};
2522
const handleMinHeight = () => {
2623
if (props.pos.type === "checkbox" || props.pos.type === radioButtonWidget) {
27-
return "120%";
24+
return props.getCheckboxRenderWidth.height + getResizeBorderExtraWidth;
2825
} else {
2926
return props.pos.Height
3027
? props.pos.Height + getResizeBorderExtraWidth

‎apps/OpenSign/src/components/pdf/PlaceholderType.js‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -332,15 +332,14 @@ function PlaceholderType(props) {
332332
<div style={{ zIndex: props.isSignYourself && "99" }}>
333333
{props.pos.options?.values?.map((data, ind) => {
334334
return (
335-
<div key={ind} className="flex items-center gap-1 min-w-max">
335+
<div key={ind} className="flex items-center text-center gap-0.5">
336336
<input
337337
id={data}
338338
style={{
339339
width: props.pos.Width,
340340
display: "flex",
341341
justifyContent: "center",
342-
marginBottom: "6px",
343-
marginTop: "5px"
342+
marginTop: ind === 0 ? 0 : "5px"
344343
}}
345344
onBlur={handleInputBlur}
346345
disabled={
@@ -375,7 +374,10 @@ function PlaceholderType(props) {
375374
}}
376375
/>
377376
{!props.pos.options?.isHideLabel && (
378-
<label htmlFor={data} className="text-xs">
377+
<label
378+
htmlFor={!props.isPlaceholder && data}
379+
className="text-xs mb-0 text-center"
380+
>
379381
{data}
380382
</label>
381383
)}
@@ -710,18 +712,14 @@ function PlaceholderType(props) {
710712
<div>
711713
{props.pos.options?.values.map((data, ind) => {
712714
return (
713-
<div
714-
key={ind}
715-
className="flex flex-row items-center gap-1 min-w-max"
716-
>
715+
<div key={ind} className="flex items-center text-center gap-0.5">
717716
<input
718717
id={data}
719718
style={{
720719
width: props.pos.Width,
721720
display: "flex",
722721
justifyContent: "center",
723-
marginBottom: "6px",
724-
marginTop: "5px"
722+
marginTop: ind === 0 ? 0 : "5px"
725723
}}
726724
type="radio"
727725
disabled={
@@ -737,7 +735,10 @@ function PlaceholderType(props) {
737735
}}
738736
/>
739737
{!props.pos.options?.isHideLabel && (
740-
<label htmlFor={data} className="text-xs">
738+
<label
739+
htmlFor={!props.isPlaceholder && data}
740+
className="text-xs mb-0"
741+
>
741742
{data}
742743
</label>
743744
)}

‎apps/OpenSign/src/styles/signature.css‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -339,8 +339,6 @@
339339
display: flex !important;
340340
justify-content: center !important;
341341
align-items: center !important;
342-
min-width:max-content;
343-
min-height: max-content;
344342
}
345343

346344
.finishBtn {

0 commit comments

Comments
 (0)