@mailstep/design-system 0.8.26 → 0.8.27

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

@@ -0,0 +1,730 @@
+function _assert_this_initialized(self) {
+    if (self === void 0) {
+        throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+    }
+    return self;
+}
+function _call_super(_this, derived, args) {
+    derived = _get_prototype_of(derived);
+    return _possible_constructor_return(_this, _is_native_reflect_construct() ? Reflect.construct(derived, args || [], _get_prototype_of(_this).constructor) : derived.apply(_this, args));
+}
+function _class_call_check(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+        throw new TypeError("Cannot call a class as a function");
+    }
+}
+function _defineProperties(target, props) {
+    for(var i = 0; i < props.length; i++){
+        var descriptor = props[i];
+        descriptor.enumerable = descriptor.enumerable || false;
+        descriptor.configurable = true;
+        if ("value" in descriptor) descriptor.writable = true;
+        Object.defineProperty(target, descriptor.key, descriptor);
+    }
+}
+function _create_class(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) _defineProperties(Constructor, staticProps);
+    return Constructor;
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _get_prototype_of(o) {
+    _get_prototype_of = Object.setPrototypeOf ? Object.getPrototypeOf : function getPrototypeOf(o) {
+        return o.__proto__ || Object.getPrototypeOf(o);
+    };
+    return _get_prototype_of(o);
+}
+function _inherits(subClass, superClass) {
+    if (typeof superClass !== "function" && superClass !== null) {
+        throw new TypeError("Super expression must either be null or a function");
+    }
+    subClass.prototype = Object.create(superClass && superClass.prototype, {
+        constructor: {
+            value: subClass,
+            writable: true,
+            configurable: true
+        }
+    });
+    if (superClass) _set_prototype_of(subClass, superClass);
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _possible_constructor_return(self, call) {
+    if (call && (_type_of(call) === "object" || typeof call === "function")) {
+        return call;
+    }
+    return _assert_this_initialized(self);
+}
+function _set_prototype_of(o, p) {
+    _set_prototype_of = Object.setPrototypeOf || function setPrototypeOf(o, p) {
+        o.__proto__ = p;
+        return o;
+    };
+    return _set_prototype_of(o, p);
+}
+function _type_of(obj) {
+    "@swc/helpers - typeof";
+    return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
+}
+function _is_native_reflect_construct() {
+    try {
+        var result = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {}));
+    } catch (_) {}
+    return (_is_native_reflect_construct = function() {
+        return !!result;
+    })();
+}
+import { jsx, jsxs } from "react/jsx-runtime";
+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 nofn() {};
+var Datetime = /*#__PURE__*/ function(_React_Component) {
+    "use strict";
+    _inherits(Datetime, _React_Component);
+    function Datetime(props) {
+        _class_call_check(this, Datetime);
+        var _this;
+        _this = _call_super(this, Datetime, [
+            props
+        ]);
+        _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
+            };
+            switch(state.currentView){
+                case viewModes.YEARS:
+                    viewProps.renderYear = _$props.renderYear;
+                    return /* @__PURE__ */ jsx(YearsView, _object_spread({}, viewProps));
+                case viewModes.MONTHS:
+                    viewProps.renderMonth = _$props.renderMonth;
+                    return /* @__PURE__ */ jsx(MonthsView, _object_spread({}, viewProps));
+                case viewModes.DAYS:
+                    viewProps.renderDay = _$props.renderDay;
+                    viewProps.timeFormat = _this.getFormat("time");
+                    viewProps.setTime = _this._setTime;
+                    viewProps.value = _this.props.value;
+                    viewProps.disabled = _this.props.disabled;
+                    return /* @__PURE__ */ jsx(DaysView, _object_spread({}, viewProps));
+                default:
+                    viewProps.renderDay = _$props.renderDay;
+                    viewProps.timeFormat = _this.getFormat("time");
+                    viewProps.setTime = _this._setTime;
+                    viewProps.value = _this.props.value;
+                    return /* @__PURE__ */ jsx(DaysView, _object_spread({}, 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();
+            viewDate[_this.viewToMethod[currentView]](parseInt(e.target.getAttribute("data-value"), 10));
+            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 === void 0 && _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();
+            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(void 0);
+        };
+        _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 === void 0 && _$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) {
+            if (!_this.callHandler(_this.props.inputProps.onClick, e)) return;
+            _this._openCalendar();
+        };
+        _this.state = _this.getInitialState();
+        return _this;
+    }
+    _create_class(Datetime, [
+        {
+            key: "render",
+            value: function render() {
+                return /* @__PURE__ */ jsxs(ClickableWrapper, {
+                    className: this.getClassName(),
+                    onClickOut: this._handleClickOutside,
+                    children: [
+                        this.renderInput(),
+                        /* @__PURE__ */ jsx("div", {
+                            className: "rdtPicker",
+                            children: this.renderView()
+                        })
+                    ]
+                });
+            }
+        },
+        {
+            key: "renderInput",
+            value: function renderInput() {
+                if (!this.props.input) return;
+                var finalInputProps = _object_spread_props(_object_spread({
+                    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 /* @__PURE__ */ jsx("div", {
+                        children: this.props.renderInput(finalInputProps, this._openCalendar, this._closeCalendar)
+                    });
+                }
+                return /* @__PURE__ */ jsx("input", _object_spread({}, finalInputProps));
+            }
+        },
+        {
+            key: "renderView",
+            value: function renderView() {
+                return this.props.renderView(this.state.currentView, this._renderCalendar);
+            }
+        },
+        {
+            key: "getInitialState",
+            value: function getInitialState() {
+                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 : void 0,
+                    inputValue: this.getInitialInputValue(selectedDate)
+                };
+            }
+        },
+        {
+            key: "getInitialViewDate",
+            value: function getInitialViewDate(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();
+            }
+        },
+        {
+            key: "getInitialDate",
+            value: function getInitialDate() {
+                var m = this.localMoment();
+                m.hour(0).minute(0).second(0).millisecond(0);
+                return m;
+            }
+        },
+        {
+            key: "getInitialView",
+            value: function getInitialView() {
+                var dateFormat = this.getFormat("date");
+                return dateFormat ? this.getUpdateOn(dateFormat) : viewModes.TIME;
+            }
+        },
+        {
+            key: "parseDate",
+            value: function parseDate(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;
+            }
+        },
+        {
+            key: "getClassName",
+            value: function getClassName() {
+                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;
+            }
+        },
+        {
+            key: "isOpen",
+            value: function isOpen() {
+                return !this.props.input || (this.props.open === void 0 ? this.state.open : this.props.open);
+            }
+        },
+        {
+            key: "getUpdateOn",
+            value: function getUpdateOn(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;
+            }
+        },
+        {
+            key: "getLocaleData",
+            value: function getLocaleData() {
+                var p = this.props;
+                return this.localMoment(p.value || p.defaultValue || /* @__PURE__ */ new Date()).localeData();
+            }
+        },
+        {
+            key: "getDateFormat",
+            value: function getDateFormat() {
+                var locale = this.getLocaleData();
+                var format = this.props.dateFormat;
+                if (format === true) return locale.longDateFormat("L");
+                if (format) return format;
+                return "";
+            }
+        },
+        {
+            key: "getTimeFormat",
+            value: function getTimeFormat() {
+                var locale = this.getLocaleData();
+                var format = this.props.timeFormat;
+                if (format === true) {
+                    return locale.longDateFormat("LT");
+                }
+                return format || "";
+            }
+        },
+        {
+            key: "getFormat",
+            value: function getFormat(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;
+            }
+        },
+        {
+            key: "updateTime",
+            value: function updateTime(op, amount, type, toSelected) {
+                var update = {};
+                var date = toSelected ? "selectedDate" : "viewDate";
+                update[date] = this.state[date].clone()[op](amount, type);
+                this.setState(update);
+            }
+        },
+        {
+            key: "localMoment",
+            value: function localMoment(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;
+            }
+        },
+        {
+            key: "checkTZ",
+            value: function checkTZ() {
+                var displayTimeZone = this.props.displayTimeZone;
+                if (displayTimeZone && !this.tzWarning && !moment.tz) {
+                    this.tzWarning = true;
+                }
+            }
+        },
+        {
+            key: "componentDidUpdate",
+            value: function componentDidUpdate(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();
+            }
+        },
+        {
+            key: "regenerateDates",
+            value: function regenerateDates() {
+                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);
+            }
+        },
+        {
+            key: "getSelectedDate",
+            value: function getSelectedDate() {
+                if (this.props.value === void 0) return this.state.selectedDate;
+                var selectedDate = this.parseDate(this.props.value, this.getFormat("datetime"));
+                return selectedDate && selectedDate.isValid() ? selectedDate : false;
+            }
+        },
+        {
+            key: "getInitialInputValue",
+            value: function getInitialInputValue(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 "";
+            }
+        },
+        {
+            key: "getInputValue",
+            value: function getInputValue() {
+                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
+   */ key: "setViewDate",
+            value: function setViewDate(date) {
+                var logError = function logError() {
+                    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
+   */ key: "navigate",
+            value: function navigate(mode) {
+                this._showView(mode);
+            }
+        },
+        {
+            key: "callHandler",
+            value: function callHandler(method, e) {
+                if (!method) return true;
+                return method(e) !== false;
+            }
+        }
+    ]);
+    return Datetime;
+}(React.Component);
+Datetime.defaultProps = {
+    onOpen: nofn,
+    onClose: nofn,
+    onCalendarOpen: nofn,
+    onCalendarClose: nofn,
+    onChange: nofn,
+    onNavigate: nofn,
+    onBeforeNavigate: function onBeforeNavigate(next) {
+        return next;
+    },
+    onNavigateBack: nofn,
+    onNavigateForward: nofn,
+    dateFormat: true,
+    timeFormat: true,
+    utc: false,
+    className: "",
+    input: true,
+    inputProps: {},
+    timeConstraints: {},
+    isValidDate: function isValidDate() {
+        return true;
+    },
+    strictParsing: true,
+    closeOnSelect: false,
+    closeOnTab: true,
+    closeOnClickOutside: true,
+    renderView: function renderView(_, renderFunc) {
+        return renderFunc();
+    }
+};
+// Make moment accessible through the Datetime class
+Datetime.moment = moment;
+var ClickOutBase = /*#__PURE__*/ function(_React_Component) {
+    "use strict";
+    _inherits(ClickOutBase, _React_Component);
+    function ClickOutBase() {
+        _class_call_check(this, ClickOutBase);
+        var _this;
+        _this = _call_super(this, ClickOutBase, arguments);
+        _this.container = React.createRef();
+        return _this;
+    }
+    _create_class(ClickOutBase, [
+        {
+            key: "render",
+            value: function render() {
+                return /* @__PURE__ */ jsx("div", {
+                    className: this.props.className,
+                    ref: this.container,
+                    children: this.props.children
+                });
+            }
+        },
+        {
+            key: "handleClickOutside",
+            value: function handleClickOutside(e) {
+                this.props.onClickOut(e);
+            }
+        },
+        {
+            key: "setClickOutsideRef",
+            value: function setClickOutsideRef() {
+                return this.container.current;
+            }
+        }
+    ]);
+    return ClickOutBase;
+}(React.Component);
+var ClickableWrapper = onClickOutside(ClickOutBase);
+export { Datetime as default };