Skip to content

Commit 73b2ba6

Browse files
raktima-opensignlabsraktima-opensignlabs
committed
fix: default date issue and remove commented code, unnecessary using useEffect
1 parent c04fd80 commit 73b2ba6

File tree

4 files changed

+58
-109
lines changed

4 files changed

+58
-109
lines changed

‎apps/OpenSign/src/components/pdf/Placeholder.js‎

Lines changed: 40 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { Rnd } from "react-rnd";
55
import {
66
defaultWidthHeight,
77
isMobile,
8+
onChangeInput,
89
textInputWidget,
910
textWidget
1011
} from "../../constant/Utils";
@@ -66,9 +67,7 @@ const changeDateToMomentFormat = (format) => {
6667
}
6768
};
6869

69-
// const getDefaultdate = (selectedDate) => {
70-
// return selectedDate ? new Date(selectedDate) : new Date();
71-
// };
70+
//function to get default date
7271
const getDefaultdate = (selectedDate, format = "dd-MM-yyyy") => {
7372
let date;
7473
if (format && format === "dd-MM-yyyy") {
@@ -83,17 +82,12 @@ const getDefaultdate = (selectedDate, format = "dd-MM-yyyy") => {
8382
const value = date;
8483
return value;
8584
};
85+
//function to get default format
8686
const getDefaultFormat = (dateFormat) => dateFormat || "MM/dd/yyyy";
8787

8888
function Placeholder(props) {
8989
const [isDraggingEnabled, setDraggingEnabled] = useState(true);
9090
const [isShowDateFormat, setIsShowDateFormat] = useState(false);
91-
// const [selectDate, setSelectDate] = useState({
92-
// date: moment(
93-
// getDefaultdate(props?.pos?.options?.response).getTime()
94-
// ).format(changeDateToMomentFormat(props.pos?.options?.validation?.format)),
95-
// format: getDefaultFormat(props.pos?.options?.validation?.format)
96-
// });
9791
const [selectDate, setSelectDate] = useState({
9892
date: moment(
9993
getDefaultdate(
@@ -104,10 +98,6 @@ function Placeholder(props) {
10498
format: getDefaultFormat(props.pos?.options?.validation?.format)
10599
});
106100
const [dateFormat, setDateFormat] = useState([]);
107-
const [saveDateFormat, setSaveDateFormat] = useState("");
108-
// const [startDate, setStartDate] = useState(
109-
// getDefaultdate(props?.pos?.options?.response)
110-
// );
111101
const [startDate, setStartDate] = useState(
112102
getDefaultdate(
113103
props?.pos?.options?.response,
@@ -126,36 +116,6 @@ function Placeholder(props) {
126116
"DD MMMM, YYYY"
127117
];
128118

129-
//useEffect for to set date and date format for all flow (signyour-self, request-sign,placeholder,template)
130-
//checking if already have data and set else set new date
131-
// useEffect(() => {
132-
// console.log('go here')
133-
// //set default current date and default format MM/dd/yyyy
134-
// const defaultFormat = props.pos?.options?.validation?.format;
135-
// const updateDate = props?.pos?.options?.response
136-
// ? new Date(props?.pos?.options?.response)
137-
// : new Date();
138-
// //DD-mm-YYYY
139-
// const dateFormat = defaultFormat && defaultFormat;
140-
// // const isMomentType = dateFormat && dateFormat === "MM/dd/YYYY";
141-
// // const selectMomentFormat = isMomentType ? "MM/DD/YYYY" : dateFormat;
142-
// const selectMomentFormat = changeDateToMomentFormat(dateFormat);
143-
144-
// // const isFormatType = dateFormat && dateFormat === "MM/dd/YYYY";
145-
// const getFormat = dateFormat || "MM/dd/yyyy";
146-
// const milliseconds = updateDate.getTime();
147-
// const newDate = moment(milliseconds).format(selectMomentFormat);
148-
// // console.log('new date',newDate)
149-
// const dateObj = {
150-
// date: newDate,
151-
// format: getFormat
152-
// };
153-
// console.log("dateobj selectdate useEffect", dateObj);
154-
// setSelectDate(dateObj);
155-
// setStartDate(updateDate);
156-
// // eslint-disable-next-line react-hooks/exhaustive-deps
157-
// }, []);
158-
159119
//function change format array list with selected date and format
160120
const changeDateFormat = () => {
161121
const updateDate = [];
@@ -178,15 +138,14 @@ function Placeholder(props) {
178138
setDateFormat(updateDate);
179139
};
180140

181-
// console.log("selected date", selectDate);
182141
useEffect(() => {
183142
if (props.isPlaceholder || props.isSignYourself) {
184-
// console.log("selected date useEffect", selectDate);
185143
selectDate && changeDateFormat();
186144
}
187145
// eslint-disable-next-line react-hooks/exhaustive-deps
188146
}, [selectDate]);
189-
//handle to close drop down menu onclick screen
147+
148+
//it detect outside click of date dropdown menu
190149
useEffect(() => {
191150
const closeMenuOnOutsideClick = (e) => {
192151
if (isShowDateFormat && !e.target.closest("#menu-container")) {
@@ -271,6 +230,7 @@ function Placeholder(props) {
271230
}
272231
};
273232

233+
//function to set state value of onclick on widget's setting icon
274234
const handleWidgetsOnclick = () => {
275235
if (props.pos.type === "radio") {
276236
props.setIsRadio(true);
@@ -289,6 +249,7 @@ function Placeholder(props) {
289249
props.setWidgetType(props.pos.type);
290250
props.setCurrWidgetsDetails(props.pos);
291251
};
252+
//function ro set state value of onclick on widget's copy icon
292253
const handleCopyPlaceholder = (e) => {
293254
if (props.data && props?.pos?.type !== textWidget) {
294255
props.setSignerObjId(props?.data?.signerObjId);
@@ -303,6 +264,35 @@ function Placeholder(props) {
303264
props.setSignKey(props.pos.key);
304265
};
305266

267+
//function to save date and format on local array onchange date and onclick format
268+
const handleSaveDate = (data, isDateChange) => {
269+
let updateDate = data.date;
270+
//check if date change by user
271+
if (isDateChange) {
272+
//`changeDateToMomentFormat` is used to convert date as per required to moment package
273+
updateDate = moment(data.date).format(
274+
changeDateToMomentFormat(data.format)
275+
);
276+
}
277+
//using moment package is used to change date as per the format provided in selectDate obj e.g. - MM/dd/yyyy -> 03/12/2024
278+
//`getDefaultdate` is used to convert update date in new Date() format
279+
const date = moment(
280+
getDefaultdate(updateDate, data?.format).getTime()
281+
).format(changeDateToMomentFormat(data?.format));
282+
283+
//`onChangeInput` is used to save data related to date in a placeholder field
284+
onChangeInput(
285+
date,
286+
props.pos.key,
287+
props.xyPostion,
288+
props.index,
289+
props.setXyPostion,
290+
props.data && props.data.Id,
291+
false,
292+
data?.format
293+
);
294+
setSelectDate({ date: date, format: data?.format });
295+
};
306296
const PlaceholderIcon = () => {
307297
return (
308298
props.isShowBorder && (
@@ -439,10 +429,12 @@ function Placeholder(props) {
439429
e.stopPropagation();
440430
setIsShowDateFormat(!isShowDateFormat);
441431
setSelectDate(data);
432+
handleSaveDate(data);
442433
}}
443434
onClick={() => {
444435
setIsShowDateFormat(!isShowDateFormat);
445436
setSelectDate(data);
437+
handleSaveDate(data);
446438
}}
447439
className="dropdown-item itemColor"
448440
style={{ fontSize: "12px" }}
@@ -695,11 +687,10 @@ function Placeholder(props) {
695687
isNeedSign={props.isNeedSign}
696688
setSelectDate={setSelectDate}
697689
selectDate={selectDate}
698-
setSaveDateFormat={setSaveDateFormat}
699-
saveDateFormat={saveDateFormat}
700690
setValidateAlert={props.setValidateAlert}
701691
setStartDate={setStartDate}
702692
startDate={startDate}
693+
handleSaveDate={handleSaveDate}
703694
/>
704695
</div>
705696
) : (
@@ -722,11 +713,10 @@ function Placeholder(props) {
722713
isNeedSign={props.isNeedSign}
723714
setSelectDate={setSelectDate}
724715
selectDate={selectDate}
725-
setSaveDateFormat={setSaveDateFormat}
726-
saveDateFormat={saveDateFormat}
727716
setValidateAlert={props.setValidateAlert}
728717
setStartDate={setStartDate}
729718
startDate={startDate}
719+
handleSaveDate={handleSaveDate}
730720
/>
731721
</>
732722
)}

‎apps/OpenSign/src/components/pdf/PlaceholderType.js‎

Lines changed: 11 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,6 @@ function PlaceholderType(props) {
117117
? props.pos?.options?.defaultValue
118118
: ""
119119
);
120-
121120
// eslint-disable-next-line react-hooks/exhaustive-deps
122121
}, []);
123122

@@ -135,54 +134,7 @@ function PlaceholderType(props) {
135134
// eslint-disable-next-line react-hooks/exhaustive-deps
136135
}, [props.pos?.options?.defaultValue]);
137136

138-
//useEffect to save date and format on local array
139-
useEffect(() => {
140-
if (type && type === "date") {
141-
if (props?.selectDate) {
142-
// let updateDate;
143-
// if (props?.selectDate.format === "dd-MM-yyyy") {
144-
// // console.log('saveDateformat',props.saveDateFormat)
145-
// const [day, month, year] = props.saveDateFormat.split("-");
146-
// updateDate = new Date(`${year}-${month}-${day}`);
147-
// console.log('update',updateDate)
148-
// } else {
149-
// if (props?.saveDateFormat) {
150-
// updateDate = new Date(props.saveDateFormat);
151-
// }
152-
// }
153-
// const updateDate = new Date(props.saveDateFormat);
154-
// props.setStartDate(updateDate);
155-
// const dateObj = {
156-
// date: props.saveDateFormat,
157-
// format: props.selectDate
158-
// ? props.selectDate?.format
159-
// : props.pos?.options?.validation?.format
160-
// ? props.pos?.options?.validation?.format
161-
// : "MM/dd/yyyy"
162-
// };
163-
164-
// props.setSelectDate(dateObj);
165-
onChangeInput(
166-
props.saveDateFormat,
167-
props.pos.key,
168-
props.xyPostion,
169-
props.index,
170-
props.setXyPostion,
171-
props.data && props.data.Id,
172-
false,
173-
props.selectDate?.format
174-
? props.selectDate.format
175-
: props.pos?.options?.validation?.format
176-
? props.pos?.options?.validation?.format
177-
: "MM/dd/yyyy"
178-
);
179-
}
180-
}
181-
// eslint-disable-next-line react-hooks/exhaustive-deps
182-
}, [props.saveDateFormat]);
183-
184137
const dateValue = (value) => {
185-
props.setSaveDateFormat(value);
186138
return <span>{value}</span>;
187139
};
188140
const ExampleCustomInput = forwardRef(({ value, onClick }, ref) => (
@@ -325,6 +277,16 @@ function PlaceholderType(props) {
325277
);
326278
};
327279

280+
//function to set onchange date
281+
const handleOnDateChange = (date) => {
282+
props.setStartDate(date);
283+
const isDateChange = true;
284+
const dateObj = {
285+
date: date,
286+
format: props.selectDate.format
287+
};
288+
props.handleSaveDate(dateObj, isDateChange);
289+
};
328290
switch (type) {
329291
case "signature":
330292
return props.pos.SignUrl ? (
@@ -670,18 +632,10 @@ function PlaceholderType(props) {
670632
: props.pos.options?.response &&
671633
new Date(props.pos.options.response)
672634
}
673-
onChange={(date) => {
674-
props.setStartDate(date);
675-
}}
635+
onChange={(date) => handleOnDateChange(date)}
676636
popperPlacement="top-end"
677637
customInput={<ExampleCustomInput />}
678638
dateFormat={
679-
// props.pos?.options?.validation?.format
680-
// ? props.pos?.options?.validation?.format
681-
// : props.selectDate
682-
// ? props.selectDate?.format
683-
// : "MM/dd/YYYY"
684-
685639
props.selectDate
686640
? props.selectDate?.format
687641
: props.pos?.options?.validation?.format

‎apps/OpenSign/src/constant/Utils.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -249,7 +249,11 @@ export const addWidgetOptions = (type) => {
249249
case "job title":
250250
return { ...defaultOpt, validation: { type: "text", pattern: "" } };
251251
case "date":
252-
return { ...defaultOpt, response: getDate() };
252+
return {
253+
...defaultOpt,
254+
response: getDate(),
255+
validation: { format: "MM/dd/yyyy", type: "date-format" }
256+
};
253257
case "image":
254258
return defaultOpt;
255259
case "email":

‎apps/OpenSign/src/pages/SignyourselfPdf.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -381,7 +381,8 @@ function SignYourSelf() {
381381
case "date":
382382
return {
383383
name: "date",
384-
defaultValue: getDate()
384+
response: getDate(),
385+
validation: { format: "MM/dd/yyyy", type: "date-format" }
385386
};
386387
case "image":
387388
return {

0 commit comments

Comments
 (0)