d2coreui 21.0.11 → 21.0.12

package/components/date/dateRangeInputAdvancedPanel.js

@@ -0,0 +1,116 @@
+import React from "react";
+import { Button, Col, Divider, Row } from "antd";
+import i18n from "d2core/i18n/i18n";
+import Icon from "@ant-design/icons/es/components/Icon";
+export var TimeShiftDirection;
+(function (TimeShiftDirection) {
+    TimeShiftDirection[TimeShiftDirection["INCREMENT"] = 0] = "INCREMENT";
+    TimeShiftDirection[TimeShiftDirection["DECREMENT"] = 1] = "DECREMENT";
+})(TimeShiftDirection || (TimeShiftDirection = {}));
+export default class DateRangeInputAdvancedPanel extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            timeShiftBegin: false,
+            timeShiftBoth: true,
+            timeShiftEnd: false,
+        };
+    }
+    renderSectionTitle(title, style) {
+        return (React.createElement("span", { style: Object.assign({ display: "block", fontWeight: "bold", textAlign: "center", marginBottom: 4 }, style) }, `${title}:`));
+    }
+    renderButton(title, callback) {
+        return (React.createElement(Button, { className: "hoverable-primary-ghost-button", style: { width: "100%", marginBottom: 6 }, type: "primary", size: "small", ghost: true, onClick: callback }, title));
+    }
+    renderTimeShiftItem(title, callback) {
+        const disabled = !this.state.timeShiftBegin && !this.state.timeShiftEnd && !this.state.timeShiftBoth;
+        return (React.createElement("div", { style: { position: "relative", marginBottom: 6 } },
+            React.createElement(Button, { className: disabled ? undefined : "hoverable-primary-ghost-button", style: { width: "20%", borderRight: 0, borderRadius: "2px 0px 0px 2px" }, disabled: disabled, type: "primary", size: "small", ghost: true, onClick: () => callback(TimeShiftDirection.DECREMENT) }, "-"),
+            React.createElement(Button, { style: { width: "60%", borderLeft: 0, borderRight: 0, borderRadius: 0 }, disabled: disabled, type: "primary", size: "small", ghost: true }, title),
+            React.createElement(Button, { className: disabled ? undefined : "hoverable-primary-ghost-button", style: { width: "20%", borderLeft: 0, borderRadius: "0px 2px 2px 0px" }, disabled: disabled, type: "primary", size: "small", ghost: true, onClick: () => callback(TimeShiftDirection.INCREMENT) }, "+")));
+    }
+    renderTimeShiftIcon(shiftType) {
+        let checked = false;
+        if (shiftType === "begin") {
+            checked = this.state.timeShiftBegin;
+        }
+        else if (shiftType === "both") {
+            checked = this.state.timeShiftBoth;
+        }
+        else if (shiftType === "end") {
+            checked = this.state.timeShiftEnd;
+        }
+        return (React.createElement(Icon, { component: () => React.createElement("svg", { className: "icon", viewBox: "64 64 896 896", version: "1.1", width: 40, height: 40, cursor: "pointer", color: checked ? "#2998ff" : "rgba(0, 0, 0, 0.65)", onClick: () => {
+                    if (shiftType === "begin") {
+                        this.setState({ timeShiftBegin: !this.state.timeShiftBegin, timeShiftBoth: false, timeShiftEnd: false });
+                    }
+                    else if (shiftType === "both") {
+                        this.setState({ timeShiftBegin: false, timeShiftBoth: !this.state.timeShiftBoth, timeShiftEnd: false });
+                    }
+                    else if (shiftType === "end") {
+                        this.setState({ timeShiftBegin: false, timeShiftBoth: false, timeShiftEnd: !this.state.timeShiftEnd });
+                    }
+                } },
+                React.createElement("path", { d: "m 880.43128,184.00001 h -168 v -64 c 0,-4.4 -3.6,-8 -8,-8 h -56 c -4.4,0 -8,3.6 -8,8 v 64 h -256 v -64 c 0,-4.4 -3.6,-8 -8,-8 h -56 c -4.4,0 -8,3.6 -8,8 v 64 h -168 c -17.7,0 -32,14.3 -32,32 v 664 c 0,17.7 14.3,32 32,32 h 736 c 17.7,0 32,-14.3 32,-32 v -664 c 0,-17.7 -14.3,-32 -32,-32 z m -40,656 h -656 v -380 h 656 z m -656,-448 v -136 h 128 v 48 c 0,4.4 3.6,8 8,8 h 56 c 4.4,0 8,-3.6 8,-8 v -48 h 256 v 48 c 0,4.4 3.6,8 8,8 h 56 c 4.4,0 8,-3.6 8,-8 v -48 h 128 v 136 z", id: "path2231", style: { fill: "currentcolor" } }),
+                ["begin", "end"].includes(shiftType) &&
+                    React.createElement("g", { id: "g41" },
+                        React.createElement("g", { id: "path2822" }),
+                        React.createElement("g", { id: "path2824" }),
+                        React.createElement("g", { id: "path2826", transform: shiftType === "end" ? "rotate(180,512.9334,646.24561)" : "unset" },
+                            React.createElement("path", { id: "path50", style: { fill: "currentcolor" }, d: "m 358.80859,510.14062 a 34.41795,34.41795 0 0 0 -23.58789,9.24219 L 226.40625,620.82422 a 34.41795,34.41795 0 0 0 -1.70508,48.64453 34.41795,34.41795 0 0 0 48.64453,1.70703 l 108.8125,-101.4414 a 34.41795,34.41795 0 0 0 1.70703,-48.64454 34.41795,34.41795 0 0 0 -25.05664,-10.94922 z M 249.87565,645.99998 358.68957,544.55871 M 249.7207,611.58203 a 34.41795,34.41795 0 0 0 -24.90625,10.82813 34.41795,34.41795 0 0 0 1.47071,48.65234 l 108.29492,101.93164 a 34.41795,34.41795 0 0 0 48.65234,-1.4707 34.41795,34.41795 0 0 0 -1.47265,-48.65235 L 273.46484,620.9375 a 34.41795,34.41795 0 0 0 -23.74414,-9.35547 z m 0.15495,34.41795 108.29422,101.93273 M 264.8125,610.01953 A 35.98045,35.98045 0 0 0 228.83203,646 35.98045,35.98045 0 0 0 264.8125,681.98047 H 550.48633 A 35.98045,35.98045 0 0 0 586.4668,646 35.98045,35.98045 0 0 0 550.48633,610.01953 Z m 285.67298,35.98045 h -285.6727" }))),
+                shiftType === "both" && React.createElement("g", { id: "g65", transform: "rotate(180,512.9334,646.0254)" },
+                    React.createElement("path", { id: "path63", style: { fill: "currentcolor" }, d: "m 358.80859,510.14062 a 34.41795,34.41795 0 0 0 -23.58789,9.24219 L 226.40625,620.82422 a 34.41795,34.41795 0 0 0 -1.70508,48.64453 34.41795,34.41795 0 0 0 48.64453,1.70703 l 108.8125,-101.4414 a 34.41795,34.41795 0 0 0 1.70703,-48.64454 34.41795,34.41795 0 0 0 -25.05664,-10.94922 z M 249.87565,645.99998 358.68957,544.55871 M 249.7207,611.58203 a 34.41795,34.41795 0 0 0 -24.90625,10.82813 34.41795,34.41795 0 0 0 1.47071,48.65234 l 108.29492,101.93164 a 34.41795,34.41795 0 0 0 48.65234,-1.4707 34.41795,34.41795 0 0 0 -1.47265,-48.65235 L 273.46484,620.9375 a 34.41795,34.41795 0 0 0 -23.74414,-9.35547 z m 0.15495,34.41795 108.29422,101.93273 M 264.8125,610.01953 A 35.98045,35.98045 0 0 0 228.83203,646 35.98045,35.98045 0 0 0 264.8125,681.98047 H 550.48633 A 35.98045,35.98045 0 0 0 586.4668,646 35.98045,35.98045 0 0 0 550.48633,610.01953 Z m 285.67298,35.98045 h -285.6727 m 402.24543,135.9102 a -34.41795,-34.41795 0 0 0 23.58789,-9.24219 L 799.46055,671.22658 a -34.41795,-34.41795 0 0 0 1.70508,-48.64453 -34.41795,-34.41795 0 0 0 -48.64453,-1.70703 l -108.8125,101.4414 a -34.41795,-34.41795 0 0 0 -1.70703,48.64454 -34.41795,-34.41795 0 0 0 25.05664,10.94922 z M 775.99115,646.05082 667.17723,747.49209 M 776.1461,680.46877 a -34.41795,-34.41795 0 0 0 24.90625,-10.82813 -34.41795,-34.41795 0 0 0 -1.47071,-48.65234 L 691.28672,519.05666 a -34.41795,-34.41795 0 0 0 -48.65234,1.4707 -34.41795,-34.41795 0 0 0 1.47265,48.65235 L 752.40196,671.1133 a -34.41795,-34.41795 0 0 0 23.74414,9.35547 z M 775.99115,646.05082 667.69693,544.11809 M 761.0543,682.03127 A -35.98045,-35.98045 0 0 0 797.03477,646.0508 -35.98045,-35.98045 0 0 0 761.0543,610.07033 H 475.38047 A -35.98045,-35.98045 0 0 0 439.4,646.0508 -35.98045,-35.98045 0 0 0 475.38047,682.03127 Z M 475.38132,646.05082 h 285.6727" }))) }));
+    }
+    render() {
+        const timeShiftBegin = this.state.timeShiftBegin || this.state.timeShiftBoth;
+        const timeShiftEnd = this.state.timeShiftEnd || this.state.timeShiftBoth;
+        return (React.createElement("div", { style: { color: "rgba(0, 0, 0, 0.65)" } },
+            React.createElement(Divider, { style: { margin: "8px 0px 6px" } }),
+            React.createElement(Row, null,
+                React.createElement(Col, { span: 8, style: { padding: "0px 16px 0px" } },
+                    this.renderSectionTitle(i18n("Interval Begin")),
+                    this.renderButton(i18n("Now"), () => this.props.onBeginIntervalChange("15minutes")),
+                    this.renderButton(i18n("Today"), () => this.props.onBeginIntervalChange("day")),
+                    this.renderButton(i18n("This Week"), () => this.props.onBeginIntervalChange("week")),
+                    this.renderButton(i18n("This Month"), () => this.props.onBeginIntervalChange("month")),
+                    this.renderButton(i18n("This Quarter"), () => this.props.onBeginIntervalChange("quarter")),
+                    this.renderButton(i18n("This Year"), () => this.props.onBeginIntervalChange("year"))),
+                React.createElement(Col, { span: 1 },
+                    React.createElement(Divider, { type: "vertical", style: { height: "100%" } })),
+                React.createElement(Col, { span: 7, style: { padding: "0px 14px 0px" } },
+                    this.renderSectionTitle(i18n("Interval Duration")),
+                    this.renderButton(i18n("Hour"), () => this.props.onIntervalDurationChange("hour")),
+                    this.renderButton(i18n("Day"), () => this.props.onIntervalDurationChange("day")),
+                    this.renderButton(i18n("Week"), () => this.props.onIntervalDurationChange("week")),
+                    this.renderButton(i18n("Month"), () => this.props.onIntervalDurationChange("month")),
+                    this.renderButton(i18n("Quarter"), () => this.props.onIntervalDurationChange("quarter")),
+                    this.renderButton(i18n("Year"), () => this.props.onIntervalDurationChange("year")),
+                    this.renderButton(`4 ${i18n("Years")}`, () => this.props.onIntervalDurationChange("4years"))),
+                React.createElement(Col, { span: 1 },
+                    React.createElement(Divider, { type: "vertical", style: { height: "100%" } })),
+                React.createElement(Col, { span: 7, style: { padding: "0px 16px 0px" } },
+                    this.renderSectionTitle(i18n("Time Shift")),
+                    React.createElement("div", { style: {
+                            height: 52,
+                            marginBottom: 8,
+                            display: "flex",
+                            justifyContent: "center",
+                            alignItems: "center",
+                        } },
+                        this.renderTimeShiftIcon("begin"),
+                        this.renderTimeShiftIcon("both"),
+                        this.renderTimeShiftIcon("end")),
+                    this.renderTimeShiftItem(i18n("Hour"), (direction) => this.props.onTimeShift(timeShiftBegin, timeShiftEnd, "hour", direction)),
+                    this.renderTimeShiftItem(i18n("Day"), (direction) => this.props.onTimeShift(timeShiftBegin, timeShiftEnd, "day", direction)),
+                    this.renderTimeShiftItem(i18n("Week"), (direction) => this.props.onTimeShift(timeShiftBegin, timeShiftEnd, "week", direction)),
+                    this.renderTimeShiftItem(i18n("Month"), (direction) => this.props.onTimeShift(timeShiftBegin, timeShiftEnd, "month", direction)),
+                    this.renderTimeShiftItem(i18n("Year"), (direction) => this.props.onTimeShift(timeShiftBegin, timeShiftEnd, "year", direction)))),
+            React.createElement(Divider, { style: { margin: "6px 0px 10px" } }),
+            React.createElement("div", { style: { display: "flex" } },
+                React.createElement("div", { style: { width: 192 } }, this.renderSectionTitle(i18n("Interval End"), { marginBottom: 0 })),
+                React.createElement("div", { style: { marginLeft: 18, width: 93 } }, this.renderButton("15 min", () => this.props.onEndIntervalChange("15minutes"))),
+                React.createElement("div", { style: { marginLeft: 8, width: 93 } }, this.renderButton(i18n("Hour"), () => this.props.onEndIntervalChange("hour"))),
+                React.createElement("div", { style: { marginLeft: 8, width: 92 } }, this.renderButton(i18n("Day"), () => this.props.onEndIntervalChange("day"))))));
+    }
+}
+//# sourceMappingURL=dateRangeInputAdvancedPanel.js.map

package/components/date/dateRangeInputAdvancedPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dateRangeInputAdvancedPanel.js","sourceRoot":"","sources":["../../../../components/date/dateRangeInputAdvancedPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\r\nimport {Button, Col, Divider, Row} from \"antd\";\r\nimport i18n from \"d2core/i18n/i18n\";\r\nimport {unitOfTime} from \"moment\";\r\nimport Icon from \"@ant-design/icons/es/components/Icon\";\r\n\r\nexport enum TimeShiftDirection {\r\n    INCREMENT,\r\n    DECREMENT,\r\n}\r\n\r\ninterface DateRangeInputAdvancedPanelProps {\r\n    onBeginIntervalChange(unit: unitOfTime.StartOf | \"15minutes\"): void\r\n\r\n    onIntervalDurationChange(unitOfTime: unitOfTime.DurationConstructor | \"4years\"): void\r\n\r\n    onTimeShift(shiftBegin: boolean, shiftEnd: boolean, unitOfTime: unitOfTime.DurationConstructor, direction: TimeShiftDirection): void\r\n\r\n    onEndIntervalChange(unit: unitOfTime.StartOf | \"15minutes\"): void\r\n}\r\n\r\ninterface DateRangeInputAdvancedPanelState {\r\n    timeShiftBegin: boolean\r\n    timeShiftBoth: boolean\r\n    timeShiftEnd: boolean\r\n}\r\n\r\nexport default class DateRangeInputAdvancedPanel extends React.Component<DateRangeInputAdvancedPanelProps, DateRangeInputAdvancedPanelState> {\r\n    constructor(props: Readonly<DateRangeInputAdvancedPanelProps>) {\r\n        super(props);\r\n\r\n        this.state = {\r\n            timeShiftBegin: false,\r\n            timeShiftBoth: true,\r\n            timeShiftEnd: false,\r\n        }\r\n    }\r\n\r\n    private renderSectionTitle(title: React.ReactNode, style?: React.CSSProperties) {\r\n        return (\r\n            <span style={\r\n                Object.assign({display: \"block\", fontWeight: \"bold\", textAlign: \"center\", marginBottom: 4}, style)}\r\n            >\r\n                {`${title}:`}\r\n            </span>\r\n        );\r\n    }\r\n\r\n    private renderButton(title: React.ReactNode, callback: () => void) {\r\n        return (\r\n            <Button\r\n                className=\"hoverable-primary-ghost-button\"\r\n                style={{width: \"100%\", marginBottom: 6}}\r\n                type=\"primary\"\r\n                size=\"small\"\r\n                // shape=\"round\"\r\n                ghost\r\n                onClick={callback}\r\n            >\r\n                {title}\r\n            </Button>\r\n        );\r\n    }\r\n\r\n    private renderTimeShiftItem(title: React.ReactNode, callback: (direction: TimeShiftDirection) => void) {\r\n        const disabled = !this.state.timeShiftBegin && !this.state.timeShiftEnd && !this.state.timeShiftBoth;\r\n\r\n        return (\r\n            <div style={{position: \"relative\", marginBottom: 6}}>\r\n                <Button\r\n                    className={disabled ? undefined : \"hoverable-primary-ghost-button\"}\r\n                    style={{width: \"20%\", borderRight: 0, borderRadius: \"2px 0px 0px 2px\"}}\r\n                    disabled={disabled}\r\n                    type=\"primary\"\r\n                    size=\"small\"\r\n                    ghost\r\n                    onClick={() => callback(TimeShiftDirection.DECREMENT)}\r\n                >\r\n                    -\r\n                </Button>\r\n                <Button\r\n                    style={{width: \"60%\", borderLeft: 0, borderRight: 0, borderRadius: 0}}\r\n                    disabled={disabled}\r\n                    type=\"primary\"\r\n                    size=\"small\"\r\n                    ghost\r\n                >\r\n                    {title}\r\n                </Button>\r\n                <Button\r\n                    className={disabled ? undefined : \"hoverable-primary-ghost-button\"}\r\n                    style={{width: \"20%\", borderLeft: 0, borderRadius: \"0px 2px 2px 0px\"}}\r\n                    disabled={disabled}\r\n                    type=\"primary\"\r\n                    size=\"small\"\r\n                    ghost\r\n                    onClick={() => callback(TimeShiftDirection.INCREMENT)}\r\n                >\r\n                    +\r\n                </Button>\r\n            </div>\r\n        );\r\n    }\r\n\r\n    private renderTimeShiftIcon(shiftType: \"begin\" | \"both\" | \"end\") {\r\n        let checked = false;\r\n        if (shiftType === \"begin\") {\r\n            checked = this.state.timeShiftBegin;\r\n        } else if (shiftType === \"both\") {\r\n            checked = this.state.timeShiftBoth;\r\n        } else if (shiftType === \"end\") {\r\n            checked = this.state.timeShiftEnd;\r\n        }\r\n\r\n        return (\r\n            <Icon component={() =>\r\n                <svg\r\n                    className=\"icon\"\r\n                    viewBox=\"64 64 896 896\"\r\n                    version=\"1.1\"\r\n                    width={40}\r\n                    height={40}\r\n                    cursor=\"pointer\"\r\n                    color={checked ? \"#2998ff\" : \"rgba(0, 0, 0, 0.65)\"}\r\n                    onClick={() => {\r\n                        if (shiftType === \"begin\") {\r\n                            this.setState({timeShiftBegin: !this.state.timeShiftBegin, timeShiftBoth: false, timeShiftEnd: false});\r\n                        } else if (shiftType === \"both\") {\r\n                            this.setState({timeShiftBegin: false, timeShiftBoth: !this.state.timeShiftBoth, timeShiftEnd: false});\r\n                        } else if (shiftType === \"end\") {\r\n                            this.setState({timeShiftBegin: false, timeShiftBoth: false, timeShiftEnd: !this.state.timeShiftEnd});\r\n                        }\r\n                    }}\r\n                >\r\n                    <path\r\n                        d=\"m 880.43128,184.00001 h -168 v -64 c 0,-4.4 -3.6,-8 -8,-8 h -56 c -4.4,0 -8,3.6 -8,8 v 64 h -256 v -64 c 0,-4.4 -3.6,-8 -8,-8 h -56 c -4.4,0 -8,3.6 -8,8 v 64 h -168 c -17.7,0 -32,14.3 -32,32 v 664 c 0,17.7 14.3,32 32,32 h 736 c 17.7,0 32,-14.3 32,-32 v -664 c 0,-17.7 -14.3,-32 -32,-32 z m -40,656 h -656 v -380 h 656 z m -656,-448 v -136 h 128 v 48 c 0,4.4 3.6,8 8,8 h 56 c 4.4,0 8,-3.6 8,-8 v -48 h 256 v 48 c 0,4.4 3.6,8 8,8 h 56 c 4.4,0 8,-3.6 8,-8 v -48 h 128 v 136 z\"\r\n                        id=\"path2231\"\r\n                        style={{fill: \"currentcolor\"}}\r\n                    />\r\n                    {[\"begin\", \"end\"].includes(shiftType) &&\r\n                        <g id=\"g41\">\r\n                        <g id=\"path2822\"/>\r\n                        <g id=\"path2824\"/>\r\n                        <g id=\"path2826\" transform={shiftType === \"end\" ? \"rotate(180,512.9334,646.24561)\" : \"unset\"}>\r\n                            <path\r\n                                id=\"path50\"\r\n                                style={{fill: \"currentcolor\"}}\r\n                                d=\"m 358.80859,510.14062 a 34.41795,34.41795 0 0 0 -23.58789,9.24219 L 226.40625,620.82422 a 34.41795,34.41795 0 0 0 -1.70508,48.64453 34.41795,34.41795 0 0 0 48.64453,1.70703 l 108.8125,-101.4414 a 34.41795,34.41795 0 0 0 1.70703,-48.64454 34.41795,34.41795 0 0 0 -25.05664,-10.94922 z M 249.87565,645.99998 358.68957,544.55871 M 249.7207,611.58203 a 34.41795,34.41795 0 0 0 -24.90625,10.82813 34.41795,34.41795 0 0 0 1.47071,48.65234 l 108.29492,101.93164 a 34.41795,34.41795 0 0 0 48.65234,-1.4707 34.41795,34.41795 0 0 0 -1.47265,-48.65235 L 273.46484,620.9375 a 34.41795,34.41795 0 0 0 -23.74414,-9.35547 z m 0.15495,34.41795 108.29422,101.93273 M 264.8125,610.01953 A 35.98045,35.98045 0 0 0 228.83203,646 35.98045,35.98045 0 0 0 264.8125,681.98047 H 550.48633 A 35.98045,35.98045 0 0 0 586.4668,646 35.98045,35.98045 0 0 0 550.48633,610.01953 Z m 285.67298,35.98045 h -285.6727\"/>\r\n                        </g>\r\n                    </g>}\r\n                    {shiftType === \"both\" && <g id=\"g65\" transform=\"rotate(180,512.9334,646.0254)\">\r\n                        <path\r\n                            id=\"path63\"\r\n                            style={{fill: \"currentcolor\"}}\r\n                            d=\"m 358.80859,510.14062 a 34.41795,34.41795 0 0 0 -23.58789,9.24219 L 226.40625,620.82422 a 34.41795,34.41795 0 0 0 -1.70508,48.64453 34.41795,34.41795 0 0 0 48.64453,1.70703 l 108.8125,-101.4414 a 34.41795,34.41795 0 0 0 1.70703,-48.64454 34.41795,34.41795 0 0 0 -25.05664,-10.94922 z M 249.87565,645.99998 358.68957,544.55871 M 249.7207,611.58203 a 34.41795,34.41795 0 0 0 -24.90625,10.82813 34.41795,34.41795 0 0 0 1.47071,48.65234 l 108.29492,101.93164 a 34.41795,34.41795 0 0 0 48.65234,-1.4707 34.41795,34.41795 0 0 0 -1.47265,-48.65235 L 273.46484,620.9375 a 34.41795,34.41795 0 0 0 -23.74414,-9.35547 z m 0.15495,34.41795 108.29422,101.93273 M 264.8125,610.01953 A 35.98045,35.98045 0 0 0 228.83203,646 35.98045,35.98045 0 0 0 264.8125,681.98047 H 550.48633 A 35.98045,35.98045 0 0 0 586.4668,646 35.98045,35.98045 0 0 0 550.48633,610.01953 Z m 285.67298,35.98045 h -285.6727 m 402.24543,135.9102 a -34.41795,-34.41795 0 0 0 23.58789,-9.24219 L 799.46055,671.22658 a -34.41795,-34.41795 0 0 0 1.70508,-48.64453 -34.41795,-34.41795 0 0 0 -48.64453,-1.70703 l -108.8125,101.4414 a -34.41795,-34.41795 0 0 0 -1.70703,48.64454 -34.41795,-34.41795 0 0 0 25.05664,10.94922 z M 775.99115,646.05082 667.17723,747.49209 M 776.1461,680.46877 a -34.41795,-34.41795 0 0 0 24.90625,-10.82813 -34.41795,-34.41795 0 0 0 -1.47071,-48.65234 L 691.28672,519.05666 a -34.41795,-34.41795 0 0 0 -48.65234,1.4707 -34.41795,-34.41795 0 0 0 1.47265,48.65235 L 752.40196,671.1133 a -34.41795,-34.41795 0 0 0 23.74414,9.35547 z M 775.99115,646.05082 667.69693,544.11809 M 761.0543,682.03127 A -35.98045,-35.98045 0 0 0 797.03477,646.0508 -35.98045,-35.98045 0 0 0 761.0543,610.07033 H 475.38047 A -35.98045,-35.98045 0 0 0 439.4,646.0508 -35.98045,-35.98045 0 0 0 475.38047,682.03127 Z M 475.38132,646.05082 h 285.6727\"/>\r\n                    </g>}\r\n                </svg>\r\n            }/>\r\n        );\r\n    }\r\n\r\n    render() {\r\n        const timeShiftBegin = this.state.timeShiftBegin || this.state.timeShiftBoth;\r\n        const timeShiftEnd = this.state.timeShiftEnd || this.state.timeShiftBoth;\r\n\r\n        return (\r\n            <div style={{color: \"rgba(0, 0, 0, 0.65)\"}}>\r\n                <Divider style={{margin: \"8px 0px 6px\"}}/>\r\n                <Row>\r\n                    <Col span={8} style={{padding: \"0px 16px 0px\"}}>\r\n                        {this.renderSectionTitle(i18n(\"Interval Begin\"))}\r\n                        {this.renderButton(i18n(\"Now\"), () => this.props.onBeginIntervalChange(\"15minutes\"))}\r\n                        {this.renderButton(i18n(\"Today\"), () => this.props.onBeginIntervalChange(\"day\"))}\r\n                        {this.renderButton(i18n(\"This Week\"), () => this.props.onBeginIntervalChange(\"week\"))}\r\n                        {this.renderButton(i18n(\"This Month\"), () => this.props.onBeginIntervalChange(\"month\"))}\r\n                        {this.renderButton(i18n(\"This Quarter\"), () => this.props.onBeginIntervalChange(\"quarter\"))}\r\n                        {this.renderButton(i18n(\"This Year\"), () => this.props.onBeginIntervalChange(\"year\"))}\r\n                    </Col>\r\n                    <Col span={1}>\r\n                        <Divider type=\"vertical\" style={{height: \"100%\"}}/>\r\n                    </Col>\r\n                    <Col span={7} style={{padding: \"0px 14px 0px\"}}>\r\n                        {this.renderSectionTitle(i18n(\"Interval Duration\"))}\r\n                        {this.renderButton(i18n(\"Hour\"), () => this.props.onIntervalDurationChange(\"hour\"))}\r\n                        {this.renderButton(i18n(\"Day\"), () => this.props.onIntervalDurationChange(\"day\"))}\r\n                        {this.renderButton(i18n(\"Week\"), () => this.props.onIntervalDurationChange(\"week\"))}\r\n                        {this.renderButton(i18n(\"Month\"), () => this.props.onIntervalDurationChange(\"month\"))}\r\n                        {this.renderButton(i18n(\"Quarter\"), () => this.props.onIntervalDurationChange(\"quarter\"))}\r\n                        {this.renderButton(i18n(\"Year\"), () => this.props.onIntervalDurationChange(\"year\"))}\r\n                        {this.renderButton(`4 ${i18n(\"Years\")}`, () => this.props.onIntervalDurationChange(\"4years\"))}\r\n                    </Col>\r\n                    <Col span={1}>\r\n                        <Divider type=\"vertical\" style={{height: \"100%\"}}/>\r\n                    </Col>\r\n                    <Col span={7} style={{padding: \"0px 16px 0px\"}}>\r\n                        {this.renderSectionTitle(i18n(\"Time Shift\"))}\r\n                        <div style={{\r\n                            height: 52,\r\n                            marginBottom: 8,\r\n                            display: \"flex\",\r\n                            justifyContent: \"center\",\r\n                            alignItems: \"center\",\r\n                        }}>\r\n                            {this.renderTimeShiftIcon(\"begin\")}\r\n                            {this.renderTimeShiftIcon(\"both\")}\r\n                            {this.renderTimeShiftIcon(\"end\")}\r\n                        </div>\r\n                        {this.renderTimeShiftItem(i18n(\"Hour\"), (direction) => this.props.onTimeShift(timeShiftBegin, timeShiftEnd, \"hour\", direction))}\r\n                        {this.renderTimeShiftItem(i18n(\"Day\"), (direction) => this.props.onTimeShift(timeShiftBegin, timeShiftEnd, \"day\", direction))}\r\n                        {this.renderTimeShiftItem(i18n(\"Week\"), (direction) => this.props.onTimeShift(timeShiftBegin, timeShiftEnd, \"week\", direction))}\r\n                        {this.renderTimeShiftItem(i18n(\"Month\"), (direction) => this.props.onTimeShift(timeShiftBegin, timeShiftEnd, \"month\", direction))}\r\n                        {this.renderTimeShiftItem(i18n(\"Year\"), (direction) => this.props.onTimeShift(timeShiftBegin, timeShiftEnd, \"year\", direction))}\r\n                    </Col>\r\n                </Row>\r\n                <Divider style={{margin: \"6px 0px 10px\"}}/>\r\n                <div style={{display: \"flex\"}}>\r\n                    <div style={{width: 192}}>\r\n                        {this.renderSectionTitle(i18n(\"Interval End\"), {marginBottom: 0})}\r\n                    </div>\r\n                    <div style={{marginLeft: 18, width: 93}}>\r\n                        {this.renderButton(\"15 min\", () => this.props.onEndIntervalChange(\"15minutes\"))}\r\n                    </div>\r\n                    <div style={{marginLeft: 8, width: 93}}>\r\n                        {this.renderButton(i18n(\"Hour\"), () => this.props.onEndIntervalChange(\"hour\"))}\r\n                    </div>\r\n                    <div style={{marginLeft: 8, width: 92}}>\r\n                        {this.renderButton(i18n(\"Day\"), () => this.props.onEndIntervalChange(\"day\"))}\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n\r\n}"]}

