d2coreui 21.0.33 → 23.0.0

package/components/date/dateTimeInput.js

@@ -1,419 +1,447 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React from "react";
-import MaskedInput from "../input/maskedInput";
-import padStart from 'lodash/padStart';
-import isEqual from 'lodash/isEqual';
-import debounce from 'lodash/debounce';
-import moment from "moment";
-import { CalendarOutlined } from "@ant-design/icons";
-import { Button, Calendar, Select, Tooltip } from "antd";
-import { Key } from "ts-key-enum";
-import { D2000UnixTimeNullValue } from "d2core/types/unixTimeUtils";
-const DATE_TIME_DATA_MAP = [
-    { key: "SSS", min: 0, max: 999, unit: "ms" },
-    { key: "ss", min: 0, max: 59, unit: "s" },
-    { key: "mm", min: 0, max: 59, unit: "m" },
-    { key: "HH", min: 0, max: 23, unit: "h" },
-    { key: ["YYYY", "YY"], min: [1900, 0], max: [9999, 99], unit: "y" },
-    { key: "MM", min: 1, max: 12, unit: "M" },
-    { key: "DD", min: 1, max: 31, unit: "d" },
-];
-const MIN_TIME = moment.unix(0);
-const MAX_TIME = moment().add(1000, "year");
-export function allowDatesBeforeEpoch() {
-    DATE_TIME_DATA_MAP[4].min = 1902;
-}
-export default class DateTimeInput extends React.Component {
-    constructor(props) {
-        var _a, _b, _c, _d;
-        super(props);
-        this.inputRef = React.createRef();
-        this.today = moment();
-        this.state = {
-            valid: (!!props.value && props.value.isValid()) || (!!props.allowClear && props.value === null),
-            currentPos: null,
-            currentInfo: {
-                info: undefined,
-                time: undefined,
-                length: 0
-            },
-            popupCalendarVisible: false,
-            calendarSelectedDate: (_d = (_b = (_a = props.defaultSelectedDate) === null || _a === void 0 ? void 0 : _a.clone()) !== null && _b !== void 0 ? _b : (_c = props.value) === null || _c === void 0 ? void 0 : _c.clone()) !== null && _d !== void 0 ? _d : moment().startOf('day'),
-            focused: false,
-        };
-        this.recalc = this.recalc.bind(this);
-        this.increment = this.increment.bind(this);
-        this.decrement = this.decrement.bind(this);
-        this.onItemMouseOver = debounce(this.onItemMouseOver.bind(this), 100, { maxWait: 100 });
-    }
-    componentDidUpdate(prevProps, _prevState, _snapshot) {
-        if (!isEqual(prevProps, this.props) && this.inputRef.current !== null) {
-            this.inputRef.current.input.selectionStart = this.state.currentPos;
-            this.inputRef.current.input.selectionEnd = this.state.currentPos;
-            if (prevProps.value !== this.props.value) {
-                this.setState({ valid: (!!this.props.value && this.props.value.isValid()) || (!!this.props.allowClear && this.props.value === null) });
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import MaskedInput from "../input/maskedInput";
+import padStart from 'lodash/padStart';
+import isEqual from 'lodash/isEqual';
+import debounce from 'lodash/debounce';
+import dayjs from "dayjs";
+import { CalendarOutlined } from "@ant-design/icons";
+import { Button, Calendar, Select, Tooltip } from "antd";
+import { Key } from "ts-key-enum";
+import { D2000UnixTimeNullValue } from "d2core/types/unixTimeUtils";
+import { createStyles } from "antd-style";
+import WithCss from "d2coreui/components/style/withCss";
+const useStyles = createStyles(({ token, css, cx }) => {
+    return {
+        dateTimeInputCalendar: css `
+            // adaptations of date-picker calendar styles
+            .ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner:not(.date-picker-item-marked) {
+                color: inherit;
+                background: inherit;
             }
-        }
-    }
-    get input() {
-        var _a;
-        return (_a = this.inputRef.current) === null || _a === void 0 ? void 0 : _a.input;
-    }
-    focus() {
-        var _a;
-        (_a = this.inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    recalc() {
-        if (this.inputRef.current !== null) {
-            this.setState({
-                currentInfo: DateTimeInput.parseDateTimeFormat(this.props.value, this.inputRef.current.input.value, this.props.mask, this.inputRef.current.input.selectionStart),
-                currentPos: this.inputRef.current.input.selectionStart,
-            });
-        }
-    }
-    increment() {
-        var _a;
-        if (this.state.currentInfo.info !== undefined && !!this.props.value && DateTimeInput.isValid(this.state.currentInfo, this.props.value, 1)) {
-            const unit = this.state.currentInfo.info.unit;
-            this.incrementDate(unit);
-        }
-        (_a = this.inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    incrementDate(unit) {
-        var _a, _b, _c, _d, _e;
-        if (!!this.props.value) {
-            this.props.value.add(1, unit);
-            if (!!this.props.maxDateTime && this.props.value.isAfter(this.props.maxDateTime)) {
-                (_b = (_a = this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, (_c = this.props.maxDateTime) === null || _c === void 0 ? void 0 : _c.clone());
+
+            .ant-picker-panel:focus > .ant-picker-date-panel .ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner:before {
+                position: absolute;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                left: 0;
+                z-index: 1;
+                border: 1px solid #096dd9;
+                border-radius: 2px;
+                content: '';
             }
-            else {
-                (_e = (_d = this.props).onChange) === null || _e === void 0 ? void 0 : _e.call(_d, this.props.value.clone());
+
+            .ant-picker-content thead {
+                user-select: none;
             }
-        }
-    }
-    decrement() {
-        var _a;
-        if (this.state.currentInfo.info !== undefined && !!this.props.value && DateTimeInput.isValid(this.state.currentInfo, this.props.value, -1)) {
-            const unit = this.state.currentInfo.info.unit;
-            this.decrementDate(unit);
-        }
-        (_a = this.inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    decrementDate(unit) {
-        var _a, _b, _c, _d, _e;
-        if (!!this.props.value) {
-            this.props.value.subtract(1, unit);
-            if (!!this.props.minDateTime && this.props.value.isBefore(this.props.minDateTime)) {
-                (_b = (_a = this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, (_c = this.props.minDateTime) === null || _c === void 0 ? void 0 : _c.clone());
+
+            .date-picker-item-marked {
+                color: #fff;
+                background: #1890ff;
             }
-            else {
-                (_e = (_d = this.props).onChange) === null || _e === void 0 ? void 0 : _e.call(_d, this.props.value.clone());
+
+            .ant-picker-cell-in-view.ant-picker-cell-today .ant-picker-cell-inner::before {
+                border: 1px solid #13c2c2;
             }
-        }
-    }
-    onItemMouseOver(itemDate) {
-        var _a, _b;
-        (_b = (_a = this.props).onDateItemMouseOver) === null || _b === void 0 ? void 0 : _b.call(_a, itemDate);
-    }
-    renderCalendarNavigation(value) {
-        const start = 0;
-        const end = 12;
-        const monthOptions = [];
-        const current = value.clone();
-        const localeData = value.localeData();
-        const months = [];
-        for (let i = 0; i < 12; i++) {
-            current.month(i);
-            months.push(localeData.months(current));
-        }
-        for (let index = start; index < end; index++) {
-            monthOptions.push(React.createElement(Select.Option, { className: "month-item", key: `${index}`, value: `${index}` }, months[index]));
-        }
-        const month = value.month();
-        const year = value.year();
-        const options = [];
-        for (let i = year - 4; i <= year + 2; i += 1) {
-            options.push(React.createElement(Select.Option, { key: i, value: i, className: "year-item" }, i));
-        }
-        return (React.createElement("div", { style: { paddingBottom: 8 } },
-            React.createElement("div", { style: { float: "left", paddingBottom: 8, width: 140, display: "flex" } },
-                React.createElement(Button, { style: { width: 10, padding: 0 }, size: "small", type: "text", tabIndex: -1, disabled: !DateTimeInput.checkDateValueValidity(this.state.calendarSelectedDate, -1, "month"), onClick: () => {
-                        this.state.calendarSelectedDate.subtract(1, "month");
-                        this.setState({ calendarSelectedDate: this.state.calendarSelectedDate });
-                    }, className: "ant-picker-header-prev-btn" },
-                    React.createElement("span", { className: "ant-picker-prev-icon" })),
-                React.createElement(Select, { style: { flex: "1 1 auto" }, size: "small", dropdownMatchSelectWidth: false, dropdownStyle: { zIndex: 2070 }, getPopupContainer: this.props.getPopupContainer, value: String(month), onChange: selectedMonth => {
-                        const newValue = this.state.calendarSelectedDate.clone();
-                        newValue.month(parseInt(selectedMonth, 10));
-                        this.setState({ calendarSelectedDate: newValue });
-                    } }, monthOptions),
-                React.createElement(Button, { style: { width: 10, padding: 0 }, size: "small", type: "text", tabIndex: -1, className: "ant-picker-header-next-btn", onClick: () => {
-                        this.state.calendarSelectedDate.add(1, "month");
-                        this.setState({ calendarSelectedDate: this.state.calendarSelectedDate });
-                    } },
-                    React.createElement("span", { className: "ant-picker-next-icon" }))),
-            React.createElement("div", { style: { float: "right", paddingBottom: 8, width: 110 } },
-                React.createElement(Button, { style: { width: 12, padding: 0 }, size: "small", type: "text", tabIndex: -1, className: "ant-picker-header-prev-btn", onClick: () => {
-                        this.state.calendarSelectedDate.subtract(1, "year");
-                        this.setState({ calendarSelectedDate: this.state.calendarSelectedDate });
-                    } },
-                    React.createElement("span", { className: "ant-picker-prev-icon" })),
-                React.createElement(Select, { size: "small", style: { width: 84 }, dropdownMatchSelectWidth: false, dropdownStyle: { zIndex: 2070 }, getPopupContainer: this.props.getPopupContainer, onChange: newYear => {
-                        const newValue = this.state.calendarSelectedDate.clone().year(parseInt(newYear, 10));
-                        this.setState({ calendarSelectedDate: newValue });
-                    }, value: String(year) }, options),
-                React.createElement(Button, { style: { width: 12, padding: 0 }, size: "small", type: "text", tabIndex: -1, className: "ant-picker-header-next-btn", onClick: () => {
-                        this.state.calendarSelectedDate.add(1, "year");
-                        this.setState({ calendarSelectedDate: this.state.calendarSelectedDate });
-                    } },
-                    React.createElement("span", { className: "ant-picker-next-icon" })))));
-    }
-    renderCalendar() {
-        var _a, _b;
-        return (React.createElement("div", { onKeyDown: !this.props.ignoreKeyStrokes ? (e) => {
-                var _a, _b, _c, _d;
-                if (e.key === Key.Enter) {
-                    var tagName = (_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toLowerCase();
-                    if (tagName !== "input") {
-                        (_d = (_c = this.props).onChange) === null || _d === void 0 ? void 0 : _d.call(_c, this.state.calendarSelectedDate);
-                    }
-                }
-            } : undefined, onMouseOver: (e) => {
-                if (e.target instanceof HTMLTableCellElement) {
-                    const date = moment(e.target.title, "YYYY-MM-DD");
-                    this.onItemMouseOver(date);
-                }
-            } },
-            React.createElement(Calendar, { fullscreen: false, style: this.props.renderAsCalendar ? this.props.style : undefined, dateFullCellRender: ((date) => {
-                    let className = date.isSame(this.today, "date") ? 'ant-picker-cell-inner ant-picker-calendar-date ant-picker-calendar-date-today' : 'ant-picker-cell-inner ant-picker-calendar-date';
-                    const markedDateInterval = this.props.markedDateInterval;
-                    if (markedDateInterval && (markedDateInterval[0].isBefore(date) || markedDateInterval[0].isSame(date, "millisecond")) &&
-                        (markedDateInterval[1].isAfter(date) || markedDateInterval[1].isSame(date, "millisecond"))) {
-                        className += " date-picker-item-marked";
-                    }
-                    else if (date.isSame(this.props.value, "date")) {
-                        className += " date-picker-item-marked";
-                    }
-                    return (React.createElement("div", { className: className, style: { userSelect: "none" }, onKeyDown: (e) => {
-                            var _a, _b, _c, _d;
-                            if (e.key === Key.Enter) {
-                                let newValue = (_b = (_a = this.props.value) === null || _a === void 0 ? void 0 : _a.clone()) !== null && _b !== void 0 ? _b : moment().startOf("day");
-                                newValue = newValue.year(date.year()).month(date.month()).date(date.date());
-                                (_d = (_c = this.props).onChange) === null || _d === void 0 ? void 0 : _d.call(_c, date);
-                            }
-                        }, onMouseDown: () => {
-                            var _a, _b, _c, _d;
-                            let newValue = (_b = (_a = this.props.value) === null || _a === void 0 ? void 0 : _a.clone()) !== null && _b !== void 0 ? _b : moment().startOf("day");
-                            newValue = newValue.year(date.year()).month(date.month()).date(date.date());
-                            (_d = (_c = this.props).onDateItemMouseDown) === null || _d === void 0 ? void 0 : _d.call(_c, newValue);
-                        }, onMouseUp: () => {
-                            var _a, _b, _c, _d;
-                            let newValue = (_b = (_a = this.props.value) === null || _a === void 0 ? void 0 : _a.clone()) !== null && _b !== void 0 ? _b : moment().startOf("day");
-                            newValue = newValue.year(date.year()).month(date.month()).date(date.date());
-                            (_d = (_c = this.props).onDateItemMouseUp) === null || _d === void 0 ? void 0 : _d.call(_c, newValue);
-                        } },
-                        React.createElement("div", { className: `ant-picker-calendar-date-value` }, padStart("" + date.date(), 2, '0')),
-                        React.createElement("div", { className: `ant-picker-calendar-date-content` })));
-                }), headerRender: ({ value }) => {
-                    return this.renderCalendarNavigation(value);
-                }, value: this.state.calendarSelectedDate, validRange: [(_a = this.props.minDateTime) !== null && _a !== void 0 ? _a : MIN_TIME, (_b = this.props.maxDateTime) !== null && _b !== void 0 ? _b : MAX_TIME], onSelect: (value) => {
-                    var _a, _b, _c, _d;
-                    if (window.event instanceof MouseEvent) {
-                        let newValue = (_b = (_a = this.props.value) === null || _a === void 0 ? void 0 : _a.clone()) !== null && _b !== void 0 ? _b : moment().startOf("day");
-                        newValue = newValue.year(value.year()).month(value.month()).date(value.date());
-                        (_d = (_c = this.props).onChange) === null || _d === void 0 ? void 0 : _d.call(_c, newValue);
-                    }
-                    this.setState({ calendarSelectedDate: value, popupCalendarVisible: false });
-                } })));
-    }
-    renderInput() {
-        var _a;
-        const _b = this.props, { mask, value, onChange, onInvalidValue, style, disabled, inputDisabled, bordered, hidePopup, renderAsCalendar, allowClear, minDateTime, maxDateTime, onDateItemMouseDown, onDateItemMouseOver, onDateItemMouseUp, markedDateInterval, inputStyle, getPopupContainer, autoFocus, className } = _b, props = __rest(_b, ["mask", "value", "onChange", "onInvalidValue", "style", "disabled", "inputDisabled", "bordered", "hidePopup", "renderAsCalendar", "allowClear", "minDateTime", "maxDateTime", "onDateItemMouseDown", "onDateItemMouseOver", "onDateItemMouseUp", "markedDateInterval", "inputStyle", "getPopupContainer", "autoFocus", "className"]);
-        const isUpDisabled = disabled || this.state.currentInfo.info === undefined || !DateTimeInput.isValid(this.state.currentInfo, this.props.value, 1);
-        const isDownDisabled = disabled || this.state.currentInfo.info === undefined || !DateTimeInput.isValid(this.state.currentInfo, this.props.value, -1);
-        const unix = value === null || value === void 0 ? void 0 : value.valueOf();
-        let divClassName = "custom-date-time-picker";
-        if (disabled || inputDisabled) {
-            divClassName += " ant-input-number disabled ant-input-disabled readonly";
-        }
-        else {
-            divClassName += " ant-input-number";
-        }
-        if (bordered === false) {
-            divClassName += " ant-input-borderless";
-        }
-        const maskedInputStyle = { color: this.state.valid ? "inherit" : "red", border: "none" };
-        if (inputStyle) {
-            Object.assign(maskedInputStyle, inputStyle);
-        }
-        return (React.createElement("div", Object.assign({ style: bordered === false ? Object.assign(Object.assign({}, style), { border: 0 }) : style }, props, { className: (className ? className + " " : "") + divClassName }),
-            React.createElement("div", { className: "ant-input-number-input-wrap", onKeyDown: (event) => {
-                    if (event.keyCode === 38) {
-                        this.increment();
-                        event.preventDefault();
-                        event.stopPropagation();
-                    }
-                    else if (event.keyCode === 40) {
-                        this.decrement();
-                        event.preventDefault();
-                        event.stopPropagation();
-                    }
-                } },
-                React.createElement(MaskedInput, { mask: this.props.mask.replace(/[a-zA-Z]/g, '1'), bordered: bordered, ref: this.inputRef, style: maskedInputStyle, value: (this.state.focused || unix !== D2000UnixTimeNullValue * 1000) ? ((_a = value === null || value === void 0 ? void 0 : value.locale("locale.d2000").format(this.props.mask)) !== null && _a !== void 0 ? _a : "") : "", placeholder: (!this.state.focused && unix === D2000UnixTimeNullValue * 1000) ? "Null Time" : undefined, onFocus: (event => {
-                        event.target.selectionStart = event.target.selectionEnd = this.state.currentPos;
-                        this.setState({ focused: true });
-                    }), onBlur: () => {
-                        this.setState({ focused: false });
-                    }, autoFocus: autoFocus, disabled: disabled || inputDisabled, onWheel: (event) => {
-                        if (event.deltaY > 0) {
-                            if (!isDownDisabled) {
-                                this.decrement();
-                            }
-                        }
-                        if (event.deltaY < 0) {
-                            if (!isUpDisabled) {
-                                this.increment();
-                            }
-                        }
-                    }, onMouseUp: this.recalc, onKeyUp: this.recalc, onChange: (event) => {
-                        const inputString = event.target.value;
-                        const value = DateTimeInput.parseDateTimeFormat(this.props.value, inputString, this.props.mask, event.target.selectionStart);
-                        if (value.time !== undefined) {
-                            if (this.props.minDateTime !== undefined && value.time.isBefore(this.props.minDateTime)) {
-                                value.time = this.props.minDateTime.clone();
-                            }
-                            if (this.props.maxDateTime !== undefined && value.time.isAfter(this.props.maxDateTime)) {
-                                value.time = this.props.maxDateTime.clone();
-                            }
-                            onChange === null || onChange === void 0 ? void 0 : onChange(value.time.clone());
-                        }
-                        else if (!!this.props.allowClear && !inputString) {
-                            onChange === null || onChange === void 0 ? void 0 : onChange(null);
-                        }
-                        else {
-                            onInvalidValue === null || onInvalidValue === void 0 ? void 0 : onInvalidValue(inputString);
-                        }
-                        this.setState({
-                            valid: (value.time !== undefined && value.time.isValid()) || (!!this.props.allowClear && !inputString),
-                            currentInfo: value
-                        });
-                    } })),
-            !hidePopup && !renderAsCalendar && React.createElement("div", { className: "ant-input-number-handler-wrap", style: {
-                    width: 28,
-                    opacity: 1,
-                    height: "100%",
-                    textAlign: "center",
-                    cursor: "pointer",
-                    background: "transparent",
-                    border: bordered === false ? 0 : undefined
-                }, onClick: (event) => {
-                    if (document.createEvent) {
-                        var ev = document.createEvent('HTMLEvents');
-                        ev.initEvent('contextmenu', true, false);
-                        event.target.dispatchEvent(ev);
-                    }
-                } },
-                React.createElement(CalendarOutlined, { style: { color: "rgba(0,0,0,0.65)", verticalAlign: "middle", marginTop: 2 } }))));
-    }
-    render() {
-        if (this.props.renderAsCalendar) {
-            return this.renderCalendar();
-        }
-        else if (this.props.hidePopup) {
-            return this.renderInput();
-        }
-        else {
-            return (React.createElement(Tooltip, { color: "white", trigger: this.props.disabled ? [] : ["contextMenu"], getPopupContainer: this.props.getPopupContainer, overlayInnerStyle: { maxHeight: "100vh", overflowY: "auto", overflowX: "hidden", width: 266 }, open: this.state.popupCalendarVisible, onOpenChange: (visible) => {
-                    var _a, _b, _c, _d;
-                    this.setState({ popupCalendarVisible: visible });
-                    if (visible) {
-                        this.setState({ calendarSelectedDate: (_d = (_b = (_a = this.props.defaultSelectedDate) === null || _a === void 0 ? void 0 : _a.clone()) !== null && _b !== void 0 ? _b : (_c = this.props.value) === null || _c === void 0 ? void 0 : _c.clone()) !== null && _d !== void 0 ? _d : moment().startOf("day") });
-                    }
-                }, title: this.renderCalendar(), placement: this.props.placement }, this.renderInput()));
-        }
-    }
-    static isValid(info, value, offset) {
-        var _a;
-        const unit = (_a = info.info) === null || _a === void 0 ? void 0 : _a.unit;
-        return this.checkDateValueValidity(value, offset, unit);
-    }
-    static checkDateValueValidity(value, offset, unit) {
-        if (value === null) {
-            return false;
-        }
-        let v = value.clone().add(offset, unit);
-        return v.isValid() && v.isSameOrAfter(moment(0));
-    }
-    static parseDateTimeFormat(previousTime, value, mask, cursorPos) {
-        var _a, _b, _c;
-        let result = {
-            time: moment(0).startOf("day"),
-            info: undefined,
-            length: 0,
-        };
-        for (let v of DATE_TIME_DATA_MAP) {
-            let index = -1;
-            let length = 0;
-            let min = 0;
-            let max = 0;
-            if (Array.isArray(v.key) || Array.isArray(v.min) || Array.isArray(v.max)) {
-                for (let i = 0; i < v.key.length; i++) {
-                    const x = v.key[i];
-                    index = mask.indexOf(x);
-                    if (index !== -1) {
-                        length = x.length;
-                        min = v.min[i];
-                        max = v.max[i];
-                        break;
-                    }
-                }
+
+            .ant-picker-cell:hover:not(.ant-picker-cell-in-view) .ant-picker-cell-inner, .ant-picker-cell:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-range-hover-start):not(.ant-picker-cell-range-hover-end) .ant-picker-cell-inner {
+                background: #1890ff;
+                color: rgba(0, 0, 0, 0.85);
             }
-            else {
-                index = mask.indexOf(v.key);
-                length = v.key.length;
-                min = v.min;
-                max = v.max;
-            }
-            if (index !== -1) {
-                let val = Number(value.substring(index, index + length));
-                if (!isNaN(val) && val >= min && val <= max) {
-                    if (v.unit === "M") {
-                        val--;
-                    }
-                    if (v.unit === "d") {
-                        (_a = result.time) === null || _a === void 0 ? void 0 : _a.set('D', val);
-                    }
-                    else if (v.unit === "y" && length === 2) {
-                        const century = (previousTime != null && previousTime.isValid()) ? Math.floor(previousTime.year() / 100) * 100 : (val > 70 ? 1900 : 2000);
-                        (_b = result.time) === null || _b === void 0 ? void 0 : _b.set(v.unit, century + val);
-                    }
-                    else {
-                        (_c = result.time) === null || _c === void 0 ? void 0 : _c.set(v.unit, val);
-                    }
-                }
-                else {
-                    result.time = undefined;
-                    result.info = undefined;
-                    result.length = 0;
-                    break;
-                }
-                if (cursorPos !== null && cursorPos >= index && cursorPos <= index + length) {
-                    result.info = v;
-                    result.length = length;
-                }
-            }
-        }
-        return result;
-    }
-}
+        `,
+    };
+});
+const DATE_TIME_DATA_MAP = [
+    { key: "SSS", min: 0, max: 999, unit: "ms" },
+    { key: "ss", min: 0, max: 59, unit: "s" },
+    { key: "mm", min: 0, max: 59, unit: "m" },
+    { key: "HH", min: 0, max: 23, unit: "h" },
+    { key: ["YYYY", "YY"], min: [1900, 0], max: [9999, 99], unit: "y" },
+    { key: "MM", min: 1, max: 12, unit: "M" },
+    { key: "DD", min: 1, max: 31, unit: "d" },
+];
+const MIN_TIME = dayjs.unix(0);
+const MAX_TIME = dayjs().add(1000, "year");
+export function allowDatesBeforeEpoch() {
+    DATE_TIME_DATA_MAP[4].min = 1902;
+}
+export default class DateTimeInput extends React.Component {
+    constructor(props) {
+        var _a, _b, _c, _d;
+        super(props);
+        this.inputRef = React.createRef();
+        this.today = dayjs();
+        this.state = {
+            valid: DateTimeInput.isValidValue(props.value, props.minDateTime, props.maxDateTime, props.allowClear),
+            currentPos: null,
+            currentInfo: {
+                info: undefined,
+                time: undefined,
+                length: 0
+            },
+            popupCalendarVisible: false,
+            calendarSelectedDate: (_d = (_b = (_a = props.defaultSelectedDate) === null || _a === void 0 ? void 0 : _a.clone()) !== null && _b !== void 0 ? _b : (_c = props.value) === null || _c === void 0 ? void 0 : _c.clone()) !== null && _d !== void 0 ? _d : dayjs().startOf('day'),
+            focused: false,
+        };
+        this.recalc = this.recalc.bind(this);
+        this.increment = this.increment.bind(this);
+        this.decrement = this.decrement.bind(this);
+        this.onItemMouseOver = debounce(this.onItemMouseOver.bind(this), 100, { maxWait: 100 });
+    }
+    componentDidUpdate(prevProps, _prevState, _snapshot) {
+        if (!isEqual(prevProps, this.props) && this.inputRef.current !== null) {
+            this.inputRef.current.input.selectionStart = this.state.currentPos;
+            this.inputRef.current.input.selectionEnd = this.state.currentPos;
+            if (prevProps.value !== this.props.value) {
+                this.setState({ valid: DateTimeInput.isValidValue(this.props.value, this.props.minDateTime, this.props.maxDateTime, this.props.allowClear) });
+            }
+        }
+    }
+    get input() {
+        var _a;
+        return (_a = this.inputRef.current) === null || _a === void 0 ? void 0 : _a.input;
+    }
+    focus() {
+        var _a;
+        (_a = this.inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    recalc() {
+        if (this.inputRef.current !== null) {
+            this.setState({
+                currentInfo: DateTimeInput.parseDateTimeFormat(this.props.value, this.inputRef.current.input.value, this.props.mask, this.inputRef.current.input.selectionStart),
+                currentPos: this.inputRef.current.input.selectionStart,
+            });
+        }
+    }
+    increment() {
+        var _a;
+        if (this.state.currentInfo.info !== undefined && !!this.props.value && DateTimeInput.isValid(this.state.currentInfo, this.props.value, 1)) {
+            const unit = this.state.currentInfo.info.unit;
+            this.incrementDate(unit);
+        }
+        (_a = this.inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    incrementDate(unit) {
+        var _a, _b, _c, _d, _e;
+        if (!!this.props.value) {
+            const value = this.props.value.clone().add(1, unit);
+            if (!!this.props.maxDateTime && value.isAfter(this.props.maxDateTime)) {
+                (_b = (_a = this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, (_c = this.props.maxDateTime) === null || _c === void 0 ? void 0 : _c.clone());
+            }
+            else {
+                (_e = (_d = this.props).onChange) === null || _e === void 0 ? void 0 : _e.call(_d, value);
+            }
+        }
+    }
+    decrement() {
+        var _a;
+        if (this.state.currentInfo.info !== undefined && !!this.props.value && DateTimeInput.isValid(this.state.currentInfo, this.props.value, -1)) {
+            const unit = this.state.currentInfo.info.unit;
+            this.decrementDate(unit);
+        }
+        (_a = this.inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    decrementDate(unit) {
+        var _a, _b, _c, _d, _e;
+        if (!!this.props.value) {
+            const value = this.props.value.clone().subtract(1, unit);
+            if (!!this.props.minDateTime && value.isBefore(this.props.minDateTime)) {
+                (_b = (_a = this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, (_c = this.props.minDateTime) === null || _c === void 0 ? void 0 : _c.clone());
+            }
+            else {
+                (_e = (_d = this.props).onChange) === null || _e === void 0 ? void 0 : _e.call(_d, value);
+            }
+        }
+    }
+    onItemMouseOver(itemDate) {
+        var _a, _b;
+        (_b = (_a = this.props).onDateItemMouseOver) === null || _b === void 0 ? void 0 : _b.call(_a, itemDate);
+    }
+    renderCalendarNavigation(value) {
+        const start = 0;
+        const end = 12;
+        const monthOptions = [];
+        const current = value.clone();
+        const localeData = value.localeData();
+        const months = [];
+        for (let i = 0; i < 12; i++) {
+            months.push(localeData.months(current.month(i)));
+        }
+        for (let index = start; index < end; index++) {
+            monthOptions.push(React.createElement(Select.Option, { key: `${index}`, value: `${index}` }, months[index]));
+        }
+        const month = value.month();
+        const year = value.year();
+        const options = [];
+        for (let i = year - 4; i <= year + 2; i += 1) {
+            options.push(React.createElement(Select.Option, { key: `${i}`, value: `${i}` }, i));
+        }
+        const calendarSelectedDate = this.state.calendarSelectedDate;
+        return (React.createElement("div", { style: { display: "flex", marginBottom: 6 } },
+            React.createElement("div", { style: { display: "flex", width: 140 } },
+                React.createElement(Button, { style: { width: 10, padding: 0 }, size: "small", type: "text", tabIndex: -1, disabled: !DateTimeInput.checkDateValueValidity(calendarSelectedDate, -1, "month"), onClick: () => {
+                        this.setState({ calendarSelectedDate: calendarSelectedDate.subtract(1, "month") });
+                    }, className: "ant-picker-header-prev-btn" },
+                    React.createElement("span", { className: "ant-picker-prev-icon" })),
+                React.createElement(Select, { style: { flex: "1 1 auto" }, size: "small", popupMatchSelectWidth: false, dropdownStyle: { zIndex: 2070 }, getPopupContainer: this.props.getPopupContainer, value: String(month), onChange: selectedMonth => {
+                        this.setState({ calendarSelectedDate: calendarSelectedDate.month(parseInt(selectedMonth, 10)) });
+                    } }, monthOptions),
+                React.createElement(Button, { style: { width: 10, padding: 0 }, size: "small", type: "text", tabIndex: -1, className: "ant-picker-header-next-btn", onClick: () => {
+                        this.setState({ calendarSelectedDate: calendarSelectedDate.add(1, "month") });
+                    } },
+                    React.createElement("span", { className: "ant-picker-next-icon" }))),
+            React.createElement("div", { style: { display: "flex", width: 110 } },
+                React.createElement(Button, { style: { width: 12, padding: 0 }, size: "small", type: "text", tabIndex: -1, className: "ant-picker-header-prev-btn", onClick: () => {
+                        this.setState({ calendarSelectedDate: calendarSelectedDate.subtract(1, "year") });
+                    } },
+                    React.createElement("span", { className: "ant-picker-prev-icon" })),
+                React.createElement(Select, { size: "small", style: { width: 84 }, popupMatchSelectWidth: false, dropdownStyle: { zIndex: 2070 }, getPopupContainer: this.props.getPopupContainer, onChange: newYear => {
+                        this.setState({ calendarSelectedDate: calendarSelectedDate.year(parseInt(newYear, 10)) });
+                    }, value: String(year) }, options),
+                React.createElement(Button, { style: { width: 12, padding: 0 }, size: "small", type: "text", tabIndex: -1, className: "ant-picker-header-next-btn", onClick: () => {
+                        this.setState({ calendarSelectedDate: calendarSelectedDate.add(1, "year") });
+                    } },
+                    React.createElement("span", { className: "ant-picker-next-icon" })))));
+    }
+    renderCalendar() {
+        return (React.createElement("div", { onKeyDown: !this.props.ignoreKeyStrokes ? (e) => {
+                var _a, _b, _c, _d;
+                if (e.key === Key.Enter) {
+                    var tagName = (_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toLowerCase();
+                    if (tagName !== "input") {
+                        (_d = (_c = this.props).onChange) === null || _d === void 0 ? void 0 : _d.call(_c, this.state.calendarSelectedDate);
+                    }
+                }
+            } : undefined, onMouseOver: (e) => {
+                if (e.target instanceof HTMLTableCellElement) {
+                    const date = dayjs(e.target.title, "YYYY-MM-DD");
+                    this.onItemMouseOver(date);
+                }
+            } },
+            React.createElement(WithCss, { useStyles: useStyles }, (css) => {
+                var _a, _b;
+                return React.createElement(Calendar, { className: css.styles.dateTimeInputCalendar, fullscreen: false, style: this.props.renderAsCalendar ? this.props.style : undefined, fullCellRender: ((date) => {
+                        let className = date.isSame(this.today, "date") ? 'ant-picker-cell-inner ant-picker-calendar-date ant-picker-calendar-date-today' : 'ant-picker-cell-inner ant-picker-calendar-date';
+                        const markedDateInterval = this.props.markedDateInterval;
+                        if (markedDateInterval && (markedDateInterval[0].isBefore(date) || markedDateInterval[0].isSame(date, "millisecond")) &&
+                            (markedDateInterval[1].isAfter(date) || markedDateInterval[1].isSame(date, "millisecond"))) {
+                            className += " date-picker-item-marked";
+                        }
+                        else if (date.isSame(this.props.value, "date")) {
+                            className += " date-picker-item-marked";
+                        }
+                        return (React.createElement("div", { className: className, style: { userSelect: "none" }, onKeyDown: (e) => {
+                                var _a, _b, _c, _d;
+                                if (e.key === Key.Enter) {
+                                    let newValue = (_b = (_a = this.props.value) === null || _a === void 0 ? void 0 : _a.clone()) !== null && _b !== void 0 ? _b : dayjs().startOf("day");
+                                    newValue = newValue.year(date.year()).month(date.month()).date(date.date());
+                                    (_d = (_c = this.props).onChange) === null || _d === void 0 ? void 0 : _d.call(_c, newValue);
+                                }
+                            }, onMouseDown: () => {
+                                var _a, _b, _c, _d;
+                                let newValue = (_b = (_a = this.props.value) === null || _a === void 0 ? void 0 : _a.clone()) !== null && _b !== void 0 ? _b : dayjs().startOf("day");
+                                newValue = newValue.year(date.year()).month(date.month()).date(date.date());
+                                (_d = (_c = this.props).onDateItemMouseDown) === null || _d === void 0 ? void 0 : _d.call(_c, newValue);
+                            }, onMouseUp: () => {
+                                var _a, _b, _c, _d;
+                                let newValue = (_b = (_a = this.props.value) === null || _a === void 0 ? void 0 : _a.clone()) !== null && _b !== void 0 ? _b : dayjs().startOf("day");
+                                newValue = newValue.year(date.year()).month(date.month()).date(date.date());
+                                (_d = (_c = this.props).onDateItemMouseUp) === null || _d === void 0 ? void 0 : _d.call(_c, newValue);
+                            } },
+                            React.createElement("div", { className: `ant-picker-calendar-date-value` }, padStart("" + date.date(), 2, '0')),
+                            React.createElement("div", { className: `ant-picker-calendar-date-content` })));
+                    }), headerRender: ({ value }) => {
+                        return this.renderCalendarNavigation(value);
+                    }, value: this.state.calendarSelectedDate, validRange: [(_a = this.props.minDateTime) !== null && _a !== void 0 ? _a : MIN_TIME, (_b = this.props.maxDateTime) !== null && _b !== void 0 ? _b : MAX_TIME], onSelect: (value) => {
+                        var _a, _b, _c, _d;
+                        if (window.event instanceof MouseEvent) {
+                            let newValue = (_b = (_a = this.props.value) === null || _a === void 0 ? void 0 : _a.clone()) !== null && _b !== void 0 ? _b : dayjs().startOf("day");
+                            newValue = newValue.year(value.year()).month(value.month()).date(value.date());
+                            (_d = (_c = this.props).onChange) === null || _d === void 0 ? void 0 : _d.call(_c, newValue);
+                        }
+                        this.setState({ calendarSelectedDate: value, popupCalendarVisible: false });
+                    } });
+            })));
+    }
+    renderInput() {
+        var _a;
+        const _b = this.props, { mask, value, onChange, onInvalidValue, style, disabled, inputDisabled, bordered, hidePopup, renderAsCalendar, allowClear, minDateTime, maxDateTime, onDateItemMouseDown, onDateItemMouseOver, onDateItemMouseUp, markedDateInterval, inputStyle, getPopupContainer, autoFocus, className, size } = _b, props = __rest(_b, ["mask", "value", "onChange", "onInvalidValue", "style", "disabled", "inputDisabled", "bordered", "hidePopup", "renderAsCalendar", "allowClear", "minDateTime", "maxDateTime", "onDateItemMouseDown", "onDateItemMouseOver", "onDateItemMouseUp", "markedDateInterval", "inputStyle", "getPopupContainer", "autoFocus", "className", "size"]);
+        const isUpDisabled = disabled || this.state.currentInfo.info === undefined || !DateTimeInput.isValid(this.state.currentInfo, this.props.value, 1);
+        const isDownDisabled = disabled || this.state.currentInfo.info === undefined || !DateTimeInput.isValid(this.state.currentInfo, this.props.value, -1);
+        const unix = value === null || value === void 0 ? void 0 : value.valueOf();
+        const maskedInputStyle = { color: this.state.valid ? undefined : "#ff4d4f" };
+        if (inputStyle) {
+            Object.assign(maskedInputStyle, inputStyle);
+        }
+        return (React.createElement("div", Object.assign({ style: Object.assign(Object.assign({}, style), { position: "relative" }) }, props, { className: className }),
+            React.createElement("div", { onKeyDown: (event) => {
+                    if (event.code === "ArrowUp") {
+                        this.increment();
+                        event.preventDefault();
+                        event.stopPropagation();
+                    }
+                    else if (event.code === "ArrowDown") {
+                        this.decrement();
+                        event.preventDefault();
+                        event.stopPropagation();
+                    }
+                } },
+                React.createElement(MaskedInput, { mask: this.props.mask.replace(/[a-zA-Z]/g, '1'), bordered: bordered, ref: this.inputRef, style: maskedInputStyle, size: size, value: (this.state.focused || unix !== D2000UnixTimeNullValue * 1000) ? ((_a = value === null || value === void 0 ? void 0 : value.locale("locale.d2000").format(this.props.mask)) !== null && _a !== void 0 ? _a : "") : "", placeholder: (!this.state.focused && unix === D2000UnixTimeNullValue * 1000) ? "Null Time" : undefined, onFocus: (event => {
+                        event.target.selectionStart = event.target.selectionEnd = this.state.currentPos;
+                        this.setState({ focused: true });
+                    }), onBlur: () => {
+                        this.setState({ focused: false });
+                    }, autoFocus: autoFocus, disabled: disabled || inputDisabled, onWheel: (event) => {
+                        if (event.deltaY > 0) {
+                            if (!isDownDisabled) {
+                                this.decrement();
+                            }
+                        }
+                        if (event.deltaY < 0) {
+                            if (!isUpDisabled) {
+                                this.increment();
+                            }
+                        }
+                    }, onMouseUp: this.recalc, onKeyUp: this.recalc, onChange: (event) => {
+                        const inputString = event.target.value;
+                        const value = DateTimeInput.parseDateTimeFormat(this.props.value, inputString, this.props.mask, event.target.selectionStart);
+                        const valid = DateTimeInput.isValidValue(value.time, this.props.minDateTime, this.props.maxDateTime, this.props.allowClear) || (!!this.props.allowClear && !inputString);
+                        if (value.time !== undefined && valid) {
+                            onChange === null || onChange === void 0 ? void 0 : onChange(value.time.clone());
+                        }
+                        else if (!!this.props.allowClear && !inputString) {
+                            onChange === null || onChange === void 0 ? void 0 : onChange(null);
+                        }
+                        else {
+                            onInvalidValue === null || onInvalidValue === void 0 ? void 0 : onInvalidValue(inputString);
+                        }
+                        this.setState({
+                            valid: valid,
+                            currentInfo: value
+                        });
+                    } })),
+            !hidePopup && !renderAsCalendar && React.createElement("div", { style: {
+                    width: 28,
+                    opacity: 1,
+                    height: "100%",
+                    textAlign: "center",
+                    cursor: disabled ? "not-allowed" : "pointer",
+                    background: "transparent",
+                    position: "absolute",
+                    top: 0,
+                    right: 0,
+                }, onClick: (event) => {
+                    if (document.createEvent) {
+                        var ev = document.createEvent('HTMLEvents');
+                        ev.initEvent('contextmenu', true, false);
+                        event.target.dispatchEvent(ev);
+                    }
+                } },
+                React.createElement(CalendarOutlined, { style: { color: "rgba(0,0,0,0.65)", verticalAlign: "middle", height: "100%" } }))));
+    }
+    render() {
+        if (this.props.renderAsCalendar) {
+            return this.renderCalendar();
+        }
+        else if (this.props.hidePopup) {
+            return this.renderInput();
+        }
+        else {
+            return (React.createElement(Tooltip, { color: "white", trigger: this.props.disabled ? [] : ["contextMenu"], getPopupContainer: this.props.getPopupContainer, overlayInnerStyle: { maxHeight: "100vh", overflowY: "auto", overflowX: "hidden", width: 266 }, open: this.state.popupCalendarVisible, onOpenChange: (visible) => {
+                    var _a, _b, _c, _d;
+                    this.setState({ popupCalendarVisible: visible });
+                    if (visible) {
+                        this.setState({ calendarSelectedDate: (_d = (_b = (_a = this.props.defaultSelectedDate) === null || _a === void 0 ? void 0 : _a.clone()) !== null && _b !== void 0 ? _b : (_c = this.props.value) === null || _c === void 0 ? void 0 : _c.clone()) !== null && _d !== void 0 ? _d : dayjs().startOf("day") });
+                    }
+                }, title: this.renderCalendar(), placement: this.props.placement }, this.renderInput()));
+        }
+    }
+    static isValid(info, value, offset) {
+        var _a;
+        const unit = (_a = info.info) === null || _a === void 0 ? void 0 : _a.unit;
+        return this.checkDateValueValidity(value, offset, unit);
+    }
+    static checkDateValueValidity(value, offset, unit) {
+        if (value === null) {
+            return false;
+        }
+        let v = value.clone().add(offset, unit);
+        return v.isValid() && v.isSameOrAfter(dayjs(0));
+    }
+    static parseDateTimeFormat(previousTime, value, mask, cursorPos) {
+        var _a, _b, _c;
+        let result = {
+            time: dayjs().startOf("day"),
+            info: undefined,
+            length: 0,
+        };
+        for (let v of DATE_TIME_DATA_MAP) {
+            let index = -1;
+            let length = 0;
+            let min = 0;
+            let max = 0;
+            if (Array.isArray(v.key) || Array.isArray(v.min) || Array.isArray(v.max)) {
+                for (let i = 0; i < v.key.length; i++) {
+                    const x = v.key[i];
+                    index = mask.indexOf(x);
+                    if (index !== -1) {
+                        length = x.length;
+                        min = v.min[i];
+                        max = v.max[i];
+                        break;
+                    }
+                }
+            }
+            else {
+                index = mask.indexOf(v.key);
+                length = v.key.length;
+                min = v.min;
+                max = v.max;
+            }
+            if (index !== -1) {
+                let val = Number(value.substring(index, index + length));
+                if (!isNaN(val) && val >= min && val <= max) {
+                    if (v.unit === "M") {
+                        val--;
+                    }
+                    if (v.unit === "d") {
+                        result.time = (_a = result.time) === null || _a === void 0 ? void 0 : _a.set('D', val);
+                    }
+                    else if (v.unit === "y" && length === 2) {
+                        const century = (previousTime != null && previousTime.isValid()) ? Math.floor(previousTime.year() / 100) * 100 : (val > 70 ? 1900 : 2000);
+                        result.time = (_b = result.time) === null || _b === void 0 ? void 0 : _b.set(v.unit, century + val);
+                    }
+                    else if (v.unit !== "weeks" && v.unit !== "week" && v.unit !== "w") {
+                        result.time = (_c = result.time) === null || _c === void 0 ? void 0 : _c.set(v.unit, val);
+                    }
+                }
+                else {
+                    result.time = undefined;
+                    result.info = undefined;
+                    result.length = 0;
+                    break;
+                }
+                if (cursorPos !== null && cursorPos >= index && cursorPos <= index + length) {
+                    result.info = v;
+                    result.length = length;
+                }
+            }
+        }
+        return result;
+    }
+    static isValidValue(value, minDateTime, maxDateTime, allowClear) {
+        return (!!value && value.isValid() && (!minDateTime || value.isSameOrAfter(minDateTime)) && (!maxDateTime || value.isSameOrBefore(maxDateTime))) || (!!allowClear && value === null);
+    }
+}
 //# sourceMappingURL=dateTimeInput.js.map