d2coreui 23.0.15 → 23.0.17

package/components/date/dateRangeInputAdvancedPanel.tsx

@@ -1,238 +0,0 @@
-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

@@ -1,200 +0,0 @@
-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>
-        );
-    }
-}