d2coreui 23.0.14 → 23.0.15

package/components/date/dateRangeInput.tsx

@@ -0,0 +1,468 @@
+import React, {HTMLAttributes} from "react";
+import dayjs, { Dayjs } from "dayjs";
+import {CalendarOutlined} from "@ant-design/icons";
+import {Divider, Switch, Tag, Tooltip} from "antd";
+import DateTimeInput from "./dateTimeInput";
+import memoizeOne from "memoize-one";
+import {TooltipPlacement} from "antd/es/tooltip";
+import KeyboardUtils from "../keyboard/keyboardUtils";
+import i18n from "d2core/i18n/i18n";
+import DateRangeInputAdvancedPanel, {TimeShiftDirection} from "./dateRangeInputAdvancedPanel";
+import {SizeType} from "antd/lib/config-provider/SizeContext";
+
+export enum DateRangeInputMode {
+    SIMPLE,
+    ADVANCED,
+}
+
+export interface DateRangeInputProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    mask: string
+    fromValue: Dayjs | null
+    toValue: Dayjs | null
+    onChange?: (fromValue: Dayjs | null, toValue: Dayjs | null) => void
+    onInvalidValue?: (input: string) => void
+    disabled?: boolean
+    minDateTime?: Dayjs
+    maxDateTime?: Dayjs
+    // allows to set no (null) date by datepicker
+    allowClear?: boolean
+    ranges?: { [rangeName: string]: () => [Dayjs, Dayjs] }
+    size?: SizeType;
+
+    hidePopup?: boolean
+    renderAsCalendar?: boolean
+    placement?: TooltipPlacement
+    align?: {
+        points?: [string, string];
+        offset?: [number, number];
+        targetOffset?: [number, number];
+        overflow?: {
+            adjustX?: boolean;
+            adjustY?: boolean;
+        };
+        useCssRight?: boolean;
+        useCssBottom?: boolean;
+        useCssTransform?: boolean;
+    }
+
+    defaultMode?: DateRangeInputMode
+
+    onModeChange?(mode: DateRangeInputMode): void
+
+    onFocus?(): void
+
+    onBlur?(): void
+
+    confirmButtonsRenderer?(): React.ReactNode
+
+    onPopupVisibleChange?(visible: boolean): void
+}
+
+interface DateRangeInputState {
+    valid: boolean
+    selectionStartDate: Dayjs | null
+    popupKeyIndex: number
+    popupVisible: boolean
+
+    mode: DateRangeInputMode
+}
+
+export default class DateRangeInput extends React.Component<DateRangeInputProps, DateRangeInputState> {
+    constructor(props: Readonly<DateRangeInputProps>) {
+        super(props);
+        this.state = {
+            valid: !!props.fromValue && props.fromValue.isValid() && !!props.toValue && props.toValue.isValid(),
+            selectionStartDate: null,
+            popupKeyIndex: 0,
+            popupVisible: false,
+
+            mode: props.defaultMode ?? DateRangeInputMode.SIMPLE,
+        };
+        this.getDefaultSelectedDateForFromPanel = memoizeOne(this.getDefaultSelectedDateForFromPanel.bind(this));
+    }
+
+    componentDidUpdate(_prevProps: Readonly<DateRangeInputProps>, prevState: Readonly<DateRangeInputState>) {
+        if (prevState.popupVisible !== this.state.popupVisible && this.props.onPopupVisibleChange) {
+            this.props.onPopupVisibleChange(this.state.popupVisible);
+        }
+    }
+
+    getDefaultSelectedDateForFromPanel(fromDate: Dayjs | null, toDate: Dayjs | null): Dayjs {
+        if (!!fromDate && !!toDate && fromDate.isSame(toDate, "date")) {
+            return fromDate.clone().subtract(1, "month");
+        } else {
+            return fromDate ?? dayjs().startOf("day").subtract(1, "month");
+        }
+    }
+
+    private getFromValue(date: Dayjs) {
+        return (this.props.fromValue?.clone() ?? dayjs().startOf("day")).year(date.year()).month(date.month()).date(date.date());
+    }
+
+    private getToValue(date: Dayjs) {
+        return (this.props.toValue?.clone() ?? dayjs().endOf("day")).year(date.year()).month(date.month()).date(date.date());
+    }
+
+    closePopup() {
+        // close tooltip
+        this.setState({popupKeyIndex: this.state.popupKeyIndex + 1, popupVisible: false});
+        this.props.onPopupVisibleChange?.(false);
+    }
+
+    private onChange(fromValue: Dayjs | null, toValue: Dayjs | null) {
+        if (this.props.minDateTime && fromValue?.isBefore(this.props.minDateTime)) {
+            fromValue = this.props.minDateTime;
+        }
+        if (this.props.maxDateTime && toValue?.isAfter(this.props.maxDateTime)) {
+            toValue = this.props.maxDateTime;
+        }
+        this.props.onChange?.(fromValue, toValue);
+    }
+
+    private renderSimplePart() {
+        const {
+            fromValue,
+            toValue,
+            onChange,
+            style,
+            allowClear,
+            renderAsCalendar,
+            hidePopup,
+            align,
+            defaultMode,
+            onModeChange,
+            confirmButtonsRenderer,
+            onPopupVisibleChange,
+            ...props
+        } = this.props;
+        const markedDateInterval: [Dayjs, Dayjs] | undefined = this.props.fromValue && this.props.toValue ? [this.props.fromValue, this.props.toValue] : undefined;
+
+        return (
+            <div>
+                <div style={{display: "flex"}}>
+                    <DateTimeInput value={fromValue} {...props}
+                                   allowClear={allowClear}
+                                   renderAsCalendar
+                                   style={{width: "100%"}}
+                                   onChange={(date) => {
+                                       if (date) {
+                                           const fromValue = this.getFromValue(date);
+                                           const toValue = this.getToValue(date);
+                                           this.props.onChange?.(fromValue, toValue);
+                                       }
+                                   }}
+                                   defaultSelectedDate={this.getDefaultSelectedDateForFromPanel(fromValue, toValue)}
+                                   markedDateInterval={markedDateInterval}
+                                   onDateItemMouseDown={(date) => {
+                                       this.setState({selectionStartDate: date});
+                                       const dateFrom = this.getFromValue(date);
+                                       const dateTo = this.getToValue(date);
+                                       this.props.onChange?.(dateFrom, dateTo);
+                                   }}
+                                   onDateItemMouseOver={(date) => {
+                                       if (KeyboardUtils.isMouseDown() && !!this.state.selectionStartDate) {
+                                           let dateFrom: Dayjs;
+                                           let dateTo: Dayjs;
+                                           if (this.state.selectionStartDate.isBefore(date)) {
+                                               dateFrom = this.state.selectionStartDate;
+                                               dateTo = date;
+                                           } else {
+                                               dateFrom = date;
+                                               dateTo = this.state.selectionStartDate;
+                                           }
+                                           dateFrom = this.getFromValue(dateFrom);
+                                           dateTo = this.getToValue(dateTo);
+                                           this.props.onChange?.(dateFrom, dateTo);
+                                       }
+                                   }}
+                                   onDateItemMouseUp={(_date) => {
+                                       this.setState({selectionStartDate: null});
+                                   }}
+                                   ignoreKeyStrokes
+                    />
+                    <Divider type="vertical" style={{height: "auto"}}/>
+                    <DateTimeInput value={toValue} {...props}
+                                   renderAsCalendar
+                                   allowClear={allowClear}
+                                   style={{width: "100%"}}
+                                   onChange={(date) => {
+                                       if (date) {
+                                           const fromValue = this.getFromValue(date);
+                                           const toValue = this.getToValue(date);
+                                           this.props.onChange?.(fromValue, toValue);
+                                       }
+                                   }}
+                                   markedDateInterval={markedDateInterval}
+                                   onDateItemMouseDown={(date) => {
+                                       this.setState({selectionStartDate: date});
+                                       const dateFrom = this.getFromValue(date);
+                                       const dateTo = this.getToValue(date);
+                                       this.props.onChange?.(dateFrom, dateTo);
+                                   }}
+                                   onDateItemMouseOver={(date) => {
+                                       if (KeyboardUtils.isMouseDown() && !!this.state.selectionStartDate) {
+                                           let dateFrom: Dayjs;
+                                           let dateTo: Dayjs;
+                                           if (this.state.selectionStartDate.isBefore(date)) {
+                                               dateFrom = this.state.selectionStartDate;
+                                               dateTo = date;
+                                           } else {
+                                               dateFrom = date;
+                                               dateTo = this.state.selectionStartDate;
+                                           }
+                                           dateFrom = this.getFromValue(dateFrom);
+                                           dateTo = this.getToValue(dateTo);
+                                           this.props.onChange?.(dateFrom, dateTo);
+                                       }
+                                   }}
+                                   onDateItemMouseUp={(_date) => {
+                                       this.setState({selectionStartDate: null});
+                                   }}
+                                   ignoreKeyStrokes
+                    />
+                </div>
+                <div style={{borderTop: "1px solid #ddd", paddingTop: 6}}>
+                        {
+                            this.props.ranges && Object.keys(this.props.ranges).map((rangeName, index) => {
+                                return (<Tag style={{userSelect: "none", cursor: "pointer"}} color="blue"
+                                            key={`range-${index}`}
+                                            onClick={() => {
+                                                const rangeFunction = this.props.ranges?.[rangeName];
+                                                if (rangeFunction) {
+                                                    const range = rangeFunction();
+                                                    this.props.onChange?.(range[0], range[1]);
+                                                }
+                                            }}>
+                                    {rangeName}</Tag>);
+                            })
+                        }
+                </div>
+            </div>
+        )
+    }
+
+    private renderAdvancedPart() {
+        const {
+            fromValue,
+            toValue,
+            onChange,
+            style,
+            allowClear,
+            renderAsCalendar,
+            hidePopup,
+            align,
+            defaultMode,
+            onModeChange,
+            confirmButtonsRenderer,
+            onPopupVisibleChange,
+            ...props
+        } = this.props;
+        return (
+            <div>
+                <div style={{display: "flex"}}>
+                    <DateTimeInput
+                        {...props}
+                        style={{width: "47%"}}
+                        value={fromValue}
+                        onChange={(value) => {
+                            this.props.onChange?.(value, this.props.toValue);
+                        }}
+                    />
+                    <span style={{width: "6%", paddingTop: 4, color: "rgba(0, 0, 0, 0.65)", textAlign: "center"}}>
+                        {"\u27F7"}
+                    </span>
+                    <DateTimeInput
+                        {...props}
+                        style={{width: "47%"}}
+                        value={toValue}
+                        onChange={(value) => {
+                            this.props.onChange?.(this.props.fromValue, value);
+                        }}
+                    />
+                </div>
+                <DateRangeInputAdvancedPanel
+                    onBeginIntervalChange={unit => {
+                        let from: Dayjs;
+                        if (unit === "15minutes") {
+                            const roundedMinutes = Math.floor(dayjs().minute() / 15) * 15;
+                            from = dayjs().startOf("hour").minute(roundedMinutes);
+                        } else {
+                            from = dayjs().startOf(unit);
+                        }
+                        this.onChange(from, this.props.toValue);
+                    }}
+                    onIntervalDurationChange={unitOfTime => {
+                        if (this.props.fromValue) {
+                            let to: Dayjs;
+                            if (unitOfTime === "4years") {
+                                to = this.props.fromValue.clone().add(4, "year").subtract(1, "millisecond");
+                            } else {
+                                to = this.props.fromValue.clone().add(1, unitOfTime).subtract(1, "millisecond")
+                            }
+                            this.onChange(this.props.fromValue, to);
+                        }
+                    }}
+                    onTimeShift={(shiftBegin, shiftEnd, unitOfTime, type) => {
+                        let fromValue = this.props.fromValue ?? null;
+                        let toValue = this.props.toValue ?? null;
+
+                        if (shiftBegin && fromValue) {
+                            if (type === TimeShiftDirection.INCREMENT) {
+                                fromValue = fromValue.add(1, unitOfTime);
+                            } else if (type === TimeShiftDirection.DECREMENT) {
+                                fromValue = fromValue.subtract(1, unitOfTime);
+                            }
+                        }
+
+                        if (shiftEnd && toValue) {
+                            if (type === TimeShiftDirection.INCREMENT) {
+                                toValue = toValue.add(1, unitOfTime);
+                            } else if (type === TimeShiftDirection.DECREMENT) {
+                                toValue = toValue.subtract(1, unitOfTime);
+                            }
+                        }
+
+                        this.onChange(fromValue, toValue);
+                    }}
+                    onEndIntervalChange={unit => {
+                        let to: Dayjs;
+                        if (unit === "15minutes") {
+                            const roundedMinutes = Math.floor(dayjs().minute() / 15) * 15;
+                            to = dayjs().startOf("hour").minute(roundedMinutes).subtract(1, "millisecond");
+                        } else {
+                            to = dayjs().startOf(unit).subtract(1, "millisecond");
+                        }
+                        this.onChange(this.props.fromValue, to);
+                    }}
+                />
+            </div>
+        )
+    }
+
+    renderPopup(): React.ReactElement {
+        return (
+            <div onFocus={this.props.onFocus} onBlur={this.props.onBlur}>
+                {this.state.mode === DateRangeInputMode.SIMPLE && this.renderSimplePart()}
+                {this.state.mode === DateRangeInputMode.ADVANCED && this.renderAdvancedPart()}
+                <div style={{display: "flex", justifyContent: "space-between", alignItems: "flex-end"}}>
+                    <Switch
+                        style={{float: "right", marginTop: 8}}
+                        checked={this.state.mode === DateRangeInputMode.ADVANCED}
+                        onChange={checked => {
+                            const mode = checked ? DateRangeInputMode.ADVANCED : DateRangeInputMode.SIMPLE;
+                            this.setState({mode: mode});
+                            this.props.onModeChange?.(mode);
+                        }}
+                        checkedChildren={i18n("Advanced Mode")}
+                        unCheckedChildren={i18n("Simple Mode")}
+                    />
+                    {this.props.confirmButtonsRenderer?.()}
+                </div>
+            </div>
+        );
+    }
+
+    renderInput() {
+        const {
+            className,
+            fromValue,
+            toValue,
+            onChange,
+            style,
+            allowClear,
+            renderAsCalendar,
+            hidePopup,
+            align,
+            disabled,
+            defaultMode,
+            onModeChange,
+            confirmButtonsRenderer,
+            onPopupVisibleChange,
+            ...props
+        } = this.props;
+
+        let customClassName = `ant-input ant-input-outlined ${className ?? ""}`;
+        if (disabled || this.state.popupVisible) {
+            customClassName += " ant-input-disabled";
+        }
+
+        return (
+            <div style={{...style, padding: 0, position: "relative"}} className={customClassName} onFocus={this.props.onFocus}
+                 onBlur={this.props.onBlur}>
+                <div style={{display: "flex", paddingRight: 8}}>
+                    <DateTimeInput value={fromValue} {...props}
+                                   disabled={disabled}
+                                   inputDisabled={this.state.popupVisible}
+                                   allowClear={allowClear}
+                                   bordered={false}
+                                   hidePopup={true}
+                                   style={{width: "auto"}}
+                                   inputStyle={{paddingRight: 2}}
+                                   onChange={(value) => {
+                                       this.props.onChange?.(value, this.props.toValue);
+                                   }}
+                    />
+                    <span style={{alignSelf: "center"}}>{"\u27F7"}</span>
+                    <DateTimeInput value={toValue} {...props}
+                                   disabled={disabled}
+                                   inputDisabled={this.state.popupVisible}
+                                   allowClear={allowClear}
+                                   bordered={false}
+                                   hidePopup={true}
+                                   style={{width: "auto"}}
+                                   inputStyle={{paddingLeft: 2}}
+                                   onChange={(value) => {
+                                       this.props.onChange?.(this.props.fromValue, value);
+                                   }}
+                    />
+                    {!hidePopup && !renderAsCalendar &&
+                        <CalendarOutlined
+                            style={{cursor: (disabled || this.state.popupVisible) ? "not-allowed" : "pointer"}}
+                            onClick={(event) => {
+                                if (!disabled && document.createEvent) {
+                                    if (this.state.popupVisible) {
+                                        this.closePopup();
+                                    } else {
+                                        var ev = document.createEvent('HTMLEvents');
+                                        ev.initEvent('contextmenu', true, false);
+                                        event.target.dispatchEvent(ev);
+                                        this.props.onFocus?.();
+                                    }
+                                }
+                            }}
+                        />
+                    }
+                </div>
+            </div>
+        );
+    }
+
+    render(): any {
+        if (this.props.renderAsCalendar) {
+            return this.renderPopup();
+        } else if (this.props.hidePopup) {
+            return this.renderInput();
+        } else {
+            return (
+                <Tooltip color={"white"}
+                         key={"date-range-popup-" + this.state.popupKeyIndex}
+                         trigger={this.props.disabled ? [] : ["contextMenu"]}
+                         align={this.props.align}
+                         placement={this.props.placement}
+                         overlayInnerStyle={{maxHeight: "100vh", overflowY: "auto", overflowX: "hidden"}}
+                         onOpenChange={(visible) => {
+                             if (visible) {
+                                 this.props.onFocus?.();
+                             } else {
+                                 this.props.onBlur?.();
+                             }
+                             this.setState({popupVisible: visible});
+                         }}
+                         overlayClassName={"date-range-picker-popup"}
+                         title={this.renderPopup()}>
+                    {this.renderInput()}
+                </Tooltip>
+            );
+        }
+    }
+}