@mailstep/design-system 0.8.24 → 0.8.26-beta.0

package/ui/Elements/DatePicker/Datetime/DateTime.js

@@ -1,523 +0,0 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-nocheck
-import React from 'react';
-import moment from 'moment';
-import onClickOutside from 'react-onclickoutside';
-import DaysView from './views/DaysView';
-import MonthsView from './views/MonthsView';
-import YearsView from './views/YearsView';
-var viewModes = {
-    YEARS: 'years',
-    MONTHS: 'months',
-    DAYS: 'days',
-    TIME: 'time'
-};
-var nofn = function () { };
-var Datetime = /** @class */ (function (_super) {
-    __extends(Datetime, _super);
-    function Datetime(props) {
-        var _this = _super.call(this, props) || this;
-        _this._renderCalendar = function () {
-            var props = _this.props;
-            var state = _this.state;
-            var viewProps = {
-                viewDate: state.viewDate.clone(),
-                label: props.label,
-                isSecondDatePicker: props.isSecondDatePicker,
-                secondValue: props.secondValue,
-                selectedDate: _this.getSelectedDate(),
-                isValidDate: props.isValidDate,
-                updateDate: _this._updateDate,
-                others: props.others,
-                onChangeOthers: props.onChangeOthers,
-                reset: _this._reset,
-                navigate: _this._viewNavigate,
-                moment: moment,
-                showView: _this._showView
-            };
-            // Probably updateOn, updateSelectedDate and setDate can be merged in the same method
-            // that would update viewDate or selectedDate depending on the view and the dateFormat
-            switch (state.currentView) {
-                case viewModes.YEARS:
-                    // Used viewProps
-                    // { viewDate, selectedDate, renderYear, isValidDate, navigate, showView, updateDate }
-                    viewProps.renderYear = props.renderYear;
-                    return _jsx(YearsView, __assign({}, viewProps));
-                case viewModes.MONTHS:
-                    // { viewDate, selectedDate, renderMonth, isValidDate, navigate, showView, updateDate }
-                    viewProps.renderMonth = props.renderMonth;
-                    return _jsx(MonthsView, __assign({}, viewProps));
-                case viewModes.DAYS:
-                    // { viewDate, selectedDate, renderDay, isValidDate, navigate, showView, updateDate, timeFormat
-                    viewProps.renderDay = props.renderDay;
-                    viewProps.timeFormat = _this.getFormat('time');
-                    viewProps.setTime = _this._setTime;
-                    viewProps.value = _this.props.value;
-                    viewProps.disabled = _this.props.disabled;
-                    return _jsx(DaysView, __assign({}, viewProps));
-                default:
-                    viewProps.renderDay = props.renderDay;
-                    viewProps.timeFormat = _this.getFormat('time');
-                    viewProps.setTime = _this._setTime;
-                    viewProps.value = _this.props.value;
-                    return _jsx(DaysView, __assign({}, viewProps));
-            }
-        };
-        _this._showView = function (view, date) {
-            var d = (date || _this.state.viewDate).clone();
-            var nextView = _this.props.onBeforeNavigate(view, _this.state.currentView, d);
-            if (nextView && _this.state.currentView !== nextView) {
-                _this.props.onNavigate(nextView);
-                _this.setState({ currentView: nextView });
-            }
-        };
-        _this.viewToMethod = { days: 'date', months: 'month', years: 'year' };
-        _this.nextView = { days: 'time', months: 'days', years: 'months' };
-        _this._updateDate = function (e) {
-            var state = _this.state;
-            var currentView = state.currentView;
-            var updateOnView = _this.getUpdateOn(_this.getFormat('date'));
-            var viewDate = _this.state.viewDate.clone();
-            // Set the value into day/month/year
-            viewDate[_this.viewToMethod[currentView]](parseInt(e.target.getAttribute('data-value'), 10));
-            // Need to set month and year will for days view (prev/next month)
-            if (currentView === 'days') {
-                viewDate.month(parseInt(e.target.getAttribute('data-month'), 10));
-                viewDate.year(parseInt(e.target.getAttribute('data-year'), 10));
-            }
-            var update = { viewDate: viewDate };
-            if (currentView === updateOnView) {
-                update.selectedDate = viewDate.clone();
-                update.inputValue = viewDate.format(_this.getFormat('datetime'));
-                if (_this.props.open === undefined && _this.props.input && _this.props.closeOnSelect) {
-                    _this._closeCalendar();
-                }
-                _this.props.onChange(viewDate.clone());
-            }
-            else {
-                _this._showView(_this.nextView[currentView], viewDate);
-            }
-            _this.setState(update);
-        };
-        _this._viewNavigate = function (modifier, unit) {
-            var viewDate = _this.state.viewDate.clone();
-            // Subtracting is just adding negative time
-            viewDate.add(modifier, unit);
-            if (modifier > 0) {
-                _this.props.onNavigateForward(modifier, unit);
-            }
-            else {
-                _this.props.onNavigateBack(-modifier, unit);
-            }
-            _this.setState({ viewDate: viewDate });
-        };
-        _this._setTime = function (type, value) {
-            var date = (_this.getSelectedDate() || _this.state.viewDate).clone();
-            date[type](value);
-            if (!_this.props.value) {
-                _this.setState({
-                    selectedDate: date,
-                    viewDate: date.clone(),
-                    inputValue: date.format(_this.getFormat('datetime'))
-                });
-            }
-            _this.props.onChange(date);
-        };
-        _this._reset = function () {
-            _this.props.onChange(undefined);
-        };
-        _this._openCalendar = function () {
-            if (_this.isOpen())
-                return;
-            _this.setState({ open: true }, _this.props.onOpen);
-        };
-        _this._closeCalendar = function () {
-            if (!_this.isOpen())
-                return;
-            _this.setState({ open: false }, function () {
-                _this.props.onClose(_this.state.selectedDate || _this.state.inputValue);
-            });
-        };
-        _this._handleClickOutside = function () {
-            var props = _this.props;
-            if (props.input && _this.state.open && props.open === undefined && props.closeOnClickOutside) {
-                _this._closeCalendar();
-            }
-        };
-        _this._onInputFocus = function (e) {
-            if (!_this.callHandler(_this.props.inputProps.onFocus, e))
-                return;
-            _this._openCalendar();
-        };
-        _this._onInputChange = function (e) {
-            if (!_this.callHandler(_this.props.inputProps.onChange, e))
-                return;
-            var value = e.target ? e.target.value : e;
-            var localMoment = _this.localMoment(value, _this.getFormat('datetime'));
-            var update = { inputValue: value };
-            if (localMoment.isValid()) {
-                update.selectedDate = localMoment;
-                update.viewDate = localMoment.clone().startOf('month');
-            }
-            else {
-                update.selectedDate = null;
-            }
-            _this.setState(update, function () {
-                _this.props.onChange(localMoment.isValid() ? localMoment : _this.state.inputValue);
-            });
-        };
-        _this._onInputKeyDown = function (e) {
-            if (!_this.callHandler(_this.props.inputProps.onKeyDown, e))
-                return;
-            if (e.which === 9 && _this.props.closeOnTab) {
-                _this._closeCalendar();
-            }
-        };
-        _this._onInputClick = function (e) {
-            // Focus event should open the calendar, but there is some case where
-            // the input is already focused and the picker is closed, so clicking the input
-            // should open it again see https://github.com/arqex/react-datetime/issues/717
-            if (!_this.callHandler(_this.props.inputProps.onClick, e))
-                return;
-            _this._openCalendar();
-        };
-        _this.state = _this.getInitialState();
-        return _this;
-    }
-    Datetime.prototype.render = function () {
-        return (_jsxs(ClickableWrapper, { className: this.getClassName(), onClickOut: this._handleClickOutside, children: [this.renderInput(), _jsx("div", { className: "rdtPicker", children: this.renderView() })] }));
-    };
-    Datetime.prototype.renderInput = function () {
-        if (!this.props.input)
-            return;
-        var finalInputProps = __assign(__assign({ type: 'text', className: 'form-control', value: this.getInputValue() }, this.props.inputProps), { onFocus: this._onInputFocus, onChange: this._onInputChange, onKeyDown: this._onInputKeyDown, onClick: this._onInputClick });
-        if (this.props.renderInput) {
-            return _jsx("div", { children: this.props.renderInput(finalInputProps, this._openCalendar, this._closeCalendar) });
-        }
-        return _jsx("input", __assign({}, finalInputProps));
-    };
-    Datetime.prototype.renderView = function () {
-        return this.props.renderView(this.state.currentView, this._renderCalendar);
-    };
-    Datetime.prototype.getInitialState = function () {
-        var props = this.props;
-        var inputFormat = this.getFormat('datetime');
-        var selectedDate = this.parseDate(props.value || props.initialValue, inputFormat);
-        this.checkTZ();
-        return {
-            open: !props.input,
-            currentView: props.initialViewMode || this.getInitialView(),
-            viewDate: this.getInitialViewDate(selectedDate),
-            selectedDate: selectedDate && selectedDate.isValid() ? selectedDate : undefined,
-            inputValue: this.getInitialInputValue(selectedDate)
-        };
-    };
-    Datetime.prototype.getInitialViewDate = function (selectedDate) {
-        var propDate = this.props.initialViewDate;
-        var viewDate;
-        if (propDate) {
-            viewDate = this.parseDate(propDate, this.getFormat('datetime'));
-            if (viewDate && viewDate.isValid()) {
-                return viewDate;
-            }
-            else {
-                console.log('The initialViewDated given "' + propDate + '" is not valid. Using current date instead.');
-            }
-        }
-        else if (selectedDate && selectedDate.isValid()) {
-            return selectedDate.clone();
-        }
-        return this.getInitialDate();
-    };
-    Datetime.prototype.getInitialDate = function () {
-        var m = this.localMoment();
-        m.hour(0).minute(0).second(0).millisecond(0);
-        return m;
-    };
-    Datetime.prototype.getInitialView = function () {
-        var dateFormat = this.getFormat('date');
-        return dateFormat ? this.getUpdateOn(dateFormat) : viewModes.TIME;
-    };
-    Datetime.prototype.parseDate = function (date, dateFormat) {
-        var parsedDate;
-        if (date && typeof date === 'string')
-            parsedDate = this.localMoment(date, dateFormat);
-        else if (date)
-            parsedDate = this.localMoment(date);
-        if (parsedDate && !parsedDate.isValid())
-            parsedDate = null;
-        return parsedDate;
-    };
-    Datetime.prototype.getClassName = function () {
-        var cn = 'rdt';
-        var props = this.props;
-        var propCn = props.className;
-        if (Array.isArray(propCn)) {
-            cn += ' ' + propCn.join(' ');
-        }
-        else if (propCn) {
-            cn += ' ' + propCn;
-        }
-        if (!props.input) {
-            cn += ' rdtStatic';
-        }
-        if (this.isOpen()) {
-            cn += ' rdtOpen';
-        }
-        return cn;
-    };
-    Datetime.prototype.isOpen = function () {
-        return !this.props.input || (this.props.open === undefined ? this.state.open : this.props.open);
-    };
-    Datetime.prototype.getUpdateOn = function (dateFormat) {
-        if (this.props.updateOnView) {
-            return this.props.updateOnView;
-        }
-        if (dateFormat.match(/[lLD]/)) {
-            return viewModes.DAYS;
-        }
-        if (dateFormat.indexOf('M') !== -1) {
-            return viewModes.MONTHS;
-        }
-        if (dateFormat.indexOf('Y') !== -1) {
-            return viewModes.YEARS;
-        }
-        return viewModes.DAYS;
-    };
-    Datetime.prototype.getLocaleData = function () {
-        var p = this.props;
-        return this.localMoment(p.value || p.defaultValue || new Date()).localeData();
-    };
-    Datetime.prototype.getDateFormat = function () {
-        var locale = this.getLocaleData();
-        var format = this.props.dateFormat;
-        if (format === true)
-            return locale.longDateFormat('L');
-        if (format)
-            return format;
-        return '';
-    };
-    Datetime.prototype.getTimeFormat = function () {
-        var locale = this.getLocaleData();
-        var format = this.props.timeFormat;
-        if (format === true) {
-            return locale.longDateFormat('LT');
-        }
-        return format || '';
-    };
-    Datetime.prototype.getFormat = function (type) {
-        if (type === 'date') {
-            return this.getDateFormat();
-        }
-        else if (type === 'time') {
-            return this.getTimeFormat();
-        }
-        var dateFormat = this.getDateFormat();
-        var timeFormat = this.getTimeFormat();
-        return dateFormat && timeFormat ? dateFormat + ' ' + timeFormat : dateFormat || timeFormat;
-    };
-    Datetime.prototype.updateTime = function (op, amount, type, toSelected) {
-        var update = {};
-        var date = toSelected ? 'selectedDate' : 'viewDate';
-        update[date] = this.state[date].clone()[op](amount, type);
-        this.setState(update);
-    };
-    Datetime.prototype.localMoment = function (date, format, props) {
-        props = props || this.props;
-        var m = null;
-        if (props.utc) {
-            m = moment.utc(date, format, props.strictParsing);
-        }
-        else if (props.displayTimeZone) {
-            m = moment.tz(date, format, props.displayTimeZone);
-        }
-        else {
-            m = moment(date, format, props.strictParsing);
-        }
-        if (props.locale)
-            m.locale(props.locale);
-        return m;
-    };
-    Datetime.prototype.checkTZ = function () {
-        var displayTimeZone = this.props.displayTimeZone;
-        if (displayTimeZone && !this.tzWarning && !moment.tz) {
-            this.tzWarning = true;
-        }
-    };
-    Datetime.prototype.componentDidUpdate = function (prevProps) {
-        if (prevProps === this.props)
-            return;
-        var needsUpdate = false;
-        var thisProps = this.props;
-        ['locale', 'utc', 'displayZone', 'dateFormat', 'timeFormat'].forEach(function (p) {
-            prevProps[p] !== thisProps[p] && (needsUpdate = true);
-        });
-        if (needsUpdate) {
-            this.regenerateDates();
-        }
-        if (thisProps.value && thisProps.value !== prevProps.value) {
-            this.setViewDate(thisProps.value);
-        }
-        this.checkTZ();
-    };
-    Datetime.prototype.regenerateDates = function () {
-        var props = this.props;
-        var viewDate = this.state.viewDate.clone();
-        var selectedDate = this.state.selectedDate && this.state.selectedDate.clone();
-        if (props.locale) {
-            viewDate.locale(props.locale);
-            selectedDate && selectedDate.locale(props.locale);
-        }
-        if (props.utc) {
-            viewDate.utc();
-            selectedDate && selectedDate.utc();
-        }
-        else if (props.displayTimeZone) {
-            viewDate.tz(props.displayTimeZone);
-            selectedDate && selectedDate.tz(props.displayTimeZone);
-        }
-        else {
-            viewDate.locale();
-            selectedDate && selectedDate.locale();
-        }
-        var update = { viewDate: viewDate, selectedDate: selectedDate };
-        if (selectedDate && selectedDate.isValid()) {
-            update.inputValue = selectedDate.format(this.getFormat('datetime'));
-        }
-        this.setState(update);
-    };
-    Datetime.prototype.getSelectedDate = function () {
-        if (this.props.value === undefined)
-            return this.state.selectedDate;
-        var selectedDate = this.parseDate(this.props.value, this.getFormat('datetime'));
-        return selectedDate && selectedDate.isValid() ? selectedDate : false;
-    };
-    Datetime.prototype.getInitialInputValue = function (selectedDate) {
-        var props = this.props;
-        if (props.inputProps.value)
-            return props.inputProps.value;
-        if (selectedDate && selectedDate.isValid())
-            return selectedDate.format(this.getFormat('datetime'));
-        if (props.value && typeof props.value === 'string')
-            return props.value;
-        if (props.initialValue && typeof props.initialValue === 'string')
-            return props.initialValue;
-        return '';
-    };
-    Datetime.prototype.getInputValue = function () {
-        var selectedDate = this.getSelectedDate();
-        return selectedDate ? selectedDate.format(this.getFormat('datetime')) : this.state.inputValue;
-    };
-    /**
-     * Set the date that is currently shown in the calendar.
-     * This is independent from the selected date and it's the one used to navigate through months or days in the calendar.
-     * @param dateType date
-     * @public
-     */
-    Datetime.prototype.setViewDate = function (date) {
-        var logError = function () {
-            return console.log('Invalid date passed to the `setViewDate` method: ' + date);
-        };
-        if (!date)
-            return logError();
-        var viewDate;
-        if (typeof date === 'string') {
-            viewDate = this.localMoment(date, this.getFormat('datetime'));
-        }
-        else {
-            viewDate = this.localMoment(date);
-        }
-        if (!viewDate || !viewDate.isValid())
-            return logError();
-        this.setState({ viewDate: viewDate });
-    };
-    /**
-     * Set the view currently shown by the calendar. View modes shipped with react-datetime are 'years', 'months', 'days' and 'time'.
-     * @param TYPES.string mode
-     */
-    Datetime.prototype.navigate = function (mode) {
-        this._showView(mode);
-    };
-    Datetime.prototype.callHandler = function (method, e) {
-        if (!method)
-            return true;
-        return method(e) !== false;
-    };
-    Datetime.defaultProps = {
-        onOpen: nofn,
-        onClose: nofn,
-        onCalendarOpen: nofn,
-        onCalendarClose: nofn,
-        onChange: nofn,
-        onNavigate: nofn,
-        onBeforeNavigate: function (next) {
-            return next;
-        },
-        onNavigateBack: nofn,
-        onNavigateForward: nofn,
-        dateFormat: true,
-        timeFormat: true,
-        utc: false,
-        className: '',
-        input: true,
-        inputProps: {},
-        timeConstraints: {},
-        isValidDate: function () {
-            return true;
-        },
-        strictParsing: true,
-        closeOnSelect: false,
-        closeOnTab: true,
-        closeOnClickOutside: true,
-        renderView: function (_, renderFunc) { return renderFunc(); }
-    };
-    // Make moment accessible through the Datetime class
-    Datetime.moment = moment;
-    return Datetime;
-}(React.Component));
-export default Datetime;
-var ClickOutBase = /** @class */ (function (_super) {
-    __extends(ClickOutBase, _super);
-    function ClickOutBase() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.container = React.createRef();
-        return _this;
-    }
-    ClickOutBase.prototype.render = function () {
-        return (_jsx("div", { className: this.props.className, ref: this.container, children: this.props.children }));
-    };
-    ClickOutBase.prototype.handleClickOutside = function (e) {
-        this.props.onClickOut(e);
-    };
-    ClickOutBase.prototype.setClickOutsideRef = function () {
-        return this.container.current;
-    };
-    return ClickOutBase;
-}(React.Component));
-var ClickableWrapper = onClickOutside(ClickOutBase);

