d2coreui 21.0.34 → 23.0.0

package/components/date/dateRangeInput.js

@@ -1,298 +1,293 @@
-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 moment from "moment";
-import { CalendarOutlined } from "@ant-design/icons";
-import { Divider, Switch, Tooltip } from "antd";
-import DateTimeInput from "./dateTimeInput";
-import memoizeOne from "memoize-one";
-import KeyboardUtils from "../keyboard/keyboardUtils";
-import i18n from "d2core/i18n/i18n";
-import DateRangeInputAdvancedPanel, { TimeShiftDirection } from "./dateRangeInputAdvancedPanel";
-export var DateRangeInputMode;
-(function (DateRangeInputMode) {
-    DateRangeInputMode[DateRangeInputMode["SIMPLE"] = 0] = "SIMPLE";
-    DateRangeInputMode[DateRangeInputMode["ADVANCED"] = 1] = "ADVANCED";
-})(DateRangeInputMode || (DateRangeInputMode = {}));
-export default class DateRangeInput extends React.Component {
-    constructor(props) {
-        var _a;
-        super(props);
-        this.state = {
-            valid: !!props.fromValue && props.fromValue.isValid() && !!props.toValue && props.toValue.isValid(),
-            selectionStartDate: null,
-            popupKeyIndex: 0,
-            popupVisible: false,
-            mode: (_a = props.defaultMode) !== null && _a !== void 0 ? _a : DateRangeInputMode.SIMPLE,
-        };
-        this.getDefaultSelectedDateForFromPanel = memoizeOne(this.getDefaultSelectedDateForFromPanel.bind(this));
-    }
-    componentDidUpdate(_prevProps, prevState) {
-        if (prevState.popupVisible !== this.state.popupVisible && this.props.onPopupVisibleChange) {
-            this.props.onPopupVisibleChange(this.state.popupVisible);
-        }
-    }
-    getDefaultSelectedDateForFromPanel(fromDate, toDate) {
-        if (!!fromDate && !!toDate && fromDate.isSame(toDate, "date")) {
-            return fromDate.clone().subtract(1, "month");
-        }
-        else {
-            return fromDate !== null && fromDate !== void 0 ? fromDate : moment().startOf("day").subtract(1, "month");
-        }
-    }
-    getFromValue(date) {
-        var _a, _b;
-        return ((_b = (_a = this.props.fromValue) === null || _a === void 0 ? void 0 : _a.clone()) !== null && _b !== void 0 ? _b : moment().startOf("day")).year(date.year()).month(date.month()).date(date.date());
-    }
-    getToValue(date) {
-        var _a, _b;
-        return ((_b = (_a = this.props.toValue) === null || _a === void 0 ? void 0 : _a.clone()) !== null && _b !== void 0 ? _b : moment().endOf("day")).year(date.year()).month(date.month()).date(date.date());
-    }
-    closePopup() {
-        var _a, _b;
-        this.setState({ popupKeyIndex: this.state.popupKeyIndex + 1, popupVisible: false });
-        (_b = (_a = this.props).onPopupVisibleChange) === null || _b === void 0 ? void 0 : _b.call(_a, false);
-    }
-    onChange(fromValue, toValue) {
-        var _a, _b;
-        if (this.props.minDateTime && (fromValue === null || fromValue === void 0 ? void 0 : fromValue.isBefore(this.props.minDateTime))) {
-            fromValue = this.props.minDateTime;
-        }
-        if (this.props.maxDateTime && (toValue === null || toValue === void 0 ? void 0 : toValue.isAfter(this.props.maxDateTime))) {
-            toValue = this.props.maxDateTime;
-        }
-        (_b = (_a = this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, fromValue, toValue);
-    }
-    renderSimplePart() {
-        const _a = this.props, { fromValue, toValue, onChange, style, allowClear, renderAsCalendar, hidePopup, align, defaultMode, onModeChange, confirmButtonsRenderer, onPopupVisibleChange } = _a, props = __rest(_a, ["fromValue", "toValue", "onChange", "style", "allowClear", "renderAsCalendar", "hidePopup", "align", "defaultMode", "onModeChange", "confirmButtonsRenderer", "onPopupVisibleChange"]);
-        const markedDateInterval = this.props.fromValue && this.props.toValue ? [this.props.fromValue, this.props.toValue] : undefined;
-        return (React.createElement("div", null,
-            React.createElement("div", { style: { display: "flex" } },
-                React.createElement(DateTimeInput, Object.assign({ value: fromValue }, props, { allowClear: allowClear, renderAsCalendar: true, style: { width: "100%" }, onChange: (date) => {
-                        var _a, _b;
-                        if (date) {
-                            const fromValue = this.getFromValue(date);
-                            const toValue = this.getToValue(date);
-                            (_b = (_a = this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, fromValue, toValue);
-                        }
-                    }, defaultSelectedDate: this.getDefaultSelectedDateForFromPanel(fromValue, toValue), markedDateInterval: markedDateInterval, onDateItemMouseDown: (date) => {
-                        var _a, _b;
-                        this.setState({ selectionStartDate: date });
-                        const dateFrom = this.getFromValue(date);
-                        const dateTo = this.getToValue(date);
-                        (_b = (_a = this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, dateFrom, dateTo);
-                    }, onDateItemMouseOver: (date) => {
-                        var _a, _b;
-                        if (KeyboardUtils.isMouseDown() && !!this.state.selectionStartDate) {
-                            let dateFrom;
-                            let dateTo;
-                            if (this.state.selectionStartDate.isBefore(date)) {
-                                dateFrom = this.state.selectionStartDate;
-                                dateTo = date;
-                            }
-                            else {
-                                dateFrom = date;
-                                dateTo = this.state.selectionStartDate;
-                            }
-                            dateFrom = this.getFromValue(dateFrom);
-                            dateTo = this.getToValue(dateTo);
-                            (_b = (_a = this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, dateFrom, dateTo);
-                        }
-                    }, onDateItemMouseUp: (_date) => {
-                        this.setState({ selectionStartDate: null });
-                    }, ignoreKeyStrokes: true })),
-                React.createElement(Divider, { type: "vertical", style: { height: "auto" } }),
-                React.createElement(DateTimeInput, Object.assign({ value: toValue }, props, { renderAsCalendar: true, allowClear: allowClear, style: { width: "100%" }, onChange: (date) => {
-                        var _a, _b;
-                        if (date) {
-                            const fromValue = this.getFromValue(date);
-                            const toValue = this.getToValue(date);
-                            (_b = (_a = this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, fromValue, toValue);
-                        }
-                    }, markedDateInterval: markedDateInterval, onDateItemMouseDown: (date) => {
-                        var _a, _b;
-                        this.setState({ selectionStartDate: date });
-                        const dateFrom = this.getFromValue(date);
-                        const dateTo = this.getToValue(date);
-                        (_b = (_a = this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, dateFrom, dateTo);
-                    }, onDateItemMouseOver: (date) => {
-                        var _a, _b;
-                        if (KeyboardUtils.isMouseDown() && !!this.state.selectionStartDate) {
-                            let dateFrom;
-                            let dateTo;
-                            if (this.state.selectionStartDate.isBefore(date)) {
-                                dateFrom = this.state.selectionStartDate;
-                                dateTo = date;
-                            }
-                            else {
-                                dateFrom = date;
-                                dateTo = this.state.selectionStartDate;
-                            }
-                            dateFrom = this.getFromValue(dateFrom);
-                            dateTo = this.getToValue(dateTo);
-                            (_b = (_a = this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, dateFrom, dateTo);
-                        }
-                    }, onDateItemMouseUp: (_date) => {
-                        this.setState({ selectionStartDate: null });
-                    }, ignoreKeyStrokes: true }))),
-            React.createElement("div", { className: "ant-picker-footer" },
-                React.createElement("ul", { className: "ant-picker-ranges", style: { padding: 0, borderTop: "1px solid #ddd" } }, this.props.ranges && Object.keys(this.props.ranges).map((rangeName, index) => {
-                    return (React.createElement("li", { className: "ant-picker-preset", key: `range-${index}`, onClick: () => {
-                            var _a, _b, _c;
-                            const rangeFunction = (_a = this.props.ranges) === null || _a === void 0 ? void 0 : _a[rangeName];
-                            if (rangeFunction) {
-                                const range = rangeFunction();
-                                (_c = (_b = this.props).onChange) === null || _c === void 0 ? void 0 : _c.call(_b, range[0], range[1]);
-                            }
-                        } },
-                        React.createElement("span", { className: "ant-tag ant-tag-blue", style: { userSelect: "none" } }, rangeName)));
-                })))));
-    }
-    renderAdvancedPart() {
-        const _a = this.props, { fromValue, toValue, onChange, style, allowClear, renderAsCalendar, hidePopup, align, defaultMode, onModeChange, confirmButtonsRenderer, onPopupVisibleChange } = _a, props = __rest(_a, ["fromValue", "toValue", "onChange", "style", "allowClear", "renderAsCalendar", "hidePopup", "align", "defaultMode", "onModeChange", "confirmButtonsRenderer", "onPopupVisibleChange"]);
-        return (React.createElement("div", null,
-            React.createElement("div", { style: { display: "flex" } },
-                React.createElement(DateTimeInput, Object.assign({}, props, { style: { width: "47%" }, value: fromValue, onChange: (value) => {
-                        var _a, _b;
-                        (_b = (_a = this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, value, this.props.toValue);
-                    } })),
-                React.createElement("span", { style: { width: "6%", paddingTop: 4, color: "rgba(0, 0, 0, 0.65)", textAlign: "center" } }, "\u27F7"),
-                React.createElement(DateTimeInput, Object.assign({}, props, { style: { width: "47%" }, value: toValue, onChange: (value) => {
-                        var _a, _b;
-                        (_b = (_a = this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, this.props.fromValue, value);
-                    } }))),
-            React.createElement(DateRangeInputAdvancedPanel, { onBeginIntervalChange: unit => {
-                    let from;
-                    if (unit === "15minutes") {
-                        const roundedMinutes = Math.floor(moment().minute() / 15) * 15;
-                        from = moment().startOf("hour").minute(roundedMinutes);
-                    }
-                    else {
-                        from = moment().startOf(unit);
-                    }
-                    this.onChange(from, this.props.toValue);
-                }, onIntervalDurationChange: unitOfTime => {
-                    if (this.props.fromValue) {
-                        let to;
-                        if (unitOfTime === "4years") {
-                            to = this.props.fromValue.clone().add(4, "year").subtract(1, "millisecond");
-                        }
-                        else {
-                            to = this.props.fromValue.clone().add(1, unitOfTime).subtract(1, "millisecond");
-                        }
-                        this.onChange(this.props.fromValue, to);
-                    }
-                }, onTimeShift: (shiftBegin, shiftEnd, unitOfTime, type) => {
-                    var _a, _b, _c, _d;
-                    let fromValue = (_b = (_a = this.props.fromValue) === null || _a === void 0 ? void 0 : _a.clone()) !== null && _b !== void 0 ? _b : null;
-                    let toValue = (_d = (_c = this.props.toValue) === null || _c === void 0 ? void 0 : _c.clone()) !== null && _d !== void 0 ? _d : null;
-                    if (shiftBegin && fromValue) {
-                        if (type === TimeShiftDirection.INCREMENT) {
-                            fromValue.add(1, unitOfTime);
-                        }
-                        else if (type === TimeShiftDirection.DECREMENT) {
-                            fromValue.subtract(1, unitOfTime);
-                        }
-                    }
-                    if (shiftEnd && toValue) {
-                        if (type === TimeShiftDirection.INCREMENT) {
-                            toValue.add(1, unitOfTime);
-                        }
-                        else if (type === TimeShiftDirection.DECREMENT) {
-                            toValue.subtract(1, unitOfTime);
-                        }
-                    }
-                    this.onChange(fromValue, toValue);
-                }, onEndIntervalChange: unit => {
-                    let to;
-                    if (unit === "15minutes") {
-                        const roundedMinutes = Math.floor(moment().minute() / 15) * 15;
-                        to = moment().startOf("hour").minute(roundedMinutes).subtract(1, "millisecond");
-                    }
-                    else {
-                        to = moment().startOf(unit).subtract(1, "millisecond");
-                    }
-                    this.onChange(this.props.fromValue, to);
-                } })));
-    }
-    renderPopup() {
-        var _a, _b;
-        return (React.createElement("div", { onFocus: this.props.onFocus, onBlur: this.props.onBlur },
-            this.state.mode === DateRangeInputMode.SIMPLE && this.renderSimplePart(),
-            this.state.mode === DateRangeInputMode.ADVANCED && this.renderAdvancedPart(),
-            React.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-end" } },
-                React.createElement(Switch, { style: { float: "right", marginTop: 8 }, checked: this.state.mode === DateRangeInputMode.ADVANCED, onChange: checked => {
-                        var _a, _b;
-                        const mode = checked ? DateRangeInputMode.ADVANCED : DateRangeInputMode.SIMPLE;
-                        this.setState({ mode: mode });
-                        (_b = (_a = this.props).onModeChange) === null || _b === void 0 ? void 0 : _b.call(_a, mode);
-                    }, checkedChildren: i18n("Advanced Mode"), unCheckedChildren: i18n("Simple Mode") }), (_b = (_a = this.props).confirmButtonsRenderer) === null || _b === void 0 ? void 0 :
-                _b.call(_a))));
-    }
-    renderInput() {
-        const _a = this.props, { fromValue, toValue, onChange, style, allowClear, renderAsCalendar, hidePopup, align, disabled, defaultMode, onModeChange, confirmButtonsRenderer, onPopupVisibleChange } = _a, props = __rest(_a, ["fromValue", "toValue", "onChange", "style", "allowClear", "renderAsCalendar", "hidePopup", "align", "disabled", "defaultMode", "onModeChange", "confirmButtonsRenderer", "onPopupVisibleChange"]);
-        const className = (disabled || this.state.popupVisible) ? "readonly" : undefined;
-        return (React.createElement("div", { style: Object.assign(Object.assign({}, style), { padding: 0 }), className: "ant-input", onFocus: this.props.onFocus, onBlur: this.props.onBlur },
-            React.createElement("div", { style: { display: "flex", width: (!hidePopup && !renderAsCalendar) ? "calc(100% - 27px)" : "100%" } },
-                React.createElement(DateTimeInput, Object.assign({ value: fromValue }, props, { disabled: disabled, inputDisabled: this.state.popupVisible, allowClear: allowClear, bordered: false, hidePopup: true, style: { width: "auto" }, inputStyle: { paddingRight: 2 }, onChange: (value) => {
-                        var _a, _b;
-                        (_b = (_a = this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, value, this.props.toValue);
-                    } })),
-                React.createElement("span", { style: { paddingTop: 4 }, className: className }, "\u27F7"),
-                React.createElement(DateTimeInput, Object.assign({ value: toValue }, props, { disabled: disabled, inputDisabled: this.state.popupVisible, allowClear: allowClear, bordered: false, hidePopup: true, style: { width: "auto" }, inputStyle: { paddingLeft: 2 }, onChange: (value) => {
-                        var _a, _b;
-                        (_b = (_a = this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, this.props.fromValue, value);
-                    } }))),
-            !hidePopup && !renderAsCalendar && React.createElement("div", { className: "ant-input-number-handler-wrap " + className, style: {
-                    width: 28,
-                    opacity: 1,
-                    height: "100%",
-                    textAlign: "center",
-                    cursor: disabled ? "not-allowed" : "pointer"
-                }, onClick: (event) => {
-                    var _a, _b;
-                    if (!disabled && document.createEvent) {
-                        if (this.state.popupVisible) {
-                            this.closePopup();
-                        }
-                        else {
-                            var ev = document.createEvent('HTMLEvents');
-                            ev.initEvent('contextmenu', true, false);
-                            event.target.dispatchEvent(ev);
-                            (_b = (_a = this.props).onFocus) === null || _b === void 0 ? void 0 : _b.call(_a);
-                        }
-                    }
-                } },
-                React.createElement(CalendarOutlined, { style: { color: "rgba(0,0,0,0.65)", verticalAlign: "middle", marginTop: 2 } }))));
-    }
-    render() {
-        if (this.props.renderAsCalendar) {
-            return this.renderPopup();
-        }
-        else if (this.props.hidePopup) {
-            return this.renderInput();
-        }
-        else {
-            return (React.createElement(Tooltip, { color: "white", key: "date-range-popup-" + this.state.popupKeyIndex, trigger: this.props.disabled ? [] : ["contextMenu"], align: this.props.align, placement: this.props.placement, overlayInnerStyle: { maxHeight: "100vh", overflowY: "auto", overflowX: "hidden" }, onOpenChange: (visible) => {
-                    var _a, _b, _c, _d;
-                    if (visible) {
-                        (_b = (_a = this.props).onFocus) === null || _b === void 0 ? void 0 : _b.call(_a);
-                    }
-                    else {
-                        (_d = (_c = this.props).onBlur) === null || _d === void 0 ? void 0 : _d.call(_c);
-                    }
-                    this.setState({ popupVisible: visible });
-                }, overlayClassName: "date-range-picker-popup", title: this.renderPopup() }, this.renderInput()));
-        }
-    }
-}
+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 dayjs from "dayjs";
+import { CalendarOutlined } from "@ant-design/icons";
+import { Divider, Switch, Tag, Tooltip } from "antd";
+import DateTimeInput from "./dateTimeInput";
+import memoizeOne from "memoize-one";
+import KeyboardUtils from "../keyboard/keyboardUtils";
+import i18n from "d2core/i18n/i18n";
+import DateRangeInputAdvancedPanel, { TimeShiftDirection } from "./dateRangeInputAdvancedPanel";
+export var DateRangeInputMode;
+(function (DateRangeInputMode) {
+    DateRangeInputMode[DateRangeInputMode["SIMPLE"] = 0] = "SIMPLE";
+    DateRangeInputMode[DateRangeInputMode["ADVANCED"] = 1] = "ADVANCED";
+})(DateRangeInputMode || (DateRangeInputMode = {}));
+export default class DateRangeInput extends React.Component {
+    constructor(props) {
+        var _a;
+        super(props);
+        this.state = {
+            valid: !!props.fromValue && props.fromValue.isValid() && !!props.toValue && props.toValue.isValid(),
+            selectionStartDate: null,
+            popupKeyIndex: 0,
+            popupVisible: false,
+            mode: (_a = props.defaultMode) !== null && _a !== void 0 ? _a : DateRangeInputMode.SIMPLE,
+        };
+        this.getDefaultSelectedDateForFromPanel = memoizeOne(this.getDefaultSelectedDateForFromPanel.bind(this));
+    }
+    componentDidUpdate(_prevProps, prevState) {
+        if (prevState.popupVisible !== this.state.popupVisible && this.props.onPopupVisibleChange) {
+            this.props.onPopupVisibleChange(this.state.popupVisible);
+        }
+    }
+    getDefaultSelectedDateForFromPanel(fromDate, toDate) {
+        if (!!fromDate && !!toDate && fromDate.isSame(toDate, "date")) {
+            return fromDate.clone().subtract(1, "month");
+        }
+        else {
+            return fromDate !== null && fromDate !== void 0 ? fromDate : dayjs().startOf("day").subtract(1, "month");
+        }
+    }
+    getFromValue(date) {
+        var _a, _b;
+        return ((_b = (_a = this.props.fromValue) === null || _a === void 0 ? void 0 : _a.clone()) !== null && _b !== void 0 ? _b : dayjs().startOf("day")).year(date.year()).month(date.month()).date(date.date());
+    }
+    getToValue(date) {
+        var _a, _b;
+        return ((_b = (_a = this.props.toValue) === null || _a === void 0 ? void 0 : _a.clone()) !== null && _b !== void 0 ? _b : dayjs().endOf("day")).year(date.year()).month(date.month()).date(date.date());
+    }
+    closePopup() {
+        var _a, _b;
+        this.setState({ popupKeyIndex: this.state.popupKeyIndex + 1, popupVisible: false });
+        (_b = (_a = this.props).onPopupVisibleChange) === null || _b === void 0 ? void 0 : _b.call(_a, false);
+    }
+    onChange(fromValue, toValue) {
+        var _a, _b;
+        if (this.props.minDateTime && (fromValue === null || fromValue === void 0 ? void 0 : fromValue.isBefore(this.props.minDateTime))) {
+            fromValue = this.props.minDateTime;
+        }
+        if (this.props.maxDateTime && (toValue === null || toValue === void 0 ? void 0 : toValue.isAfter(this.props.maxDateTime))) {
+            toValue = this.props.maxDateTime;
+        }
+        (_b = (_a = this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, fromValue, toValue);
+    }
+    renderSimplePart() {
+        const _a = this.props, { fromValue, toValue, onChange, style, allowClear, renderAsCalendar, hidePopup, align, defaultMode, onModeChange, confirmButtonsRenderer, onPopupVisibleChange } = _a, props = __rest(_a, ["fromValue", "toValue", "onChange", "style", "allowClear", "renderAsCalendar", "hidePopup", "align", "defaultMode", "onModeChange", "confirmButtonsRenderer", "onPopupVisibleChange"]);
+        const markedDateInterval = this.props.fromValue && this.props.toValue ? [this.props.fromValue, this.props.toValue] : undefined;
+        return (React.createElement("div", null,
+            React.createElement("div", { style: { display: "flex" } },
+                React.createElement(DateTimeInput, Object.assign({ value: fromValue }, props, { allowClear: allowClear, renderAsCalendar: true, style: { width: "100%" }, onChange: (date) => {
+                        var _a, _b;
+                        if (date) {
+                            const fromValue = this.getFromValue(date);
+                            const toValue = this.getToValue(date);
+                            (_b = (_a = this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, fromValue, toValue);
+                        }
+                    }, defaultSelectedDate: this.getDefaultSelectedDateForFromPanel(fromValue, toValue), markedDateInterval: markedDateInterval, onDateItemMouseDown: (date) => {
+                        var _a, _b;
+                        this.setState({ selectionStartDate: date });
+                        const dateFrom = this.getFromValue(date);
+                        const dateTo = this.getToValue(date);
+                        (_b = (_a = this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, dateFrom, dateTo);
+                    }, onDateItemMouseOver: (date) => {
+                        var _a, _b;
+                        if (KeyboardUtils.isMouseDown() && !!this.state.selectionStartDate) {
+                            let dateFrom;
+                            let dateTo;
+                            if (this.state.selectionStartDate.isBefore(date)) {
+                                dateFrom = this.state.selectionStartDate;
+                                dateTo = date;
+                            }
+                            else {
+                                dateFrom = date;
+                                dateTo = this.state.selectionStartDate;
+                            }
+                            dateFrom = this.getFromValue(dateFrom);
+                            dateTo = this.getToValue(dateTo);
+                            (_b = (_a = this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, dateFrom, dateTo);
+                        }
+                    }, onDateItemMouseUp: (_date) => {
+                        this.setState({ selectionStartDate: null });
+                    }, ignoreKeyStrokes: true })),
+                React.createElement(Divider, { type: "vertical", style: { height: "auto" } }),
+                React.createElement(DateTimeInput, Object.assign({ value: toValue }, props, { renderAsCalendar: true, allowClear: allowClear, style: { width: "100%" }, onChange: (date) => {
+                        var _a, _b;
+                        if (date) {
+                            const fromValue = this.getFromValue(date);
+                            const toValue = this.getToValue(date);
+                            (_b = (_a = this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, fromValue, toValue);
+                        }
+                    }, markedDateInterval: markedDateInterval, onDateItemMouseDown: (date) => {
+                        var _a, _b;
+                        this.setState({ selectionStartDate: date });
+                        const dateFrom = this.getFromValue(date);
+                        const dateTo = this.getToValue(date);
+                        (_b = (_a = this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, dateFrom, dateTo);
+                    }, onDateItemMouseOver: (date) => {
+                        var _a, _b;
+                        if (KeyboardUtils.isMouseDown() && !!this.state.selectionStartDate) {
+                            let dateFrom;
+                            let dateTo;
+                            if (this.state.selectionStartDate.isBefore(date)) {
+                                dateFrom = this.state.selectionStartDate;
+                                dateTo = date;
+                            }
+                            else {
+                                dateFrom = date;
+                                dateTo = this.state.selectionStartDate;
+                            }
+                            dateFrom = this.getFromValue(dateFrom);
+                            dateTo = this.getToValue(dateTo);
+                            (_b = (_a = this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, dateFrom, dateTo);
+                        }
+                    }, onDateItemMouseUp: (_date) => {
+                        this.setState({ selectionStartDate: null });
+                    }, ignoreKeyStrokes: true }))),
+            React.createElement("div", { style: { borderTop: "1px solid #ddd", paddingTop: 6 } }, this.props.ranges && Object.keys(this.props.ranges).map((rangeName, index) => {
+                return (React.createElement(Tag, { style: { userSelect: "none", cursor: "pointer" }, color: "blue", key: `range-${index}`, onClick: () => {
+                        var _a, _b, _c;
+                        const rangeFunction = (_a = this.props.ranges) === null || _a === void 0 ? void 0 : _a[rangeName];
+                        if (rangeFunction) {
+                            const range = rangeFunction();
+                            (_c = (_b = this.props).onChange) === null || _c === void 0 ? void 0 : _c.call(_b, range[0], range[1]);
+                        }
+                    } }, rangeName));
+            }))));
+    }
+    renderAdvancedPart() {
+        const _a = this.props, { fromValue, toValue, onChange, style, allowClear, renderAsCalendar, hidePopup, align, defaultMode, onModeChange, confirmButtonsRenderer, onPopupVisibleChange } = _a, props = __rest(_a, ["fromValue", "toValue", "onChange", "style", "allowClear", "renderAsCalendar", "hidePopup", "align", "defaultMode", "onModeChange", "confirmButtonsRenderer", "onPopupVisibleChange"]);
+        return (React.createElement("div", null,
+            React.createElement("div", { style: { display: "flex" } },
+                React.createElement(DateTimeInput, Object.assign({}, props, { style: { width: "47%" }, value: fromValue, onChange: (value) => {
+                        var _a, _b;
+                        (_b = (_a = this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, value, this.props.toValue);
+                    } })),
+                React.createElement("span", { style: { width: "6%", paddingTop: 4, color: "rgba(0, 0, 0, 0.65)", textAlign: "center" } }, "\u27F7"),
+                React.createElement(DateTimeInput, Object.assign({}, props, { style: { width: "47%" }, value: toValue, onChange: (value) => {
+                        var _a, _b;
+                        (_b = (_a = this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, this.props.fromValue, value);
+                    } }))),
+            React.createElement(DateRangeInputAdvancedPanel, { onBeginIntervalChange: unit => {
+                    let from;
+                    if (unit === "15minutes") {
+                        const roundedMinutes = Math.floor(dayjs().minute() / 15) * 15;
+                        from = dayjs().startOf("hour").minute(roundedMinutes);
+                    }
+                    else {
+                        from = dayjs().startOf(unit);
+                    }
+                    this.onChange(from, this.props.toValue);
+                }, onIntervalDurationChange: unitOfTime => {
+                    if (this.props.fromValue) {
+                        let to;
+                        if (unitOfTime === "4years") {
+                            to = this.props.fromValue.clone().add(4, "year").subtract(1, "millisecond");
+                        }
+                        else {
+                            to = this.props.fromValue.clone().add(1, unitOfTime).subtract(1, "millisecond");
+                        }
+                        this.onChange(this.props.fromValue, to);
+                    }
+                }, onTimeShift: (shiftBegin, shiftEnd, unitOfTime, type) => {
+                    var _a, _b;
+                    let fromValue = (_a = this.props.fromValue) !== null && _a !== void 0 ? _a : null;
+                    let toValue = (_b = this.props.toValue) !== null && _b !== void 0 ? _b : null;
+                    if (shiftBegin && fromValue) {
+                        if (type === TimeShiftDirection.INCREMENT) {
+                            fromValue = fromValue.add(1, unitOfTime);
+                        }
+                        else if (type === TimeShiftDirection.DECREMENT) {
+                            fromValue = fromValue.subtract(1, unitOfTime);
+                        }
+                    }
+                    if (shiftEnd && toValue) {
+                        if (type === TimeShiftDirection.INCREMENT) {
+                            toValue = toValue.add(1, unitOfTime);
+                        }
+                        else if (type === TimeShiftDirection.DECREMENT) {
+                            toValue = toValue.subtract(1, unitOfTime);
+                        }
+                    }
+                    this.onChange(fromValue, toValue);
+                }, onEndIntervalChange: unit => {
+                    let to;
+                    if (unit === "15minutes") {
+                        const roundedMinutes = Math.floor(dayjs().minute() / 15) * 15;
+                        to = dayjs().startOf("hour").minute(roundedMinutes).subtract(1, "millisecond");
+                    }
+                    else {
+                        to = dayjs().startOf(unit).subtract(1, "millisecond");
+                    }
+                    this.onChange(this.props.fromValue, to);
+                } })));
+    }
+    renderPopup() {
+        var _a, _b;
+        return (React.createElement("div", { onFocus: this.props.onFocus, onBlur: this.props.onBlur },
+            this.state.mode === DateRangeInputMode.SIMPLE && this.renderSimplePart(),
+            this.state.mode === DateRangeInputMode.ADVANCED && this.renderAdvancedPart(),
+            React.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-end" } },
+                React.createElement(Switch, { style: { float: "right", marginTop: 8 }, checked: this.state.mode === DateRangeInputMode.ADVANCED, onChange: checked => {
+                        var _a, _b;
+                        const mode = checked ? DateRangeInputMode.ADVANCED : DateRangeInputMode.SIMPLE;
+                        this.setState({ mode: mode });
+                        (_b = (_a = this.props).onModeChange) === null || _b === void 0 ? void 0 : _b.call(_a, mode);
+                    }, checkedChildren: i18n("Advanced Mode"), unCheckedChildren: i18n("Simple Mode") }), (_b = (_a = this.props).confirmButtonsRenderer) === null || _b === void 0 ? void 0 :
+                _b.call(_a))));
+    }
+    renderInput() {
+        const _a = this.props, { fromValue, toValue, onChange, style, allowClear, renderAsCalendar, hidePopup, align, disabled, defaultMode, onModeChange, confirmButtonsRenderer, onPopupVisibleChange } = _a, props = __rest(_a, ["fromValue", "toValue", "onChange", "style", "allowClear", "renderAsCalendar", "hidePopup", "align", "disabled", "defaultMode", "onModeChange", "confirmButtonsRenderer", "onPopupVisibleChange"]);
+        let className = "ant-input ant-input-outlined";
+        if (disabled || this.state.popupVisible) {
+            className += " ant-input-disabled";
+        }
+        return (React.createElement("div", { style: Object.assign(Object.assign({}, style), { padding: 0, position: "relative" }), className: className, onFocus: this.props.onFocus, onBlur: this.props.onBlur },
+            React.createElement("div", { style: { display: "flex", paddingRight: 8 } },
+                React.createElement(DateTimeInput, Object.assign({ value: fromValue }, props, { disabled: disabled, inputDisabled: this.state.popupVisible, allowClear: allowClear, bordered: false, hidePopup: true, style: { width: "auto" }, inputStyle: { paddingRight: 2 }, onChange: (value) => {
+                        var _a, _b;
+                        (_b = (_a = this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, value, this.props.toValue);
+                    } })),
+                React.createElement("span", { style: { alignSelf: "center" } }, "\u27F7"),
+                React.createElement(DateTimeInput, Object.assign({ value: toValue }, props, { disabled: disabled, inputDisabled: this.state.popupVisible, allowClear: allowClear, bordered: false, hidePopup: true, style: { width: "auto" }, inputStyle: { paddingLeft: 2 }, onChange: (value) => {
+                        var _a, _b;
+                        (_b = (_a = this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, this.props.fromValue, value);
+                    } })),
+                !hidePopup && !renderAsCalendar &&
+                    React.createElement(CalendarOutlined, { style: { cursor: (disabled || this.state.popupVisible) ? "not-allowed" : "pointer" }, onClick: (event) => {
+                            var _a, _b;
+                            if (!disabled && document.createEvent) {
+                                if (this.state.popupVisible) {
+                                    this.closePopup();
+                                }
+                                else {
+                                    var ev = document.createEvent('HTMLEvents');
+                                    ev.initEvent('contextmenu', true, false);
+                                    event.target.dispatchEvent(ev);
+                                    (_b = (_a = this.props).onFocus) === null || _b === void 0 ? void 0 : _b.call(_a);
+                                }
+                            }
+                        } }))));
+    }
+    render() {
+        if (this.props.renderAsCalendar) {
+            return this.renderPopup();
+        }
+        else if (this.props.hidePopup) {
+            return this.renderInput();
+        }
+        else {
+            return (React.createElement(Tooltip, { color: "white", key: "date-range-popup-" + this.state.popupKeyIndex, trigger: this.props.disabled ? [] : ["contextMenu"], align: this.props.align, placement: this.props.placement, overlayInnerStyle: { maxHeight: "100vh", overflowY: "auto", overflowX: "hidden" }, onOpenChange: (visible) => {
+                    var _a, _b, _c, _d;
+                    if (visible) {
+                        (_b = (_a = this.props).onFocus) === null || _b === void 0 ? void 0 : _b.call(_a);
+                    }
+                    else {
+                        (_d = (_c = this.props).onBlur) === null || _d === void 0 ? void 0 : _d.call(_c);
+                    }
+                    this.setState({ popupVisible: visible });
+                }, overlayClassName: "date-range-picker-popup", title: this.renderPopup() }, this.renderInput()));
+        }
+    }
+}
 //# sourceMappingURL=dateRangeInput.js.map