fix: all text type fields similar to text widget

This commit is contained in:
RaktimaNXG
2024-04-01 15:38:06 +05:30
parent 748e2196da
commit c61be7c35b
4 changed files with 197 additions and 50 deletions
@@ -542,7 +542,15 @@ function Placeholder(props) {
data-tut={props.pos.key === props.unSignedWidgetId ? "IsSigned" : ""}
key={props.pos.key}
lockAspectRatio={
props.pos.type !== textWidget &&
// props.pos.type !== textWidget
![
textWidget,
"email",
"name",
"company",
"job title",
textInputWidget
].includes(props.pos.type) &&
(props.pos.Width
? props.pos.Width / props.pos.Height
: defaultWidthHeight(props.pos.type).width /
@@ -288,7 +288,7 @@ function PlaceholderType(props) {
};
//handle height on enter press in text area
const handleEnterPress = (e) => {
const height = 15;
const height = 18;
if (e.key === "Enter") {
//function to save height of text area
onChangeHeightOfTextArea(
@@ -403,19 +403,39 @@ function PlaceholderType(props) {
case textInputWidget:
return props.isSignYourself ||
(props.isNeedSign && props.data?.signerObjId === props.signerObjId) ? (
<input
className="inputPlaceholder"
// <input
// className="inputPlaceholder"
// ref={inputRef}
// placeholder={validatePlaceholder}
// style={{ fontSize: calculateFontSize() }}
// value={textValue}
// type="text"
// tabIndex="0"
// disabled={
// props.isNeedSign && props.data?.signerObjId !== props.signerObjId
// ? true
// : props.isPlaceholder
// }
// onBlur={handleInputBlur}
// onChange={(e) => {
// setTextValue(e.target.value);
// onChangeInput(
// e.target.value,
// props.pos.key,
// props.xyPostion,
// props.index,
// props.setXyPostion,
// props.data && props.data?.Id,
// false
// );
// }}
// />
<textarea
ref={inputRef}
placeholder={validatePlaceholder}
style={{ fontSize: calculateFontSize() }}
rows={1}
onKeyDown={handleEnterPress}
value={textValue}
type="text"
tabIndex="0"
disabled={
props.isNeedSign && props.data?.signerObjId !== props.signerObjId
? true
: props.isPlaceholder
}
onBlur={handleInputBlur}
onChange={(e) => {
setTextValue(e.target.value);
@@ -429,6 +449,13 @@ function PlaceholderType(props) {
false
);
}}
className={
isMobile
? "labelTextArea labelWidthMobile"
: "labelTextArea labelWidthDesktop"
}
style={{ whiteSpace: "pre-wrap" }}
cols="50"
/>
) : (
<div
@@ -506,13 +533,34 @@ function PlaceholderType(props) {
case "name":
return props.isSignYourself ||
(props.isNeedSign && props.data?.signerObjId === props.signerObjId) ? (
<input
tabIndex="0"
// <input
// tabIndex="0"
// ref={inputRef}
// placeholder={"name"}
// style={{ fontSize: calculateFontSize() }}
// className="inputPlaceholder"
// type="text"
// value={textValue}
// onBlur={handleInputBlur}
// onChange={(e) => {
// const isDefault = false;
// handleTextValid(e);
// onChangeInput(
// e.target.value,
// props.pos.key,
// props.xyPostion,
// props.index,
// props.setXyPostion,
// props.data && props.data?.Id,
// isDefault
// );
// }}
// />
<textarea
ref={inputRef}
placeholder={"name"}
style={{ fontSize: calculateFontSize() }}
className="inputPlaceholder"
type="text"
rows={1}
onKeyDown={handleEnterPress}
value={textValue}
onBlur={handleInputBlur}
onChange={(e) => {
@@ -528,6 +576,13 @@ function PlaceholderType(props) {
isDefault
);
}}
className={
isMobile
? "labelTextArea labelWidthMobile"
: "labelTextArea labelWidthDesktop"
}
style={{ whiteSpace: "pre-wrap" }}
cols="50"
/>
) : (
<div
@@ -542,12 +597,32 @@ function PlaceholderType(props) {
case "company":
return props.isSignYourself ||
(props.isNeedSign && props.data?.signerObjId === props.signerObjId) ? (
<input
className="inputPlaceholder"
type="text"
// <input
// className="inputPlaceholder"
// type="text"
// ref={inputRef}
// placeholder={"company"}
// style={{ fontSize: calculateFontSize() }}
// value={textValue}
// onBlur={handleInputBlur}
// onChange={(e) => {
// handleTextValid(e);
// onChangeInput(
// e.target.value,
// props.pos.key,
// props.xyPostion,
// props.index,
// props.setXyPostion,
// props.data && props.data?.Id,
// false
// );
// }}
// />
<textarea
ref={inputRef}
placeholder={"company"}
style={{ fontSize: calculateFontSize() }}
placeholder="Enter label"
rows={1}
onKeyDown={handleEnterPress}
value={textValue}
onBlur={handleInputBlur}
onChange={(e) => {
@@ -562,6 +637,13 @@ function PlaceholderType(props) {
false
);
}}
className={
isMobile
? "labelTextArea labelWidthMobile"
: "labelTextArea labelWidthDesktop"
}
style={{ whiteSpace: "pre-wrap" }}
cols="50"
/>
) : (
<div
@@ -576,12 +658,32 @@ function PlaceholderType(props) {
case "job title":
return props.isSignYourself ||
(props.isNeedSign && props.data?.signerObjId === props.signerObjId) ? (
<input
className="inputPlaceholder"
type="text"
// <input
// className="inputPlaceholder"
// type="text"
// ref={inputRef}
// placeholder={"job title"}
// style={{ fontSize: calculateFontSize() }}
// value={textValue}
// onBlur={handleInputBlur}
// onChange={(e) => {
// handleTextValid(e);
// onChangeInput(
// e.target.value,
// props.pos.key,
// props.xyPostion,
// props.index,
// props.setXyPostion,
// props.data && props.data?.Id,
// false
// );
// }}
// />
<textarea
ref={inputRef}
placeholder={"job title"}
style={{ fontSize: calculateFontSize() }}
rows={1}
onKeyDown={handleEnterPress}
value={textValue}
onBlur={handleInputBlur}
onChange={(e) => {
@@ -596,6 +698,13 @@ function PlaceholderType(props) {
false
);
}}
className={
isMobile
? "labelTextArea labelWidthMobile"
: "labelTextArea labelWidthDesktop"
}
style={{ whiteSpace: "pre-wrap" }}
cols="50"
/>
) : (
<div
@@ -692,12 +801,32 @@ function PlaceholderType(props) {
case "email":
return props.isSignYourself ||
(props.isNeedSign && props.data?.signerObjId === props.signerObjId) ? (
<input
className="inputPlaceholder"
type="text"
// <input
// className="inputPlaceholder"
// type="text"
// ref={inputRef}
// placeholder={"email"}
// style={{ fontSize: calculateFontSize() }}
// value={textValue}
// onBlur={handleInputBlur}
// onChange={(e) => {
// handleTextValid(e);
// onChangeInput(
// e.target.value,
// props.pos.key,
// props.xyPostion,
// props.index,
// props.setXyPostion,
// props.data && props.data?.Id,
// false
// );
// }}
// />
<textarea
ref={inputRef}
placeholder={"email"}
style={{ fontSize: calculateFontSize() }}
rows={1}
onKeyDown={handleEnterPress}
value={textValue}
onBlur={handleInputBlur}
onChange={(e) => {
@@ -712,6 +841,13 @@ function PlaceholderType(props) {
false
);
}}
className={
isMobile
? "labelTextArea labelWidthMobile"
: "labelTextArea labelWidthDesktop"
}
style={{ whiteSpace: "pre-wrap" }}
cols="50"
/>
) : (
<div
@@ -782,7 +918,7 @@ function PlaceholderType(props) {
? "labelTextArea labelWidthMobile"
: "labelTextArea labelWidthDesktop"
}
style={{ whiteSpace: "pre-wrap" }}
style={{ whiteSpace: "pre-wrap", overflow: "hidden" }}
cols="50"
/>
);
+22 -19
View File
@@ -1249,6 +1249,7 @@ export const multiSignEmbed = async (
}
};
const widgetTypeExist = [
textWidget,
textInputWidget,
"name",
"company",
@@ -1304,7 +1305,7 @@ export const multiSignEmbed = async (
checkbox.enableReadOnly();
});
}
} else if (position.type === textWidget) {
} else if (widgetTypeExist) {
const font = await pdfDoc.embedFont("Helvetica");
const fontSize = 12;
let textContent;
@@ -1380,25 +1381,27 @@ export const multiSignEmbed = async (
color: rgb(0, 0, 0),
size: fontSize
});
y -= 15; // Adjust the line height as needed
y -= 18; // Adjust the line height as needed
}
} else if (widgetTypeExist) {
const font = await pdfDoc.embedFont("Helvetica");
const fontSize = 12;
let textContent;
if (position?.options?.response) {
textContent = position.options?.response;
} else if (position?.options?.defaultValue) {
textContent = position?.options?.defaultValue;
}
page.drawText(textContent, {
x: xPos(position),
y: yPos(position) + 10,
size: fontSize,
font,
color: rgb(0, 0, 0)
});
} else if (position.type === "dropdown") {
}
// else if (widgetTypeExist) {
// const font = await pdfDoc.embedFont("Helvetica");
// const fontSize = 12;
// let textContent;
// if (position?.options?.response) {
// textContent = position.options?.response;
// } else if (position?.options?.defaultValue) {
// textContent = position?.options?.defaultValue;
// }
// page.drawText(textContent, {
// x: xPos(position),
// y: yPos(position) + 10,
// size: fontSize,
// font,
// color: rgb(0, 0, 0)
// });
// }
else if (position.type === "dropdown") {
const dropdownRandomId = "dropdown" + randomId();
const dropdown = form.createDropdown(dropdownRandomId);
dropdown.addOptions(position?.options?.values);
Binary file not shown.