@portnet/ui 0.1.41 → 0.1.43
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -30,7 +30,7 @@ const DateTimePickerField = _ref => {
|
|
|
30
30
|
let {
|
|
31
31
|
label,
|
|
32
32
|
name,
|
|
33
|
-
format = "DD/MM/YYYY HH:mm
|
|
33
|
+
format = "DD/MM/YYYY HH:mm",
|
|
34
34
|
onChange,
|
|
35
35
|
minDate,
|
|
36
36
|
maxDate,
|
|
@@ -44,31 +44,51 @@ const DateTimePickerField = _ref => {
|
|
|
44
44
|
const [renderedValue, setRenderedValue] = (0, _react.useState)(null);
|
|
45
45
|
const [field] = (0, _formik.useField)(name);
|
|
46
46
|
const [selectedDate, setSelectedDate] = (0, _react.useState)(value ? (0, _moment.default)(value, format === "DD/MM/YYYY HH:mm" ? "YYYY-MM-DD HH:mm" : "YYYY-MM-DD HH:mm:ss", true).isValid() ? (0, _moment.default)(value).format("YYYY-MM-DD") : (0, _moment.default)().format("YYYY-MM-DD") : (0, _moment.default)().format("YYYY-MM-DD"));
|
|
47
|
-
const [selectedTime, setSelectedTime] = (0, _react.useState)(
|
|
47
|
+
const [selectedTime, setSelectedTime] = (0, _react.useState)(() => {
|
|
48
|
+
if (value) {
|
|
49
|
+
const parsedTime = (0, _moment.default)(value, format === "DD/MM/YYYY HH:mm:ss" ? "HH:mm:ss" : "HH:mm", true);
|
|
50
|
+
if (parsedTime.isValid()) {
|
|
51
|
+
return parsedTime.format(format === "DD/MM/YYYY HH:mm:ss" ? "HH:mm:ss" : "HH:mm");
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
return format === "DD/MM/YYYY HH:mm:ss" ? "00:00:00" : "00:00";
|
|
55
|
+
});
|
|
48
56
|
const [selectedHour, setSelectedHour] = (0, _react.useState)((0, _moment.default)(selectedTime, format === "DD/MM/YYYY HH:mm" ? "HH:mm" : "HH:mm:ss").format("HH"));
|
|
49
57
|
const [selectedMinute, setSelectedMinute] = (0, _react.useState)((0, _moment.default)(selectedTime, format === "DD/MM/YYYY HH:mm" ? "HH:mm" : "HH:mm:ss").format("mm"));
|
|
50
58
|
const [selectedSecond, setSelectedSecond] = (0, _react.useState)((0, _moment.default)(selectedTime, format === "DD/MM/YYYY HH:mm" ? "HH:mm" : "HH:mm:ss").format("ss"));
|
|
51
59
|
const openDatePopover = Boolean(anchorEl);
|
|
52
60
|
const openTimePopover = Boolean(timeAnchorEl);
|
|
53
61
|
(0, _react.useEffect)(() => {
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
62
|
+
if (value) {
|
|
63
|
+
// Check if the value is a valid ISO string or formatted value
|
|
64
|
+
const isIsoString = (0, _moment.default)(value, _moment.default.ISO_8601, true).isValid();
|
|
65
|
+
const parsedDate = isIsoString ? (0, _moment.default)(value) : (0, _moment.default)(value, format, true);
|
|
66
|
+
if (parsedDate.isValid()) {
|
|
67
|
+
const datePart = parsedDate.format(format.split(" ")[0]);
|
|
68
|
+
const timePart = parsedDate.format(format === "DD/MM/YYYY HH:mm:ss" ? "HH:mm:ss" : "HH:mm");
|
|
69
|
+
setRenderedValue("".concat(datePart, " ").concat(timePart));
|
|
70
|
+
} else {
|
|
71
|
+
// Fallback to an empty string or default value
|
|
72
|
+
setRenderedValue("");
|
|
73
|
+
}
|
|
74
|
+
} else {
|
|
75
|
+
setRenderedValue("");
|
|
76
|
+
}
|
|
59
77
|
}, [value, format]);
|
|
78
|
+
const updateCombinedDateTime = (newDate, newTime) => {
|
|
79
|
+
const combinedDateTime = (0, _moment.default)("".concat(newDate, " ").concat(newTime || (format === "DD/MM/YYYY HH:mm:ss" ? "00:00:00" : "00:00")), format === "DD/MM/YYYY HH:mm:ss" ? "YYYY-MM-DD HH:mm:ss" : "YYYY-MM-DD HH:mm", true).toISOString();
|
|
80
|
+
if ((0, _moment.default)(combinedDateTime).isValid()) {
|
|
81
|
+
const formattedDate = (0, _moment.default)(combinedDateTime).format(format);
|
|
82
|
+
setRenderedValue(formattedDate);
|
|
83
|
+
onChange(combinedDateTime); // Ensure parent component receives the ISO string
|
|
84
|
+
}
|
|
85
|
+
};
|
|
60
86
|
const handleDateTimeClick = event => setAnchorEl(event.currentTarget);
|
|
61
87
|
const handleTimeClick = event => {
|
|
62
88
|
setTimeAnchorEl(event.currentTarget);
|
|
63
89
|
};
|
|
64
90
|
const handleDateClose = () => setAnchorEl(null);
|
|
65
91
|
const handleTimeClose = () => setTimeAnchorEl(null);
|
|
66
|
-
const updateCombinedDateTime = (newDate, newTime) => {
|
|
67
|
-
const combinedDateTime = (0, _moment.default)("".concat(newDate, " ").concat(newTime), format === "DD/MM/YYYY HH:mm:ss" ? "YYYY-MM-DD HH:mm:ss" : "YYYY-MM-DD HH:mm", true).toISOString();
|
|
68
|
-
if ((0, _moment.default)(combinedDateTime).isValid()) {
|
|
69
|
-
onChange(combinedDateTime);
|
|
70
|
-
}
|
|
71
|
-
};
|
|
72
92
|
const handleDateChange = date => {
|
|
73
93
|
setSelectedDate(date);
|
|
74
94
|
updateCombinedDateTime(date, selectedTime);
|
|
@@ -104,7 +124,7 @@ const DateTimePickerField = _ref => {
|
|
|
104
124
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiTextField.default, {
|
|
105
125
|
name: name,
|
|
106
126
|
label: label,
|
|
107
|
-
value: renderedValue,
|
|
127
|
+
value: renderedValue || "",
|
|
108
128
|
onClick: handleDateTimeClick,
|
|
109
129
|
readOnly: true,
|
|
110
130
|
error: error,
|
|
@@ -147,7 +167,7 @@ const DateTimePickerField = _ref => {
|
|
|
147
167
|
value: selectedDate,
|
|
148
168
|
onChange: date => handleDateChange(date)
|
|
149
169
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, {
|
|
150
|
-
value: selectedTime,
|
|
170
|
+
value: selectedTime || (format === "DD/MM/YYYY HH:mm:ss" ? "00:00:00" : "00:00"),
|
|
151
171
|
onChange: event => {
|
|
152
172
|
const inputValue = event.target.value;
|
|
153
173
|
const allowedChars = format === "DD/MM/YYYY HH:mm" ? /^[0-9:]{0,5}$/ : /^[0-9:]{0,8}$/;
|