Merge pull request #1804 from OpenSignLabs/updates-15754544632

fix: resolve issues
This commit is contained in:
prafull-opensignlabs
2025-06-19 15:03:08 +05:30
committed by GitHub
7 changed files with 56 additions and 32 deletions
@@ -12,12 +12,9 @@ function BorderResize(props) {
return (
<div
style={{
width: getHeight() || "14px",
height: getHeight() || "14px"
}}
style={{ width: getHeight() || "14px", height: getHeight() || "14px" }}
className={`${props.right ? `-right-[12px]` : "-right-[2px]"} ${
props.top ? `-bottom-[12px]` : "-bottom-[2px] "
props.top ? `-bottom-[12px]` : "-bottom-[2px]"
} absolute inline-block hover:cursor-sw-resize border-r-[3px] border-b-[3px] border-[#188ae2]`}
></div>
);
@@ -1,6 +1,7 @@
import { useState, useEffect, useRef } from "react";
const Cell = ({
isEnabled,
count,
h,
value,
@@ -15,10 +16,11 @@ const Cell = ({
hint
}) => (
<div
className="flex items-center justify-center border border-gray-800 bg-white"
className={`${isEnabled ? "bg-white border-gray-400" : "select-none-cls pointer-events-none border-gray-500"} flex items-center justify-center border-[1px]`}
style={{ flex: `0 0 ${100 / count}%`, height: h }}
>
<input
disabled={!isEnabled}
maxLength={1}
value={value}
readOnly={!editable}
@@ -27,7 +29,7 @@ const Cell = ({
onKeyDown={editable ? (e) => onKeyDown && onKeyDown(e, index) : undefined}
// trigger validation when leaving a cell
onBlur={editable ? (e) => onBlur && onBlur(e, index) : undefined}
className="w-full text-center focus:outline-none bg-transparent placeholder-gray-300"
className={`${isEnabled ? "placeholder-gray-300" : "placeholder-gray-500"} w-full text-center focus:outline-none bg-transparent`}
placeholder={hint}
style={{ fontFamily: "Arial, sans-serif", fontSize, color: fontColor }}
/>
@@ -35,6 +37,7 @@ const Cell = ({
);
export default function CellsWidget({
isEnabled,
count = 8,
height = 40,
value = "",
@@ -120,6 +123,7 @@ export default function CellsWidget({
{cells.map((val, i) => (
<Cell
key={i}
isEnabled={isEnabled}
count={cellCount}
h={height}
value={val}
@@ -740,7 +740,7 @@ function Placeholder(props) {
return "not-allowed";
}
} else {
return "all-scroll";
return "move";
}
};
@@ -946,23 +946,24 @@ function Placeholder(props) {
props.pos.key === props?.currWidgetsDetails?.key && <BorderResize />
)}
{/* 1- Show a ouline if props.pos.key === props?.currWidgetsDetails?.key, indicating the current user's selected widget.
2- If props.isShowBorder is true, display ouline for all widgets.
3- Use the combination of props?.isAlllowModify and !props?.assignedWidgetId.includes(props.pos.key) to determine when to show ouline:
3.1- When isAlllowModify is true, show ouline.
3.2- Do not display ouline for widgets already assigned (props.assignedWidgetId.includes(props.pos.key) is true).
{/* 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 border for all widgets.
3- Use the combination of props?.isAlllowModify and !props?.assignedWidgetId.includes(props.pos.key) to determine when to show border:
3.1- When isAlllowModify is true, show border.
3.2- Do not display border for widgets already assigned (props.assignedWidgetId.includes(props.pos.key) is true).
*/}
{props.pos.key === props?.currWidgetsDetails?.key &&
(props.isShowBorder ||
(props?.isAlllowModify &&
!props?.assignedWidgetId.includes(props.pos.key))) && (
<div
style={{ borderColor: themeColor }}
className="w-[calc(100%+21px)] h-[calc(100%+21px)] cursor-move absolute inline-block border-[1px] border-dashed"
></div>
)}
<div
className={`${
props.pos.key === props?.currWidgetsDetails?.key &&
(props.isShowBorder ||
(props?.isAlllowModify &&
!props?.assignedWidgetId.includes(props.pos.key)))
? "outline-[0.3px] outline-dashed outline-offset-[10px]"
: ""
} flex items-stretch justify-center`}
className="flex items-stretch justify-center"
style={{
outlineColor: themeColor,
left: xPos(props.pos, props.isSignYourself),
top: yPos(props.pos, props.isSignYourself),
width: "100%",
@@ -226,6 +226,7 @@ function PlaceholderType(props) {
props.isPlaceholder || props.isSignYourself || props.isSelfSign;
return (
<CellsWidget
isEnabled={iswidgetEnable}
count={count}
height={height}
value={cells.join("")}
@@ -123,6 +123,23 @@ const WidgetNameModal = (props) => {
}
};
const handleChangeValidateInput = (e) => {
if (e) {
if (e.target.value === "ssn") {
setFormdata({
...formdata,
[e.target.name]: e.target.value,
hint: "xxx-xx-xxxx",
cellCount: 11
});
} else {
setFormdata({ ...formdata, [e.target.name]: e.target.value });
}
} else {
setFormdata({ ...formdata, textvalidate: "" });
}
};
const handledefaultChange = (e) => {
if (formdata.textvalidate) {
const regexObject = RegexParser(handleValidation(formdata.textvalidate));
@@ -148,7 +165,7 @@ const WidgetNameModal = (props) => {
//allow space in text regex
return "/^[a-zA-Z ]+$/";
case "ssn":
return "^\\d{3}-\\d{2}-\\d{4}$";
return "/^(?!000|666|9\\d{2})\\d{3}-(?!00)\\d{2}-(?!0000)\\d{4}$/";
default:
return type;
}
@@ -1472,6 +1472,7 @@ function WidgetsValueModal(props) {
case cellsWidget:
return (
<CellsWidget
isEnabled={true}
count={cellsValue.length}
height="100%"
value={cellsValue.join("")}
@@ -1762,6 +1763,10 @@ function WidgetsValueModal(props) {
regexValidation = /^[0-9\s]*$/;
validateExpression(regexValidation);
break;
case "ssn":
regexValidation = /^(?!000|666|9\d{2})\d{3}-(?!00)\d{2}-(?!0000)\d{4}$/;
validateExpression(regexValidation);
break;
default:
// Grab the current pattern (if it exists)
const pattern = currWidgetsDetails?.options?.validation?.pattern;
@@ -1872,6 +1877,11 @@ function WidgetsValueModal(props) {
}
};
const handleclose = () => {
// If validation is shown, clear the response and close the modal
if (isShowValidation) {
handleClear();
setIsShowValidation(false);
}
dispatch(setIsShowModal({}));
dispatch(setLastIndex(""));
if (currWidgetsDetails?.type === textWidget && uniqueId) {
@@ -1936,7 +1946,7 @@ function WidgetsValueModal(props) {
<>
<ModalUi
isOpen={true}
handleClose={() => !isShowValidation && handleclose()}
handleClose={() => handleclose()}
position="bottom"
>
<div className="h-[100%] p-[18px]">
+2 -8
View File
@@ -1608,13 +1608,7 @@ function PlaceHolderSign() {
parseInt(defaultdata?.cellCount || 5)
),
validation:
isSubscribe && inputype
? {
type: inputype,
pattern:
inputype === "regex" ? defaultdata.textvalidate : ""
}
: {},
{},
fontSize:
fontSize || currWidgetsDetails?.options?.fontSize || 12,
fontColor:
@@ -2636,7 +2630,7 @@ function PlaceHolderSign() {
title={t("document-alert")}
showClose={false}
>
<div className="h-[100%] p-[20px]">
<div className="h-[100%] p-[20px] text-base-content">
<p>{isAlreadyPlace.message}</p>
<div className="h-[1px] w-full my-[15px] bg-[#9f9f9f]"></div>
<button