d2coreui 23.0.14 → 23.0.15

package/components/date/dateRangeInputAdvancedPanel.tsx

@@ -0,0 +1,238 @@
+import React from "react";
+import {Button, Col, Divider, Row, Space} from "antd";
+import i18n from "d2core/i18n/i18n";
+import {OpUnitType} from "dayjs";
+import {DurationUnitType} from "d2core/dayjs/duration";
+import Icon from "@ant-design/icons/es/components/Icon";
+
+export enum TimeShiftDirection {
+    INCREMENT,
+    DECREMENT,
+}
+
+interface DateRangeInputAdvancedPanelProps {
+    onBeginIntervalChange(unit: OpUnitType | "15minutes"): void
+
+    onIntervalDurationChange(unitOfTime: DurationUnitType | "4years"): void
+
+    onTimeShift(shiftBegin: boolean, shiftEnd: boolean, unitOfTime: DurationUnitType, direction: TimeShiftDirection): void
+
+    onEndIntervalChange(unit: OpUnitType | "15minutes"): void
+}
+
+interface DateRangeInputAdvancedPanelState {
+    timeShiftBegin: boolean
+    timeShiftBoth: boolean
+    timeShiftEnd: boolean
+}
+
+export default class DateRangeInputAdvancedPanel extends React.Component<DateRangeInputAdvancedPanelProps, DateRangeInputAdvancedPanelState> {
+    constructor(props: Readonly<DateRangeInputAdvancedPanelProps>) {
+        super(props);
+
+        this.state = {
+            timeShiftBegin: false,
+            timeShiftBoth: true,
+            timeShiftEnd: false,
+        }
+    }
+
+    private renderSectionTitle(title: React.ReactNode, style?: React.CSSProperties) {
+        return (
+            <span style={
+                Object.assign({display: "block", fontWeight: "bold", textAlign: "center", marginBottom: 4}, style)}
+            >
+                {`${title}:`}
+            </span>
+        );
+    }
+
+    private renderButton(title: React.ReactNode, callback: () => void) {
+        return (
+            <Button
+                size="small"
+                block
+                onClick={callback}
+            >
+                {title}
+            </Button>
+        );
+    }
+
+    private renderTimeShiftItem(title: React.ReactNode, callback: (direction: TimeShiftDirection) => void) {
+        const disabled = !this.state.timeShiftBegin && !this.state.timeShiftEnd && !this.state.timeShiftBoth;
+
+        return (
+            <Space.Compact block size="small">
+                <Button
+                    style={{width: "22%"}}
+                    disabled={disabled}
+                    icon="-"
+                    onClick={() => callback(TimeShiftDirection.DECREMENT)}
+                />
+                <span
+                    style={{
+                        width: "56%",
+                        color: "rgba(0, 0, 0, 0.88)",
+                        borderTop: "1px solid #d9d9d9",
+                        borderBottom: "1px solid #d9d9d9",
+                        textAlign: "center",
+                        cursor: "default",
+                    }}
+                >
+                    {title}
+                </span>
+                <Button
+                    style={{width: "22%"}}
+                    disabled={disabled}
+                    icon="+"
+                    onClick={() => callback(TimeShiftDirection.INCREMENT)}
+                />
+            </Space.Compact>
+        );
+    }
+
+    private renderTimeShiftIcon(shiftType: "begin" | "both" | "end") {
+        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 (
+            <Icon component={() =>
+                <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
+                            });
+                        }
+                    }}
+                >
+                    <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) &&
+                        <g id="g41">
+                            <g id="path2822"/>
+                            <g id="path2824"/>
+                            <g id="path2826"
+                               transform={shiftType === "end" ? "rotate(180,512.9334,646.24561)" : "unset"}>
+                                <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"/>
+                            </g>
+                        </g>
+                    }
+                    {shiftType === "both" &&
+                        <g id="g65" transform="rotate(180,512.9334,646.0254)">
+                            <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"/>
+                        </g>
+                    }
+                </svg>
+            }/>
+        );
+    }
+
+    render() {
+        const timeShiftBegin = this.state.timeShiftBegin || this.state.timeShiftBoth;
+        const timeShiftEnd = this.state.timeShiftEnd || this.state.timeShiftBoth;
+
+        return (
+            <div style={{color: "rgba(0, 0, 0, 0.65)"}}>
+                <Divider style={{margin: "8px 0px 6px"}}/>
+                <Row>
+                    <Col span={8} style={{padding: "0px 16px 0px"}}>
+                        <Space direction="vertical">
+                            {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 Year"), () => this.props.onBeginIntervalChange("year"))}
+                        </Space>
+                    </Col>
+                    <Col span={1}>
+                        <Divider type="vertical" style={{height: "100%"}}/>
+                    </Col>
+                    <Col span={7} style={{padding: "0px 14px 0px"}}>
+                        <Space direction="vertical">
+                            {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("Year"), () => this.props.onIntervalDurationChange("year"))}
+                            {this.renderButton(`4 ${i18n("Years")}`, () => this.props.onIntervalDurationChange("4years"))}
+                        </Space>
+                    </Col>
+                    <Col span={1}>
+                        <Divider type="vertical" style={{height: "100%"}}/>
+                    </Col>
+                    <Col span={7} style={{padding: "0px 16px 0px"}}>
+                        <Space direction="vertical">
+                            {this.renderSectionTitle(i18n("Time Shift"))}
+                            <div style={{display: "flex", justifyContent: "center", alignItems: "center"}}>
+                                {this.renderTimeShiftIcon("begin")}
+                                {this.renderTimeShiftIcon("both")}
+                                {this.renderTimeShiftIcon("end")}
+                            </div>
+                            {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))}
+                        </Space>
+                    </Col>
+                </Row>
+                <Divider style={{margin: "6px 0px 10px"}}/>
+                <div style={{display: "flex"}}>
+                    <div style={{width: 192}}>
+                        {this.renderSectionTitle(i18n("Interval End"), {marginBottom: 0})}
+                    </div>
+                    <div style={{marginLeft: 18, width: 93}}>
+                        {this.renderButton("15 min", () => this.props.onEndIntervalChange("15minutes"))}
+                    </div>
+                    <div style={{marginLeft: 8, width: 93}}>
+                        {this.renderButton(i18n("Hour"), () => this.props.onEndIntervalChange("hour"))}
+                    </div>
+                    <div style={{marginLeft: 8, width: 92}}>
+                        {this.renderButton(i18n("Day"), () => this.props.onEndIntervalChange("day"))}
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+}

