mirror of
https://github.com/OpenSignLabs/OpenSign.git
synced 2026-09-06 17:57:39 +02:00
feat: implement radio button functionality
This commit is contained in:
RaktimaNXG
@@ -111,10 +111,6 @@ function SignYourSelf() {
|
||||
text: "signature"
|
||||
},
|
||||
canDrag: isdraggingEnable,
|
||||
// options: {
|
||||
// // Set the delay for touch dragging
|
||||
// delay: { touch: 500 }, // Set the delay in milliseconds
|
||||
// },
|
||||
|
||||
collect: (monitor) => ({
|
||||
isDragSign: !!monitor.isDragging()
|
||||
@@ -363,11 +359,13 @@ function SignYourSelf() {
|
||||
: dragTypeValue === "date"
|
||||
? getDate()
|
||||
: "";
|
||||
const widgetWidth = defaultWidthHeight(dragTypeValue).width;
|
||||
const widgetHeight = defaultWidthHeight(dragTypeValue).height;
|
||||
|
||||
if (item === "onclick") {
|
||||
dropObj = {
|
||||
xPosition: window.innerWidth / 2 - 100,
|
||||
yPosition: window.innerHeight / 2 - 60,
|
||||
xPosition: containerWH.width / 2 - widgetWidth / 2,
|
||||
yPosition: containerWH.height / 2 - widgetHeight / 2,
|
||||
isDrag: false,
|
||||
isStamp:
|
||||
(dragTypeValue === "stamp" || dragTypeValue === "image") && true,
|
||||
@@ -379,8 +377,7 @@ function SignYourSelf() {
|
||||
dragTypeValue === "name" ||
|
||||
dragTypeValue === "company" ||
|
||||
dragTypeValue === "job title" ||
|
||||
dragTypeValue === "email" ||
|
||||
dragTypeValue === "initials"
|
||||
dragTypeValue === "email"
|
||||
? calculateInitialWidthHeight(dragTypeValue, widgetValue).getWidth
|
||||
: dragTypeValue === "initials"
|
||||
? defaultWidthHeight(dragTypeValue).width
|
||||
@@ -389,8 +386,7 @@ function SignYourSelf() {
|
||||
dragTypeValue === "company" ||
|
||||
dragTypeValue === "name" ||
|
||||
dragTypeValue === "job title" ||
|
||||
dragTypeValue === "email" ||
|
||||
dragTypeValue === "initials"
|
||||
dragTypeValue === "email"
|
||||
? calculateInitialWidthHeight(dragTypeValue, widgetValue).getHeight
|
||||
: dragTypeValue === "initials"
|
||||
? defaultWidthHeight(dragTypeValue).height
|
||||
|
||||
@@ -2,83 +2,6 @@ import React, { useRef, useState } from "react";
|
||||
import { getWidgetType } from "../../utils/Utils";
|
||||
|
||||
function AllWidgets(props) {
|
||||
const [backgroundColor, setBackgroundColor] = useState("");
|
||||
const timeoutRef = useRef(null);
|
||||
const touchStartTimestamp = useRef(0);
|
||||
const [selectWidgetType, setSelectWidgetType] = useState("");
|
||||
|
||||
const touchTimeoutRef = useRef(null);
|
||||
const [isTouchHold, setIsTouchHold] = useState(false);
|
||||
|
||||
const handleTouchStart = (type) => {
|
||||
// Set a timeout for the long press event
|
||||
touchStartTimestamp.current = Date.now();
|
||||
|
||||
// Set a timeout for the long press event
|
||||
timeoutRef.current = setTimeout(() => {
|
||||
// Check if the touch is still ongoing after the long press duration
|
||||
if (Date.now() - touchStartTimestamp.current >= 1000) {
|
||||
setTimeout(() => {
|
||||
props.setIsDraggingEnable(true);
|
||||
}, 1000);
|
||||
setBackgroundColor("lightblue"); // Change the color after the long press
|
||||
setSelectWidgetType(type);
|
||||
props.setIsDraggingEnable(true);
|
||||
if ("vibrate" in navigator) {
|
||||
// Vibrate for 200 milliseconds
|
||||
navigator.vibrate(200);
|
||||
}
|
||||
}
|
||||
}, 1000); // Adjust the duration as needed
|
||||
};
|
||||
|
||||
const handleTouchMove = () => {
|
||||
// If the touch moves (indicating a drag), cancel the long press effect
|
||||
// clearTimeout(timeoutRef.current);
|
||||
};
|
||||
|
||||
const handleTouchEnd = () => {
|
||||
// Clear the timeout when the touch ends before the long press duration
|
||||
setTimeout(() => {
|
||||
props.setIsDraggingEnable(false);
|
||||
setBackgroundColor(""); // Change the color after the long press
|
||||
setSelectWidgetType("");
|
||||
}, 1000);
|
||||
|
||||
clearTimeout(timeoutRef.current);
|
||||
};
|
||||
|
||||
// const handleTouchStart = () => {
|
||||
// touchTimeoutRef.current = setTimeout(() => {
|
||||
// setIsTouchHold(true);
|
||||
// setBackgroundColor("lightblue"); // Change the color after the long press
|
||||
// // setSelectWidgetType(type);
|
||||
// props.setIsDraggingEnable(true);
|
||||
// if ("vibrate" in navigator) {
|
||||
// // Vibrate for 200 milliseconds
|
||||
// navigator.vibrate(200);
|
||||
// }
|
||||
// // Start drag operation when touch-and-hold is detected
|
||||
// // props.dragSignature();
|
||||
// // props.dragSignatureSS();
|
||||
|
||||
// console.log('go here');
|
||||
// }, 1000); // Adjust the duration for touch-and-hold
|
||||
// };
|
||||
|
||||
// const handleTouchEnd = () => {
|
||||
// clearTimeout(touchTimeoutRef.current);
|
||||
// setIsTouchHold(false);
|
||||
// props.setIsDraggingEnable(false);
|
||||
// setBackgroundColor(""); // Change the color after the long press
|
||||
// setSelectWidgetType("");
|
||||
// };
|
||||
// const handleTouchMove = () => {
|
||||
// if (touchTimeoutRef.current) {
|
||||
// clearTimeout(touchTimeoutRef.current);
|
||||
// touchTimeoutRef.current = null;
|
||||
// }
|
||||
// };
|
||||
return props.updateWidgets.map((item, ind) => {
|
||||
return (
|
||||
<div key={ind} style={{ marginBottom: "10px" }}>
|
||||
@@ -89,36 +12,21 @@ function AllWidgets(props) {
|
||||
props.addPositionOfSignature("onclick", item);
|
||||
}}
|
||||
ref={(element) => {
|
||||
// if (!props.isMobile) {
|
||||
item.ref(element);
|
||||
if (element) {
|
||||
if (props?.signRef) {
|
||||
props.signRef.current = element;
|
||||
if (!props.isMobile) {
|
||||
item.ref(element);
|
||||
if (element) {
|
||||
if (props?.signRef) {
|
||||
props.signRef.current = element;
|
||||
}
|
||||
}
|
||||
}
|
||||
// }
|
||||
// props.dragSignature(element);
|
||||
// props.dragSignatureSS(element)
|
||||
// element && element.addEventListener("touchstart", handleTouchStart);
|
||||
// element && element.addEventListener("touchend", handleTouchEnd);
|
||||
}}
|
||||
// handleTouchMove={handleTouchMove}
|
||||
onMouseMove={props?.handleDivClick}
|
||||
onMouseDown={() => {
|
||||
props?.handleMouseLeave();
|
||||
}}
|
||||
>
|
||||
{item.ref && props.isMobile
|
||||
? getWidgetType(
|
||||
item,
|
||||
props?.marginLeft,
|
||||
handleTouchStart,
|
||||
handleTouchEnd,
|
||||
handleTouchMove,
|
||||
backgroundColor,
|
||||
selectWidgetType
|
||||
)
|
||||
: getWidgetType(item)}
|
||||
{item.ref && getWidgetType(item, props?.marginLeft)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -172,29 +172,37 @@ function Placeholder(props) {
|
||||
props.pos.type === "email" ||
|
||||
props.pos.type === "name" ||
|
||||
props.pos.type === "company" ||
|
||||
props.pos.type === "job title") && (
|
||||
props.pos.type === "job title" ||
|
||||
props.pos.type === "radio") && (
|
||||
<i
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
if (props.pos.type === "checkbox") {
|
||||
props.setIsCheckboxRequired(true);
|
||||
} else if (props.pos.type === "radio") {
|
||||
props.setIsRadio(true);
|
||||
} else {
|
||||
props.setIsValidate(true);
|
||||
}
|
||||
|
||||
props.setSignKey(props.pos.key);
|
||||
props.setUniqueId(props.data.Id);
|
||||
props.setWidgetType(props.pos.type);
|
||||
}}
|
||||
onTouchEnd={(e) => {
|
||||
e.stopPropagation();
|
||||
if (props.pos.type === "checkbox") {
|
||||
props.setIsCheckboxRequired(true);
|
||||
}
|
||||
if (props.pos.type === "radio") {
|
||||
props.setIsRadio(true);
|
||||
} else {
|
||||
props.setIsValidate(true);
|
||||
}
|
||||
|
||||
props.setSignKey(props.pos.key);
|
||||
props.setUniqueId(props.data.Id);
|
||||
props.setWidgetType(props.pos.type);
|
||||
}}
|
||||
class="fa-solid fa-gear settingIcon"
|
||||
style={{
|
||||
@@ -409,7 +417,8 @@ function Placeholder(props) {
|
||||
topRight: false,
|
||||
bottomRight:
|
||||
props.data && props.isNeedSign
|
||||
? props.data?.signerObjId === props.signerObjId
|
||||
? props.data?.signerObjId === props.signerObjId &&
|
||||
props.pos.type !== "radio"
|
||||
? true
|
||||
: false
|
||||
: true,
|
||||
@@ -504,7 +513,8 @@ function Placeholder(props) {
|
||||
}
|
||||
/>
|
||||
) : props.data && props.isNeedSign ? (
|
||||
props.data?.signerObjId === props.signerObjId ? (
|
||||
props.data?.signerObjId === props.signerObjId &&
|
||||
props.pos.type !== "radio" ? (
|
||||
<BorderResize />
|
||||
) : (
|
||||
<></>
|
||||
|
||||
@@ -11,6 +11,7 @@ function PlaceholderType(props) {
|
||||
const [validatePlaceholder, setValidatePlaceholder] = useState("");
|
||||
const inputRef = useRef(null);
|
||||
const [inputValue, setInputValue] = useState("");
|
||||
const [isCheckedRadio, setIsCheckedRadio] = useState(false);
|
||||
|
||||
const validateExpression = (regexValidation) => {
|
||||
let isValidate = regexValidation.test(inputValue);
|
||||
@@ -66,6 +67,18 @@ function PlaceholderType(props) {
|
||||
setStartDate(updateDate);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
onChangeInput(
|
||||
isCheckedRadio,
|
||||
props.pos.key,
|
||||
props.xyPostion,
|
||||
props.index,
|
||||
props.setXyPostion,
|
||||
props.data && props.data.signerObjId,
|
||||
false
|
||||
);
|
||||
}, [isCheckedRadio]);
|
||||
useEffect(() => {
|
||||
if (props.selectDate) {
|
||||
const updateDate = new Date(props.saveDateFormat);
|
||||
@@ -533,8 +546,10 @@ function PlaceholderType(props) {
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
// checked={checked}
|
||||
// onChange={onChange}
|
||||
checked={isCheckedRadio}
|
||||
onClick={() => {
|
||||
setIsCheckedRadio(!isCheckedRadio);
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
);
|
||||
|
||||
@@ -164,18 +164,18 @@ function FieldsComponent({
|
||||
isDragEmail: !!monitor.isDragging()
|
||||
})
|
||||
});
|
||||
// const [, radio] = useDrag({
|
||||
// type: "BOX",
|
||||
const [, radio] = useDrag({
|
||||
type: "BOX",
|
||||
|
||||
// item: {
|
||||
// type: "BOX",
|
||||
// id: 14,
|
||||
// text: "radio"
|
||||
// },
|
||||
// collect: (monitor) => ({
|
||||
// isDragRadio: !!monitor.isDragging()
|
||||
// })
|
||||
// });
|
||||
item: {
|
||||
type: "BOX",
|
||||
id: 14,
|
||||
text: "radio"
|
||||
},
|
||||
collect: (monitor) => ({
|
||||
isDragRadio: !!monitor.isDragging()
|
||||
})
|
||||
});
|
||||
const isMobile = window.innerWidth < 767;
|
||||
const scrollContainerRef = useRef(null);
|
||||
const [widget, setWidget] = useState([]);
|
||||
@@ -211,8 +211,8 @@ function FieldsComponent({
|
||||
jobTitle,
|
||||
date,
|
||||
image,
|
||||
email
|
||||
// radio
|
||||
email,
|
||||
radio
|
||||
];
|
||||
const getWidgetArray = widgets;
|
||||
const newUpdateSigner = getWidgetArray.map((obj, ind) => {
|
||||
@@ -223,8 +223,7 @@ function FieldsComponent({
|
||||
}, []);
|
||||
|
||||
const filterWidgets = widget.filter(
|
||||
(data) => data.type !== "dropdown"
|
||||
// && data.type !== "radio"
|
||||
(data) => data.type !== "dropdown" && data.type !== "radio"
|
||||
);
|
||||
const updateWidgets = isSignYourself ? filterWidgets : widget;
|
||||
|
||||
@@ -327,43 +326,24 @@ function FieldsComponent({
|
||||
borderTop: `2px solid ${themeColor()}`
|
||||
}}
|
||||
>
|
||||
<Scrollbar
|
||||
style={{ height: "50px", width: "100%" }}
|
||||
// onScroll={handleScrollStart}
|
||||
// onScrollStop={handleScrollEnd}
|
||||
// onTouchEnd={handleScrollStart}
|
||||
noScrollY={true}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
overflowX: "scroll",
|
||||
whiteSpace: "nowrap",
|
||||
padding: "10px"
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
// overflowX: "scroll",
|
||||
// whiteSpace: "nowrap",
|
||||
padding: "10px"
|
||||
}}
|
||||
// onScroll={handleScroll}
|
||||
// onTouchStart={handleScrollStart}
|
||||
// onTouchMove={handleTouchMove}
|
||||
// onTouchEnd={handleTouchEnd}
|
||||
>
|
||||
{/* {temp.map((data,ind) => {
|
||||
return <div style={{border:"1px solid red",padding:"20px"}} key={ind}>{data}</div>;
|
||||
})} */}
|
||||
<AllWidgets
|
||||
updateWidgets={updateWidgets}
|
||||
handleDivClick={handleDivClick}
|
||||
handleMouseLeave={handleMouseLeave}
|
||||
signRef={signRef}
|
||||
marginLeft={5}
|
||||
addPositionOfSignature={addPositionOfSignature}
|
||||
setIsDraggingEnable={setIsDraggingEnable}
|
||||
isMobile={isMobile}
|
||||
isdraggingEnable={isdraggingEnable}
|
||||
dragSignature={dragSignature}
|
||||
dragSignatureSS={dragSignatureSS}
|
||||
/>
|
||||
</div>
|
||||
</Scrollbar>
|
||||
<AllWidgets
|
||||
updateWidgets={updateWidgets}
|
||||
handleDivClick={handleDivClick}
|
||||
handleMouseLeave={handleMouseLeave}
|
||||
signRef={signRef}
|
||||
marginLeft={5}
|
||||
addPositionOfSignature={addPositionOfSignature}
|
||||
isMobile={isMobile}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -1,32 +0,0 @@
|
||||
import React from "react";
|
||||
import { themeColor } from "../../utils/ThemeColor/backColor";
|
||||
import { resizeBorderExtraWidth } from "../../utils/Utils";
|
||||
function PlaceholderBorder(props) {
|
||||
const getResizeBorderExtraWidth = resizeBorderExtraWidth();
|
||||
|
||||
return (
|
||||
<div
|
||||
className="borderResize"
|
||||
style={{
|
||||
borderColor: themeColor(),
|
||||
borderStyle: "dashed",
|
||||
// width: props.pos.Width
|
||||
// ? props.pos.Width + getResizeBorderExtraWidth
|
||||
// : 150 + getResizeBorderExtraWidth,
|
||||
// height: props.pos.Height
|
||||
// ? props.pos.Height + getResizeBorderExtraWidth
|
||||
// : 60 + getResizeBorderExtraWidth,
|
||||
width:
|
||||
props?.posWidth(props.pos, props?.isSignYourself) +
|
||||
getResizeBorderExtraWidth,
|
||||
height:
|
||||
props?.posHeight(props.pos, props?.isSignYourself) +
|
||||
getResizeBorderExtraWidth,
|
||||
borderWidth: "0.2px",
|
||||
overflow: "hidden"
|
||||
}}
|
||||
></div>
|
||||
);
|
||||
}
|
||||
|
||||
export default PlaceholderBorder;
|
||||
@@ -9,7 +9,7 @@ import {
|
||||
handleSignYourselfImageResize
|
||||
} from "../../utils/Utils";
|
||||
import EmailToast from "./emailToast";
|
||||
import PlaceholderBorder from "./placeholderBorder";
|
||||
// import PlaceholderBorder from "./placeholderBorder";
|
||||
import Placeholder from "../WidgetComponent/placeholder";
|
||||
|
||||
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
|
||||
@@ -58,7 +58,8 @@ function RenderPdf({
|
||||
setIsCheckboxRequired,
|
||||
setIsValidate,
|
||||
setWidgetType,
|
||||
setValidateAlert
|
||||
setValidateAlert,
|
||||
setIsRadio
|
||||
}) {
|
||||
const isMobile = window.innerWidth < 767;
|
||||
const newWidth = containerWH.width;
|
||||
@@ -410,141 +411,6 @@ function RenderPdf({
|
||||
>
|
||||
<EmailToast isShow={successEmail} />
|
||||
{pdfLoadFail.status &&
|
||||
// recipient
|
||||
// ? !pdfUrl &&
|
||||
// !isAlreadySign.mssg &&
|
||||
// xyPostion.length > 0 &&
|
||||
// xyPostion.map((data, ind) => {
|
||||
// return (
|
||||
// <React.Fragment key={ind}>
|
||||
// {data.pageNumber === pageNumber &&
|
||||
// data.pos.map((pos) => {
|
||||
// return (
|
||||
// pos && (
|
||||
// // <Rnd
|
||||
// // data-tut="reactourSecond"
|
||||
// // disableDragging={true}
|
||||
// // enableResizing={{
|
||||
// // top: false,
|
||||
// // right: false,
|
||||
// // bottom: false,
|
||||
// // left: false,
|
||||
// // topRight: false,
|
||||
// // bottomRight: true,
|
||||
// // bottomLeft: false,
|
||||
// // topLeft: false
|
||||
// // }}
|
||||
// // key={pos.key}
|
||||
// // bounds="parent"
|
||||
// // style={{
|
||||
// // cursor: "all-scroll",
|
||||
// // borderColor: themeColor(),
|
||||
// // borderStyle: "dashed",
|
||||
// // borderWidth: "0.1px",
|
||||
// // zIndex: "1",
|
||||
// // background: data.blockColor
|
||||
// // ? data.blockColor
|
||||
// // : "#daebe0"
|
||||
// // }}
|
||||
// // className="signYourselfBlock"
|
||||
// // onResize={(
|
||||
// // e,
|
||||
// // direction,
|
||||
// // ref,
|
||||
// // delta,
|
||||
// // position
|
||||
// // ) => {
|
||||
// // handleSignYourselfImageResize(
|
||||
// // ref,
|
||||
// // pos.key,
|
||||
// // xyPostion,
|
||||
// // index,
|
||||
// // setXyPostion
|
||||
// // );
|
||||
// // }}
|
||||
// // size={{
|
||||
// // width: posWidth(pos),
|
||||
// // height: posHeight(pos)
|
||||
// // }}
|
||||
// // lockAspectRatio={
|
||||
// // pos.Width ? pos.Width / pos.Height : 2.5
|
||||
// // }
|
||||
// // //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divide by scale
|
||||
// // //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
|
||||
// // default={{
|
||||
// // x: xPos(pos),
|
||||
// // y: yPos(pos)
|
||||
// // }}
|
||||
// // onClick={() => {
|
||||
// // setIsSignPad(true);
|
||||
// // setSignKey(pos.key);
|
||||
// // setIsStamp(
|
||||
// // pos?.isStamp ? pos.isStamp : false
|
||||
// // );
|
||||
// // }}
|
||||
// // >
|
||||
// // <BorderResize />
|
||||
// // {pos.SignUrl ? (
|
||||
// // <img
|
||||
// // alt="no img"
|
||||
// // onClick={() => {
|
||||
// // setIsSignPad(true);
|
||||
// // setSignKey(pos.key);
|
||||
// // }}
|
||||
// // src={pos.SignUrl}
|
||||
// // style={{
|
||||
// // width: "100%",
|
||||
// // height: "100%",
|
||||
// // objectFit: "contain"
|
||||
// // }}
|
||||
// // />
|
||||
// // ) : (
|
||||
// // <div
|
||||
// // style={{
|
||||
// // fontSize: "10px",
|
||||
// // color: "black",
|
||||
|
||||
// // justifyContent: "center",
|
||||
// // marginTop: "0px"
|
||||
// // }}
|
||||
// // >
|
||||
// // <div>{pos.type}</div>
|
||||
|
||||
// // {handleUserName(
|
||||
// // data.signerObjId,
|
||||
// // data.Role
|
||||
// // )}
|
||||
// // </div>
|
||||
// // )}
|
||||
// // </Rnd>
|
||||
// <Placeholder
|
||||
// pos={pos}
|
||||
// setSignKey={setSignKey}
|
||||
// setIsStamp={setIsStamp}
|
||||
// handleSignYourselfImageResize={
|
||||
// handleSignYourselfImageResize
|
||||
// }
|
||||
// index={index}
|
||||
// xyPostion={xyPostion}
|
||||
// setXyPostion={setXyPostion}
|
||||
// pdfOriginalWidth={pdfOriginalWidth}
|
||||
// containerWH={containerWH}
|
||||
// setIsSignPad={setIsSignPad}
|
||||
// isShowDropdown={true}
|
||||
// isRecipient={true}
|
||||
// isSignYourself={false}
|
||||
// xPos={xPos}
|
||||
// yPos={yPos}
|
||||
// posWidth={posWidth}
|
||||
// posHeight={posHeight}
|
||||
// />
|
||||
// )
|
||||
// );
|
||||
// })}
|
||||
// </React.Fragment>
|
||||
// );
|
||||
// })
|
||||
// :
|
||||
(pdfRequest
|
||||
? signerPos.map((data, key) => {
|
||||
return (
|
||||
@@ -778,6 +644,7 @@ function RenderPdf({
|
||||
}
|
||||
setIsValidate={setIsValidate}
|
||||
setWidgetType={setWidgetType}
|
||||
setIsRadio={setIsRadio}
|
||||
/>
|
||||
</React.Fragment>
|
||||
);
|
||||
@@ -975,7 +842,7 @@ function RenderPdf({
|
||||
}}
|
||||
loading={"Loading Document.."}
|
||||
onLoadSuccess={pageDetails}
|
||||
ref={pdfRef}
|
||||
// ref={pdfRef}
|
||||
file={
|
||||
pdfUrl
|
||||
? pdfUrl
|
||||
@@ -1238,6 +1105,7 @@ function RenderPdf({
|
||||
}
|
||||
setIsValidate={setIsValidate}
|
||||
setWidgetType={setWidgetType}
|
||||
setIsRadio={setIsRadio}
|
||||
/>
|
||||
</React.Fragment>
|
||||
);
|
||||
@@ -1370,7 +1238,7 @@ function RenderPdf({
|
||||
}}
|
||||
loading={"Loading Document.."}
|
||||
onLoadSuccess={pageDetails}
|
||||
ref={pdfRef}
|
||||
// ref={pdfRef}
|
||||
file={
|
||||
pdfUrl
|
||||
? pdfUrl
|
||||
|
||||
@@ -95,7 +95,10 @@ function PlaceHolderSign() {
|
||||
const [widgetType, setWidgetType] = useState("");
|
||||
const [isUiLoading, setIsUiLoading] = useState(false);
|
||||
const [isRadio, setIsRadio] = useState(false);
|
||||
const [radioFieldName, setRadioFieldName] = useState({});
|
||||
const [radioData, setRadioData] = useState({
|
||||
data: "",
|
||||
label: ""
|
||||
});
|
||||
const color = [
|
||||
"#93a3db",
|
||||
"#e6c3db",
|
||||
@@ -361,24 +364,28 @@ function PlaceHolderSign() {
|
||||
let filterSignerPos = signerPos.filter((data) => data.Id === uniqueId);
|
||||
let dropData = [];
|
||||
let placeHolder;
|
||||
const dragTypeValue = item?.text ? item.text : monitor.type;
|
||||
// const widgetWidth = defaultWidthHeight(dragTypeValue).width;
|
||||
// const widgetHeight = defaultWidthHeight(dragTypeValue).height;
|
||||
|
||||
if (item === "onclick") {
|
||||
const dropObj = {
|
||||
//onclick put placeholder center on pdf
|
||||
xPosition: window.innerWidth / 2 - 100,
|
||||
xPosition: window.innerWidth / 2 - 150,
|
||||
yPosition: window.innerHeight / 2 - 60,
|
||||
isStamp:
|
||||
(monitor.type === "stamp" || monitor.type === "image") && true,
|
||||
(dragTypeValue === "stamp" || dragTypeValue === "image") && true,
|
||||
key: key,
|
||||
isDrag: false,
|
||||
scale: scale,
|
||||
isMobile: isMobile,
|
||||
yBottom: window.innerHeight / 2 - 60,
|
||||
zIndex: posZIndex,
|
||||
type: monitor.type,
|
||||
type: dragTypeValue,
|
||||
widgetValue:
|
||||
monitor.type === "checkbox"
|
||||
dragTypeValue === "checkbox"
|
||||
? false
|
||||
: monitor.type === "date"
|
||||
: dragTypeValue === "date"
|
||||
? getDate()
|
||||
: ""
|
||||
};
|
||||
@@ -387,7 +394,7 @@ function PlaceHolderSign() {
|
||||
pageNumber: pageNumber,
|
||||
pos: dropData
|
||||
};
|
||||
} else if (item.type === "BOX") {
|
||||
} else {
|
||||
const offset = monitor.getClientOffset();
|
||||
//adding and updating drop position in array when user drop signature button in div
|
||||
const containerRect = document
|
||||
@@ -400,7 +407,8 @@ function PlaceHolderSign() {
|
||||
const dropObj = {
|
||||
xPosition: signBtnPosition[0] ? x - signBtnPosition[0].xPos : x,
|
||||
yPosition: signBtnPosition[0] ? y - signBtnPosition[0].yPos : y,
|
||||
isStamp: (item.text === "stamp" || item.text === "image") && true,
|
||||
isStamp:
|
||||
(dragTypeValue === "stamp" || dragTypeValue === "image") && true,
|
||||
key: key,
|
||||
isDrag: false,
|
||||
firstXPos: signBtnPosition[0] && signBtnPosition[0].xPos,
|
||||
@@ -411,9 +419,9 @@ function PlaceHolderSign() {
|
||||
zIndex: posZIndex,
|
||||
type: item.text,
|
||||
widgetValue:
|
||||
item.text === "checkbox"
|
||||
dragTypeValue === "checkbox"
|
||||
? false
|
||||
: monitor.type === "date"
|
||||
: dragTypeValue === "date"
|
||||
? getDate()
|
||||
: ""
|
||||
};
|
||||
@@ -484,13 +492,15 @@ function PlaceHolderSign() {
|
||||
}
|
||||
setSignerPos((prev) => [...prev, placeHolderPos]);
|
||||
}
|
||||
if (item.text === "dropdown" || monitor.type === "dropdown") {
|
||||
if (dragTypeValue === "dropdown") {
|
||||
setShowDropdown(true);
|
||||
setSignKey(key);
|
||||
} else if (item.text === "checkbox" || monitor.type === "checkbox") {
|
||||
} else if (dragTypeValue === "checkbox") {
|
||||
setIsCheckboxRequired(true);
|
||||
setSignKey(key);
|
||||
} else if (dragTypeValue === "radio") {
|
||||
setIsRadio(true);
|
||||
}
|
||||
setWidgetType(dragTypeValue);
|
||||
setSignKey(key);
|
||||
if (isMobile) {
|
||||
setIsDraggingEnable(false);
|
||||
}
|
||||
@@ -1060,12 +1070,11 @@ function PlaceHolderSign() {
|
||||
}
|
||||
} else if (widgetType === "radio") {
|
||||
return {
|
||||
...position
|
||||
// widgetName: dropdownName,
|
||||
// widgetOption: dropdownOptions
|
||||
...position,
|
||||
widgetName: radioData.label,
|
||||
widgetOption: [radioData.data]
|
||||
};
|
||||
}
|
||||
{
|
||||
} else {
|
||||
return {
|
||||
...position,
|
||||
validation: regularExpression
|
||||
@@ -1090,6 +1099,8 @@ function PlaceHolderSign() {
|
||||
|
||||
setSignerPos(newUpdateSigner);
|
||||
setIsCheckboxRequired(false);
|
||||
setIsRadio(false);
|
||||
setRadioData({});
|
||||
setSelectRequiredType("Optional");
|
||||
}
|
||||
}
|
||||
@@ -1110,6 +1121,16 @@ 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"} />
|
||||
@@ -1442,66 +1463,79 @@ function PlaceHolderSign() {
|
||||
</ModalUi>
|
||||
<ModalUi
|
||||
//isValidate
|
||||
isOpen={false}
|
||||
isOpen={isRadio}
|
||||
title={"Radio group"}
|
||||
>
|
||||
<div style={{ height: "100%", padding: 20 }}>
|
||||
<div className="radioGroup">
|
||||
<label
|
||||
style={{
|
||||
marginRight: "5px",
|
||||
fontSize: "14px",
|
||||
fontWeight: "500"
|
||||
}}
|
||||
>
|
||||
Field name:
|
||||
</label>
|
||||
|
||||
<input
|
||||
placeholder="Enter field name"
|
||||
className="drodown-input radioGroupInput"
|
||||
// onChange={(e) => setTextValidate(e.target.value)}
|
||||
/>
|
||||
|
||||
<label
|
||||
style={{
|
||||
marginRight: "5px",
|
||||
fontSize: "14px",
|
||||
fontWeight: "500"
|
||||
}}
|
||||
>
|
||||
Data label:
|
||||
</label>
|
||||
|
||||
<input
|
||||
placeholder="Enter data"
|
||||
className="drodown-input radioGroupInput"
|
||||
// onChange={(e) => setTextValidate(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
height: "1px",
|
||||
backgroundColor: "#9f9f9f",
|
||||
width: "100%",
|
||||
marginTop: "15px",
|
||||
marginBottom: "15px"
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
handleApplyWidgetsStatus();
|
||||
}}
|
||||
></div>
|
||||
<button
|
||||
onClick={() => {
|
||||
handleValidateInput();
|
||||
}}
|
||||
style={{
|
||||
background: themeColor()
|
||||
}}
|
||||
type="button"
|
||||
// disabled={!selectCopyType}
|
||||
className="finishBtn"
|
||||
>
|
||||
Apply
|
||||
</button>
|
||||
<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
|
||||
@@ -1568,6 +1602,7 @@ function PlaceHolderSign() {
|
||||
setIsCheckboxRequired={setIsCheckboxRequired}
|
||||
setIsValidate={setIsValidate}
|
||||
setWidgetType={setWidgetType}
|
||||
setIsRadio={setIsRadio}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -231,36 +231,23 @@ export const widgets = [
|
||||
type: "email",
|
||||
icon: "fa-solid fa-envelope",
|
||||
iconSize: "20px"
|
||||
},
|
||||
{
|
||||
type: "radio",
|
||||
icon: "fa-regular fa-circle-dot",
|
||||
iconSize: "20px"
|
||||
}
|
||||
// {
|
||||
// type: "radio",
|
||||
// icon: "fa-regular fa-circle-dot",
|
||||
// iconSize: "20px"
|
||||
// }
|
||||
];
|
||||
|
||||
export const getWidgetType = (
|
||||
item,
|
||||
marginLeft,
|
||||
handleTouchStart,
|
||||
handleTouchEnd,
|
||||
handleTouchMove,
|
||||
backgroundColor,
|
||||
selectWidgetType
|
||||
) => {
|
||||
export const getWidgetType = (item, marginLeft) => {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
onTouchStart={() => handleTouchStart && handleTouchStart(item.type)}
|
||||
onTouchEnd={handleTouchEnd && handleTouchEnd}
|
||||
onTouchMove={handleTouchMove && handleTouchMove}
|
||||
className="signatureBtn widgets"
|
||||
style={{
|
||||
boxShadow:
|
||||
"0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18)",
|
||||
marginLeft: marginLeft && `${marginLeft}px`,
|
||||
background:
|
||||
selectWidgetType === item.type && backgroundColor && backgroundColor
|
||||
marginLeft: marginLeft && `${marginLeft}px`
|
||||
}}
|
||||
>
|
||||
<div
|
||||
@@ -380,12 +367,12 @@ export const defaultWidthHeight = (type) => {
|
||||
width: 50,
|
||||
height: 20
|
||||
};
|
||||
// case "radio":
|
||||
// obj = {
|
||||
// width: 15,
|
||||
// height: 15
|
||||
// };
|
||||
// return obj;
|
||||
case "radio":
|
||||
obj = {
|
||||
width: 15,
|
||||
height: 15
|
||||
};
|
||||
return obj;
|
||||
default:
|
||||
obj = {
|
||||
width: 150,
|
||||
@@ -1023,9 +1010,9 @@ export const multiSignEmbed = async (
|
||||
}
|
||||
}
|
||||
};
|
||||
const checkboxId = "checkbox_" + imgData.key;
|
||||
const randomboxId = "randombox_" + imgData.key;
|
||||
if (imgData.type === "checkbox") {
|
||||
const checkBox = form.createCheckBox(checkboxId);
|
||||
const checkBox = form.createCheckBox(randomboxId);
|
||||
|
||||
checkBox.addToPage(page, {
|
||||
x: xPos(imgData),
|
||||
@@ -1059,7 +1046,7 @@ export const multiSignEmbed = async (
|
||||
color: rgb(0, 0, 0)
|
||||
});
|
||||
} else if (imgData.type === "dropdown") {
|
||||
const dropdown = form.createDropdown(checkboxId);
|
||||
const dropdown = form.createDropdown(randomboxId);
|
||||
dropdown.addOptions(imgData.widgetOption);
|
||||
dropdown.select(imgData.widgetValue);
|
||||
dropdown.addToPage(page, {
|
||||
@@ -1069,6 +1056,16 @@ export const multiSignEmbed = async (
|
||||
height: scaleHeight
|
||||
});
|
||||
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
|
||||
});
|
||||
rocketField.select(imgData.widgetOption[0]);
|
||||
rocketField.enableReadOnly();
|
||||
} else {
|
||||
page.drawImage(img, {
|
||||
x: xPos(imgData),
|
||||
@@ -1219,38 +1216,8 @@ export const handleSignYourselfImageResize = (
|
||||
setXyPostion,
|
||||
index
|
||||
) => {
|
||||
// const updateFilter = xyPostion[index].pos.filter(
|
||||
// (data) => data.key === key && data.Width && data.Height
|
||||
// );
|
||||
|
||||
// if (updateFilter.length > 0) {
|
||||
// const getXYdata = xyPostion[index].pos;
|
||||
// const getPosData = getXYdata;
|
||||
// const addSign = getPosData.map((url, ind) => {
|
||||
// if (url.key === key) {
|
||||
// return {
|
||||
// ...url,
|
||||
// Width: ref.offsetWidth,
|
||||
// Height: ref.offsetHeight,
|
||||
// IsResize: true
|
||||
// };
|
||||
// }
|
||||
// return url;
|
||||
// });
|
||||
|
||||
// const newUpdateUrl = xyPostion.map((obj, ind) => {
|
||||
// if (ind === index) {
|
||||
// return { ...obj, pos: addSign };
|
||||
// }
|
||||
// return obj;
|
||||
// });
|
||||
|
||||
// setXyPostion(newUpdateUrl);
|
||||
// } else {
|
||||
const getXYdata = xyPostion[index].pos;
|
||||
|
||||
const getPosData = getXYdata;
|
||||
|
||||
const addSign = getPosData.map((url, ind) => {
|
||||
if (url.key === key) {
|
||||
return {
|
||||
@@ -1270,7 +1237,6 @@ export const handleSignYourselfImageResize = (
|
||||
return obj;
|
||||
});
|
||||
setXyPostion(newUpdateUrl);
|
||||
// }
|
||||
};
|
||||
|
||||
//function for call cloud function signPdf and generate digital signature
|
||||
|
||||
Reference in New Issue
Block a user