{
+ switch (data) {
+ case "L":
+ return "MM/dd/yyyy";
+ case "DD-MM-YYYY":
+ return "dd-MM-yyyy";
+ case "DD/MM/YYYY":
+ return "dd/MM/yyyy";
+ case "LL":
+ return "MMMM dd, yyyy";
+ case "DD MMM, YYYY":
+ return "dd MMM, yyyy";
+ case "YYYY-MM-DD":
+ return "yyyy-MM-dd";
+ case "MM-DD-YYYY":
+ return "MM-dd-yyyy";
+ case "MM.DD.YYYY":
+ return "MM.dd.yyyy";
+ case "MMM DD, YYYY":
+ return "MMM dd, yyyy";
+ case "DD MMMM, YYYY":
+ return "dd MMMM, yyyy";
+ default:
+ return "MM/dd/yyyy";
+ }
+};
+
+const changeDateToMomentFormat = (format) => {
+ switch (format) {
+ case "MM/dd/yyyy":
+ return "L";
+ case "dd-MM-yyyy":
+ return "DD-MM-YYYY";
+ case "dd/MM/yyyy":
+ return "DD/MM/YYYY";
+ case "MMMM dd, yyyy":
+ return "LL";
+ case "dd MMM, yyyy":
+ return "DD MMM, YYYY";
+ case "yyyy-MM-dd":
+ return "YYYY-MM-DD";
+ case "MM-dd-yyyy":
+ return "MM-DD-YYYY";
+ case "MM.dd.yyyy":
+ return "MM.DD.YYYY";
+ case "MMM dd, yyyy":
+ return "MMM DD, YYYY";
+ case "dd MMMM, yyyy":
+ return "DD MMMM, YYYY";
+ default:
+ return "L";
+ }
+};
+
+//function to get default date
+const getDefaultdate = (selectedDate, format = "dd-MM-yyyy") => {
+ let date;
+ if (format && format === "dd-MM-yyyy") {
+ const newdate = selectedDate
+ ? selectedDate
+ : moment(new Date()).format(changeDateToMomentFormat(format));
+ const [day, month, year] = newdate.split("-");
+ date = new Date(`${year}-${month}-${day}`);
+ } else {
+ date = new Date(selectedDate);
+ }
+ const value = date;
+ return value;
+};
+//function to get default format
+const getDefaultFormat = (dateFormat) => dateFormat || "MM/dd/yyyy";
+
function Placeholder(props) {
const [isDraggingEnabled, setDraggingEnabled] = useState(true);
const [isShowDateFormat, setIsShowDateFormat] = useState(false);
- const [selectDate, setSelectDate] = useState();
+ const [selectDate, setSelectDate] = useState({
+ date:
+ props.pos.type === "date"
+ ? moment(
+ getDefaultdate(
+ props?.pos?.options?.response,
+ props.pos?.options?.validation?.format
+ ).getTime()
+ ).format(
+ changeDateToMomentFormat(props.pos?.options?.validation?.format)
+ )
+ : "",
+ format:
+ props.pos.type === "date"
+ ? getDefaultFormat(props.pos?.options?.validation?.format)
+ : ""
+ });
const [dateFormat, setDateFormat] = useState([]);
- const [saveDateFormat, setSaveDateFormat] = useState("");
+ const [startDate, setStartDate] = useState(
+ props.pos.type === "date" &&
+ getDefaultdate(
+ props?.pos?.options?.response,
+ props.pos?.options?.validation?.format
+ )
+ );
+ const [getCheckboxRenderWidth, setGetCheckboxRenderWidth] = useState({
+ width: null,
+ height: null
+ });
const dateFormatArr = [
"L",
"DD-MM-YYYY",
@@ -25,70 +130,41 @@ function Placeholder(props) {
"DD MMMM, YYYY"
];
- const selectFormat = (data) => {
- switch (data) {
- case "L":
- return "MM/dd/yyyy";
- case "DD-MM-YYYY":
- return "dd-MM-yyyy";
- case "DD/MM/YYYY":
- return "dd/MM/yyyy";
- case "LL":
- return "MMMM dd, yyyy";
- case "DD MMM, YYYY":
- return "dd MMM, YYYY";
- case "YYYY-MM-DD":
- return "YYYY-MM-dd";
- case "MM-DD-YYYY":
- return "MM-dd-YYYY";
- case "MM.DD.YYYY":
- return "MM.dd.YYYY";
- case "MMM DD, YYYY":
- return "MMM dd, YYYY";
- case "DD MMMM, YYYY":
- return "dd MMMM, YYYY";
- default:
- return "dd/MM/yyyy";
- }
- };
+ useEffect(() => {
+ const updateWidth = () => {
+ const rndElement = document.getElementById(props.pos.key);
+ if (rndElement) {
+ const { width, height } = rndElement.getBoundingClientRect();
+ setGetCheckboxRenderWidth({ width: width, height: height });
+ }
+ };
+
+ // Delay to ensure rendering is complete
+ const timer = setTimeout(updateWidth, 0);
+
+ return () => clearTimeout(timer);
+ }, [props.pos]);
useEffect(() => {
- //set default current date and default format MM/dd/yyyy
- if (props.isSignYourself) {
- const date = new Date();
- const milliseconds = date.getTime();
- const newDate = moment(milliseconds).format("MM/DD/YYYY");
- const dateObj = {
- date: newDate,
- format: "MM/dd/YYYY"
- };
- setSelectDate(dateObj);
- } else {
- const defaultRes = props?.pos?.options?.response;
- const defaultFormat = props.pos?.options?.validation?.format;
- const updateDate = defaultRes
- ? new Date(props?.pos?.options?.response)
- : new Date();
- const dateFormat = defaultFormat ? defaultFormat : "MM/DD/YYYY";
- const milliseconds = updateDate.getTime();
- const newDate = moment(milliseconds).format(dateFormat);
- const dateObj = {
- date: newDate,
- format: props.pos?.options?.validation?.format
- ? props.pos?.options?.validation?.format
- : "MM/dd/YYYY"
- };
- setSelectDate(dateObj);
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, []);
+ const closeMenuOnOutsideClick = (e) => {
+ if (!isDraggingEnabled && !e.target.closest("#changeIsDragging")) {
+ setDraggingEnabled(true);
+ }
+ };
+
+ document.addEventListener("click", closeMenuOnOutsideClick);
- //function for add selected date and format in selectFormat
+ return () => {
+ // Cleanup the event listener when the component unmounts
+ document.removeEventListener("click", closeMenuOnOutsideClick);
+ };
+ }, [isDraggingEnabled]);
+ //function change format array list with selected date and format
const changeDateFormat = () => {
const updateDate = [];
dateFormatArr.map((data) => {
let date;
- if (selectDate.format === "dd-MM-yyyy") {
+ if (selectDate && selectDate.format === "dd-MM-yyyy") {
const [day, month, year] = selectDate.date.split("-");
date = new Date(`${year}-${month}-${day}`);
} else {
@@ -104,13 +180,15 @@ function Placeholder(props) {
});
setDateFormat(updateDate);
};
+
useEffect(() => {
if (props.isPlaceholder || props.isSignYourself) {
selectDate && changeDateFormat();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectDate]);
- //handle to close drop down menu onclick screen
+
+ //it detect outside click of date dropdown menu
useEffect(() => {
const closeMenuOnOutsideClick = (e) => {
if (isShowDateFormat && !e.target.closest("#menu-container")) {
@@ -124,14 +202,14 @@ function Placeholder(props) {
};
}, [isShowDateFormat]);
- //onclick placeholder function to open signature pad
- const handlePlaceholderClick = () => {
+ //`handleWidgetIdandPopup` is used to set current widget id and open relative popup
+ const handleWidgetIdandPopup = () => {
if (props.setSelectWidgetId) {
props.setSelectWidgetId(props.pos.key);
}
const widgetTypeExist = [
- "text",
+ textInputWidget,
"checkbox",
"name",
"company",
@@ -167,7 +245,7 @@ function Placeholder(props) {
} else if (
props.isPlaceholder &&
!props.isDragging &&
- props.pos.type !== "label"
+ props.pos.type !== textWidget
) {
if (props.pos.key === props.selectWidgetId) {
props.handleLinkUser(props.data.Id);
@@ -194,9 +272,19 @@ function Placeholder(props) {
}
}
};
-
- const handleWidgetsOnclick = () => {
- if (props.pos.type === "radio") {
+ const handleOnClickPlaceholder = () => {
+ if (!props.isNeedSign) {
+ props.setWidgetType(props.pos.type);
+ }
+ if (props.isNeedSign && props.data?.signerObjId === props.signerObjId) {
+ handleWidgetIdandPopup();
+ } else if (props.isPlaceholder || props.isSignYourself) {
+ handleWidgetIdandPopup();
+ }
+ };
+ //`handleOnClickSettingIcon` is used set current widget details and open setting of it
+ const handleOnClickSettingIcon = () => {
+ if (props.pos.type === radioButtonWidget) {
props.setIsRadio(true);
} else if (props.pos.type === "dropdown") {
props?.setShowDropdown(true);
@@ -206,13 +294,57 @@ function Placeholder(props) {
props?.handleNameModal(true);
}
- if (props.isPlaceholder) {
+ if (props.isPlaceholder && props.type !== textWidget) {
props.setUniqueId(props.data.Id);
}
props.setSignKey(props.pos.key);
props.setWidgetType(props.pos.type);
props.setCurrWidgetsDetails(props.pos);
};
+ //function ro set state value of onclick on widget's copy icon
+ const handleCopyPlaceholder = (e) => {
+ if (props.data && props?.pos?.type !== textWidget) {
+ props.setSignerObjId(props?.data?.signerObjId);
+ props.setUniqueId(props?.data?.Id);
+ } else if (props.data && props.pos.type === textWidget) {
+ props.setTempSignerId(props.uniqueId);
+ props.setSignerObjId(props?.data?.signerObjId);
+ props.setUniqueId(props?.data?.Id);
+ }
+ e.stopPropagation();
+ props.setIsPageCopy(true);
+ props.setSignKey(props.pos.key);
+ };
+
+ //function to save date and format on local array onchange date and onclick format
+ const handleSaveDate = (data, isDateChange) => {
+ let updateDate = data.date;
+ //check if date change by user
+ if (isDateChange) {
+ //`changeDateToMomentFormat` is used to convert date as per required to moment package
+ updateDate = moment(data.date).format(
+ changeDateToMomentFormat(data.format)
+ );
+ }
+ //using moment package is used to change date as per the format provided in selectDate obj e.g. - MM/dd/yyyy -> 03/12/2024
+ //`getDefaultdate` is used to convert update date in new Date() format
+ const date = moment(
+ getDefaultdate(updateDate, data?.format).getTime()
+ ).format(changeDateToMomentFormat(data?.format));
+
+ //`onChangeInput` is used to save data related to date in a placeholder field
+ onChangeInput(
+ date,
+ props.pos.key,
+ props.xyPostion,
+ props.index,
+ props.setXyPostion,
+ props.data && props.data.Id,
+ false,
+ data?.format
+ );
+ setSelectDate({ date: date, format: data?.format });
+ };
const PlaceholderIcon = () => {
return (
props.isShowBorder && (
@@ -223,48 +355,42 @@ function Placeholder(props) {
{
e.stopPropagation();
- handleWidgetsOnclick();
+ handleOnClickSettingIcon();
}}
onTouchEnd={(e) => {
e.stopPropagation();
- handleWidgetsOnclick();
+ handleOnClickSettingIcon();
}}
className="fa-solid fa-gear settingIcon"
style={{
color: "#188ae2",
- right: "9px",
- top: "-28px"
+ right: "29px",
+ top: "-19px"
}}
>
) : (
- props.pos.type !== "date" &&
- props.pos.type !== "label" &&
- props.pos.type !== "signature" &&
- !props.isSignYourself && (
+ ((!props?.pos?.type && props.pos.isStamp) ||
+ (props?.pos?.type &&
+ !["date", textWidget, "signature"].includes(
+ props.pos.type
+ ) &&
+ !props.isSignYourself)) && (
{
e.stopPropagation();
- handleWidgetsOnclick();
+ handleOnClickSettingIcon();
}}
onTouchEnd={(e) => {
e.stopPropagation();
- handleWidgetsOnclick();
+ handleOnClickSettingIcon();
}}
className="fa-solid fa-gear settingIcon"
- style={{
- color: "#188ae2",
- right: ["checkbox", "radio"].includes(props.pos.type)
- ? "24px"
- : "47px",
- top: ["checkbox", "radio"].includes(props.pos.type)
- ? "-28px"
- : "-19px"
- }}
+ style={{ color: "#188ae2", right: "47px", top: "-19px" }}
>
)
)}
- {props.pos.type !== "label" && !props.isSignYourself && (
+ {props.pos.type !== textWidget && !props.isSignYourself && (
)}
@@ -347,10 +461,12 @@ function Placeholder(props) {
e.stopPropagation();
setIsShowDateFormat(!isShowDateFormat);
setSelectDate(data);
+ handleSaveDate(data);
}}
onClick={() => {
setIsShowDateFormat(!isShowDateFormat);
setSelectDate(data);
+ handleSaveDate(data);
}}
className="dropdown-item itemColor"
style={{ fontSize: "12px" }}
@@ -364,35 +480,9 @@ function Placeholder(props) {
)}
{
- if (props.data) {
- props.setSignerObjId(props.data.signerObjId);
- props.setUniqueId(props.data.Id);
- }
- e.stopPropagation();
- props.setIsPageCopy(true);
- props.setSignKey(props.pos.key);
- }}
- onTouchEnd={(e) => {
- if (props.data) {
- props.setSignerObjId(props.data.signerObjId);
- props.setUniqueId(props.data.Id);
- }
- e.stopPropagation();
- props.setIsPageCopy(true);
- props.setSignKey(props.pos.key);
- }}
- style={{
- color: "#188ae2",
- right:
- props.pos.type === "checkbox" || props.pos.type === "radio"
- ? "-9px"
- : "12px",
- top:
- props.pos.type === "checkbox" || props.pos.type === "radio"
- ? "-28px"
- : "-18px"
- }}
+ onClick={(e) => handleCopyPlaceholder(e)}
+ onTouchEnd={(e) => handleCopyPlaceholder(e)}
+ style={{ color: "#188ae2", right: "12px", top: "-18px" }}
>
)
@@ -434,11 +514,11 @@ function Placeholder(props) {
return (
{
setDraggingEnabled(true);
props.handleTabDrag && props.handleTabDrag(props.pos.key);
}}
size={{
- width: props.posWidth(props.pos, props.isSignYourself),
- height: props.posHeight(props.pos, props.isSignYourself)
+ width:
+ props.pos.type === radioButtonWidget || props.pos.type === "checkbox"
+ ? "auto"
+ : props.posWidth(props.pos, props.isSignYourself),
+ height:
+ props.pos.type === radioButtonWidget || props.pos.type === "checkbox"
+ ? "auto"
+ : props.posHeight(props.pos, props.isSignYourself)
}}
onResizeStart={() => {
setDraggingEnabled(true);
@@ -532,41 +618,23 @@ function Placeholder(props) {
false
);
}}
- onClick={() => {
- !props.isNeedSign && props.setWidgetType(props.pos.type);
- props.isNeedSign && props.data?.signerObjId === props.signerObjId
- ? handlePlaceholderClick()
- : props.isPlaceholder
- ? handlePlaceholderClick()
- : props.isSignYourself && handlePlaceholderClick();
- }}
+ onClick={() => handleOnClickPlaceholder()}
>
{props.isShowBorder &&
- props.pos.type !== "radio" &&
+ props.pos.type !== radioButtonWidget &&
props.pos.type !== "checkbox" &&
props.pos.key === props.selectWidgetId ? (
-
+
) : props.data && props.isNeedSign && props.pos.type !== "checkbox" ? (
props.data?.signerObjId === props.signerObjId &&
- props.pos.type !== "radio" &&
+ props.pos.type !== radioButtonWidget &&
props.pos.type !== "checkbox" ? (
) : (
<>
)
) : (
- props.pos.type !== "radio" &&
+ props.pos.type !== radioButtonWidget &&
props.pos.type !== "checkbox" &&
props.pos.key === props.selectWidgetId &&
)}
@@ -576,6 +644,7 @@ function Placeholder(props) {
setDraggingEnabled={setDraggingEnabled}
pos={props.pos}
isPlaceholder={props.isPlaceholder}
+ getCheckboxRenderWidth={getCheckboxRenderWidth}
/>
)}
{isMobile ? (
@@ -583,18 +652,11 @@ function Placeholder(props) {
style={{
left: props.xPos(props.pos, props.isSignYourself),
top: props.yPos(props.pos, props.isSignYourself),
- width: props.posWidth(props.pos, props.isSignYourself),
+ width: "auto", //props.posWidth(props.pos, props.isSignYourself),
// height: props.posHeight(props.pos, props.isSignYourself),
zIndex: "10"
}}
- onTouchEnd={() => {
- !props.isNeedSign && props.setWidgetType(props.pos.type);
- props.isNeedSign && props.data?.signerObjId === props.signerObjId
- ? handlePlaceholderClick()
- : props.isPlaceholder
- ? handlePlaceholderClick()
- : props.isSignYourself && handlePlaceholderClick();
- }}
+ onTouchEnd={() => handleOnClickPlaceholder()}
>
{props.pos.key === props.selectWidgetId && }
@@ -615,9 +677,10 @@ function Placeholder(props) {
isNeedSign={props.isNeedSign}
setSelectDate={setSelectDate}
selectDate={selectDate}
- setSaveDateFormat={setSaveDateFormat}
- saveDateFormat={saveDateFormat}
setValidateAlert={props.setValidateAlert}
+ setStartDate={setStartDate}
+ startDate={startDate}
+ handleSaveDate={handleSaveDate}
/>