mirror of
https://github.com/OpenSignLabs/OpenSign.git
synced 2026-08-17 21:25:54 +02:00
fix: radio widget embeding issue in pdf
This commit is contained in:
RaktimaNXG
+103
-99
@@ -1,4 +1,4 @@
|
||||
import React, { useState } from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { themeColor } from "../../utils/ThemeColor/backColor";
|
||||
import ModalUi from "../../premitives/ModalUi";
|
||||
function DropdownWidgetOption(props) {
|
||||
@@ -8,7 +8,17 @@ function DropdownWidgetOption(props) {
|
||||
]);
|
||||
|
||||
const [dropdownName, setDropdownName] = useState("Field-1");
|
||||
const [error, setError] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
if (
|
||||
props.currWidgetsDetails?.widgetName &&
|
||||
props.currWidgetsDetails?.widgetOption
|
||||
) {
|
||||
setDropdownName(props.currWidgetsDetails?.widgetName);
|
||||
setDropdownOptionList(props.currWidgetsDetails?.widgetOption);
|
||||
}
|
||||
}, [props.currWidgetsDetails]);
|
||||
|
||||
const handleInputChange = (index, value) => {
|
||||
setDropdownOptionList((prevInputs) => {
|
||||
const newInputs = [...prevInputs];
|
||||
@@ -28,19 +38,10 @@ function DropdownWidgetOption(props) {
|
||||
setDropdownOptionList(getUpdatedOptions);
|
||||
};
|
||||
const handleSaveOption = () => {
|
||||
const existEmptyOption = dropdownOptionList.some((data) => data === "");
|
||||
|
||||
if (existEmptyOption) {
|
||||
setError("Enter all option");
|
||||
setTimeout(() => {
|
||||
setError("");
|
||||
}, 1000);
|
||||
} else {
|
||||
props.handleSaveDropdownOptions(dropdownName, dropdownOptionList);
|
||||
props.setShowDropdown(false);
|
||||
setDropdownOptionList(["option-1", "option-2"]);
|
||||
setDropdownName("Field-1");
|
||||
}
|
||||
props.handleSaveWidgetsOptions(dropdownName, dropdownOptionList);
|
||||
props.setShowDropdown(false);
|
||||
setDropdownOptionList(["option-1", "option-2"]);
|
||||
setDropdownName("Field-1");
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -48,99 +49,102 @@ function DropdownWidgetOption(props) {
|
||||
<ModalUi
|
||||
dropdownModal={"dropdownModal"}
|
||||
isOpen={props.showDropdown}
|
||||
title={"Dropdown options"}
|
||||
title={props.title}
|
||||
closeOff={true}
|
||||
// handleClose={() => props.setShowDropdown(false)}
|
||||
>
|
||||
<div style={{ height: "100%", padding: 20 }}>
|
||||
<div className="dropdownContainer">
|
||||
<label style={{ fontSize: "13px", fontWeight: "600" }}>Name</label>
|
||||
<input
|
||||
defaultValue={dropdownName}
|
||||
value={dropdownName}
|
||||
onChange={(e) => setDropdownName(e.target.value)}
|
||||
className="drodown-input"
|
||||
/>
|
||||
<label
|
||||
style={{ fontSize: "13px", fontWeight: "600", marginTop: "5px" }}
|
||||
>
|
||||
Options
|
||||
</label>
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
handleSaveOption();
|
||||
}}
|
||||
>
|
||||
<div className="dropdownContainer">
|
||||
<label style={{ fontSize: "13px", fontWeight: "600" }}>Name</label>
|
||||
<input
|
||||
required
|
||||
defaultValue={dropdownName}
|
||||
value={dropdownName}
|
||||
onChange={(e) => setDropdownName(e.target.value)}
|
||||
className="drodown-input"
|
||||
/>
|
||||
<label
|
||||
style={{ fontSize: "13px", fontWeight: "600", marginTop: "5px" }}
|
||||
>
|
||||
Options
|
||||
</label>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column"
|
||||
}}
|
||||
>
|
||||
{dropdownOptionList.map((option, index) => (
|
||||
<div
|
||||
key={index}
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
marginBottom: "5px"
|
||||
}}
|
||||
>
|
||||
<input
|
||||
required
|
||||
className="drodown-input"
|
||||
type="text"
|
||||
value={option}
|
||||
onChange={(e) => handleInputChange(index, e.target.value)}
|
||||
/>
|
||||
|
||||
<i
|
||||
className="fa-solid fa-rectangle-xmark"
|
||||
onClick={() => handleDeleteInput(index)}
|
||||
style={{
|
||||
color: "red",
|
||||
fontSize: "25px",
|
||||
marginLeft: "10px"
|
||||
}}
|
||||
></i>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<i
|
||||
onClick={handleAddInput}
|
||||
style={{
|
||||
cursor: "pointer",
|
||||
color: themeColor(),
|
||||
fontSize: "25px",
|
||||
marginLeft: "10px"
|
||||
}}
|
||||
className="fa-solid fa-square-plus"
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column"
|
||||
height: "1px",
|
||||
backgroundColor: "#9f9f9f",
|
||||
width: "100%",
|
||||
marginTop: "15px",
|
||||
marginBottom: "15px"
|
||||
}}
|
||||
></div>
|
||||
<button
|
||||
// onClick={() => handleSaveOption()}
|
||||
disabled={dropdownOptionList.length === 0 && true}
|
||||
style={{
|
||||
background: themeColor(),
|
||||
color: "white"
|
||||
}}
|
||||
type="submit"
|
||||
className={"finishBtn"}
|
||||
>
|
||||
{dropdownOptionList.map((option, index) => (
|
||||
<div
|
||||
key={index}
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
marginBottom: "5px"
|
||||
}}
|
||||
>
|
||||
<input
|
||||
className="drodown-input"
|
||||
type="text"
|
||||
value={option}
|
||||
onChange={(e) => handleInputChange(index, e.target.value)}
|
||||
/>
|
||||
|
||||
<i
|
||||
className="fa-solid fa-rectangle-xmark"
|
||||
onClick={() => handleDeleteInput(index)}
|
||||
style={{ color: "red", fontSize: "25px", marginLeft: "10px" }}
|
||||
></i>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<i
|
||||
onClick={handleAddInput}
|
||||
style={{
|
||||
cursor: "pointer",
|
||||
color: themeColor(),
|
||||
fontSize: "25px",
|
||||
marginLeft: "10px"
|
||||
}}
|
||||
className="fa-solid fa-square-plus"
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
<span style={{ fontSize: "13px", color: "red" }}>{error}</span>
|
||||
<div
|
||||
style={{
|
||||
height: "1px",
|
||||
backgroundColor: "#9f9f9f",
|
||||
width: "100%",
|
||||
marginTop: "15px",
|
||||
marginBottom: "15px"
|
||||
}}
|
||||
></div>
|
||||
<button
|
||||
onClick={() => handleSaveOption()}
|
||||
disabled={dropdownOptionList.length === 0 && true}
|
||||
style={{
|
||||
background: themeColor(),
|
||||
color: "white"
|
||||
}}
|
||||
type="button"
|
||||
className={"finishBtn"}
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
{/* <button
|
||||
onClick={() => props.setShowDropdown(false)}
|
||||
style={{
|
||||
color: "black"
|
||||
}}
|
||||
type="button"
|
||||
className="finishBtn"
|
||||
>
|
||||
cancel
|
||||
</button> */}
|
||||
Save
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</ModalUi>
|
||||
);
|
||||
|
||||
@@ -188,6 +188,7 @@ function Placeholder(props) {
|
||||
props.setSignKey(props.pos.key);
|
||||
props.setUniqueId(props.data.Id);
|
||||
props.setWidgetType(props.pos.type);
|
||||
props.setCurrWidgetsDetails(props.pos);
|
||||
}}
|
||||
onTouchEnd={(e) => {
|
||||
e.stopPropagation();
|
||||
@@ -203,6 +204,7 @@ function Placeholder(props) {
|
||||
props.setSignKey(props.pos.key);
|
||||
props.setUniqueId(props.data.Id);
|
||||
props.setWidgetType(props.pos.type);
|
||||
props.setCurrWidgetsDetails(props.pos);
|
||||
}}
|
||||
class="fa-solid fa-gear settingIcon"
|
||||
style={{
|
||||
@@ -214,7 +216,7 @@ function Placeholder(props) {
|
||||
props.pos.type === "company" ||
|
||||
props.pos.type === "job title"
|
||||
? "49px"
|
||||
: "17px",
|
||||
: "23px",
|
||||
top:
|
||||
props.pos.type === "text" ||
|
||||
props.pos.type === "email" ||
|
||||
@@ -222,7 +224,7 @@ function Placeholder(props) {
|
||||
props.pos.type === "company" ||
|
||||
props.pos.type === "job title"
|
||||
? "-17px"
|
||||
: "-35px"
|
||||
: "-28px"
|
||||
}}
|
||||
></i>
|
||||
)}
|
||||
@@ -244,11 +246,11 @@ function Placeholder(props) {
|
||||
color: "#188ae2",
|
||||
right:
|
||||
props.pos.type === "checkbox" || props.pos.type === "radio"
|
||||
? "6px"
|
||||
? "8px"
|
||||
: "32px",
|
||||
top:
|
||||
props.pos.type === "checkbox" || props.pos.type === "radio"
|
||||
? "-35px"
|
||||
? "-28px"
|
||||
: "-18px"
|
||||
}}
|
||||
></i>
|
||||
@@ -259,7 +261,7 @@ function Placeholder(props) {
|
||||
id="menu-container"
|
||||
style={{
|
||||
zIndex: "99",
|
||||
top: "-27px",
|
||||
top: isMobile ? "-17px" : "-27px",
|
||||
left: props.isPlaceholder ? "-12px" : "5px"
|
||||
}}
|
||||
className={isShowDateFormat ? "dropdown show" : "dropdown"}
|
||||
@@ -350,12 +352,12 @@ function Placeholder(props) {
|
||||
right:
|
||||
(props.pos.type === "checkbox" || props.pos.type === "radio") &&
|
||||
props.isPlaceholder
|
||||
? "-11px"
|
||||
? "-9px"
|
||||
: "12px",
|
||||
top:
|
||||
(props.pos.type === "checkbox" || props.pos.type === "radio") &&
|
||||
props.isPlaceholder
|
||||
? "-35px"
|
||||
? "-28px"
|
||||
: "-18px"
|
||||
}}
|
||||
></i>
|
||||
@@ -385,12 +387,12 @@ function Placeholder(props) {
|
||||
right:
|
||||
(props.pos.type === "checkbox" || props.pos.type === "radio") &&
|
||||
props.isPlaceholder
|
||||
? "-30px"
|
||||
? "-27px"
|
||||
: "-8px",
|
||||
top:
|
||||
(props.pos.type === "checkbox" || props.pos.type === "radio") &&
|
||||
props.isPlaceholder
|
||||
? "-35px"
|
||||
? "-28px"
|
||||
: "-18px"
|
||||
}}
|
||||
></i>
|
||||
@@ -502,13 +504,13 @@ function Placeholder(props) {
|
||||
right={
|
||||
(props.pos.type === "checkbox" || props.pos.type === "radio") &&
|
||||
props.isPlaceholder
|
||||
? -28
|
||||
? -21
|
||||
: -12
|
||||
}
|
||||
top={
|
||||
(props.pos.type === "checkbox" || props.pos.type === "radio") &&
|
||||
props.isPlaceholder
|
||||
? -28
|
||||
? -21
|
||||
: -11
|
||||
}
|
||||
/>
|
||||
|
||||
@@ -2,17 +2,13 @@ import React from "react";
|
||||
import { themeColor } from "../../utils/ThemeColor/backColor";
|
||||
import { defaultWidthHeight, resizeBorderExtraWidth } from "../../utils/Utils";
|
||||
function PlaceholderBorder(props) {
|
||||
const getResizeBorderExtraWidth = resizeBorderExtraWidth();
|
||||
const defaultWidth =
|
||||
const getResizeBorderExtraWidth =
|
||||
(props.pos.type === "checkbox" || props.pos.type === "radio") &&
|
||||
props.isPlaceholder
|
||||
? 50
|
||||
: defaultWidthHeight(props.pos.type).width;
|
||||
const defaultHeight =
|
||||
(props.pos.type === "checkbox" || props.pos.type === "radio") &&
|
||||
props.isPlaceholder
|
||||
? 50
|
||||
: defaultWidthHeight(props.pos.type).height;
|
||||
? 38
|
||||
: resizeBorderExtraWidth();
|
||||
const defaultWidth = defaultWidthHeight(props.pos.type).width;
|
||||
const defaultHeight = defaultWidthHeight(props.pos.type).height;
|
||||
|
||||
return (
|
||||
<div
|
||||
|
||||
@@ -11,7 +11,10 @@ function PlaceholderType(props) {
|
||||
const [validatePlaceholder, setValidatePlaceholder] = useState("");
|
||||
const inputRef = useRef(null);
|
||||
const [inputValue, setInputValue] = useState("");
|
||||
const [isCheckedRadio, setIsCheckedRadio] = useState(false);
|
||||
const [isCheckedRadio, setIsCheckedRadio] = useState({
|
||||
isChecked: false,
|
||||
selectValue: ""
|
||||
});
|
||||
|
||||
const validateExpression = (regexValidation) => {
|
||||
let isValidate = regexValidation.test(inputValue);
|
||||
@@ -70,7 +73,7 @@ function PlaceholderType(props) {
|
||||
|
||||
useEffect(() => {
|
||||
onChangeInput(
|
||||
isCheckedRadio,
|
||||
isCheckedRadio.selectValue,
|
||||
props.pos.key,
|
||||
props.xyPostion,
|
||||
props.index,
|
||||
@@ -540,18 +543,31 @@ function PlaceholderType(props) {
|
||||
);
|
||||
case "radio":
|
||||
return (
|
||||
<label
|
||||
style={{ borderRadius: "50%", textAlign: "center" }}
|
||||
className="inputPlaceholder"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
checked={isCheckedRadio}
|
||||
onClick={() => {
|
||||
setIsCheckedRadio(!isCheckedRadio);
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
<div>
|
||||
{props.pos?.widgetOption?.map((data, ind) => {
|
||||
return (
|
||||
<input
|
||||
key={ind}
|
||||
style={{
|
||||
width: props.pos.Width,
|
||||
// height: props.pos.Height,
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
marginBottom: "3px"
|
||||
}}
|
||||
type="radio"
|
||||
checked={isCheckedRadio.selectValue === data}
|
||||
// checked={isCheckedRadio.isChecked}
|
||||
onClick={() => {
|
||||
setIsCheckedRadio({
|
||||
isChecked: !isCheckedRadio,
|
||||
selectValue: data
|
||||
});
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
|
||||
default:
|
||||
|
||||
@@ -59,7 +59,8 @@ function RenderPdf({
|
||||
setIsValidate,
|
||||
setWidgetType,
|
||||
setValidateAlert,
|
||||
setIsRadio
|
||||
setIsRadio,
|
||||
setCurrWidgetsDetails
|
||||
}) {
|
||||
const isMobile = window.innerWidth < 767;
|
||||
const newWidth = containerWH.width;
|
||||
@@ -242,106 +243,6 @@ function RenderPdf({
|
||||
return (
|
||||
pos && (
|
||||
<React.Fragment key={pos.key}>
|
||||
{/* <Rnd
|
||||
disableDragging={true}
|
||||
enableResizing={{
|
||||
top: false,
|
||||
right: false,
|
||||
bottom: false,
|
||||
left: false,
|
||||
topRight: false,
|
||||
bottomRight:
|
||||
data.signerObjId === signerObjectId && true,
|
||||
bottomLeft: false,
|
||||
topLeft: false
|
||||
}}
|
||||
bounds="parent"
|
||||
style={{
|
||||
cursor:
|
||||
data.signerObjId === signerObjectId
|
||||
? "pointer"
|
||||
: "not-allowed",
|
||||
background: data.blockColor,
|
||||
borderColor: themeColor(),
|
||||
borderStyle: "dashed",
|
||||
borderWidth: "0.1px",
|
||||
zIndex: "1"
|
||||
}}
|
||||
className="signYourselfBlock"
|
||||
size={{
|
||||
width: posWidth(pos),
|
||||
height: posHeight(pos)
|
||||
}}
|
||||
onClick={() => {
|
||||
if (data.signerObjId === signerObjectId) {
|
||||
setIsSignPad(true);
|
||||
setSignKey(pos.key);
|
||||
setIsStamp(pos.isStamp);
|
||||
}
|
||||
}}
|
||||
onResize={(e, direction, ref, delta, position) => {
|
||||
e.stopPropagation();
|
||||
handleImageResize(
|
||||
ref,
|
||||
pos.key,
|
||||
data.Id,
|
||||
position,
|
||||
signerPos,
|
||||
pageNumber,
|
||||
setSignerPos,
|
||||
pdfOriginalWidth,
|
||||
containerWH,
|
||||
true
|
||||
);
|
||||
}}
|
||||
lockAspectRatio={
|
||||
pos.Width ? pos.Width / pos.Height : 2.5
|
||||
}
|
||||
default={{
|
||||
x: xPos(pos),
|
||||
y: yPos(pos)
|
||||
}}
|
||||
>
|
||||
<div style={{ pointerEvents: "none" }}>
|
||||
{data.signerObjId === signerObjectId && (
|
||||
<BorderResize />
|
||||
)}
|
||||
{pos.SignUrl ? (
|
||||
<img
|
||||
alt="no img"
|
||||
onClick={() => {
|
||||
setIsSignPad(true);
|
||||
setSignKey(pos.key);
|
||||
}}
|
||||
src={pos.SignUrl}
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
objectFit: "contain"
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
pdfDetails[0].Signers.map((signerData, key) => {
|
||||
return (
|
||||
signerData.objectId === data.signerObjId && (
|
||||
<div
|
||||
key={key}
|
||||
style={{
|
||||
fontSize: "12px",
|
||||
color: "black",
|
||||
fontWeight: "600",
|
||||
|
||||
marginTop: "0px"
|
||||
}}
|
||||
>
|
||||
{signerData.Name}
|
||||
</div>
|
||||
)
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</Rnd> */}
|
||||
<Placeholder
|
||||
pos={pos}
|
||||
setSignKey={setSignKey}
|
||||
@@ -429,186 +330,6 @@ function RenderPdf({
|
||||
{placeData.pageNumber === pageNumber &&
|
||||
placeData.pos.map((pos) => {
|
||||
return (
|
||||
// <Rnd
|
||||
// bounds="parent"
|
||||
// enableResizing={{
|
||||
// top: false,
|
||||
// right: false,
|
||||
// bottom: false,
|
||||
// left: false,
|
||||
// topRight: false,
|
||||
// bottomRight: true,
|
||||
// bottomLeft: false,
|
||||
// topLeft: false
|
||||
// }}
|
||||
// key={pos.key}
|
||||
// style={{
|
||||
// cursor: "all-scroll",
|
||||
// background: data.blockColor,
|
||||
// borderColor: data.bac,
|
||||
// zIndex: pos.zIndex
|
||||
// }}
|
||||
// className="signYourselfBlock"
|
||||
// onDrag={() => handleTabDrag(pos.key)}
|
||||
// size={{
|
||||
// width: posWidth(pos),
|
||||
// height: posHeight(pos)
|
||||
// }}
|
||||
// // size={{
|
||||
// // width: pos.Width ? pos.Width : 150,
|
||||
// // height: pos.Height ? pos.Height : 60
|
||||
// // }}
|
||||
// lockAspectRatio={
|
||||
// pos.Width ? pos.Width / pos.Height : 2.5
|
||||
// }
|
||||
// onDragStop={
|
||||
// (event, dragElement) =>
|
||||
// handleStop(
|
||||
// event,
|
||||
// dragElement,
|
||||
// data.Id,
|
||||
// pos.key
|
||||
// )
|
||||
// // data.signerObjId,
|
||||
// }
|
||||
// // default={{
|
||||
// // x: pos.xPosition,
|
||||
// // y: pos.yPosition
|
||||
// // }}
|
||||
// default={{
|
||||
// x: xPos(pos),
|
||||
// y: yPos(pos)
|
||||
// }}
|
||||
// onResizeStart={() => {
|
||||
// setIsResize(true);
|
||||
// }}
|
||||
// onResizeStop={() => {
|
||||
// setIsResize && setIsResize(false);
|
||||
// }}
|
||||
// onResize={(
|
||||
// e,
|
||||
// direction,
|
||||
// ref,
|
||||
// delta,
|
||||
// position
|
||||
// ) => {
|
||||
// handleImageResize(
|
||||
// ref,
|
||||
// pos.key,
|
||||
// data.Id,
|
||||
// position,
|
||||
// signerPos,
|
||||
// pageNumber,
|
||||
// setSignerPos,
|
||||
// pdfOriginalWidth,
|
||||
// containerWH,
|
||||
// true
|
||||
// );
|
||||
// }}
|
||||
// >
|
||||
// <BorderResize right={-12} top={-11} />
|
||||
// <PlaceholderBorder
|
||||
// pos={pos}
|
||||
// posWidth={posWidth}
|
||||
// posHeight={posHeight}
|
||||
// />
|
||||
// <div
|
||||
// onClick={(e) => {
|
||||
// if (!isDragging) {
|
||||
// handleLinkUser(data.Id);
|
||||
// setUniqueId(data.Id);
|
||||
// }
|
||||
// }}
|
||||
// onTouchEnd={() => {
|
||||
// if (!isDragging) {
|
||||
// handleLinkUser(data.Id);
|
||||
// setUniqueId(data.Id);
|
||||
// }
|
||||
// const dataNewPlace = addZIndex(
|
||||
// signerPos,
|
||||
// pos.key,
|
||||
// setZIndex
|
||||
// );
|
||||
// setSignerPos((prevState) => {
|
||||
// const newState = [...prevState];
|
||||
// newState.splice(
|
||||
// 0,
|
||||
// signerPos.length,
|
||||
// ...dataNewPlace
|
||||
// );
|
||||
// return newState;
|
||||
// });
|
||||
// }}
|
||||
// >
|
||||
// <i
|
||||
// data-tut="reactourLinkUser"
|
||||
// className="fa-regular fa-user signUserIcon"
|
||||
// onTouchEnd={(e) => {
|
||||
// e.stopPropagation();
|
||||
// handleLinkUser(data.Id);
|
||||
// setUniqueId(data.Id);
|
||||
// }}
|
||||
// onClick={(e) => {
|
||||
// e.stopPropagation();
|
||||
// handleLinkUser(data.Id);
|
||||
// setUniqueId(data.Id);
|
||||
// }}
|
||||
// style={{
|
||||
// color: "#188ae2"
|
||||
// }}
|
||||
// ></i>
|
||||
// <i
|
||||
// className="fa-regular fa-copy signCopy"
|
||||
// onTouchEnd={(e) => {
|
||||
// e.stopPropagation();
|
||||
// setIsPageCopy(true);
|
||||
// setSignKey(pos.key);
|
||||
// setSignerObjId(data.signerObjId);
|
||||
// setUniqueId(data.Id);
|
||||
// }}
|
||||
// onClick={(e) => {
|
||||
// e.stopPropagation();
|
||||
// setIsPageCopy(true);
|
||||
// setSignKey(pos.key);
|
||||
// setSignerObjId(data.signerObjId);
|
||||
// setUniqueId(data.Id);
|
||||
// }}
|
||||
// style={{
|
||||
// color: "#188ae2"
|
||||
// }}
|
||||
// ></i>
|
||||
// <i
|
||||
// className="fa-regular fa-circle-xmark signCloseBtn"
|
||||
// onTouchEnd={(e) => {
|
||||
// e.stopPropagation();
|
||||
// handleDeleteSign(pos.key, data.Id);
|
||||
// }}
|
||||
// onClick={(e) => {
|
||||
// e.stopPropagation();
|
||||
// handleDeleteSign(pos.key, data.Id);
|
||||
// // data.signerObjId
|
||||
// }}
|
||||
// style={{
|
||||
// color: "#188ae2"
|
||||
// }}
|
||||
// ></i>
|
||||
|
||||
// <div
|
||||
// style={{
|
||||
// fontSize: "10px",
|
||||
// color: "black",
|
||||
// fontWeight: "500",
|
||||
// marginTop: "0px"
|
||||
// }}
|
||||
// >
|
||||
// <div>{pos.type}</div>
|
||||
// {handleUserName(
|
||||
// data.signerObjId,
|
||||
// data.Role
|
||||
// )}{" "}
|
||||
// </div>
|
||||
// </div>
|
||||
// </Rnd>
|
||||
<React.Fragment key={pos.key}>
|
||||
<Placeholder
|
||||
pos={pos}
|
||||
@@ -645,6 +366,9 @@ function RenderPdf({
|
||||
setIsValidate={setIsValidate}
|
||||
setWidgetType={setWidgetType}
|
||||
setIsRadio={setIsRadio}
|
||||
setCurrWidgetsDetails={
|
||||
setCurrWidgetsDetails
|
||||
}
|
||||
/>
|
||||
</React.Fragment>
|
||||
);
|
||||
@@ -662,138 +386,6 @@ function RenderPdf({
|
||||
data.pos.map((pos) => {
|
||||
return (
|
||||
pos && (
|
||||
// <Rnd
|
||||
// allowAnyClick
|
||||
// enableResizing={{
|
||||
// top: false,
|
||||
// right: false,
|
||||
// bottom: false,
|
||||
// left: false,
|
||||
// topRight: false,
|
||||
// bottomRight: true,
|
||||
// bottomLeft: false,
|
||||
// topLeft: false
|
||||
// }}
|
||||
// lockAspectRatio={
|
||||
// pos.Width ? pos.Width / pos.Height : 2.5
|
||||
// }
|
||||
// bounds="parent"
|
||||
// ref={nodeRef}
|
||||
// key={pos.key}
|
||||
// className="signYourselfBlock"
|
||||
// style={{
|
||||
// border: "1px solid red",
|
||||
// cursor: "all-scroll",
|
||||
// zIndex: "1",
|
||||
// background: "#daebe0"
|
||||
// }}
|
||||
// size={{
|
||||
// width: posWidth(pos, true),
|
||||
// height: posHeight(pos, true)
|
||||
// }}
|
||||
// default={{
|
||||
// x: xPos(pos, true),
|
||||
// y: yPos(pos, true)
|
||||
// }}
|
||||
// onDrag={() => handleTabDrag(pos.key)}
|
||||
// onDragStop={handleStop}
|
||||
// onResize={(
|
||||
// e,
|
||||
// direction,
|
||||
// ref,
|
||||
// delta,
|
||||
// position
|
||||
// ) => {
|
||||
// handleSignYourselfImageResize(
|
||||
// ref,
|
||||
// pos.key,
|
||||
// xyPostion,
|
||||
// index,
|
||||
// setXyPostion
|
||||
// );
|
||||
// }}
|
||||
// >
|
||||
// <BorderResize right={-12} top={-11} />
|
||||
// <PlaceholderBorder
|
||||
// pos={pos}
|
||||
// posWidth={posWidth}
|
||||
// isSignYourself={true}
|
||||
// posHeight={posHeight}
|
||||
// />
|
||||
// <div
|
||||
// style={{
|
||||
// left: xPos(pos, true),
|
||||
// top: yPos(pos, true),
|
||||
// width: posWidth(pos, true),
|
||||
// height: posHeight(pos, true),
|
||||
// zIndex: "10"
|
||||
// }}
|
||||
// onTouchEnd={(e) => {
|
||||
// if (!isDragging && isMobile) {
|
||||
// setTimeout(() => {
|
||||
// e.stopPropagation();
|
||||
// setIsSignPad(true);
|
||||
// setSignKey(pos.key);
|
||||
// setIsStamp(pos.isStamp);
|
||||
// }, 500);
|
||||
// }
|
||||
// }}
|
||||
// >
|
||||
// <i
|
||||
// className="fa-regular fa-copy signCopy"
|
||||
// onTouchEnd={(e) => {
|
||||
// e.stopPropagation();
|
||||
// setIsPageCopy(true);
|
||||
// setSignKey(pos.key);
|
||||
// }}
|
||||
// style={{
|
||||
// color: "#188ae2"
|
||||
// }}
|
||||
// ></i>
|
||||
// <i
|
||||
// className="fa-regular fa-circle-xmark signCloseBtn"
|
||||
// onTouchEnd={(e) => {
|
||||
// e.stopPropagation();
|
||||
// if (data) {
|
||||
// handleDeleteSign(
|
||||
// pos.key,
|
||||
// data.signerObjId
|
||||
// );
|
||||
// } else {
|
||||
// handleDeleteSign(pos.key);
|
||||
// setIsStamp(false);
|
||||
// }
|
||||
// }}
|
||||
// style={{
|
||||
// color: "#188ae2"
|
||||
// }}
|
||||
// ></i>
|
||||
|
||||
// {pos.SignUrl ? (
|
||||
// <div style={{ pointerEvents: "none" }}>
|
||||
// <img
|
||||
// alt="signimg"
|
||||
// src={pos.SignUrl}
|
||||
// style={{
|
||||
// width: "100%",
|
||||
// height: "100%",
|
||||
// objectFit: "contain"
|
||||
// }}
|
||||
// />
|
||||
// </div>
|
||||
// ) : (
|
||||
// <div
|
||||
// style={{
|
||||
// fontSize: "10px",
|
||||
// color: "black",
|
||||
// justifyContent: "center"
|
||||
// }}
|
||||
// >
|
||||
// {pos.isStamp ? "stamp" : "signature"}
|
||||
// </div>
|
||||
// )}
|
||||
// </div>
|
||||
// </Rnd>
|
||||
<Placeholder
|
||||
pos={pos}
|
||||
setIsPageCopy={setIsPageCopy}
|
||||
@@ -907,169 +499,6 @@ function RenderPdf({
|
||||
{placeData.pageNumber === pageNumber &&
|
||||
placeData.pos.map((pos) => {
|
||||
return (
|
||||
// <Rnd
|
||||
// onClick={() => {
|
||||
// if (!isDragging) {
|
||||
// handleLinkUser(data.Id);
|
||||
// setUniqueId(data.Id);
|
||||
// }
|
||||
// const dataNewPlace = addZIndex(
|
||||
// signerPos,
|
||||
// pos.key,
|
||||
// setZIndex
|
||||
// );
|
||||
// setSignerPos((prevState) => {
|
||||
// const newState = [...prevState];
|
||||
// newState.splice(
|
||||
// 0,
|
||||
// signerPos.length,
|
||||
// ...dataNewPlace
|
||||
// );
|
||||
// return newState;
|
||||
// });
|
||||
// }}
|
||||
// key={pos.key}
|
||||
// enableResizing={{
|
||||
// top: false,
|
||||
// right: false,
|
||||
// bottom: false,
|
||||
// left: false,
|
||||
// topRight: false,
|
||||
// bottomRight: true,
|
||||
// bottomLeft: false,
|
||||
// topLeft: false
|
||||
// }}
|
||||
// bounds="parent"
|
||||
// style={{
|
||||
// cursor: "all-scroll",
|
||||
// background: data.blockColor,
|
||||
// zIndex: pos.zIndex
|
||||
// }}
|
||||
// className="signYourselfBlock"
|
||||
// onDrag={() => handleTabDrag(pos.key)}
|
||||
// size={{
|
||||
// width: posWidth(pos),
|
||||
// height: posHeight(pos)
|
||||
// }}
|
||||
// lockAspectRatio={
|
||||
// pos.Width
|
||||
// ? pos.Width / pos.Height
|
||||
// : 2.5
|
||||
// }
|
||||
// onDragStop={
|
||||
// (event, dragElement) =>
|
||||
// handleStop(
|
||||
// event,
|
||||
// dragElement,
|
||||
// data.Id,
|
||||
// pos.key
|
||||
// )
|
||||
// // data.signerObjId,
|
||||
// }
|
||||
// // default={{
|
||||
// // x: pos.xPosition,
|
||||
// // y: pos.yPosition
|
||||
// // }}
|
||||
// default={{
|
||||
// x: xPos(pos),
|
||||
// y: yPos(pos)
|
||||
// }}
|
||||
// onResizeStart={() => {
|
||||
// setIsResize(true);
|
||||
// }}
|
||||
// onResizeStop={() => {
|
||||
// setIsResize && setIsResize(false);
|
||||
// }}
|
||||
// onResize={(
|
||||
// e,
|
||||
// direction,
|
||||
// ref,
|
||||
// delta,
|
||||
// position
|
||||
// ) => {
|
||||
// e.stopPropagation();
|
||||
// handleImageResize(
|
||||
// ref,
|
||||
// pos.key,
|
||||
// data.Id, //data.signerObjId,
|
||||
// position,
|
||||
// signerPos,
|
||||
// pageNumber,
|
||||
// setSignerPos,
|
||||
// pdfOriginalWidth,
|
||||
// containerWH,
|
||||
// false
|
||||
// );
|
||||
// }}
|
||||
// >
|
||||
// <BorderResize right={-12} top={-11} />
|
||||
// <PlaceholderBorder
|
||||
// pos={pos}
|
||||
// posWidth={posWidth}
|
||||
// posHeight={posHeight}
|
||||
// />
|
||||
// <div>
|
||||
// <i
|
||||
// data-tut="reactourLinkUser"
|
||||
// className="fa-regular fa-user signUserIcon"
|
||||
// onClick={(e) => {
|
||||
// e.stopPropagation();
|
||||
// handleLinkUser(data.Id);
|
||||
// setUniqueId(data.Id);
|
||||
// }}
|
||||
// style={{
|
||||
// color: "#188ae2"
|
||||
// }}
|
||||
// ></i>
|
||||
// <i
|
||||
// className="fa-regular fa-copy signCopy"
|
||||
// onClick={(e) => {
|
||||
// e.stopPropagation();
|
||||
// setIsPageCopy(true);
|
||||
// setSignKey(pos.key);
|
||||
// setUniqueId(data.Id);
|
||||
// setSignerObjId(
|
||||
// data.signerObjId
|
||||
// );
|
||||
// }}
|
||||
// style={{
|
||||
// color: "#188ae2"
|
||||
// }}
|
||||
// ></i>
|
||||
// <i
|
||||
// className="fa-regular fa-circle-xmark signCloseBtn"
|
||||
// onClick={(e) => {
|
||||
// e.stopPropagation();
|
||||
// handleDeleteSign(
|
||||
// pos.key,
|
||||
// data.Id
|
||||
// );
|
||||
// // data.signerObjId
|
||||
// }}
|
||||
// style={{
|
||||
// color: "#188ae2"
|
||||
// }}
|
||||
// ></i>
|
||||
|
||||
// <div
|
||||
// style={{
|
||||
// fontSize: "10px",
|
||||
// color: "black",
|
||||
// justifyContent: "center"
|
||||
// }}
|
||||
// >
|
||||
// {pos.isStamp ? (
|
||||
// <div>stamp</div>
|
||||
// ) : (
|
||||
// <div>signature</div>
|
||||
// )}
|
||||
// {handleUserName(
|
||||
// data.signerObjId,
|
||||
// data.Role
|
||||
// )}
|
||||
// </div>
|
||||
// </div>
|
||||
// </Rnd>
|
||||
<React.Fragment key={pos.key}>
|
||||
<Placeholder
|
||||
pos={pos}
|
||||
@@ -1106,6 +535,9 @@ function RenderPdf({
|
||||
setIsValidate={setIsValidate}
|
||||
setWidgetType={setWidgetType}
|
||||
setIsRadio={setIsRadio}
|
||||
setCurrWidgetsDetails={
|
||||
setCurrWidgetsDetails
|
||||
}
|
||||
/>
|
||||
</React.Fragment>
|
||||
);
|
||||
@@ -1123,72 +555,6 @@ function RenderPdf({
|
||||
data.pos.map((pos) => {
|
||||
return (
|
||||
pos && (
|
||||
// <Rnd
|
||||
// ref={nodeRef}
|
||||
// key={pos.key}
|
||||
// lockAspectRatio={
|
||||
// pos.Width ? pos.Width / pos.Height : 2.5
|
||||
// }
|
||||
// enableResizing={{
|
||||
// top: false,
|
||||
// right: false,
|
||||
// bottom: false,
|
||||
// left: false,
|
||||
// topRight: false,
|
||||
// bottomRight: true,
|
||||
// bottomLeft: false,
|
||||
// topLeft: false
|
||||
// }}
|
||||
// bounds="parent"
|
||||
// className="signYourselfBlock"
|
||||
// style={{
|
||||
// border: "1px solid red",
|
||||
// cursor: "all-scroll",
|
||||
// zIndex: "1",
|
||||
// background: "#daebe0"
|
||||
// }}
|
||||
// onDrag={() => handleTabDrag(pos.key)}
|
||||
// size={{
|
||||
// width: pos.Width ? pos.Width : 150,
|
||||
// height: pos.Height ? pos.Height : 60
|
||||
// }}
|
||||
// onDragStop={handleStop}
|
||||
// default={{
|
||||
// x: pos.xPosition,
|
||||
// y: pos.yPosition
|
||||
// }}
|
||||
// onClick={() => {
|
||||
// if (!isDragging) {
|
||||
// setIsSignPad(true);
|
||||
// setSignKey(pos.key);
|
||||
// setIsStamp(pos.isStamp);
|
||||
// }
|
||||
// }}
|
||||
// onResize={(
|
||||
// e,
|
||||
// direction,
|
||||
// ref,
|
||||
// delta,
|
||||
// position
|
||||
// ) => {
|
||||
// e.stopPropagation();
|
||||
// handleSignYourselfImageResize(
|
||||
// ref,
|
||||
// pos.key,
|
||||
// xyPostion,
|
||||
// index,
|
||||
// setXyPostion
|
||||
// );
|
||||
// }}
|
||||
// >
|
||||
// <BorderResize right={-12} top={-11} />
|
||||
// <PlaceholderBorder
|
||||
// pos={pos}
|
||||
// posWidth={posWidth}
|
||||
// posHeight={posHeight}
|
||||
// />
|
||||
// <PlaceholderDesign pos={pos} />
|
||||
// </Rnd>
|
||||
<React.Fragment key={pos.key}>
|
||||
<Placeholder
|
||||
pos={pos}
|
||||
|
||||
@@ -22,7 +22,8 @@ import {
|
||||
contractUsers,
|
||||
getHostUrl,
|
||||
addZIndex,
|
||||
randomId
|
||||
randomId,
|
||||
defaultWidthHeight
|
||||
} from "../utils/Utils";
|
||||
import RenderPdf from "./component/renderPdf";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
@@ -95,10 +96,8 @@ function PlaceHolderSign() {
|
||||
const [widgetType, setWidgetType] = useState("");
|
||||
const [isUiLoading, setIsUiLoading] = useState(false);
|
||||
const [isRadio, setIsRadio] = useState(false);
|
||||
const [radioData, setRadioData] = useState({
|
||||
data: "",
|
||||
label: ""
|
||||
});
|
||||
const [currWidgetsDetails, setCurrWidgetsDetails] = useState([]);
|
||||
|
||||
const color = [
|
||||
"#93a3db",
|
||||
"#e6c3db",
|
||||
@@ -903,7 +902,7 @@ function PlaceHolderSign() {
|
||||
}
|
||||
];
|
||||
|
||||
const handleSaveDropdownOptions = (dropdownName, dropdownOptions) => {
|
||||
const handleSaveWidgetsOptions = (dropdownName, dropdownOptions) => {
|
||||
const filterSignerPos = signerPos.filter((data) => data.Id === uniqueId);
|
||||
if (filterSignerPos.length > 0) {
|
||||
const getPlaceHolder = filterSignerPos[0].placeHolder;
|
||||
@@ -918,11 +917,22 @@ function PlaceHolderSign() {
|
||||
const getPosData = getXYdata;
|
||||
const addSignPos = getPosData.map((position, ind) => {
|
||||
if (position.key === signKey) {
|
||||
return {
|
||||
...position,
|
||||
widgetName: dropdownName,
|
||||
widgetOption: dropdownOptions
|
||||
};
|
||||
if (widgetType === "radio") {
|
||||
return {
|
||||
...position,
|
||||
widgetName: dropdownName,
|
||||
widgetOption: dropdownOptions,
|
||||
Height: position.Height
|
||||
? position.Height + 15
|
||||
: defaultWidthHeight(widgetType).width + 15
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
...position,
|
||||
widgetName: dropdownName,
|
||||
widgetOption: dropdownOptions
|
||||
};
|
||||
}
|
||||
}
|
||||
return position;
|
||||
});
|
||||
@@ -1068,12 +1078,6 @@ function PlaceHolderSign() {
|
||||
widgetStatus: selectRequiredType
|
||||
};
|
||||
}
|
||||
} else if (widgetType === "radio") {
|
||||
return {
|
||||
...position,
|
||||
widgetName: radioData.label,
|
||||
widgetOption: [radioData.data]
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
...position,
|
||||
@@ -1099,13 +1103,11 @@ function PlaceHolderSign() {
|
||||
|
||||
setSignerPos(newUpdateSigner);
|
||||
setIsCheckboxRequired(false);
|
||||
setIsRadio(false);
|
||||
setRadioData({});
|
||||
|
||||
setSelectRequiredType("Optional");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleValidateInput = (e) => {
|
||||
if (
|
||||
textValidate === "email" ||
|
||||
@@ -1121,16 +1123,6 @@ function PlaceHolderSign() {
|
||||
}, 1500);
|
||||
}
|
||||
};
|
||||
const handleInputChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
|
||||
// Update the state with the new value for the corresponding input
|
||||
setRadioData((prevValues) => ({
|
||||
...prevValues,
|
||||
[name]: value
|
||||
}));
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Title title={state?.title ? state.title : "New Document"} />
|
||||
@@ -1461,83 +1453,7 @@ function PlaceHolderSign() {
|
||||
</button>
|
||||
</div>
|
||||
</ModalUi>
|
||||
<ModalUi
|
||||
//isValidate
|
||||
isOpen={isRadio}
|
||||
title={"Radio group"}
|
||||
>
|
||||
<div style={{ height: "100%", padding: 20 }}>
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
handleApplyWidgetsStatus();
|
||||
}}
|
||||
>
|
||||
<div className="radioGroup">
|
||||
<label
|
||||
style={{
|
||||
marginRight: "5px",
|
||||
fontSize: "14px",
|
||||
fontWeight: "500"
|
||||
}}
|
||||
>
|
||||
Field name:
|
||||
</label>
|
||||
|
||||
<input
|
||||
required
|
||||
placeholder="Enter field name"
|
||||
className="drodown-input radioGroupInput"
|
||||
// onChange={(e) => setTextValidate(e.target.value)}
|
||||
id="label"
|
||||
name="label"
|
||||
value={radioData.label}
|
||||
onChange={handleInputChange}
|
||||
/>
|
||||
|
||||
<label
|
||||
style={{
|
||||
marginRight: "5px",
|
||||
fontSize: "14px",
|
||||
fontWeight: "500"
|
||||
}}
|
||||
>
|
||||
Data label:
|
||||
</label>
|
||||
|
||||
<input
|
||||
required
|
||||
placeholder="Enter data"
|
||||
className="drodown-input radioGroupInput"
|
||||
id="data"
|
||||
name="data"
|
||||
value={radioData.data}
|
||||
onChange={handleInputChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
height: "1px",
|
||||
backgroundColor: "#9f9f9f",
|
||||
width: "100%",
|
||||
marginTop: "15px",
|
||||
marginBottom: "15px"
|
||||
}}
|
||||
></div>
|
||||
<button
|
||||
style={{
|
||||
background: themeColor()
|
||||
}}
|
||||
type="submit"
|
||||
// disabled={!selectCopyType}
|
||||
className="finishBtn"
|
||||
>
|
||||
Apply
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</ModalUi>
|
||||
<PlaceholderCopy
|
||||
isPageCopy={isPageCopy}
|
||||
setIsPageCopy={setIsPageCopy}
|
||||
@@ -1550,9 +1466,18 @@ function PlaceHolderSign() {
|
||||
Id={uniqueId}
|
||||
/>
|
||||
<DropdownWidgetOption
|
||||
title="RadioGroup"
|
||||
showDropdown={isRadio}
|
||||
setShowDropdown={setIsRadio}
|
||||
handleSaveWidgetsOptions={handleSaveWidgetsOptions}
|
||||
currWidgetsDetails={currWidgetsDetails}
|
||||
/>
|
||||
<DropdownWidgetOption
|
||||
title="Dropdown options"
|
||||
showDropdown={showDropdown}
|
||||
setShowDropdown={setShowDropdown}
|
||||
handleSaveDropdownOptions={handleSaveDropdownOptions}
|
||||
handleSaveWidgetsOptions={handleSaveWidgetsOptions}
|
||||
currWidgetsDetails={currWidgetsDetails}
|
||||
/>
|
||||
{/* pdf header which contain funish back button */}
|
||||
<Header
|
||||
@@ -1603,6 +1528,7 @@ function PlaceHolderSign() {
|
||||
setIsValidate={setIsValidate}
|
||||
setWidgetType={setWidgetType}
|
||||
setIsRadio={setIsRadio}
|
||||
setCurrWidgetsDetails={setCurrWidgetsDetails}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -1058,13 +1058,18 @@ export const multiSignEmbed = async (
|
||||
dropdown.enableReadOnly();
|
||||
} else if (imgData.type === "radio") {
|
||||
const rocketField = form.createRadioGroup(randomboxId);
|
||||
rocketField.addOptionToPage(imgData.widgetOption[0], page, {
|
||||
x: xPos(imgData),
|
||||
y: yPos(imgData),
|
||||
width: scaleWidth,
|
||||
height: scaleHeight
|
||||
let addYPosition = 20;
|
||||
imgData.widgetOption.map((data, ind) => {
|
||||
rocketField.addOptionToPage(data, page, {
|
||||
x: xPos(imgData),
|
||||
y: ind === 0 ? yPos(imgData) : yPos(imgData) - addYPosition,
|
||||
width: 11,
|
||||
height: 11
|
||||
});
|
||||
addYPosition = ind !== 0 && addYPosition + 20;
|
||||
});
|
||||
rocketField.select(imgData.widgetOption[0]);
|
||||
|
||||
rocketField.select(imgData.widgetValue);
|
||||
rocketField.enableReadOnly();
|
||||
} else {
|
||||
page.drawImage(img, {
|
||||
|
||||
Reference in New Issue
Block a user