@skbkontur/db-viewer-ui
Version:
Database Viewer with custom configuration
51 lines • 3.34 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.DateTimePickerWithTimeZone = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const edi_ui_1 = require("@skbkontur/edi-ui");
const react_ui_1 = require("@skbkontur/react-ui");
const react_1 = require("react");
const DatePicker_1 = require("./DatePicker");
const DateTimePicker_styles_1 = require("./DateTimePicker.styles");
const TimePicker_1 = require("./TimePicker");
const DateTimePickerWithTimeZone = ({ error, defaultTime, value, onChange, disabled, timeZoneEditable, }) => {
const [time, setTime] = (0, react_1.useState)(null);
const [offset, setOffset] = (0, react_1.useState)(null);
const [date, setDate] = (0, react_1.useState)(null);
(0, react_1.useEffect)(() => {
loadState(value);
}, [value]);
(0, react_1.useEffect)(() => {
handleDateTimeChange(date, time, offset);
}, [date, time, offset]);
const handleDateTimeChange = (newDate, newTime, newOffset) => {
if (!newDate) {
onChange(null);
return;
}
const date = edi_ui_1.DateUtils.formatDate(newDate, "yyyy-MM-dd", 0);
const newDateTime = `${date}T${newTime !== null && newTime !== void 0 ? newTime : defaultTime}${newOffset !== null && newOffset !== void 0 ? newOffset : ""}`;
onChange(newDateTime);
};
const loadState = (dateStr) => {
if (!dateStr) {
return;
}
const timeOffset = getTimeZoneString(dateStr);
setOffset(timeOffset);
const dateTimeWithoutTimezone = timeOffset ? dateStr.slice(0, -timeOffset.length) : dateStr;
setDate(edi_ui_1.DateUtils.fromLocalToUtc(new Date(dateTimeWithoutTimezone)));
setTime(edi_ui_1.DateUtils.formatDate(dateTimeWithoutTimezone, "HH:mm:ss.SSS"));
};
const getTimeZoneString = (date) => {
const timezoneRegex = /.*T.*(Z|[+-].*)/i;
const matches = date.match(timezoneRegex);
if (!matches || matches.length < 2) {
return null;
}
return matches[1];
};
return ((0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("span", { className: DateTimePicker_styles_1.jsStyles.dateRangeItem(), children: (0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, { "data-tid": "Date", value: date, defaultTime: defaultTime, onChange: setDate, error: error, disabled: disabled, width: 110 }) }), (0, jsx_runtime_1.jsx)("span", { className: DateTimePicker_styles_1.jsStyles.dateRangeItem(), children: (0, jsx_runtime_1.jsx)(TimePicker_1.TimePicker, { "data-tid": "Time", value: time === defaultTime ? null : time, error: error, defaultTime: defaultTime, disabled: disabled || !date, onChange: (e, time) => setTime(time), useSeconds: true }) }), (0, jsx_runtime_1.jsx)("span", { className: DateTimePicker_styles_1.jsStyles.dateRangeItem(), children: timeZoneEditable ? ((0, jsx_runtime_1.jsx)(react_ui_1.Select, { "data-tid": "TimeZoneSelect", defaultValue: "UTC", value: offset ? "UTC" : "local", items: ["UTC", "local"], onValueChange: v => setOffset(v === "local" ? null : "Z") })) : ((0, jsx_runtime_1.jsx)("span", { "data-tid": "TimeOffsetLabel", children: offset })) })] }));
};
exports.DateTimePickerWithTimeZone = DateTimePickerWithTimeZone;
//# sourceMappingURL=DateTimePickerWithTimeZone.js.map