package/ui/Elements/DatePicker/Datetime/components/DateRepeater.js

@@ -1,31 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback } from 'react';
-import Icon from '../../../Icon';
-import { DatePickerRepeatTrans } from '../../utils/constants';
-import { DatePickerRepeat } from '../types';
-import { i18n } from '@lingui/core';
-import { x } from '@xstyled/styled-components';
-import { FooterRow } from './FooterRow';
-import { FooterRowLabel } from './FooterRowLabel';
-export var DateRepeater = function (_a) {
-    var onChangeOthers = _a.onChangeOthers, others = _a.others, reset = _a.reset;
-    var handleChange = useCallback(function (e) {
-        var dateTypeRepeater = e.target.value;
-        if (!dateTypeRepeater) {
-            reset();
-        }
-        onChangeOthers === null || onChangeOthers === void 0 ? void 0 : onChangeOthers(__assign(__assign({}, others), { dateTypeRepeater: dateTypeRepeater }));
-    }, [onChangeOthers, reset, others]);
-    return (_jsx(x.div, { borderTop: "1px solid", borderColor: "lightGray2", mt: "8px", pt: "8px", mb: "8px", children: _jsxs(FooterRow, { children: [_jsxs(x.div, { display: "flex", alignItems: "center", flex: "1", children: [_jsx(Icon, { icon: "calendar" }), _jsx(FooterRowLabel, { children: i18n._({ id: 'dataGrid.repeat', message: 'Repeat' }) })] }), _jsxs(x.select, { textAlign: "right", onChange: handleChange, value: others === null || others === void 0 ? void 0 : others.dateTypeRepeater, background: "white", cursor: "pointer", border: "none", children: [_jsx("option", { value: "", children: i18n._({ id: 'dataGrid.noRepeat', message: 'No repeat' }) }), _jsx("option", { value: DatePickerRepeat.EVERY_TODAY, children: DatePickerRepeatTrans[DatePickerRepeat.EVERY_TODAY] }), _jsx("option", { value: DatePickerRepeat.EVERY_YESTERDAY, children: DatePickerRepeatTrans[DatePickerRepeat.EVERY_YESTERDAY] })] })] }) }));
-};