package/components/date/dateRangeInputConfirm.tsx

@@ -0,0 +1,200 @@
+import React, {createRef} from "react";
+import {Dayjs} from "dayjs";
+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, {DateRangeInputMode, DateRangeInputProps} from "./dateRangeInput";
+import {TooltipPlacement} from "antd/es/tooltip";
+import {AlignType} from "@rc-component/trigger/lib/interface";
+import {UndoIcon} from "../icons/undoIcon";
+import {SizeType} from "antd/lib/config-provider/SizeContext";
+import {Key} from "ts-key-enum";
+
+interface DateRangeInputConfirmProps extends DateRangeInputProps {
+    requireConfirmationAtStart?: boolean
+    confirmPlacement?: TooltipPlacement
+}
+
+interface DateRangeInputConfirmState {
+    originalFromValue: Dayjs | null
+    originalToValue: Dayjs | null
+    currentFromValue: Dayjs | null
+    currentToValue: Dayjs | null
+    invalidDatesPresent: boolean
+    requireConfirmation: boolean
+
+    popupVisible: boolean
+    mode: DateRangeInputMode
+}
+
+export default class DateRangeInputConfirm extends React.Component<DateRangeInputConfirmProps, DateRangeInputConfirmState> {
+    private dateRangeInput: DateRangeInput | null = null;
+    private parentRef: React.RefObject<HTMLSpanElement> = createRef();
+
+    constructor(props: Readonly<DateRangeInputConfirmProps>) {
+        super(props);
+        this.state = {
+            originalFromValue: props.fromValue ?? null,
+            originalToValue: props.toValue ?? null,
+            currentFromValue: props.fromValue ?? null,
+            currentToValue: props.toValue ?? null,
+            invalidDatesPresent: false,
+            requireConfirmation: !!props.requireConfirmationAtStart,
+
+            popupVisible: false,
+            mode: props.defaultMode ?? DateRangeInputMode.SIMPLE,
+        };
+
+        this.onKeyDown = this.onKeyDown.bind(this);
+        this.onConfirm = this.onConfirm.bind(this);
+        this.onRevert = this.onRevert.bind(this);
+    }
+
+    onKeyDown(event: React.KeyboardEvent) {
+        if (event.key === Key.Enter) {
+            this.onConfirm();
+        } else if (event.key === Key.Escape) {
+            this.onRevert();
+        }
+    }
+
+    componentDidUpdate(prevProps: Readonly<DateRangeInputProps>) {
+        const preFromValueUnixTime = DateTimeUtils.toUnixTime(prevProps.fromValue);
+        const currentFromValueUnixTime = DateTimeUtils.toUnixTime(this.props.fromValue);
+        const prevToValueUnixTime = DateTimeUtils.toUnixTime(prevProps.toValue);
+        const currentToValueUnixTime = DateTimeUtils.toUnixTime(this.props.toValue);
+        if (preFromValueUnixTime !== currentFromValueUnixTime ||
+            prevToValueUnixTime !== currentToValueUnixTime) {
+            this.setState({
+                originalFromValue: this.props.fromValue ?? null,
+                originalToValue: this.props.toValue ?? null,
+                currentFromValue: this.props.fromValue ?? null,
+                currentToValue: this.props.toValue ?? null
+            })
+        }
+    }
+
+    private onConfirm() {
+        this.setState({requireConfirmation: false});
+        this.props.onChange?.(this.state.currentFromValue, this.state.currentToValue);
+        this.dateRangeInput?.closePopup();
+    }
+
+    private onRevert() {
+        this.setState({
+            currentFromValue: this.state.originalFromValue ?? null,
+            currentToValue: this.state.originalToValue ?? null,
+            invalidDatesPresent: false,
+        });
+        this.dateRangeInput?.closePopup();
+    }
+
+    private renderConfirmButtons(size?: SizeType, buttonWidth?: number) {
+        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 (
+            <Button.Group style={{background: "white"}}>
+                <Button
+                    style={{borderRightWidth: 2, background: "white", width: buttonWidth}}
+                    size={size}
+                    title={i18n("Revert")}
+                    key="revert"
+                    danger
+                    ghost
+                    onClick={this.onRevert}
+                >
+                    <UndoIcon/>
+                </Button>
+                <Button
+                    style={{width: buttonWidth}}
+                    title={i18n("Apply")} key="apply-button"
+                    size={size}
+                    type="primary"
+                    disabled={!validInterval || this.state.invalidDatesPresent}
+                    onClick={this.onConfirm}
+                >
+                    <CheckOutlined/>
+                </Button>
+            </Button.Group>
+        );
+    }
+
+    private confirmButtonsVisible() {
+        const {originalFromValue, originalToValue, currentFromValue, currentToValue} = this.state;
+        const valueChanged = DateTimeUtils.toUnixTime(currentFromValue) !== DateTimeUtils.toUnixTime(originalFromValue) ||
+            DateTimeUtils.toUnixTime(currentToValue) !== DateTimeUtils.toUnixTime(originalToValue);
+
+        return valueChanged || this.state.invalidDatesPresent || this.state.requireConfirmation;
+    }
+
+    render(): any {
+        const {
+            fromValue,
+            toValue,
+            onChange,
+            allowClear,
+            requireConfirmationAtStart,
+            confirmPlacement,
+            ...rest
+        } = this.props;
+        let align: AlignType;
+        if (confirmPlacement === "right") {
+            align = {points: ["tl", "tr"], offset: [-8, 0]};
+        } else if (confirmPlacement === "topRight") {
+            align = {points: ["br", "tr"], offset: [0, 8]};
+        } else {
+            // default bottomRight
+            align = {points: ["tr", "br"], offset: [0, -6]};
+        }
+        return (
+            <span onKeyDown={this.onKeyDown} ref={this.parentRef}>
+                <Tooltip
+                    color={"transparent"}
+                    overlayInnerStyle={{boxShadow: "none"}}
+                    open={this.confirmButtonsVisible() && !this.state.popupVisible}
+                    align={align}
+                    title={this.renderConfirmButtons(rest.size, rest.size === "small" ? 48 : undefined)}
+                    getPopupContainer={() => {
+                        // very nasty trick how remove error of ResizeObservers infinite cycling - because popover (with dynamic size) is placed in resizable panel
+                        const parentNode = (this.parentRef.current?.parentNode ?? document.body) as HTMLElement;
+                        return parentNode;
+                    }}
+                >
+                    <DateRangeInput
+                        ref={component => this.dateRangeInput = component}
+                        fromValue={this.state.currentFromValue}
+                        toValue={this.state.currentToValue}
+                        allowClear={allowClear}
+                        onInvalidValue={(_) => {
+                            this.setState({invalidDatesPresent: true});
+                        }}
+                        onChange={(fromValue: Dayjs | null, toValue: Dayjs | null) => {
+                            this.setState({
+                                currentFromValue: fromValue,
+                                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}
+                    />
+                </Tooltip>
+            </span>
+        );
+    }
+}