wini-web-components 2.6.2 → 2.6.3
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.
|
@@ -151,13 +151,13 @@ function DateTimePicker(props) {
|
|
|
151
151
|
});
|
|
152
152
|
};
|
|
153
153
|
const returnUI = () => {
|
|
154
|
-
var _a, _b, _c, _d;
|
|
154
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
155
155
|
switch (props.pickerType) {
|
|
156
156
|
case "date":
|
|
157
|
-
return react_2.default.createElement("div", { id: props.id, className: `row ${date_time_picker_module_css_1.default["date-time-picker"]} ${(_a = props.className) !== null && _a !== void 0 ? _a : "body-3"}`, style: props.style, onClick: (ev) => {
|
|
157
|
+
return react_2.default.createElement("div", { id: props.id, className: `row ${date_time_picker_module_css_1.default["date-time-picker"]} ${(_a = props.className) !== null && _a !== void 0 ? _a : "body-3"} ${((_b = props.helperText) === null || _b === void 0 ? void 0 : _b.length) ? date_time_picker_module_css_1.default['helper-text'] : ""}`, "helper-text": props.helperText, style: props.style ? Object.assign(Object.assign({}, { '--helper-text-color': (_c = props.helperTextColor) !== null && _c !== void 0 ? _c : '#e14337' }), props.style) : { '--helper-text-color': (_d = props.helperTextColor) !== null && _d !== void 0 ? _d : '#e14337' }, onClick: (ev) => {
|
|
158
158
|
const rect = ev.target.closest("div").getBoundingClientRect();
|
|
159
159
|
showCalendar(rect);
|
|
160
|
-
} }, (
|
|
160
|
+
} }, (_e = props.prefix) !== null && _e !== void 0 ? _e : react_2.default.createElement(winicon_1.Winicon, { className: date_time_picker_module_css_1.default["prefix-icon"], src: "outline/user interface/calendar-date", size: "1.2rem" }),
|
|
161
161
|
react_2.default.createElement("input", { className: date_time_picker_module_css_1.default["value"], ref: inputRef, autoComplete: 'off', disabled: props.disabled, placeholder: props.placeholder, readOnly: props.pickOnly, onKeyDown: (ev) => {
|
|
162
162
|
switch (ev.key.toLowerCase()) {
|
|
163
163
|
case "enter":
|
|
@@ -189,10 +189,10 @@ function DateTimePicker(props) {
|
|
|
189
189
|
props.onChange(dateValue);
|
|
190
190
|
} }));
|
|
191
191
|
default:
|
|
192
|
-
return react_2.default.createElement("button", { id: props.id, type: "button", disabled: props.disabled, className: `row ${date_time_picker_module_css_1.default["date-time-picker"]} ${(
|
|
192
|
+
return react_2.default.createElement("button", { id: props.id, type: "button", disabled: props.disabled, className: `row ${date_time_picker_module_css_1.default["date-time-picker"]} ${(_f = props.className) !== null && _f !== void 0 ? _f : "body-3"}`, style: props.style, onClick: (ev) => {
|
|
193
193
|
const rect = ev.target.closest("button").getBoundingClientRect();
|
|
194
194
|
showCalendar(rect);
|
|
195
|
-
} }, (
|
|
195
|
+
} }, (_g = props.prefix) !== null && _g !== void 0 ? _g : react_2.default.createElement(winicon_1.Winicon, { className: date_time_picker_module_css_1.default["prefix-icon"], src: "outline/user interface/calendar-date", size: "1.2rem" }),
|
|
196
196
|
txtValue);
|
|
197
197
|
}
|
|
198
198
|
};
|
|
@@ -268,7 +268,7 @@ const PopupDateTimePicker = (0, react_1.forwardRef)(function PopupDateTimePicker
|
|
|
268
268
|
react_2.default.createElement(popup_1.Popup, { ref: popupRef }),
|
|
269
269
|
dropdownChildren ? react_2.default.createElement(Dropdown, { style: dropdownChildren.style, children: dropdownChildren.data, onClose: () => { setDropdownChildren(undefined); } }) : null,
|
|
270
270
|
react_2.default.createElement(calendar_1.Calendar, { min: min, max: max, range: pickerType.includes("range") || pickerType === "auto", value: pickerType === "date" || pickerType === "datetime" ? methods.watch('date-start') : (methods.watch('date-start') && methods.watch('date-end') ? { sTime: methods.watch('date-start'), eTime: methods.watch('date-end') } : undefined), header: pickerType !== "date" && react_2.default.createElement("div", { className: 'row', style: { flexWrap: "wrap", gap: "0.8rem 1.2rem", padding: "1.6rem", borderBottom: "var(--neutral-main-border)" } },
|
|
271
|
-
react_2.default.createElement(text_field_1.TextField, { ref: inputStartRef, className: 'col12 body-3', style: { "--gutter": "1.2rem", padding: "0.4rem 1.2rem" }, placeholder: pickerType.includes("range") || pickerType === "auto" ? t("start-date") : "dd/mm/yyyy", onComplete: (ev) => ev.target.blur(), onBlur: (ev) => {
|
|
271
|
+
react_2.default.createElement(text_field_1.TextField, { ref: inputStartRef, autoComplete: "off", className: 'col12 body-3', style: { "--gutter": "1.2rem", padding: "0.4rem 1.2rem" }, placeholder: pickerType.includes("range") || pickerType === "auto" ? t("start-date") : "dd/mm/yyyy", onComplete: (ev) => ev.target.blur(), onBlur: (ev) => {
|
|
272
272
|
const inputValue = ev.target.value;
|
|
273
273
|
if (regexDate.test(inputValue)) {
|
|
274
274
|
const dateValue = stringToDate(inputValue, 'dd/mm/yyyy', '/');
|
|
@@ -281,21 +281,22 @@ const PopupDateTimePicker = (0, react_1.forwardRef)(function PopupDateTimePicker
|
|
|
281
281
|
else
|
|
282
282
|
ev.target.value = dateToString(methods.getValues('date-start'));
|
|
283
283
|
} }),
|
|
284
|
-
(pickerType.includes("range") || pickerType === "auto") &&
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
methods.
|
|
290
|
-
|
|
284
|
+
(pickerType.includes("range") || pickerType === "auto") &&
|
|
285
|
+
react_2.default.createElement(text_field_1.TextField, { ref: inputEndRef, autoComplete: "off", className: 'col12 body-3', style: { "--gutter": "1.2rem", padding: "0.4rem 1.2rem" }, placeholder: t("end-date"), onComplete: (ev) => ev.target.blur(), onBlur: (ev) => {
|
|
286
|
+
const inputValue = ev.target.value;
|
|
287
|
+
if (regexDate.test(inputValue)) {
|
|
288
|
+
const dateValue = stringToDate(inputValue, 'dd/mm/yyyy', '/');
|
|
289
|
+
if ((0, date_fns_1.differenceInCalendarDays)(dateValue, methods.getValues('date-start')) < 0) {
|
|
290
|
+
methods.setValue('date-start', dateValue);
|
|
291
|
+
inputStartRef.current.getInput().value = dateToString(dateValue);
|
|
292
|
+
}
|
|
293
|
+
methods.setValue('date-end', dateValue);
|
|
291
294
|
}
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
ev.target.value = dateToString(methods.getValues('date-end'));
|
|
296
|
-
} }),
|
|
295
|
+
else
|
|
296
|
+
ev.target.value = dateToString(methods.getValues('date-end'));
|
|
297
|
+
} }),
|
|
297
298
|
selectTime && react_2.default.createElement(react_2.default.Fragment, null,
|
|
298
|
-
react_2.default.createElement(text_field_1.TextField, { name: 'time-start', style: { "--gutter": "1.2rem", padding: "0.4rem 1.2rem" }, onComplete: (ev) => { ev.target.blur(); }, register: methods.register("time-start", {
|
|
299
|
+
react_2.default.createElement(text_field_1.TextField, { autoComplete: "off", name: 'time-start', style: { "--gutter": "1.2rem", padding: "0.4rem 1.2rem" }, onComplete: (ev) => { ev.target.blur(); }, register: methods.register("time-start", {
|
|
299
300
|
onChange: (ev) => ev.target.value = ev.target.value.trim(),
|
|
300
301
|
onBlur: (ev) => {
|
|
301
302
|
if (regexTime.test(ev.target.value)) {
|
|
@@ -324,35 +325,36 @@ const PopupDateTimePicker = (0, react_1.forwardRef)(function PopupDateTimePicker
|
|
|
324
325
|
});
|
|
325
326
|
}, 168);
|
|
326
327
|
} }),
|
|
327
|
-
(pickerType.includes("range") || pickerType === "auto") &&
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
328
|
+
(pickerType.includes("range") || pickerType === "auto") &&
|
|
329
|
+
react_2.default.createElement(text_field_1.TextField, { autoComplete: "off", name: 'time-end', style: { "--gutter": "1.2rem", padding: "0.4rem 1.2rem" }, onComplete: (ev) => { ev.target.blur(); }, register: methods.register("time-end", {
|
|
330
|
+
onChange: (ev) => ev.target.value = ev.target.value.trim(),
|
|
331
|
+
onBlur: (ev) => {
|
|
332
|
+
if (regexTime.test(ev.target.value)) {
|
|
333
|
+
methods.setValue('time-end', ev.target.value);
|
|
334
|
+
}
|
|
335
|
+
else
|
|
336
|
+
ev.target.value = "";
|
|
337
|
+
setDropdownChildren(undefined);
|
|
332
338
|
}
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
}))
|
|
353
|
-
});
|
|
354
|
-
}, 168);
|
|
355
|
-
} }))), footer: pickerType !== "date" && react_2.default.createElement(react_2.default.Fragment, null,
|
|
339
|
+
}), className: 'col12 body-3', placeholder: "hh:mm", onFocus: (ev) => {
|
|
340
|
+
const rect = ev.target.closest("div").getBoundingClientRect();
|
|
341
|
+
setTimeout(() => {
|
|
342
|
+
setDropdownChildren({
|
|
343
|
+
style: { maxHeight: "24rem", top: rect.bottom + 2, right: document.body.offsetWidth - rect.right, width: rect.width },
|
|
344
|
+
data: react_2.default.createElement(react_2.default.Fragment, null, Array.from({ length: 48 }).map((_, i) => {
|
|
345
|
+
if (i % 2 === 0)
|
|
346
|
+
var timeValue = `${(i / 2) < 9 ? `0${i / 2}` : (i / 2)}:00`;
|
|
347
|
+
else
|
|
348
|
+
timeValue = `${((i - 1) / 2) < 9 ? `0${(i - 1) / 2}` : ((i - 1) / 2)}:30`;
|
|
349
|
+
return react_2.default.createElement("button", { key: "time-" + i, type: "button", className: "row", onClick: () => {
|
|
350
|
+
methods.setValue("time-end", timeValue);
|
|
351
|
+
setDropdownChildren(undefined);
|
|
352
|
+
} },
|
|
353
|
+
react_2.default.createElement(text_1.Text, { className: "button-text-3" }, timeValue));
|
|
354
|
+
}))
|
|
355
|
+
});
|
|
356
|
+
}, 168);
|
|
357
|
+
} }))), footer: pickerType !== "date" && react_2.default.createElement(react_2.default.Fragment, null,
|
|
356
358
|
isRepeat && react_2.default.createElement("div", { className: 'col', style: { borderTop: "var(--neutral-main-border)" } },
|
|
357
359
|
react_2.default.createElement("div", { className: 'row', style: { gap: 4, padding: "1.2rem 1.6rem" } },
|
|
358
360
|
react_2.default.createElement(text_1.Text, { className: 'heading-8', style: { flex: 1 } }, "L\u1EB7p l\u1EA1i"),
|