@portnet/ui 0.1.42 → 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,7 +44,15 @@ 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"));
|
|
@@ -52,26 +60,35 @@ const DateTimePickerField = _ref => {
|
|
|
52
60
|
const openTimePopover = Boolean(timeAnchorEl);
|
|
53
61
|
(0, _react.useEffect)(() => {
|
|
54
62
|
if (value) {
|
|
55
|
-
|
|
56
|
-
const
|
|
57
|
-
const
|
|
58
|
-
|
|
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("");
|
|
59
76
|
}
|
|
60
77
|
}, [value, format]);
|
|
61
|
-
const handleDateTimeClick = event => setAnchorEl(event.currentTarget);
|
|
62
|
-
const handleTimeClick = event => {
|
|
63
|
-
setTimeAnchorEl(event.currentTarget);
|
|
64
|
-
};
|
|
65
|
-
const handleDateClose = () => setAnchorEl(null);
|
|
66
|
-
const handleTimeClose = () => setTimeAnchorEl(null);
|
|
67
78
|
const updateCombinedDateTime = (newDate, newTime) => {
|
|
68
|
-
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();
|
|
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();
|
|
69
80
|
if ((0, _moment.default)(combinedDateTime).isValid()) {
|
|
70
81
|
const formattedDate = (0, _moment.default)(combinedDateTime).format(format);
|
|
71
82
|
setRenderedValue(formattedDate);
|
|
72
|
-
onChange(combinedDateTime);
|
|
83
|
+
onChange(combinedDateTime); // Ensure parent component receives the ISO string
|
|
73
84
|
}
|
|
74
85
|
};
|
|
86
|
+
const handleDateTimeClick = event => setAnchorEl(event.currentTarget);
|
|
87
|
+
const handleTimeClick = event => {
|
|
88
|
+
setTimeAnchorEl(event.currentTarget);
|
|
89
|
+
};
|
|
90
|
+
const handleDateClose = () => setAnchorEl(null);
|
|
91
|
+
const handleTimeClose = () => setTimeAnchorEl(null);
|
|
75
92
|
const handleDateChange = date => {
|
|
76
93
|
setSelectedDate(date);
|
|
77
94
|
updateCombinedDateTime(date, selectedTime);
|
|
@@ -107,7 +124,7 @@ const DateTimePickerField = _ref => {
|
|
|
107
124
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiTextField.default, {
|
|
108
125
|
name: name,
|
|
109
126
|
label: label,
|
|
110
|
-
value: renderedValue,
|
|
127
|
+
value: renderedValue || "",
|
|
111
128
|
onClick: handleDateTimeClick,
|
|
112
129
|
readOnly: true,
|
|
113
130
|
error: error,
|
|
@@ -150,7 +167,7 @@ const DateTimePickerField = _ref => {
|
|
|
150
167
|
value: selectedDate,
|
|
151
168
|
onChange: date => handleDateChange(date)
|
|
152
169
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, {
|
|
153
|
-
value: selectedTime,
|
|
170
|
+
value: selectedTime || (format === "DD/MM/YYYY HH:mm:ss" ? "00:00:00" : "00:00"),
|
|
154
171
|
onChange: event => {
|
|
155
172
|
const inputValue = event.target.value;
|
|
156
173
|
const allowedChars = format === "DD/MM/YYYY HH:mm" ? /^[0-9:]{0,5}$/ : /^[0-9:]{0,8}$/;
|