package/components/date/dateRangeInputConfirm.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { Moment } from "moment";
-import { DateRangeInputProps } from "./dateRangeInput";
+import { DateRangeInputMode, DateRangeInputProps } from "./dateRangeInput";
 import { TooltipPlacement } from "antd/es/tooltip";
 interface DateRangeInputConfirmProps extends DateRangeInputProps {
     requireConfirmationAtStart?: boolean;
@@ -12,10 +12,20 @@ interface DateRangeInputConfirmState {
     invalidDatesPresent: boolean;
     inputKeyIndex: number;
     requireConfirmation: boolean;
+    popupVisible: boolean;
+    mode: DateRangeInputMode;
 }
 export default class DateRangeInputConfirm extends React.Component<DateRangeInputConfirmProps, DateRangeInputConfirmState> {
+    private dateRangeInput;
     constructor(props: Readonly<DateRangeInputConfirmProps>);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    onKeyDown(event: KeyboardEvent): void;
     componentDidUpdate(prevProps: Readonly<DateRangeInputProps>): void;
+    private onConfirm;
+    private onRevert;
+    private renderConfirmButtons;
+    private confirmButtonsVisible;
     render(): any;
 }
 export {};

package/components/date/dateRangeInputConfirm.js

@@ -14,19 +14,40 @@ import { Button, Tooltip } from "antd";
 import { DateTimeUtils } from "d2core/utils/dateTimeUtils";
 import { CheckOutlined } from "@ant-design/icons";
 import i18n from "d2core/i18n/i18n";
-import DateRangeInput from "./dateRangeInput";
+import DateRangeInput, { DateRangeInputMode } from "./dateRangeInput";
 import { UndoIcon } from "../icons/undoIcon";
+import { Key } from "ts-key-enum";
 export default class DateRangeInputConfirm extends React.Component {
     constructor(props) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         super(props);
+        this.dateRangeInput = null;
         this.state = {
             currentFromValue: (_b = (_a = props.fromValue) === null || _a === void 0 ? void 0 : _a.clone()) !== null && _b !== void 0 ? _b : null,
             currentToValue: (_d = (_c = props.toValue) === null || _c === void 0 ? void 0 : _c.clone()) !== null && _d !== void 0 ? _d : null,
             invalidDatesPresent: false,
             inputKeyIndex: 0,
-            requireConfirmation: !!props.requireConfirmationAtStart
+            requireConfirmation: !!props.requireConfirmationAtStart,
+            popupVisible: false,
+            mode: (_e = props.defaultMode) !== null && _e !== void 0 ? _e : DateRangeInputMode.SIMPLE,
         };
+        this.onKeyDown = this.onKeyDown.bind(this);
+        this.onConfirm = this.onConfirm.bind(this);
+        this.onRevert = this.onRevert.bind(this);
+    }
+    componentDidMount() {
+        document.addEventListener("keydown", this.onKeyDown);
+    }
+    componentWillUnmount() {
+        document.removeEventListener("keydown", this.onKeyDown);
+    }
+    onKeyDown(event) {
+        if (event.key === Key.Enter) {
+            this.onConfirm();
+        }
+        else if (event.key === Key.Escape) {
+            this.onRevert();
+        }
     }
     componentDidUpdate(prevProps) {
         var _a, _b, _c, _d;
@@ -38,14 +59,40 @@ export default class DateRangeInputConfirm extends React.Component {
             });
         }
     }