package/ui/Elements/DatePicker/Datetime/components/FooterRow.js

@@ -1,10 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import { styled } from '@xstyled/styled-components';
-export var FooterRow = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  font-size: 15px;\n  line-height: 23px;\n  opacity: ", ";\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  font-size: 15px;\n  line-height: 23px;\n  opacity: ", ";\n"])), function (_a) {
-    var disabled = _a.disabled;
-    return (disabled ? 0.2 : 1);
-});
-var templateObject_1;

package/ui/Elements/DatePicker/Datetime/components/FooterRowLabel.js

@@ -1,7 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import styled from '@xstyled/styled-components';
-export var FooterRowLabel = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-left: 8px;\n  text-align: left;\n  width: 100%;\n\n  &[data-value] {\n    cursor: pointer;\n    &:hover {\n      font-weight: 500;\n    }\n  }\n"], ["\n  margin-left: 8px;\n  text-align: left;\n  width: 100%;\n\n  &[data-value] {\n    cursor: pointer;\n    &:hover {\n      font-weight: 500;\n    }\n  }\n"])));
-var templateObject_1;

package/ui/Elements/DatePicker/Datetime/components/TimeInput.js

@@ -1,7 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import styled from '@xstyled/styled-components';
-export var TimeInput = styled.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: 0;\n  margin-right: -1px;\n  padding: 0;\n  border: none;\n  outline: none;\n  color: blue2;\n\n  &::-webkit-calendar-picker-indicator {\n    display: none;\n  }\n"], ["\n  margin: 0;\n  margin-right: -1px;\n  padding: 0;\n  border: none;\n  outline: none;\n  color: blue2;\n\n  &::-webkit-calendar-picker-indicator {\n    display: none;\n  }\n"])));
-var templateObject_1;

