@@ -97,7 +100,7 @@ function DefaultSignature(props) {
disabled={
activeTab === 0 && !props?.isDefault
? true
- : activeTab === 1 && !props.myInitial
+ : activeTab === 1 && !myInitial
? true
: false
}
diff --git a/apps/OpenSign/src/components/pdf/DropdownWidgetOption.jsx b/apps/OpenSign/src/components/pdf/DropdownWidgetOption.jsx
index ab30287b9d..927f5b6eca 100644
--- a/apps/OpenSign/src/components/pdf/DropdownWidgetOption.jsx
+++ b/apps/OpenSign/src/components/pdf/DropdownWidgetOption.jsx
@@ -12,7 +12,7 @@ function DropdownWidgetOption(props) {
]);
const [minCount, setMinCount] = useState(0);
const [maxCount, setMaxCount] = useState(0);
- const [dropdownName, setDropdownName] = useState(props.type);
+ const [dropdownName, setDropdownName] = useState();
const [isReadOnly, setIsReadOnly] = useState(false);
const [isHideLabel, setIsHideLabel] = useState(false);
const [status, setStatus] = useState("required");
@@ -22,7 +22,7 @@ function DropdownWidgetOption(props) {
const resetState = () => {
setDropdownOptionList(["option-1", "option-2"]);
- setDropdownName(props.type);
+ setDropdownName( props.currWidgetsDetails?.options?.name || props.type);
setIsReadOnly(false);
setIsHideLabel(false);
setMinCount(0);
@@ -30,11 +30,10 @@ function DropdownWidgetOption(props) {
setDefaultCheckbox([]);
setDefaultValue("");
};
-
useEffect(() => {
if (
props.currWidgetsDetails?.options?.name &&
- props.currWidgetsDetails?.options?.values
+ props.currWidgetsDetails?.options?.values?.length > 0
) {
setDropdownName(props.currWidgetsDetails?.options?.name);
setDropdownOptionList(props.currWidgetsDetails?.options?.values);
@@ -116,16 +115,7 @@ function DropdownWidgetOption(props) {
defaultData,
isHideLabel
);
- // props.setShowDropdown(false);
- setDropdownOptionList(["option-1", "option-2"]);
- setDropdownName(props.type);
- // props.setCurrWidgetsDetails({});
- setIsReadOnly(false);
- setIsHideLabel(false);
- setMinCount(0);
- setMaxCount(0);
- setDefaultCheckbox([]);
- setDefaultValue("");
+ resetState()
};
@@ -137,7 +127,6 @@ function DropdownWidgetOption(props) {
return false;
}
};
-
return (
@@ -156,7 +145,6 @@ function DropdownWidgetOption(props) {
onInvalid={(e) => e.target.setCustomValidity(t("input-required"))}
onInput={(e) => e.target.setCustomValidity("")}
required
- defaultValue={dropdownName}
value={dropdownName}
onChange={(e) => setDropdownName(e.target.value)}
className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
@@ -166,7 +154,7 @@ function DropdownWidgetOption(props) {
{t("options")}
- {dropdownOptionList.map((option, index) => (
+ {dropdownOptionList?.map((option, index) => (
{
switch (data) {
@@ -72,27 +74,25 @@ const getDefaultDate = (dateStr, format) => {
};
function Placeholder(props) {
- //'isTouchDevice' is used to detect whether a device has a touchscreen or is mouse-based
- const isTouchDevice = navigator.maxTouchPoints > 0;
const { t } = useTranslation();
+ const dispatch = useDispatch();
+ const widgetData =
+ props.pos?.options?.defaultValue || props.pos?.options?.response;
const [placeholderBorder, setPlaceholderBorder] = useState({ w: 0, h: 0 });
- const [isDraggingEnabled, setDraggingEnabled] = useState(true);
const [isDateModal, setIsDateModal] = useState(false);
const [containerScale, setContainerScale] = useState();
const holdTimeout = useRef(null);
const startTime = useRef(null); // Track when the user starts holdings
- const [isDisableDragging, setIsDisableDragging] = useState(true);
const [selectDate, setSelectDate] = useState({});
const [dateFormat, setDateFormat] = useState([]);
const [clickonWidget, setClickonWidget] = useState({});
- const [startDate, setStartDate] = useState(
- props?.pos?.options?.response
- ? getDefaultDate(
- props?.pos?.options?.response,
- props.pos?.options?.validation?.format
- )
- : new Date()
- );
+ const startDate = props?.pos?.options?.response
+ ? getDefaultDate(
+ props?.pos?.options?.response,
+ props.pos?.options?.validation?.format
+ )
+ : new Date();
+
const [getCheckboxRenderWidth, setGetCheckboxRenderWidth] = useState({
width: null,
height: null
@@ -117,33 +117,28 @@ function Placeholder(props) {
];
useEffect(() => {
- const updateWidth = () => {
+ if (props?.pos?.type === "date") {
+ const isDateChange = true;
+ const dateObj = {
+ date: startDate,
+ format: getDefaultFormat(props.pos?.options?.validation?.format)
+ };
+ handleSaveDate(dateObj, isDateChange); //function to save date and format in local array
+ }
+ }, [widgetData]);
+
+ const handleGetDaynamicWH = () => {
+ if (
+ props?.pos?.type === "checkbox" ||
+ props?.pos?.type === radioButtonWidget
+ ) {
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(() => {
- const onOutsideClick = () => {
- if (!isDraggingEnabled) {
- setDraggingEnabled(true);
- }
- };
-
- document.addEventListener("click", onOutsideClick);
-
- return () => {
- // Cleanup the event listener when the component unmounts
- document.removeEventListener("click", onOutsideClick);
- };
- }, [isDraggingEnabled]);
+ }
+ };
//function change format array list with selected date and format
const changeDateFormat = () => {
const updateDate = [];
@@ -175,30 +170,18 @@ function Placeholder(props) {
//`handleWidgetIdandPopup` is used to set current widget id and open relative popup
const handleWidgetIdandPopup = async () => {
- if (props.setSelectWidgetId) {
- props.setSelectWidgetId(props.pos.key);
- }
-
- const widgetTypeExist = [
- textInputWidget,
- "checkbox",
- "name",
- "company",
- "job title",
- "date",
- "email",
- textWidget
- ].includes(props.pos.type);
-
- if (widgetTypeExist) {
- setDraggingEnabled(false);
- }
- if (props.isOpenSignPad && !props.isDragging) {
+ //'props.isOpenSignPad' variable is used to check flow to open signature pad for finish document
+ if (
+ props.isOpenSignPad &&
+ !props.isDragging &&
+ !props.pos.options?.isReadOnly &&
+ props.pos.type !== textWidget
+ ) {
if (props?.ispublicTemplate) {
props.handleUserDetails();
} else {
if (props?.isNeedSign) {
- //funcion is used to heightlight widgets on top if two widgets on overlap
+ //funcion is used to highlight widgets on top when click any widget if two widgets on overlap
const getCurrentSignerPos = props.xyPosition.find(
(x) => x.Id === props.uniqueId
);
@@ -212,23 +195,14 @@ function Placeholder(props) {
);
props.setXyPosition(updatesignerPos);
}
- if (
- ["signature", "stamp", "image", "initials"].includes(props.pos.type)
- ) {
- props.setIsSignPad(true);
- props.setSignKey(props.pos.key);
- props.setIsStamp(props.pos.isStamp);
- }
- if (props.pos.type === "initials") {
- props.setIsInitial(true);
- }
+ dispatch(setIsShowModal({ [props.pos.key]: true }));
}
} else if (
props.isPlaceholder &&
!props.isDragging &&
props.pos.type !== textWidget
) {
- if (props.pos.key === props.selectWidgetId) {
+ if (props.pos.key === props?.currWidgetsDetails?.key) {
props.handleLinkUser(props.data.Id);
props.setUniqueId(props.data.Id);
const checkIndex = props.xyPosition.findIndex(
@@ -236,31 +210,17 @@ function Placeholder(props) {
);
props.setIsSelectId(checkIndex || 0);
}
- } else if (!props.pos.type) {
- if (
- !props.pos.type &&
- props.isNeedSign &&
- props.data.signerObjId === props.signerObjId
- ) {
- props.setIsSignPad(true);
- props.setSignKey(props.pos.key);
- props.setIsStamp(props.pos.isStamp);
- } else if (
- (props.isNeedSign && props.pos.type === "signature") ||
- props.pos.type === "stamp"
- ) {
- props.setIsSignPad(true);
- props.setSignKey(props.pos.key);
- props.setIsStamp(props.pos.isStamp);
- } else if (props.isNeedSign && props.pos.type === "dropdown") {
- props.setSignKey(props.pos.key);
- }
+ //handle prefill 'text widget' click then save previos in tem variable after save or close button again assign current selected userId
+ } else if (props.pos.type === textWidget) {
+ dispatch(setIsShowModal({ [props.pos.key]: true }));
+ props.setTempSignerId(props?.uniqueId);
+ props.setUniqueId(props?.data?.Id);
}
};
const widgetClickHandler = () => {
- //The else condition opens the signature pad if it's a request signature flow and the user clicking is identified as a signer.
props.setCurrWidgetsDetails && props.setCurrWidgetsDetails(props.pos);
+ //condition to check in request signing flow user click on agree or not
if (props?.data?.signerObjId === props?.signerObjId && !props.isDragging) {
if (!props.isAgree && !props.isSelfSign) {
props.setIsAgreeTour && props.setIsAgreeTour(true);
@@ -272,7 +232,10 @@ function Placeholder(props) {
handleWidgetIdandPopup();
}
};
+
const handleOnClickPlaceholder = () => {
+ //'props.isDragging' variable is used to checking if user take any widget and try to drag then in that case
+ //onclick event call. so to prevent onclick and do not open unecessary modal open.
//condition only for request signing flow and self signing flow then apply one click copy sign url of previous drawn signature
if (props.isApplyAll) {
props.setRequestSignTour && props.setRequestSignTour(true);
@@ -342,13 +305,11 @@ function Placeholder(props) {
} else {
widgetClickHandler();
}
- // }
- // }
} else {
//The else condition is used to handle the case when the user clicks on a widget and open signature pad to draw sign
props.setCurrWidgetsDetails && props.setCurrWidgetsDetails(props.pos);
- props.setWidgetType(props.pos.type);
handleWidgetIdandPopup();
+ handleGetDaynamicWH();
}
};
//`handleOnClickSettingIcon` is used set current widget details and open setting of it
@@ -391,8 +352,6 @@ function Placeholder(props) {
props.setTempSignerId(props.uniqueId);
props.setUniqueId(props?.data?.Id);
}
- props.setSignKey(props.pos.key);
- props.setWidgetType(props.pos.type);
props.setCurrWidgetsDetails(props.pos);
};
//function to set required state value onclick on widget's copy icon
@@ -425,7 +384,7 @@ function Placeholder(props) {
)
) {
props.setIsPageCopy(true);
- props.setSignKey(props.pos.key);
+ props.setCurrWidgetsDetails(props.pos);
} else {
//function to create new widget next to just widget
handleCopyNextToWidget(
@@ -439,18 +398,6 @@ function Placeholder(props) {
}
};
- //function to save date and format after seleted new date in response field and after finish document it should be emebed new selected date instead of current date
- useEffect(() => {
- if (props.pos.type === "date") {
- const isDateChange = true;
- const dateObj = {
- date: startDate,
- format: getDefaultFormat(props.pos?.options?.validation?.format)
- };
- handleSaveDate(dateObj, isDateChange); //function to save date and format in local array
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [startDate]);
//function to save date and format on local array onchange date and onclick format
const handleSaveDate = (data, isDateChange) => {
let updateDate = data.date;
@@ -476,8 +423,6 @@ function Placeholder(props) {
props.data && props.data.Id,
false,
data?.format,
- null,
- null,
props.fontSize || props.pos?.options?.fontSize || 12,
props.fontColor || props.pos?.options?.fontColor || "black"
);
@@ -586,7 +531,7 @@ function Placeholder(props) {
e.stopPropagation();
setClickonWidget(props.pos);
if (props.data) {
- props.setSignKey(props.pos.key);
+ props.setCurrWidgetsDetails(props.pos);
props.setUniqueId(props.data.Id);
const checkIndex = props.xyPosition.findIndex(
(data) => data.Id === props.data.Id
@@ -599,7 +544,7 @@ function Placeholder(props) {
e.stopPropagation();
setIsDateModal(!isDateModal);
if (props.data) {
- props.setSignKey(props.pos.key);
+ props.setCurrWidgetsDetails(props.pos);
props.setUniqueId(props.data.Id);
const checkIndex = props.xyPosition.findIndex(
(data) => data.Id === props.data.Id
@@ -636,7 +581,6 @@ function Placeholder(props) {
//condition for signyour-self flow
else {
props.handleDeleteSign(props.pos.key);
- props.setIsStamp(false);
}
}}
//for mobile and tablet touch event
@@ -649,7 +593,6 @@ function Placeholder(props) {
//condition for signyour-self flow
else {
props.handleDeleteSign(props.pos.key);
- props.setIsStamp(false);
}
}}
style={{ color: "#188ae2", right: "-8px", top: "-18px" }}
@@ -744,43 +687,7 @@ function Placeholder(props) {
return "all-scroll";
}
};
- const handleDragging = () => {
- //condition for request signing flow
- if (props.isNeedSign) {
- //enable dragging functionality only if isAlllowModify true on tab that widget and hold 1sec
- if (
- props.isAlllowModify &&
- props?.assignedWidgetId.includes(props.pos.key) &&
- props.data?.signerObjId === props.signerObjId
- ) {
- //if 'isTouchDevice' then handle dragging functionality conditionaly
- if (isTouchDevice) {
- return isDisableDragging;
- } else {
- //no need to handle dragging functionality it auto enable and working or mouse click devices
- return false;
- }
- } else if (
- //condition when 'isAlllowModify' is true and user add new widgets then handle dragging functionality like signyourself flow
- props.isAlllowModify &&
- !props?.assignedWidgetId.includes(props.pos.key) &&
- props.data?.signerObjId === props.signerObjId
- ) {
- return !isDraggingEnabled;
- } else {
- //if 'isAlllowModify' is false then disbale dragging functionality
- return true;
- }
- } //dragging enable in placeholder,template and not text widget flow
- else if (props.isPlaceholder && ![textWidget].includes(props.pos.type)) {
- return false;
- } //dragging depend on 'isDraggingEnabled' variable in self sign and signyourself flow
- else if (isTouchDevice) {
- return !isDraggingEnabled;
- } else {
- return false;
- }
- };
+
//function to handle widget background color
const handleBackground = () => {
if (props.data) {
@@ -812,42 +719,38 @@ function Placeholder(props) {
}
if (!props.isNeedSign || props.isAlllowModify) handleOnClickPlaceholder();
};
- const handleTouchStart = () => {
- clearTimeout(holdTimeout.current); // Ensure no previous timeouts are running
- startTime.current = Date.now(); // Store touch start time
- holdTimeout.current = setTimeout(() => {
- //handlle vibration and tab any widget and hold for 1 sec then show border outside widget and then user can able to drag
- if (isDisableDragging) {
- if (
- props.isNeedSign &&
- props.isAlllowModify &&
- props?.assignedWidgetId.includes(props.pos.key)
- ) {
- try {
- navigator.vibrate(200); // Vibrate for 200ms
- } catch (e) {
- console.log("error in navigator.vibrate", e);
- }
- setIsDisableDragging(false);
- props.setSelectWidgetId(props.pos.key);
- } else if (!props.isNeedSign) {
- setIsDisableDragging(false);
- }
- }
- }, 1000); // Hold for 1 second before vibrating
- };
const fontSize = calculateFont(props.pos.options?.fontSize);
const fontColor = props.pos.options?.fontColor || "black";
+
+ const handleDragging = () => {
+ //condition for request signing flow
+ if (props.isNeedSign) {
+ //enable dragging functionality only if isAlllowModify true on tab that widget and hold 1sec
+ if (
+ props.isAlllowModify &&
+ !props?.assignedWidgetId.includes(props.pos.key) &&
+ props.data?.signerObjId === props.signerObjId
+ ) {
+ return false;
+ } else {
+ //if 'isAlllowModify' is false then disbale dragging functionality
+ return true;
+ }
+ } else {
+ return false;
+ }
+ };
return (
<>
{/* Check if a text widget (prefill type) exists. Once the user enters a value and clicks outside or the widget becomes non-selectable, it should appear as plain text (just like embedded text in a document). When the user clicks on the text again, it should become editable. */}
{props.pos?.options?.response &&
- props.pos.key !== props.selectWidgetId &&
+ props.pos.key !== props?.currWidgetsDetails?.key &&
props.pos.type === textWidget ? (
{
- props.setSelectWidgetId && props.setSelectWidgetId(props.pos.key);
+ props.setCurrWidgetsDetails &&
+ props.setCurrWidgetsDetails(props.pos);
}}
style={{
fontFamily: "Arial, sans-serif",
@@ -896,7 +799,7 @@ function Placeholder(props) {
: false
: props.pos.type !== radioButtonWidget &&
props.pos.type !== "checkbox" &&
- props.pos.key === props.selectWidgetId &&
+ props.pos.key === props?.currWidgetsDetails?.key &&
true,
bottomLeft: false,
topLeft: false
@@ -909,7 +812,7 @@ function Placeholder(props) {
cursor: getCursor(),
zIndex:
props.pos.type === "date"
- ? props.pos.key === props.selectWidgetId
+ ? props.pos.key === props?.currWidgetsDetails?.key
? 99 + 1
: 99
: props?.pos?.zIndex
@@ -920,7 +823,7 @@ function Placeholder(props) {
background: handleBackground()
}}
onDrag={() => {
- setDraggingEnabled(true);
+ handleGetDaynamicWH();
props.handleTabDrag && props.handleTabDrag(props.pos.key);
}}
size={{
@@ -938,7 +841,6 @@ function Placeholder(props) {
minHeight={calculateFont(props.pos.options?.fontSize, true)}
maxHeight="auto"
onResizeStart={() => {
- setDraggingEnabled(true);
props.setIsResize && props.setIsResize(true);
}}
onResizeStop={(e, direction, ref) => {
@@ -958,9 +860,7 @@ function Placeholder(props) {
props.isResize
);
}}
- disableDragging={handleDragging()}
onDragStop={(event, dragElement) => {
- setIsDisableDragging(true);
props.handleStop &&
props.handleStop(
event,
@@ -979,11 +879,9 @@ function Placeholder(props) {
h: ref.offsetHeight / (props.scale * containerScale)
});
}}
- // onClick={() =>
- // !props.isResize && !isMobile && handleOnClickPlaceholder()
- // }
+ disableDragging={handleDragging()}
>
- {props.pos.key === props.selectWidgetId &&
+ {props.pos.key === props?.currWidgetsDetails?.key &&
((props.isShowBorder &&
![radioButtonWidget, "checkbox"].includes(props.pos.type)) ||
(props?.isAlllowModify &&
@@ -1010,22 +908,20 @@ function Placeholder(props) {
)
) : (
![radioButtonWidget, "checkbox"].includes(props.pos.type) &&
- props.pos.key === props.selectWidgetId &&
+ props.pos.key === props?.currWidgetsDetails?.key &&
)}
- {/* 1- Show a border if props.pos.key === props.selectWidgetId, indicating the current user's selected widget.
+ {/* 1- Show a border if props.pos.key === props?.currWidgetsDetails?.key, indicating the current user's selected widget.
2- If props.isShowBorder is true, display borders for all widgets.
3- Use the combination of props?.isAlllowModify and !props?.assignedWidgetId.includes(props.pos.key) to determine when to show borders:
1- When isAlllowModify is true, show borders.
2- Do not display border for widgets already assigned (props.assignedWidgetId.includes(props.pos.key) is true).
*/}
- {props.pos.key === props.selectWidgetId &&
+ {props.pos.key === props?.currWidgetsDetails?.key &&
(props.isShowBorder ||
- !isDisableDragging ||
(props?.isAlllowModify &&
!props?.assignedWidgetId.includes(props.pos.key))) && (
handleTouchEnd()}
+ onTouchEnd={() => handleOnClickPlaceholder()}
onClick={() => handleOnClickPlaceholder()}
- onTouchStart={() => handleTouchStart()}
>
- {props.pos.key === props.selectWidgetId && }
+ {props.pos.key === props?.currWidgetsDetails?.key && (
+
+ )}
!isMobile && props?.setDraggingEnabled(false)}
- onTouchEnd={() =>
- props.pos.type === textWidget && props?.setDraggingEnabled(false)
- }
className="absolute inline-block w-[14px] h-[14px] border-[0.2px] overflow-hidden border-dashed"
style={{
borderColor: themeColor,
diff --git a/apps/OpenSign/src/components/pdf/PlaceholderType.jsx b/apps/OpenSign/src/components/pdf/PlaceholderType.jsx
index d8002c9507..8e62b46a16 100644
--- a/apps/OpenSign/src/components/pdf/PlaceholderType.jsx
+++ b/apps/OpenSign/src/components/pdf/PlaceholderType.jsx
@@ -2,19 +2,17 @@ import React, { useEffect, useState, forwardRef, useRef } from "react";
import {
getMonth,
getYear,
- onChangeHeightOfTextArea,
- onChangeInput,
radioButtonWidget,
- range,
textInputWidget,
textWidget,
- widgetDataValue
+ months,
+ years,
+ selectCheckbox,
+ checkRegularExpress
} from "../../constant/Utils";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import "../../styles/signature.css";
-import RegexParser from "regex-parser";
-import { emailRegex } from "../../constant/const";
import { useTranslation } from "react-i18next";
const textWidgetCls =
"w-full h-full md:min-w-full md:min-h-full z-[999] text-[12px] rounded-[2px] border-[1px] border-[#007bff] overflow-hidden resize-none outline-none text-base-content item-center whitespace-pre-wrap bg-white";
@@ -25,32 +23,19 @@ const widgetCls =
function PlaceholderType(props) {
const { t } = useTranslation();
const type = props?.pos?.type;
+ const iswidgetEnable =
+ props.isSignYourself ||
+ ((props.isSelfSign || props.isNeedSign) &&
+ props.data?.signerObjId === props.signerObjId);
const widgetData =
props.pos?.options?.defaultValue || props.pos?.options?.response;
const widgetTypeTranslation = t(`widgets-name.${props?.pos?.type}`);
- const [selectOption, setSelectOption] = useState("");
- const [validatePlaceholder, setValidatePlaceholder] = useState("");
const inputRef = useRef(null);
- const [textValue, setTextValue] = useState();
+ const [widgetValue, setwidgetValue] = useState();
const [selectedCheckbox, setSelectedCheckbox] = useState([]);
const [hint, setHint] = useState("");
- const years = range(1950, getYear(new Date()) + 16, 1);
const fontSize = props.calculateFont(props.pos.options?.fontSize);
const fontColor = props.pos.options?.fontColor || "black";
- const months = [
- "January",
- "February",
- "March",
- "April",
- "May",
- "June",
- "July",
- "August",
- "September",
- "October",
- "November",
- "December"
- ];
const textWidgetStyle = {
fontSize: fontSize,
color: fontColor,
@@ -61,89 +46,30 @@ function PlaceholderType(props) {
display: "flex",
height: "100%"
};
- const validateExpression = (regexValidation) => {
- if (textValue && regexValidation) {
- let regexObject = regexValidation;
- if (props.pos?.options?.validation?.type === "regex") {
- regexObject = RegexParser(regexValidation);
- }
- // new RegExp(regexValidation);
- let isValidate = regexObject.test(textValue);
- if (!isValidate) {
- props?.setValidateAlert(true);
- inputRef.current.focus();
- }
- }
- };
-
- const handleInputBlur = () => {
- const validateType = props.pos?.options?.validation?.type;
- let regexValidation;
- if (validateType && validateType !== "text") {
- switch (validateType) {
- case "email":
- regexValidation = emailRegex;
- validateExpression(regexValidation);
- break;
- case "number":
- regexValidation = /^[0-9\s]*$/;
- validateExpression(regexValidation);
- break;
- default:
- regexValidation = props.pos?.options?.validation?.pattern || "";
- validateExpression(regexValidation);
- }
- }
- };
-
- const handleTextValid = (e) => {
- const textInput = e.target.value;
- setTextValue(textInput);
- };
- function checkRegularExpress(validateType) {
- switch (validateType) {
- case "email":
- setValidatePlaceholder("demo@gmail.com");
- break;
- case "number":
- setValidatePlaceholder("12345");
- break;
- case "text":
- setValidatePlaceholder("please enter text");
- break;
- default:
- setValidatePlaceholder("please enter value");
- }
- }
useEffect(() => {
- if (type && type === "checkbox" && props.isNeedSign) {
- const isDefaultValue = props.pos.options?.defaultValue;
- if (isDefaultValue) {
- setSelectedCheckbox(isDefaultValue);
+ if (type !== "date") {
+ if (type && type === "checkbox") {
+ setSelectedCheckbox(
+ props?.pos?.options?.response ||
+ props?.pos?.options?.defaultValue ||
+ []
+ );
+ } else {
+ if (widgetData) {
+ setwidgetValue(widgetData);
+ }
+ }
+ if (props.pos?.options?.hint) {
+ setHint(props.pos?.options.hint);
+ } else if (props.pos?.options?.validation?.type) {
+ checkRegularExpress(props.pos?.options?.validation?.type, setHint);
+ } else {
+ setHint(props.pos?.type);
}
- } else if (props.pos?.options?.hint) {
- setValidatePlaceholder(props.pos?.options.hint);
- } else if (props.pos?.options?.validation?.type) {
- checkRegularExpress(props.pos?.options?.validation?.type);
}
- setTextValue(
- props.pos?.options?.response
- ? props.pos?.options?.response
- : props.pos?.options?.defaultValue
- ? props.pos?.options?.defaultValue
- : ""
- );
- setSelectOption(
- props.pos?.options?.response
- ? props.pos?.options?.response
- : props.pos?.options?.defaultValue
- ? props.pos?.options?.defaultValue
- : ""
- );
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, []);
-
+ }, [props.pos]);
const ExampleCustomInput = forwardRef(({ value, onClick }, ref) => (
));
ExampleCustomInput.displayName = "ExampleCustomInput";
- useEffect(() => {
- if (
- ["name", "email", "job title", "company", textInputWidget].includes(
- type
- ) &&
- props.isNeedSign &&
- props.data?.signerObjId === props.signerObjId
- ) {
- if (widgetData) {
- setTextValue(widgetData);
- }
- }
-
- if (props.pos?.options?.hint) {
- setHint(props.pos?.options.hint);
- } else {
- setHint(props.pos?.type);
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [type, widgetData]);
- //function for show checked checkbox
- const selectCheckbox = (ind) => {
- const res = props.pos.options?.response;
- const defaultCheck = props.pos.options?.defaultValue;
- if (res && res?.length > 0) {
- const isSelectIndex = res.indexOf(ind);
- if (isSelectIndex > -1) {
- return true;
- } else {
- return false;
- }
- // }
- } else if (defaultCheck) {
- const isSelectIndex = defaultCheck.indexOf(ind);
- if (isSelectIndex > -1) {
- return true;
- } else {
- return false;
- }
- } else {
- return false;
- }
- };
const handleRadioCheck = (data) => {
const defaultData = props.pos.options?.defaultValue;
- if (textValue === data) {
+ if (widgetValue === data) {
return true;
} else if (defaultData === data) {
return true;
@@ -215,90 +98,22 @@ function PlaceholderType(props) {
}
};
- //function for set checked and unchecked value of checkbox
- const handleCheckboxValue = (isChecked, ind) => {
- let updateSelectedCheckbox = [],
- checkedList;
- let isDefaultValue, isDefaultEmpty;
- if (type === "checkbox") {
- updateSelectedCheckbox = selectedCheckbox ? selectedCheckbox : [];
-
- if (isChecked) {
- updateSelectedCheckbox.push(ind);
- setSelectedCheckbox(updateSelectedCheckbox);
- } else {
- checkedList = selectedCheckbox.filter((data) => data !== ind);
- setSelectedCheckbox(checkedList);
- }
- if (props.isNeedSign) {
- isDefaultValue = props.pos.options?.defaultValue;
- }
- if (isDefaultValue && isDefaultValue.length > 0) {
- isDefaultEmpty = true;
- }
- onChangeInput(
- checkedList ? checkedList : updateSelectedCheckbox,
- props.pos.key,
- props.xyPosition,
- props.index,
- props.setXyPosition,
- props.data && props.data.Id,
- false,
- null,
- isDefaultEmpty
- );
- }
- };
-
- //function to handle select radio widget and set value seletced by user
- const handleCheckRadio = (isChecked, data) => {
- let isDefaultValue,
- isDefaultEmpty,
- isRadio = true;
- if (props.isNeedSign) {
- isDefaultValue = props.pos.options?.defaultValue;
- }
- if (isDefaultValue) {
- isDefaultEmpty = true;
- }
- if (isChecked) {
- setTextValue(data);
- } else {
- setTextValue("");
- }
- onChangeInput(
- data,
- props.pos.key,
- props.xyPosition,
- props.index,
- props.setXyPosition,
- props.data && props.data.Id,
- false,
- null,
- isDefaultEmpty,
- isRadio
- );
- };
- //function to set onchange date
- const handleOnDateChange = (date) => {
- props.setStartDate(date);
- };
//handle height on enter press in text area
- const handleEnterPress = (e) => {
- const height = 18;
- if (e.key === "Enter") {
- //function to save height of text area
- onChangeHeightOfTextArea(
- height,
- props.pos.type,
- props.pos.key,
- props.xyPosition,
- props.index,
- props.setXyPosition,
- props.data && props.data?.Id
- );
- }
- };
+ // const handleEnterPress = (e) => {
+ // const height = 18;
+ // if (e.key === "Enter") {
+ // //function to save height of text area
+ // onChangeHeightOfTextArea(
+ // height,
+ // props.pos.type,
+ // props.pos.key,
+ // props.xyPosition,
+ // props.index,
+ // props.setXyPosition,
+ // props.data && props.data?.Id
+ // );
+ // }
+ // };
switch (type) {
case "signature":
return props.pos.SignUrl ? (
@@ -319,9 +134,7 @@ function PlaceholderType(props) {
}}
className="font-medium"
>
- {props.isNeedSign
- ? props.pos?.options?.hint || widgetTypeTranslation
- : widgetTypeTranslation}
+ {hint || widgetTypeTranslation}
)}
@@ -345,9 +158,7 @@ function PlaceholderType(props) {
}}
className="font-medium"
>
- {props.isNeedSign
- ? props.pos?.options?.hint || widgetTypeTranslation
- : widgetTypeTranslation}
+ {hint || widgetTypeTranslation}
)}
{
- if (e.target.checked) {
- if (!props.isPlaceholder) {
- const maxRequired =
- props.pos.options?.validation?.maxRequiredCount;
- const maxCountInt =
- maxRequired && parseInt(maxRequired);
-
- if (maxCountInt > 0) {
- if (
- selectedCheckbox &&
- selectedCheckbox?.length <= maxCountInt - 1
- ) {
- handleCheckboxValue(e.target.checked, ind);
- }
- } else {
- handleCheckboxValue(e.target.checked, ind);
- }
- }
- } else {
- handleCheckboxValue(e.target.checked, ind);
- }
- }}
+ readOnly
+ checked={!!selectCheckbox(ind, selectedCheckbox)}
/>
{!props.pos.options?.isHideLabel && (