-    render() {
-        const _a = this.props, { fromValue, toValue, onChange, allowClear, requireConfirmationAtStart, confirmPlacement } = _a, rest = __rest(_a, ["fromValue", "toValue", "onChange", "allowClear", "requireConfirmationAtStart", "confirmPlacement"]);
-        const { currentFromValue, currentToValue } = this.state;
-        const valueChanged = DateTimeUtils.toUnixTime(currentFromValue) !== DateTimeUtils.toUnixTime(fromValue) ||
-            DateTimeUtils.toUnixTime(currentToValue) !== DateTimeUtils.toUnixTime(toValue);
-        const validInterval = allowClear ?
+    onConfirm() {
+        var _a, _b, _c;
+        this.setState({ requireConfirmation: false, inputKeyIndex: this.state.inputKeyIndex + 1 });
+        (_b = (_a = this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, this.state.currentFromValue, this.state.currentToValue);
+        (_c = this.dateRangeInput) === null || _c === void 0 ? void 0 : _c.closePopup();
+    }
+    onRevert() {
+        var _a, _b, _c, _d, _e;
+        this.setState({
+            currentFromValue: (_b = (_a = this.props.fromValue) === null || _a === void 0 ? void 0 : _a.clone()) !== null && _b !== void 0 ? _b : null,
+            currentToValue: (_d = (_c = this.props.toValue) === null || _c === void 0 ? void 0 : _c.clone()) !== null && _d !== void 0 ? _d : null,
+            invalidDatesPresent: false,
+            inputKeyIndex: this.state.inputKeyIndex + 1,
+        });
+        (_e = this.dateRangeInput) === null || _e === void 0 ? void 0 : _e.closePopup();
+    }
+    renderConfirmButtons(size, buttonWidth) {
+        const validInterval = this.props.allowClear ?
             (!this.state.currentFromValue || this.state.currentFromValue.isValid()) && (!this.state.currentToValue || this.state.currentToValue.isValid()) :
             this.state.currentFromValue && this.state.currentFromValue.isValid() && this.state.currentToValue && this.state.currentToValue.isValid();
+        return (React.createElement(Button.Group, { style: { background: "white" } },
+            React.createElement(Button, { style: { borderRightWidth: 2, background: "white", width: buttonWidth }, size: size, title: i18n("Revert"), key: "revert", danger: true, ghost: true, onClick: this.onRevert },
+                React.createElement(UndoIcon, null)),
+            React.createElement(Button, { style: { width: buttonWidth }, title: i18n("Apply"), key: "apply-button", size: size, type: "primary", disabled: !validInterval || this.state.invalidDatesPresent, onClick: this.onConfirm },
+                React.createElement(CheckOutlined, null))));
+    }
+    confirmButtonsVisible() {
+        const { currentFromValue, currentToValue } = this.state;
+        const valueChanged = DateTimeUtils.toUnixTime(currentFromValue) !== DateTimeUtils.toUnixTime(this.props.fromValue) ||
+            DateTimeUtils.toUnixTime(currentToValue) !== DateTimeUtils.toUnixTime(this.props.toValue);
+        return valueChanged || this.state.invalidDatesPresent || this.state.requireConfirmation;
+    }
+    render() {
+        const _a = this.props, { fromValue, toValue, onChange, allowClear, requireConfirmationAtStart, confirmPlacement } = _a, rest = __rest(_a, ["fromValue", "toValue", "onChange", "allowClear", "requireConfirmationAtStart", "confirmPlacement"]);
         let align;
         if (confirmPlacement === "right") {
             align = { points: ["tl", "tr"], offset: [-8, 0] };
@@ -56,24 +103,8 @@ export default class DateRangeInputConfirm extends React.Component {
         else {
             align = { points: ["tr", "br"], offset: [0, -8] };
         }
-        return (React.createElement(Tooltip, { color: "transparent", overlayInnerStyle: { boxShadow: "none", padding: 0 }, key: "date-range-input-" + this.state.inputKeyIndex, visible: valueChanged || this.state.invalidDatesPresent || this.state.requireConfirmation, align: align, title: React.createElement(Button.Group, { style: { background: "white" } },
-                React.createElement(Button, { style: { borderRightWidth: 2, background: "white" }, title: i18n("Revert"), key: "revert", danger: true, ghost: true, onClick: () => {
-                        var _a, _b, _c, _d;
-                        this.setState({
-                            currentFromValue: (_b = (_a = this.props.fromValue) === null || _a === void 0 ? void 0 : _a.clone()) !== null && _b !== void 0 ? _b : null,
-                            currentToValue: (_d = (_c = this.props.toValue) === null || _c === void 0 ? void 0 : _c.clone()) !== null && _d !== void 0 ? _d : null,
-                            invalidDatesPresent: false,
-                            inputKeyIndex: this.state.inputKeyIndex + 1,
-                        });
-                    } },
-                    React.createElement(UndoIcon, null)),
-                React.createElement(Button, { title: i18n("Apply"), key: "apply-button", type: "primary", disabled: !validInterval || this.state.invalidDatesPresent, onClick: () => {
-                        var _a, _b;
-                        this.setState({ requireConfirmation: false });
-                        (_b = (_a = this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, this.state.currentFromValue, this.state.currentToValue);
-                    } },
-                    React.createElement(CheckOutlined, null))) },
-            React.createElement(DateRangeInput, Object.assign({ fromValue: this.state.currentFromValue, toValue: this.state.currentToValue, allowClear: allowClear, onInvalidValue: (_) => {
+        return (React.createElement(Tooltip, { color: "transparent", overlayInnerStyle: { boxShadow: "none", padding: 0 }, key: "date-range-input-" + this.state.inputKeyIndex, visible: this.confirmButtonsVisible() && !this.state.popupVisible, align: align, title: this.renderConfirmButtons() },
+            React.createElement(DateRangeInput, Object.assign({ ref: component => this.dateRangeInput = component, fromValue: this.state.currentFromValue, toValue: this.state.currentToValue, allowClear: allowClear, onInvalidValue: (_) => {
                     this.setState({ invalidDatesPresent: true });
                 }, onChange: (fromValue, toValue) => {
                     this.setState({
@@ -81,6 +112,15 @@ export default class DateRangeInputConfirm extends React.Component {
                         currentToValue: toValue,
                         invalidDatesPresent: false,
                     });
+                }, confirmButtonsRenderer: () => {
+                    if (this.confirmButtonsVisible()) {
+                        return this.renderConfirmButtons("small", 48);
+                    }
+                    return undefined;
+                }, onPopupVisibleChange: visible => {
+                    this.setState({ popupVisible: visible });
+                }, defaultMode: this.state.mode, onModeChange: mode => {
+                    this.setState({ mode: mode });
                 } }, rest))));
     }
 }

package/components/date/dateRangeInputConfirm.js.map

@@ -1 +1 @@
-{"version":3,"file":"dateRangeInputConfirm.js","sourceRoot":"","sources":["../../../../components/date/dateRangeInputConfirm.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\r\nimport {Moment} from \"moment\";\r\nimport {Button, Tooltip} from \"antd\";\r\nimport {DateTimeUtils} from \"d2core/utils/dateTimeUtils\";\r\nimport {CheckOutlined} from \"@ant-design/icons\";\r\nimport i18n from \"d2core/i18n/i18n\";\r\nimport DateRangeInput, {DateRangeInputProps} from \"./dateRangeInput\";\r\nimport {TooltipPlacement} from \"antd/es/tooltip\";\r\nimport {AlignType} from \"rc-trigger/lib/interface\";\r\nimport {UndoIcon} from \"../icons/undoIcon\";\r\n\r\ninterface DateRangeInputConfirmProps extends DateRangeInputProps {\r\n    requireConfirmationAtStart?: boolean\r\n    confirmPlacement?: TooltipPlacement\r\n}\r\n\r\ninterface DateRangeInputConfirmState {\r\n    currentFromValue: Moment | null\r\n    currentToValue: Moment | null\r\n    invalidDatesPresent: boolean\r\n    inputKeyIndex: number,\r\n    requireConfirmation: boolean\r\n}\r\n\r\nexport default class DateRangeInputConfirm extends React.Component<DateRangeInputConfirmProps, DateRangeInputConfirmState> {\r\n    constructor(props: Readonly<DateRangeInputConfirmProps>) {\r\n        super(props);\r\n        this.state = {\r\n            currentFromValue: props.fromValue?.clone() ?? null,\r\n            currentToValue: props.toValue?.clone() ?? null,\r\n            invalidDatesPresent: false,\r\n            inputKeyIndex: 0,\r\n            requireConfirmation: !!props.requireConfirmationAtStart\r\n        };\r\n    }\r\n\r\n    componentDidUpdate(prevProps: Readonly<DateRangeInputProps>) {\r\n        if (DateTimeUtils.toUnixTime(prevProps.fromValue) !== DateTimeUtils.toUnixTime(this.props.fromValue) ||\r\n            DateTimeUtils.toUnixTime(prevProps.toValue) !== DateTimeUtils.toUnixTime(this.props.toValue)) {\r\n            this.setState({\r\n                currentFromValue: this.props.fromValue?.clone() ?? null,\r\n                currentToValue: this.props.toValue?.clone() ?? null\r\n            })\r\n        }\r\n    }\r\n\r\n    render(): any {\r\n        const {\r\n            fromValue,\r\n            toValue,\r\n            onChange,\r\n            allowClear,\r\n            requireConfirmationAtStart,\r\n            confirmPlacement,\r\n            ...rest\r\n        } = this.props;\r\n        const {currentFromValue, currentToValue} = this.state;\r\n        const valueChanged = DateTimeUtils.toUnixTime(currentFromValue) !== DateTimeUtils.toUnixTime(fromValue) ||\r\n            DateTimeUtils.toUnixTime(currentToValue) !== DateTimeUtils.toUnixTime(toValue);\r\n        const validInterval = allowClear ?\r\n            (!this.state.currentFromValue || this.state.currentFromValue.isValid()) && (!this.state.currentToValue || this.state.currentToValue.isValid()) :\r\n            this.state.currentFromValue && this.state.currentFromValue.isValid() && this.state.currentToValue && this.state.currentToValue.isValid();\r\n        let align: AlignType;\r\n        if (confirmPlacement === \"right\") {\r\n            align = {points: [\"tl\", \"tr\"], offset: [-8, 0]};\r\n        } else if (confirmPlacement === \"topRight\") {\r\n            align = {points: [\"br\", \"tr\"], offset: [0, 8]};\r\n        } else {\r\n            // default bottomRight\r\n            align = {points: [\"tr\", \"br\"], offset: [0, -8]};\r\n        }\r\n        return (\r\n            <Tooltip color={\"transparent\"} overlayInnerStyle={{boxShadow: \"none\", padding: 0}}\r\n                     key={\"date-range-input-\" + this.state.inputKeyIndex}\r\n                     visible={valueChanged || this.state.invalidDatesPresent || this.state.requireConfirmation}\r\n                     align={align}\r\n                     title={\r\n                         <Button.Group style={{background: \"white\"}}>\r\n                             <Button\r\n                                 style={{borderRightWidth: 2, background: \"white\"}}\r\n                                 title={i18n(\"Revert\")}\r\n                                 key=\"revert\"\r\n                                 danger\r\n                                 ghost\r\n                                 onClick={() => {\r\n                                     this.setState({\r\n                                         currentFromValue: this.props.fromValue?.clone() ?? null,\r\n                                         currentToValue: this.props.toValue?.clone() ?? null,\r\n                                         invalidDatesPresent: false,\r\n                                         inputKeyIndex: this.state.inputKeyIndex + 1,\r\n                                     })\r\n                                 }}>\r\n                                 <UndoIcon/>\r\n                             </Button>\r\n                             <Button title={i18n(\"Apply\")} key=\"apply-button\"\r\n                                     type=\"primary\"\r\n                                     disabled={!validInterval || this.state.invalidDatesPresent}\r\n                                     onClick={() => {\r\n                                         this.setState({requireConfirmation: false});\r\n                                         this.props.onChange?.(this.state.currentFromValue, this.state.currentToValue);\r\n                                     }}>\r\n                                 <CheckOutlined/>\r\n                             </Button>\r\n                         </Button.Group>\r\n                     }>\r\n                <DateRangeInput\r\n                    fromValue={this.state.currentFromValue}\r\n                    toValue={this.state.currentToValue}\r\n                    allowClear={allowClear}\r\n                    onInvalidValue={(_) => {\r\n                        this.setState({invalidDatesPresent: true});\r\n                    }}\r\n                    onChange={(fromValue: Moment | null, toValue: Moment | null) => {\r\n                        this.setState({\r\n                            currentFromValue: fromValue,\r\n                            currentToValue: toValue,\r\n                            invalidDatesPresent: false,\r\n                        })\r\n                    }}\r\n                    {...rest}\r\n                />\r\n            </Tooltip>\r\n        );\r\n    }\r\n}"]}
+{"version":3,"file":"dateRangeInputConfirm.js","sourceRoot":"","sources":["../../../../components/date/dateRangeInputConfirm.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\r\nimport {Moment} from \"moment\";\r\nimport {Button, Tooltip} from \"antd\";\r\nimport {DateTimeUtils} from \"d2core/utils/dateTimeUtils\";\r\nimport {CheckOutlined} from \"@ant-design/icons\";\r\nimport i18n from \"d2core/i18n/i18n\";\r\nimport DateRangeInput, {DateRangeInputMode, DateRangeInputProps} from \"./dateRangeInput\";\r\nimport {TooltipPlacement} from \"antd/es/tooltip\";\r\nimport {AlignType} from \"rc-trigger/lib/interface\";\r\nimport {UndoIcon} from \"../icons/undoIcon\";\r\nimport {SizeType} from \"antd/lib/config-provider/SizeContext\";\r\nimport {Key} from \"ts-key-enum\";\r\n\r\ninterface DateRangeInputConfirmProps extends DateRangeInputProps {\r\n    requireConfirmationAtStart?: boolean\r\n    confirmPlacement?: TooltipPlacement\r\n}\r\n\r\ninterface DateRangeInputConfirmState {\r\n    currentFromValue: Moment | null\r\n    currentToValue: Moment | null\r\n    invalidDatesPresent: boolean\r\n    inputKeyIndex: number,\r\n    requireConfirmation: boolean\r\n\r\n    popupVisible: boolean\r\n    mode: DateRangeInputMode\r\n}\r\n\r\nexport default class DateRangeInputConfirm extends React.Component<DateRangeInputConfirmProps, DateRangeInputConfirmState> {\r\n    private dateRangeInput: DateRangeInput | null = null;\r\n\r\n    constructor(props: Readonly<DateRangeInputConfirmProps>) {\r\n        super(props);\r\n        this.state = {\r\n            currentFromValue: props.fromValue?.clone() ?? null,\r\n            currentToValue: props.toValue?.clone() ?? null,\r\n            invalidDatesPresent: false,\r\n            inputKeyIndex: 0,\r\n            requireConfirmation: !!props.requireConfirmationAtStart,\r\n\r\n            popupVisible: false,\r\n            mode: props.defaultMode ?? DateRangeInputMode.SIMPLE,\r\n        };\r\n\r\n        this.onKeyDown = this.onKeyDown.bind(this);\r\n        this.onConfirm = this.onConfirm.bind(this);\r\n        this.onRevert = this.onRevert.bind(this);\r\n    }\r\n\r\n    componentDidMount() {\r\n        document.addEventListener(\"keydown\", this.onKeyDown);\r\n    }\r\n\r\n    componentWillUnmount() {\r\n        document.removeEventListener(\"keydown\", this.onKeyDown);\r\n    }\r\n\r\n    onKeyDown(event: KeyboardEvent) {\r\n        if (event.key === Key.Enter) {\r\n            this.onConfirm();\r\n        } else if (event.key === Key.Escape) {\r\n            this.onRevert();\r\n        }\r\n    }\r\n\r\n    componentDidUpdate(prevProps: Readonly<DateRangeInputProps>) {\r\n        if (DateTimeUtils.toUnixTime(prevProps.fromValue) !== DateTimeUtils.toUnixTime(this.props.fromValue) ||\r\n            DateTimeUtils.toUnixTime(prevProps.toValue) !== DateTimeUtils.toUnixTime(this.props.toValue)) {\r\n            this.setState({\r\n                currentFromValue: this.props.fromValue?.clone() ?? null,\r\n                currentToValue: this.props.toValue?.clone() ?? null\r\n            })\r\n        }\r\n    }\r\n\r\n    private onConfirm() {\r\n        this.setState({requireConfirmation: false, inputKeyIndex: this.state.inputKeyIndex + 1});\r\n        this.props.onChange?.(this.state.currentFromValue, this.state.currentToValue);\r\n        this.dateRangeInput?.closePopup();\r\n    }\r\n\r\n    private onRevert() {\r\n        this.setState({\r\n            currentFromValue: this.props.fromValue?.clone() ?? null,\r\n            currentToValue: this.props.toValue?.clone() ?? null,\r\n            invalidDatesPresent: false,\r\n            inputKeyIndex: this.state.inputKeyIndex + 1,\r\n        });\r\n        this.dateRangeInput?.closePopup();\r\n    }\r\n\r\n    private renderConfirmButtons(size?: SizeType, buttonWidth?: number) {\r\n        const validInterval = this.props.allowClear ?\r\n            (!this.state.currentFromValue || this.state.currentFromValue.isValid()) && (!this.state.currentToValue || this.state.currentToValue.isValid()) :\r\n            this.state.currentFromValue && this.state.currentFromValue.isValid() && this.state.currentToValue && this.state.currentToValue.isValid();\r\n\r\n        return (\r\n            <Button.Group style={{background: \"white\"}}>\r\n                <Button\r\n                    style={{borderRightWidth: 2, background: \"white\", width: buttonWidth}}\r\n                    size={size}\r\n                    title={i18n(\"Revert\")}\r\n                    key=\"revert\"\r\n                    danger\r\n                    ghost\r\n                    onClick={this.onRevert}\r\n                >\r\n                    <UndoIcon/>\r\n                </Button>\r\n                <Button\r\n                    style={{width: buttonWidth}}\r\n                    title={i18n(\"Apply\")} key=\"apply-button\"\r\n                    size={size}\r\n                    type=\"primary\"\r\n                    disabled={!validInterval || this.state.invalidDatesPresent}\r\n                    onClick={this.onConfirm}\r\n                >\r\n                    <CheckOutlined/>\r\n                </Button>\r\n            </Button.Group>\r\n        );\r\n    }\r\n\r\n    private confirmButtonsVisible() {\r\n        const {currentFromValue, currentToValue} = this.state;\r\n        const valueChanged = DateTimeUtils.toUnixTime(currentFromValue) !== DateTimeUtils.toUnixTime(this.props.fromValue) ||\r\n            DateTimeUtils.toUnixTime(currentToValue) !== DateTimeUtils.toUnixTime(this.props.toValue);\r\n\r\n        return valueChanged || this.state.invalidDatesPresent || this.state.requireConfirmation;\r\n    }\r\n\r\n    render(): any {\r\n        const {\r\n            fromValue,\r\n            toValue,\r\n            onChange,\r\n            allowClear,\r\n            requireConfirmationAtStart,\r\n            confirmPlacement,\r\n            ...rest\r\n        } = this.props;\r\n        let align: AlignType;\r\n        if (confirmPlacement === \"right\") {\r\n            align = {points: [\"tl\", \"tr\"], offset: [-8, 0]};\r\n        } else if (confirmPlacement === \"topRight\") {\r\n            align = {points: [\"br\", \"tr\"], offset: [0, 8]};\r\n        } else {\r\n            // default bottomRight\r\n            align = {points: [\"tr\", \"br\"], offset: [0, -8]};\r\n        }\r\n        return (\r\n            <Tooltip color={\"transparent\"} overlayInnerStyle={{boxShadow: \"none\", padding: 0}}\r\n                     key={\"date-range-input-\" + this.state.inputKeyIndex}\r\n                     visible={this.confirmButtonsVisible() && !this.state.popupVisible}\r\n                     align={align}\r\n                     title={this.renderConfirmButtons()}>\r\n                <DateRangeInput\r\n                    ref={component => this.dateRangeInput = component}\r\n                    fromValue={this.state.currentFromValue}\r\n                    toValue={this.state.currentToValue}\r\n                    allowClear={allowClear}\r\n                    onInvalidValue={(_) => {\r\n                        this.setState({invalidDatesPresent: true});\r\n                    }}\r\n                    onChange={(fromValue: Moment | null, toValue: Moment | null) => {\r\n                        this.setState({\r\n                            currentFromValue: fromValue,\r\n                            currentToValue: toValue,\r\n                            invalidDatesPresent: false,\r\n                        })\r\n                    }}\r\n                    confirmButtonsRenderer={() => {\r\n                        if (this.confirmButtonsVisible()) {\r\n                            return this.renderConfirmButtons(\"small\", 48);\r\n                        }\r\n                        return undefined;\r\n                    }}\r\n                    onPopupVisibleChange={visible => {\r\n                        this.setState({popupVisible: visible});\r\n                    }}\r\n                    defaultMode={this.state.mode}\r\n                    onModeChange={mode => {\r\n                        this.setState({mode: mode});\r\n                    }}\r\n                    {...rest}\r\n                />\r\n            </Tooltip>\r\n        );\r\n    }\r\n}"]}

package/components/date/dateTimeInput.d.ts

@@ -7,6 +7,7 @@ interface DateTimeInputProps extends Omit<HTMLAttributes<HTMLDivElement>, "onCha
     onInvalidValue?: (inputString: string) => void;
     allowClear?: boolean;
     disabled?: boolean;
+    inputDisabled?: boolean;
     minDateTime?: Moment;
     maxDateTime?: Moment;
     bordered?: boolean;
@@ -19,6 +20,7 @@ interface DateTimeInputProps extends Omit<HTMLAttributes<HTMLDivElement>, "onCha
     onDateItemMouseOver?: (date: Moment) => void;
     inputStyle?: React.CSSProperties;
     getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+    ignoreKeyStrokes?: boolean;
 }
 interface DateTimeInputState {
     valid: boolean;

package/components/date/dateTimeInput.js

@@ -174,7 +174,7 @@ export default class DateTimeInput extends React.Component {
     }
     renderCalendar() {
         var _a, _b;
-        return (React.createElement("div", { onKeyDown: (e) => {
+        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();
@@ -182,7 +182,7 @@ export default class DateTimeInput extends React.Component {
                         (_d = (_c = this.props).onChange) === null || _d === void 0 ? void 0 : _d.call(_c, this.state.calendarSelectedDate);
                     }
                 }
-            }, onMouseOver: (e) => {
+            } : undefined, onMouseOver: (e) => {
                 if (e.target instanceof HTMLTableCellElement) {
                     const date = moment(e.target.title, "YYYY-MM-DD");
                     this.onItemMouseOver(date);
@@ -232,11 +232,11 @@ export default class DateTimeInput extends React.Component {
     }
     renderInput() {
         var _a;
-        const _b = this.props, { mask, value, onChange, onInvalidValue, style, disabled, bordered, hidePopup, renderAsCalendar, allowClear, minDateTime, maxDateTime, onDateItemMouseDown, onDateItemMouseOver, onDateItemMouseUp, markedDateInterval, inputStyle, getPopupContainer } = _b, props = __rest(_b, ["mask", "value", "onChange", "onInvalidValue", "style", "disabled", "bordered", "hidePopup", "renderAsCalendar", "allowClear", "minDateTime", "maxDateTime", "onDateItemMouseDown", "onDateItemMouseOver", "onDateItemMouseUp", "markedDateInterval", "inputStyle", "getPopupContainer"]);
+        const _b = this.props, { mask, value, onChange, onInvalidValue, style, disabled, inputDisabled, bordered, hidePopup, renderAsCalendar, allowClear, minDateTime, maxDateTime, onDateItemMouseDown, onDateItemMouseOver, onDateItemMouseUp, markedDateInterval, inputStyle, getPopupContainer } = _b, props = __rest(_b, ["mask", "value", "onChange", "onInvalidValue", "style", "disabled", "inputDisabled", "bordered", "hidePopup", "renderAsCalendar", "allowClear", "minDateTime", "maxDateTime", "onDateItemMouseDown", "onDateItemMouseOver", "onDateItemMouseUp", "markedDateInterval", "inputStyle", "getPopupContainer"]);
         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);
         let className = "custom-date-time-picker";
-        if (disabled) {
+        if (disabled || inputDisabled) {
             className += " ant-input-number disabled ant-input-disabled readonly";
         }
         else {
@@ -264,7 +264,7 @@ export default class DateTimeInput extends React.Component {
                 } },
                 React.createElement(MaskedInput, { mask: this.props.mask.replace(/[a-zA-Z]/g, '1'), bordered: bordered, ref: this.inputRef, style: maskedInputStyle, value: (_a = value === null || value === void 0 ? void 0 : value.locale("locale.d2000").format(this.props.mask)) !== null && _a !== void 0 ? _a : "", onFocus: (event => {
                         event.target.selectionStart = event.target.selectionEnd = this.state.currentPos;
-                    }), disabled: disabled, onWheel: (event) => {
+                    }), disabled: disabled || inputDisabled, onWheel: (event) => {
                         if (event.deltaY > 0) {
                             if (!isDownDisabled) {
                                 this.decrement();