package/ui/Elements/DatePicker/Datetime/components/Timepicker.js

@@ -1,67 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useState } from 'react';
-import Icon from '../../../Icon/Icon';
-import { i18n } from '@lingui/core';
-import styled, { x } from '@xstyled/styled-components';
-import { th } from '@xstyled/system';
-import { FooterRow } from './FooterRow';
-import { FooterRowLabel } from './FooterRowLabel';
-var Btn = styled.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  transform: rotate(90deg);\n  font-size: 18px;\n  margin: -4px 0;\n  background-color: transparent !important;\n  border: none;\n  color: ", ";\n  &:disabled:hover {\n    color: ", ";\n    cursor: default;\n  }\n  &:hover {\n    color: ", ";\n    background-color: transparent !important;\n  }\n"], ["\n  transform: rotate(90deg);\n  font-size: 18px;\n  margin: -4px 0;\n  background-color: transparent !important;\n  border: none;\n  color: ", ";\n  &:disabled:hover {\n    color: ", ";\n    cursor: default;\n  }\n  &:hover {\n    color: ", ";\n    background-color: transparent !important;\n  }\n"])), th('colors.lightGray4'), th('colors.lightGray4'), th('colors.red2'));
-var TimeWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: baseline;\n  justify-content: center;\n  border: 1px solid ", ";\n  border-radius: 6px;\n  padding: 0 4px;\n  margin: 0 4px;\n"], ["\n  display: flex;\n  align-items: baseline;\n  justify-content: center;\n  border: 1px solid ", ";\n  border-radius: 6px;\n  padding: 0 4px;\n  margin: 0 4px;\n"])), th('colors.lightGray2'));
-var Hours = styled.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-size: 14px;\n  font-weight: 600;\n  width: 17px;\n  margin: 0;\n  padding: 0;\n  border: none;\n  outline: none;\n  &:disabled {\n    opacity: 0.5;\n  }\n"], ["\n  font-size: 14px;\n  font-weight: 600;\n  width: 17px;\n  margin: 0;\n  padding: 0;\n  border: none;\n  outline: none;\n  &:disabled {\n    opacity: 0.5;\n  }\n"])));
-var Minutes = styled.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-weight: 600;\n  font-size: 14px;\n  width: 18px;\n  margin: 0;\n  padding: 0;\n  border: none;\n  outline: none;\n  &:disabled {\n    opacity: 0.5;\n  }\n"], ["\n  font-weight: 600;\n  font-size: 14px;\n  width: 18px;\n  margin: 0;\n  padding: 0;\n  border: none;\n  outline: none;\n  &:disabled {\n    opacity: 0.5;\n  }\n"])));
-var regExp = '^[0-9]*$';
-export var Timepicker = function (_a) {
-    var _b, _c, _d, _e;
-    var setTime = _a.setTime, value = _a.value, disabled = _a.disabled;
-    var initialHours = (_c = (_b = value === null || value === void 0 ? void 0 : value.getHours) === null || _b === void 0 ? void 0 : _b.call(value)) !== null && _c !== void 0 ? _c : 0;
-    var initialMinutes = (_e = (_d = value === null || value === void 0 ? void 0 : value.getMinutes) === null || _d === void 0 ? void 0 : _d.call(value)) !== null && _e !== void 0 ? _e : 0;
-    var _f = useState(initialHours), hours = _f[0], setHours = _f[1];
-    var _g = useState(initialMinutes), minutes = _g[0], setMinutes = _g[1];
-    var increaseHour = useCallback(function () {
-        setHours(function (prev) { return (prev + 1) % 24; });
-    }, []);
-    var decreaseHour = useCallback(function () {
-        setHours(function (prev) { return (prev === 0 ? 23 : prev - 1); });
-    }, []);
-    var increaseMinutes = useCallback(function () {
-        setMinutes(function (prev) { return (prev + 5) % 60; });
-    }, []);
-    var decreaseMinutes = useCallback(function () {
-        setMinutes(function (prev) { return (prev - 5 + 60) % 60; });
-    }, []);
-    var onHoursChange = useCallback(function (e) {
-        if (e.target.value.match(regExp) && Number(e.target.value) <= 23) {
-            setHours(Number(e.target.value));
-        }
-        else {
-            setHours(0);
-        }
-    }, []);
-    var onMinutesChange = useCallback(function (e) {
-        if (e.target.value.match(regExp) && Number(e.target.value) <= 59) {
-            setMinutes(Number(e.target.value));
-        }
-        else {
-            setMinutes(0);
-        }
-    }, []);
-    useEffect(function () {
-        !!value && setTime('hours', hours);
-    }, [hours]);
-    useEffect(function () {
-        !!value && setTime('minutes', minutes);
-    }, [minutes]);
-    useEffect(function () {
-        setHours(initialHours);
-    }, [initialHours]);
-    useEffect(function () {
-        setMinutes(initialMinutes);
-    }, [initialMinutes]);
-    return (_jsxs(FooterRow, { disabled: disabled, children: [_jsxs("div", { children: [_jsx(Icon, { icon: "clock" }), _jsx(FooterRowLabel, { children: i18n._({ id: 'dataGrid.filterCell.time', message: 'Time' }) })] }), _jsx(x.div, { display: "flex", flexDirection: "column", alignItems: "flex-start", pt: "4px", w: "fit-content", children: _jsxs(x.div, { display: "flex", alignItems: "center", children: [_jsxs(x.div, { display: "flex", flexDirection: "column", children: [_jsx(Btn, { disabled: disabled, onClick: increaseHour, type: "button", children: "\u2039" }), _jsx(Btn, { disabled: disabled, onClick: decreaseHour, type: "button", children: "\u203A" })] }), _jsxs(TimeWrapper, { children: [_jsx(Hours, { value: String(hours).padStart(2, '0'), disabled: disabled, onChange: onHoursChange }), _jsx(x.div, { mx: "1px", children: ":" }), _jsx(Minutes, { value: String(minutes).padStart(2, '0'), disabled: disabled, onChange: onMinutesChange })] }), _jsxs(x.div, { display: "flex", flexDirection: "column", children: [_jsx(Btn, { disabled: disabled, onClick: increaseMinutes, type: "button", children: "\u2039" }), _jsx(Btn, { disabled: disabled, onClick: decreaseMinutes, type: "button", children: "\u203A" })] })] }) })] }));
-};
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/ui/Elements/DatePicker/Datetime/components/ViewNavigation.js

@@ -1,16 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function ViewNavigation(_a) {
-    var onClickPrev = _a.onClickPrev, onClickSwitch = _a.onClickSwitch, onClickNext = _a.onClickNext, switchContent = _a.switchContent, switchColSpan = _a.switchColSpan, switchProps = _a.switchProps, label = _a.label;
-    return (_jsxs("tr", { children: [_jsx("th", { className: "rdtPrev", onClick: onClickPrev, children: _jsx("span", { children: "\u2039" }) }), _jsx("th", __assign({ className: "rdtSwitch", colSpan: switchColSpan, onClick: onClickSwitch }, switchProps, { children: switchContent })), _jsx("th", { className: "rdtNext", onClick: onClickNext, children: _jsx("span", { children: "\u203A" }) }), _jsx("th", { colSpan: 2, className: "rdtLabel", children: label && label })] }));
-}