Skip to content

Commit b99d8e6

Browse files
prafull-opensignlabsprafull-opensignlabs
committed
feat: add show/hide label in checkbox and radio widget
1 parent 8b15bce commit b99d8e6

File tree

11 files changed

+194
-114
lines changed

11 files changed

+194
-114
lines changed

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

Lines changed: 39 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ function DropdownWidgetOption(props) {
1111
const [maxCount, setMaxCount] = useState(0);
1212
const [dropdownName, setDropdownName] = useState(props.type);
1313
const [isReadOnly, setIsReadOnly] = useState(false);
14+
const [isHideLabel, setIsHideLabel] = useState(false);
1415
const [status, setStatus] = useState("required");
1516
const [defaultValue, setDefaultValue] = useState("");
1617
const statusArr = ["required", "optional"];
@@ -20,6 +21,7 @@ function DropdownWidgetOption(props) {
2021
setDropdownOptionList(["option-1", "option-2"]);
2122
setDropdownName(props.type);
2223
setIsReadOnly(false);
24+
setIsHideLabel(false);
2325
setMinCount(0);
2426
setMaxCount(0);
2527
setDefaultCheckbox([]);
@@ -40,6 +42,7 @@ function DropdownWidgetOption(props) {
4042
props.currWidgetsDetails?.options?.validation?.maxRequiredCount
4143
);
4244
setIsReadOnly(props.currWidgetsDetails?.options?.isReadOnly);
45+
setIsHideLabel(props.currWidgetsDetails?.options?.isHideLabel);
4346
setStatus(props.currWidgetsDetails?.options?.status || "required");
4447
setDefaultValue(props.currWidgetsDetails?.options?.defaultValue || "");
4548
setDefaultCheckbox(props.currWidgetsDetails?.options?.defaultValue || []);
@@ -107,13 +110,15 @@ function DropdownWidgetOption(props) {
107110
null,
108111
null,
109112
status,
110-
defaultData
113+
defaultData,
114+
isHideLabel
111115
);
112116
// props.setShowDropdown(false);
113117
setDropdownOptionList(["option-1", "option-2"]);
114118
setDropdownName(props.type);
115119
// props.setCurrWidgetsDetails({});
116120
setIsReadOnly(false);
121+
setIsHideLabel(false);
117122
setMinCount(0);
118123
setMaxCount(0);
119124
setDefaultCheckbox([]);
@@ -154,20 +159,6 @@ function DropdownWidgetOption(props) {
154159
}}
155160
>
156161
<div className="dropdownContainer">
157-
{["checkbox", radioButtonWidget].includes(props.type) &&
158-
!props.isSignYourself && (
159-
<div>
160-
<input
161-
type="checkbox"
162-
checked={isReadOnly}
163-
onChange={(e) => {
164-
setIsReadOnly(e.target.checked);
165-
}}
166-
/>
167-
168-
<label style={{ marginLeft: "10px" }}>Is read only</label>
169-
</div>
170-
)}
171162
<label style={{ fontSize: "13px", fontWeight: "600" }}>
172163
Name<span style={{ color: "red", fontSize: 13 }}> *</span>
173164
</label>
@@ -358,8 +349,40 @@ function DropdownWidgetOption(props) {
358349
</div>
359350
</>
360351
)}
361-
</div>
352+
{["checkbox", radioButtonWidget].includes(props.type) && (
353+
<div className="flex flex-row gap-5 mt-2 items-center text-center">
354+
{!props.isSignYourself && (
355+
<div>
356+
<input
357+
id="isreadonly"
358+
type="checkbox"
359+
checked={isReadOnly}
360+
onChange={(e) => {
361+
setIsReadOnly(e.target.checked);
362+
}}
363+
/>
364+
<label className="ml-1" htmlFor="isreadonly">
365+
Is read only
366+
</label>
367+
</div>
368+
)}
369+
<div>
370+
<input
371+
id="ishidelabel"
372+
type="checkbox"
373+
checked={isHideLabel}
374+
onChange={(e) => {
375+
setIsHideLabel(e.target.checked);
376+
}}
377+
/>
362378

379+
<label className="ml-1" htmlFor="ishidelabel">
380+
Hide label
381+
</label>
382+
</div>
383+
</div>
384+
)}
385+
</div>
363386
<div
364387
style={{
365388
height: "1px",

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

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -125,8 +125,6 @@ function Placeholder(props) {
125125
"DD MMM, YYYY",
126126
"DD MMMM, YYYY"
127127
];
128-
129-
useEffect(() => {}, []);
130128
//function change format array list with selected date and format
131129
const changeDateFormat = () => {
132130
const updateDate = [];
@@ -463,12 +461,8 @@ function Placeholder(props) {
463461
)}
464462
<i
465463
className="fa-regular fa-copy signCopy"
466-
onClick={(e) => {
467-
handleCopyPlaceholder(e);
468-
}}
469-
onTouchEnd={(e) => {
470-
handleCopyPlaceholder(e);
471-
}}
464+
onClick={(e) => handleCopyPlaceholder(e)}
465+
onTouchEnd={(e) => handleCopyPlaceholder(e)}
472466
style={{
473467
color: "#188ae2",
474468
right:
@@ -526,7 +520,6 @@ function Placeholder(props) {
526520
return (
527521
<Rnd
528522
data-tut={props.pos.key === props.unSignedWidgetId ? "IsSigned" : ""}
529-
//ref={nodeRef}
530523
key={props.pos.key}
531524
lockAspectRatio={
532525
props.pos.type !== textWidget &&
@@ -558,8 +551,8 @@ function Placeholder(props) {
558551
bounds="parent"
559552
className="signYourselfBlock"
560553
style={{
561-
border: props.pos.type !== "checkbox" && "1px solid #007bff",
562-
borderRadius: props.pos.type !== "checkbox" && "2px",
554+
border: "1px solid #007bff",
555+
borderRadius: "2px",
563556
textAlign:
564557
props.pos.type !== "name" &&
565558
props.pos.type !== "company" &&
@@ -579,17 +572,21 @@ function Placeholder(props) {
579572
: props?.pos?.zIndex
580573
? props.pos.zIndex
581574
: "5",
582-
background: props.data
583-
? props.data.blockColor
584-
: props.pos.type !== "checkbox" && "rgb(203 233 237)"
575+
background: props.data ? props.data.blockColor : "rgb(203 233 237)"
585576
}}
586577
onDrag={() => {
587578
setDraggingEnabled(true);
588579
props.handleTabDrag && props.handleTabDrag(props.pos.key);
589580
}}
590581
size={{
591-
width: props.posWidth(props.pos, props.isSignYourself),
592-
height: props.posHeight(props.pos, props.isSignYourself)
582+
width:
583+
props.pos.type === radioButtonWidget || props.pos.type === "checkbox"
584+
? "auto"
585+
: props.posWidth(props.pos, props.isSignYourself),
586+
height:
587+
props.pos.type === radioButtonWidget || props.pos.type === "checkbox"
588+
? "auto"
589+
: props.posHeight(props.pos, props.isSignYourself)
593590
}}
594591
onResizeStart={() => {
595592
setDraggingEnabled(true);

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

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,20 +13,33 @@ function PlaceholderBorder(props) {
1313
const defaultWidth = defaultWidthHeight(props.pos.type).width;
1414
const defaultHeight = defaultWidthHeight(props.pos.type).height;
1515

16+
const handleMinWidth = () => {
17+
if (props.pos.type === "checkbox" || props.pos.type === radioButtonWidget) {
18+
return "120%";
19+
} else {
20+
return props.pos.Width
21+
? props.pos.Width + getResizeBorderExtraWidth
22+
: defaultWidth + getResizeBorderExtraWidth;
23+
}
24+
};
25+
const handleMinHeight = () => {
26+
if (props.pos.type === "checkbox" || props.pos.type === radioButtonWidget) {
27+
return "120%";
28+
} else {
29+
return props.pos.Height
30+
? props.pos.Height + getResizeBorderExtraWidth
31+
: defaultHeight + getResizeBorderExtraWidth;
32+
}
33+
};
1634
return (
1735
<div
1836
onMouseEnter={props?.setDraggingEnabled(true)}
1937
className="borderResize"
2038
style={{
2139
borderColor: themeColor,
2240
borderStyle: "dashed",
23-
24-
width: props.pos.Width
25-
? props.pos.Width + getResizeBorderExtraWidth
26-
: defaultWidth + getResizeBorderExtraWidth,
27-
height: props.pos.Height
28-
? props.pos.Height + getResizeBorderExtraWidth
29-
: defaultHeight + getResizeBorderExtraWidth,
41+
minWidth: handleMinWidth(),
42+
minHeight: handleMinHeight(),
3043
borderWidth: "0.2px",
3144
overflow: "hidden"
3245
}}

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

Lines changed: 74 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -135,17 +135,14 @@ function PlaceholderType(props) {
135135
// eslint-disable-next-line react-hooks/exhaustive-deps
136136
}, [props.pos]);
137137

138-
const dateValue = (value) => {
139-
return <span>{value}</span>;
140-
};
141138
const ExampleCustomInput = forwardRef(({ value, onClick }, ref) => (
142139
<div
143140
className="inputPlaceholder"
144141
style={{ overflow: "hidden", fontSize: calculateFontSize() }}
145142
onClick={onClick}
146143
ref={ref}
147144
>
148-
{dateValue(value)}
145+
{value}
149146
<i className="fa-regular fa-calendar" style={{ marginLeft: "5px" }}></i>
150147
</div>
151148
));
@@ -277,7 +274,6 @@ function PlaceholderType(props) {
277274
isRadio
278275
);
279276
};
280-
281277
//function to set onchange date
282278
const handleOnDateChange = (date) => {
283279
props.setStartDate(date);
@@ -336,46 +332,54 @@ function PlaceholderType(props) {
336332
<div style={{ zIndex: props.isSignYourself && "99" }}>
337333
{props.pos.options?.values?.map((data, ind) => {
338334
return (
339-
<input
340-
key={ind}
341-
style={{
342-
width: props.pos.Width,
343-
display: "flex",
344-
justifyContent: "center",
345-
marginBottom: "6px",
346-
marginTop: "5px"
347-
}}
348-
onBlur={handleInputBlur}
349-
disabled={
350-
props.isNeedSign &&
351-
(props.pos.options?.isReadOnly ||
352-
props.data?.signerObjId !== props.signerObjId)
353-
}
354-
type="checkbox"
355-
checked={selectCheckbox(ind)}
356-
onChange={(e) => {
357-
if (e.target.checked) {
358-
if (!props.isPlaceholder) {
359-
const maxRequired =
360-
props.pos.options?.validation?.maxRequiredCount;
361-
const maxCountInt = maxRequired && parseInt(maxRequired);
335+
<div key={ind} className="flex items-center gap-1 min-w-max">
336+
<input
337+
id={data}
338+
style={{
339+
width: props.pos.Width,
340+
display: "flex",
341+
justifyContent: "center",
342+
marginBottom: "6px",
343+
marginTop: "5px"
344+
}}
345+
onBlur={handleInputBlur}
346+
disabled={
347+
props.isNeedSign &&
348+
(props.pos.options?.isReadOnly ||
349+
props.data?.signerObjId !== props.signerObjId)
350+
}
351+
type="checkbox"
352+
checked={selectCheckbox(ind)}
353+
onChange={(e) => {
354+
if (e.target.checked) {
355+
if (!props.isPlaceholder) {
356+
const maxRequired =
357+
props.pos.options?.validation?.maxRequiredCount;
358+
const maxCountInt =
359+
maxRequired && parseInt(maxRequired);
362360

363-
if (maxCountInt > 0) {
364-
if (
365-
selectedCheckbox &&
366-
selectedCheckbox?.length <= maxCountInt - 1
367-
) {
361+
if (maxCountInt > 0) {
362+
if (
363+
selectedCheckbox &&
364+
selectedCheckbox?.length <= maxCountInt - 1
365+
) {
366+
handleCheckboxValue(e.target.checked, ind);
367+
}
368+
} else {
368369
handleCheckboxValue(e.target.checked, ind);
369370
}
370-
} else {
371-
handleCheckboxValue(e.target.checked, ind);
372371
}
372+
} else {
373+
handleCheckboxValue(e.target.checked, ind);
373374
}
374-
} else {
375-
handleCheckboxValue(e.target.checked, ind);
376-
}
377-
}}
378-
/>
375+
}}
376+
/>
377+
{!props.pos.options?.isHideLabel && (
378+
<label htmlFor={data} className="text-xs">
379+
{data}
380+
</label>
381+
)}
382+
</div>
379383
);
380384
})}
381385
</div>
@@ -706,28 +710,38 @@ function PlaceholderType(props) {
706710
<div>
707711
{props.pos.options?.values.map((data, ind) => {
708712
return (
709-
<input
713+
<div
710714
key={ind}
711-
style={{
712-
width: props.pos.Width,
713-
display: "flex",
714-
justifyContent: "center",
715-
marginBottom: "6px",
716-
marginTop: "5px"
717-
}}
718-
type="radio"
719-
disabled={
720-
props.isNeedSign &&
721-
(props.pos.options?.isReadOnly ||
722-
props.data?.signerObjId !== props.signerObjId)
723-
}
724-
checked={handleRadioCheck(data)}
725-
onChange={(e) => {
726-
if (!props.isPlaceholder) {
727-
handleCheckRadio(e.target.checked, data);
715+
className="flex flex-row items-center gap-1 min-w-max"
716+
>
717+
<input
718+
id={data}
719+
style={{
720+
width: props.pos.Width,
721+
display: "flex",
722+
justifyContent: "center",
723+
marginBottom: "6px",
724+
marginTop: "5px"
725+
}}
726+
type="radio"
727+
disabled={
728+
props.isNeedSign &&
729+
(props.pos.options?.isReadOnly ||
730+
props.data?.signerObjId !== props.signerObjId)
728731
}
729-
}}
730-
/>
732+
checked={handleRadioCheck(data)}
733+
onChange={(e) => {
734+
if (!props.isPlaceholder) {
735+
handleCheckRadio(e.target.checked, data);
736+
}
737+
}}
738+
/>
739+
{!props.pos.options?.isHideLabel && (
740+
<label htmlFor={data} className="text-xs">
741+
{data}
742+
</label>
743+
)}
744+
</div>
731745
);
732746
})}
733747
</div>

0 commit comments

Comments
 (0)