@skbkontur/db-viewer-ui/Components/DateTimeRangePicker/DateTimePickerWithTimeZone.js

Database Viewer with custom configuration

"use strict";
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 renderEnvironment_1 = require("@skbkontur/react-ui/lib/renderEnvironment");
const react_1 = require("react");
const DatePicker_1 = require("./DatePicker");
const DateTimePicker_styles_1 = require("./DateTimePicker.styles");
const TimePicker_1 = require("./TimePicker");
const helpers_1 = require("./helpers");
const DateTimePickerWithTimeZone = ({ error, defaultTime, value, onChange, disabled, timeZoneEditable, }) => {
    const jsStyles = (0, renderEnvironment_1.useStyles)(DateTimePicker_styles_1.getStyles);
    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)(() => {
        if (!value) {
            return;
        }
        const timeOffset = (0, helpers_1.getTimeZoneString)(value);
        setOffset(timeOffset);
        const dateTimeWithoutTimezone = timeOffset ? value.slice(0, -timeOffset.length) : value;
        setDate(edi_ui_1.DateUtils.fromLocalToUtc(new Date(dateTimeWithoutTimezone)));
        setTime(edi_ui_1.DateUtils.formatDate(dateTimeWithoutTimezone, "HH:mm:ss.SSS"));
    }, [value]);
    const handleDateChange = (newDate) => {
        setDate(newDate);
        onChange((0, helpers_1.buildDateTime)(newDate, time, offset, defaultTime));
    };
    const handleTimeChange = (newTime) => {
        setTime(newTime);
        onChange((0, helpers_1.buildDateTime)(date, newTime, offset, defaultTime));
    };
    const handleOffsetChange = (offset) => {
        const nextOffset = offset === "local" ? null : "Z";
        setOffset(nextOffset);
        onChange((0, helpers_1.buildDateTime)(date, time, nextOffset, defaultTime));
    };
    return ((0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("span", { className: jsStyles.dateRangeItem(), children: (0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, { "data-tid": "Date", value: date, defaultTime: defaultTime, onChange: handleDateChange, error: error, disabled: disabled, width: 110 }) }), (0, jsx_runtime_1.jsx)("span", { className: 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: handleTimeChange, useSeconds: true }) }), (0, jsx_runtime_1.jsx)("span", { className: 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: handleOffsetChange })) : ((0, jsx_runtime_1.jsx)("span", { "data-tid": "TimeOffsetLabel", children: offset })) })] }));
};
exports.DateTimePickerWithTimeZone = DateTimePickerWithTimeZone;
//# sourceMappingURL=DateTimePickerWithTimeZone.js.map