d2coreui 23.0.15 → 23.0.17

package/components/date/dateTimeInput.tsx

@@ -1,633 +0,0 @@
-import React, {HTMLAttributes, RefObject} from "react";
-import MaskedInput from "../input/maskedInput";
-import padStart from 'lodash/padStart';
-import isEqual from 'lodash/isEqual';
-import debounce from 'lodash/debounce';
-import dayjs, {Dayjs, ManipulateType} from "dayjs";
-import {CalendarOutlined} from "@ant-design/icons";
-import {Button, Calendar, Select, Tooltip} from "antd";
-import {Key} from "ts-key-enum";
-import {D2000UnixTimeNullValue} from "d2core/types/unixTimeUtils";
-import {TooltipPlacement} from "antd/lib/tooltip";
-import {createStyles} from "antd-style";
-import WithCss from "d2coreui/components/style/withCss";
-import {SizeType} from "antd/lib/config-provider/SizeContext";
-
-// @ts-ignore
-const useStyles = createStyles(({token, css, cx}) => {
-    return {
-        dateTimeInputCalendar: css`
-            // adaptations of date-picker calendar styles
-            .ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner:not(.date-picker-item-marked) {
-                color: inherit;
-                background: inherit;
-            }
-
-            .ant-picker-panel:focus > .ant-picker-date-panel .ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner:before {
-                position: absolute;
-                top: 0;
-                right: 0;
-                bottom: 0;
-                left: 0;
-                z-index: 1;
-                border: 1px solid #096dd9;
-                border-radius: 2px;
-                content: '';
-            }
-
-            .ant-picker-content thead {
-                user-select: none;
-            }
-
-            .date-picker-item-marked {
-                color: #fff;
-                background: #1890ff;
-            }
-
-            .ant-picker-cell-in-view.ant-picker-cell-today .ant-picker-cell-inner::before {
-                border: 1px solid #13c2c2;
-            }
-
-            .ant-picker-cell:hover:not(.ant-picker-cell-in-view) .ant-picker-cell-inner, .ant-picker-cell:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-range-hover-start):not(.ant-picker-cell-range-hover-end) .ant-picker-cell-inner {
-                background: #1890ff;
-                color: rgba(0, 0, 0, 0.85);
-            }
-        `,
-    }
-});
-
-
-interface DateTimeInputProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
-    mask: string
-    value: Dayjs | null
-    onChange?: (time: Dayjs | null) => void
-    onInvalidValue?: (inputString: string) => void
-    // allows to set no (null) date by datepicker
-    allowClear?: boolean
-    disabled?: boolean
-    // disable only input component - useful when calendar popup is opened
-    inputDisabled?: boolean
-    minDateTime?: Dayjs
-    maxDateTime?: Dayjs
-
-    bordered?: boolean
-    hidePopup?: boolean
-    renderAsCalendar?: boolean
-    autoFocus?: boolean
-    placement?: TooltipPlacement;
-    size?: SizeType;
-
-    // special methods for rendering date range
-    defaultSelectedDate?: Dayjs
-    markedDateInterval?: [Dayjs, Dayjs]
-    onDateItemMouseDown?: (date: Dayjs) => void
-    onDateItemMouseUp?: (date: Dayjs) => void
-    onDateItemMouseOver?: (date: Dayjs) => void
-
-    inputStyle?: React.CSSProperties
-    getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
-
-    ignoreKeyStrokes?: boolean
-}
-
-interface DateTimeInputState {
-    valid: boolean
-    currentPos: number | null
-    currentInfo: MaskResult
-    popupCalendarVisible: boolean
-
-    calendarSelectedDate: Dayjs
-    focused: boolean
-}
-
-interface MaskResult {
-    time: Dayjs | undefined
-    info: InfoEntry | undefined
-    length: number
-}
-
-interface InfoEntry {
-    key: string | string[]
-    min: number | number[]
-    max: number | number[]
-    unit: ManipulateType
-}
-
-const DATE_TIME_DATA_MAP: InfoEntry[] = [
-    {key: "SSS", min: 0, max: 999, unit: "ms"},
-    {key: "ss", min: 0, max: 59, unit: "s"},
-    {key: "mm", min: 0, max: 59, unit: "m"},
-    {key: "HH", min: 0, max: 23, unit: "h"},
-    {key: ["YYYY", "YY"], min: [1900, 0], max: [9999, 99], unit: "y"},
-    {key: "MM", min: 1, max: 12, unit: "M"},
-    {key: "DD", min: 1, max: 31, unit: "d"},
-];
-
-const MIN_TIME = dayjs.unix(0);
-const MAX_TIME = dayjs().add(1000, "year");
-
-export function allowDatesBeforeEpoch() {
-    DATE_TIME_DATA_MAP[4].min = 1902;
-}
-
-export default class DateTimeInput extends React.Component<DateTimeInputProps, DateTimeInputState> {
-    private inputRef: RefObject<MaskedInput> = React.createRef();
-    private today: Dayjs = dayjs();
-
-    constructor(props: Readonly<DateTimeInputProps>) {
-        super(props);
-        this.state = {
-            valid: DateTimeInput.isValidValue(props.value, props.minDateTime, props.maxDateTime, props.allowClear),
-            currentPos: null,
-            currentInfo: {
-                info: undefined,
-                time: undefined,
-                length: 0
-            },
-            popupCalendarVisible: false,
-            calendarSelectedDate: props.defaultSelectedDate?.clone() ?? props.value?.clone() ?? dayjs().startOf('day'),
-            focused: false,
-        };
-
-        this.recalc = this.recalc.bind(this);
-        this.increment = this.increment.bind(this);
-        this.decrement = this.decrement.bind(this);
-        this.onItemMouseOver = debounce(this.onItemMouseOver.bind(this), 100, {maxWait: 100});
-    }
-
-    componentDidUpdate(prevProps: Readonly<DateTimeInputProps>, _prevState: Readonly<DateTimeInputState>, _snapshot?: any): void {
-        if (!isEqual(prevProps, this.props) && this.inputRef.current !== null) {
-            this.inputRef.current.input.selectionStart = this.state.currentPos;
-            this.inputRef.current.input.selectionEnd = this.state.currentPos;
-            if (prevProps.value !== this.props.value) {
-                this.setState({valid: DateTimeInput.isValidValue(this.props.value, this.props.minDateTime, this.props.maxDateTime, this.props.allowClear)});
-            }
-        }
-    }
-
-    get input() {
-        return this.inputRef.current?.input;
-    }
-
-    focus() {
-        this.inputRef.current?.focus();
-    }
-
-    recalc(): void {
-        if (this.inputRef.current !== null) {
-            this.setState({
-                currentInfo: DateTimeInput.parseDateTimeFormat(this.props.value, this.inputRef.current.input.value, this.props.mask, this.inputRef.current.input.selectionStart),
-                currentPos: this.inputRef.current.input.selectionStart,
-            });
-        }
-    }
-
-    private increment(): void {
-        if (this.state.currentInfo.info !== undefined && !!this.props.value && DateTimeInput.isValid(this.state.currentInfo, this.props.value, 1)) {
-            const unit = this.state.currentInfo.info.unit;
-            this.incrementDate(unit);
-        }
-
-        this.inputRef.current?.focus();
-    }
-
-    private incrementDate(unit: ManipulateType) {
-        if (!!this.props.value) {
-            const value = this.props.value.clone().add(1, unit);
-            if (!!this.props.maxDateTime && value.isAfter(this.props.maxDateTime)) {
-                this.props.onChange?.(this.props.maxDateTime?.clone());
-            } else {
-                this.props.onChange?.(value);
-            }
-        }
-    }
-
-    private decrement(): void {
-        if (this.state.currentInfo.info !== undefined && !!this.props.value && DateTimeInput.isValid(this.state.currentInfo, this.props.value, -1)) {
-            const unit = this.state.currentInfo.info.unit;
-            this.decrementDate(unit);
-        }
-
-        this.inputRef.current?.focus();
-    }
-
-    private decrementDate(unit: ManipulateType) {
-        if (!!this.props.value) {
-            const value = this.props.value.clone().subtract(1, unit);
-            if (!!this.props.minDateTime && value.isBefore(this.props.minDateTime)) {
-                this.props.onChange?.(this.props.minDateTime?.clone());
-            } else {
-                this.props.onChange?.(value);
-            }
-        }
-    }
-
-    onItemMouseOver(itemDate: Dayjs) {
-        this.props.onDateItemMouseOver?.(itemDate);
-    }
-
-    private renderCalendarNavigation(value: Dayjs) {
-        const start = 0;
-        const end = 12;
-        const monthOptions = [];
-
-        const current = value.clone();
-        const localeData = value.localeData();
-        const months = [];
-        for (let i = 0; i < 12; i++) {
-            months.push(localeData.months(current.month(i)));
-        }
-
-        for (let index = start; index < end; index++) {
-            monthOptions.push(
-                <Select.Option key={`${index}`} value={`${index}`}>
-                    {months[index]}
-                </Select.Option>,
-            );
-        }
-        const month = value.month();
-
-        const year = value.year();
-        const options = [];
-        for (let i = year - 4; i <= year + 2; i += 1) {
-            options.push(
-                <Select.Option key={`${i}`} value={`${i}`}>
-                    {i}
-                </Select.Option>,
-            );
-        }
-
-        const calendarSelectedDate = this.state.calendarSelectedDate;
-
-        return (
-            <div style={{display: "flex", marginBottom: 6}}>
-                <div style={{display: "flex", width: 140}}>
-                    <Button style={{width: 10, padding: 0}} size="small" type="text" tabIndex={-1}
-                            disabled={!DateTimeInput.checkDateValueValidity(calendarSelectedDate, -1, "month")}
-                            onClick={() => {
-                                this.setState({calendarSelectedDate: calendarSelectedDate.subtract(1, "month")});
-                            }}
-                            className="ant-picker-header-prev-btn"><span
-                        className="ant-picker-prev-icon"/></Button>
-                    <Select
-                        style={{flex: "1 1 auto"}}
-                        size="small"
-                        popupMatchSelectWidth={false}
-                        dropdownStyle={{zIndex: 2070}}
-                        getPopupContainer={this.props.getPopupContainer}
-                        value={String(month)}
-                        onChange={selectedMonth => {
-                            this.setState({calendarSelectedDate: calendarSelectedDate.month(parseInt(selectedMonth, 10))});
-                        }}
-                    >
-                        {monthOptions}
-                    </Select>
-                    <Button style={{width: 10, padding: 0}} size="small" type="text" tabIndex={-1}
-                            className="ant-picker-header-next-btn"
-                            onClick={() => {
-                                this.setState({calendarSelectedDate: calendarSelectedDate.add(1, "month")});
-                            }}>
-                        <span className="ant-picker-next-icon"/>
-                    </Button>
-                </div>
-                <div style={{display: "flex", width: 110}}>
-                    <Button style={{width: 12, padding: 0}} size="small" type="text" tabIndex={-1}
-                            className="ant-picker-header-prev-btn"
-                            onClick={() => {
-                                this.setState({calendarSelectedDate: calendarSelectedDate.subtract(1, "year")});
-                            }}>
-                        <span className="ant-picker-prev-icon"/>
-                    </Button>
-                    <Select
-                        size="small"
-                        style={{width: 84}}
-                        popupMatchSelectWidth={false}
-                        dropdownStyle={{zIndex: 2070}}
-                        getPopupContainer={this.props.getPopupContainer}
-                        onChange={newYear => {
-                            this.setState({calendarSelectedDate: calendarSelectedDate.year(parseInt(newYear, 10))});
-                        }}
-                        value={String(year)}
-                    >
-                        {options}
-                    </Select>
-                    <Button style={{width: 12, padding: 0}} size="small" type="text" tabIndex={-1}
-                            className="ant-picker-header-next-btn"
-                            onClick={() => {
-                                this.setState({calendarSelectedDate: calendarSelectedDate.add(1, "year")});
-                            }}>
-                        <span className="ant-picker-next-icon"/>
-                    </Button>
-                </div>
-            </div>
-        );
-    }
-
-    renderCalendar(): React.ReactElement {
-        return (<div
-                onKeyDown={!this.props.ignoreKeyStrokes ? (e) => {
-                    if (e.key === Key.Enter) {
-                        var tagName = (e.target as any)?.tagName?.toLowerCase();
-                        if (tagName !== "input") {
-                            this.props.onChange?.(this.state.calendarSelectedDate);
-                        }
-                    }
-                } : undefined}
-                onMouseOver={(e) => {
-                    if (e.target instanceof HTMLTableCellElement) {
-                        const date = dayjs(e.target.title, "YYYY-MM-DD");
-                        this.onItemMouseOver(date);
-                    }
-                }}>
-                <WithCss useStyles={useStyles}>{(css) =>
-                    <Calendar
-                        className={css.styles.dateTimeInputCalendar}
-                        fullscreen={false}
-                        style={this.props.renderAsCalendar ? this.props.style : undefined}
-                        fullCellRender={((date: Dayjs) => {
-                            let className = date.isSame(this.today, "date") ? 'ant-picker-cell-inner ant-picker-calendar-date ant-picker-calendar-date-today' : 'ant-picker-cell-inner ant-picker-calendar-date';
-                            const markedDateInterval = this.props.markedDateInterval;
-                            if (markedDateInterval && (markedDateInterval[0].isBefore(date) || markedDateInterval[0].isSame(date, "millisecond")) &&
-                                (markedDateInterval[1].isAfter(date) || markedDateInterval[1].isSame(date, "millisecond"))) {
-                                className += " date-picker-item-marked";
-                            } else if (date.isSame(this.props.value, "date")) {
-                                className += " date-picker-item-marked";
-                            }
-                            return (
-                                <div className={className} style={{userSelect: "none"}}
-                                     onKeyDown={(e) => {
-                                         if (e.key === Key.Enter) {
-                                             let newValue = this.props.value?.clone() ?? dayjs().startOf("day");
-                                             newValue = newValue.year(date.year()).month(date.month()).date(date.date());
-                                             this.props.onChange?.(newValue);
-                                         }
-                                     }}
-                                     onMouseDown={() => {
-                                         let newValue = this.props.value?.clone() ?? dayjs().startOf("day");
-                                         newValue = newValue.year(date.year()).month(date.month()).date(date.date());
-                                         this.props.onDateItemMouseDown?.(newValue);
-                                     }}
-                                     onMouseUp={() => {
-                                         let newValue = this.props.value?.clone() ?? dayjs().startOf("day");
-                                         newValue = newValue.year(date.year()).month(date.month()).date(date.date());
-                                         this.props.onDateItemMouseUp?.(newValue);
-                                     }}
-                                >
-                                    <div className={`ant-picker-calendar-date-value`}>
-                                        {padStart("" + date.date(), 2, '0')}
-                                    </div>
-                                    <div className={`ant-picker-calendar-date-content`}>
-                                    </div>
-                                </div>
-                            );
-                        })}
-                        headerRender={({value}) => {
-                            return this.renderCalendarNavigation(value);
-                        }}
-                        value={this.state.calendarSelectedDate}
-                        validRange={[this.props.minDateTime ?? MIN_TIME, this.props.maxDateTime ?? MAX_TIME]}
-                        onSelect={(value) => {
-                            if (window.event instanceof MouseEvent) {
-                                let newValue = this.props.value?.clone() ?? dayjs().startOf("day");
-                                newValue = newValue.year(value.year()).month(value.month()).date(value.date());
-                                this.props.onChange?.(newValue);
-                            }
-                            this.setState({calendarSelectedDate: value, popupCalendarVisible: false});
-                        }}
-                    />
-                }</WithCss>
-            </div>
-        );
-    }
-
-    renderInput() {
-        const {
-            mask,
-            value,
-            onChange,
-            onInvalidValue,
-            style,
-            disabled,
-            inputDisabled,
-            bordered,
-            hidePopup,
-            renderAsCalendar,
-            allowClear,
-            minDateTime,
-            maxDateTime,
-            onDateItemMouseDown,
-            onDateItemMouseOver,
-            onDateItemMouseUp,
-            markedDateInterval,
-            inputStyle,
-            getPopupContainer,
-            autoFocus,
-            className,
-            size,
-            ...props
-        } = this.props;
-
-        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);
-        const unix: number | undefined = value?.valueOf();
-        const maskedInputStyle = {color: this.state.valid ? undefined : "#ff4d4f"};
-        if (inputStyle) {
-            Object.assign(maskedInputStyle, inputStyle);
-        }
-
-        return (
-            <div style={{...style, position: "relative"}} {...props} className={className}>
-                <div
-                    onKeyDown={(event) => {
-                        if (event.code === "ArrowUp") { // up
-                            this.increment();
-                            event.preventDefault();
-                            event.stopPropagation();
-                        } else if (event.code === "ArrowDown") { // down
-                            this.decrement();
-                            event.preventDefault();
-                            event.stopPropagation();
-                        }
-                    }}>
-                    <MaskedInput mask={this.props.mask.replace(/[a-zA-Z]/g, '1')}
-                                 bordered={bordered}
-                                 ref={this.inputRef}
-                                 style={maskedInputStyle}
-                                 size={size}
-                                 value={(this.state.focused || unix !== D2000UnixTimeNullValue * 1000) ? (value?.locale("locale.d2000").format(this.props.mask) ?? "") : ""}
-                                 placeholder={(!this.state.focused && unix === D2000UnixTimeNullValue * 1000) ? "Null Time" : undefined}
-                                 onFocus={(event => {
-                                     event.target.selectionStart = event.target.selectionEnd = this.state.currentPos;
-                                     this.setState({focused: true});
-                                 })}
-                                 onBlur={() => {
-                                     this.setState({focused: false});
-                                 }}
-                                 autoFocus={autoFocus}
-                                 disabled={disabled || inputDisabled}
-                                 onWheel={(event) => {
-                                     if (event.deltaY > 0) {
-                                         if (!isDownDisabled) {
-                                             this.decrement();
-                                         }
-                                     }
-                                     if (event.deltaY < 0) {
-                                         if (!isUpDisabled) {
-                                             this.increment();
-                                         }
-                                     }
-                                 }}
-                                 onMouseUp={this.recalc}
-                                 onKeyUp={this.recalc}
-                                 onChange={(event) => {
-                                     const inputString = event.target.value;
-                                     const value: MaskResult = DateTimeInput.parseDateTimeFormat(this.props.value, inputString, this.props.mask, event.target.selectionStart);
-                                     const valid: boolean = DateTimeInput.isValidValue(value.time, this.props.minDateTime, this.props.maxDateTime, this.props.allowClear) || (!!this.props.allowClear && !inputString);
-
-                                     if (value.time !== undefined && valid) {
-                                         onChange?.(value.time.clone());
-                                     } else if (!!this.props.allowClear && !inputString) {
-                                         onChange?.(null);
-                                     } else {
-                                         onInvalidValue?.(inputString);
-                                     }
-                                     this.setState({
-                                         valid: valid,
-                                         currentInfo: value
-                                     })
-                                 }}/>
-                </div>
-                {!hidePopup && !renderAsCalendar && <div
-                    style={{
-                        width: 28,
-                        opacity: 1,
-                        height: "100%",
-                        textAlign: "center",
-                        cursor: disabled ? "not-allowed" : "pointer",
-                        background: "transparent",
-                        position: "absolute",
-                        top: 0,
-                        right: 0,
-                    }}
-                    onClick={(event) => {
-                        if (document.createEvent) {
-                            var ev = document.createEvent('HTMLEvents');
-                            ev.initEvent('contextmenu', true, false);
-                            event.target.dispatchEvent(ev);
-                        }
-                    }}
-                >
-                    <CalendarOutlined style={{color: "rgba(0,0,0,0.65)", verticalAlign: "middle", height: "100%"}}/>
-                </div>}
-            </div>
-        );
-    }
-
-    render(): any {
-        if (this.props.renderAsCalendar) {
-            return this.renderCalendar();
-        } else if (this.props.hidePopup) {
-            return this.renderInput();
-        } else {
-            return (
-                <Tooltip color={"white"} trigger={this.props.disabled ? [] : ["contextMenu"]}
-                         getPopupContainer={this.props.getPopupContainer}
-                         overlayInnerStyle={{maxHeight: "100vh", overflowY: "auto", overflowX: "hidden", width: 266}}
-                         open={this.state.popupCalendarVisible}
-                         onOpenChange={(visible) => {
-                             this.setState({popupCalendarVisible: visible});
-                             if (visible) {
-                                 this.setState({calendarSelectedDate: this.props.defaultSelectedDate?.clone() ?? this.props.value?.clone() ?? dayjs().startOf("day")})
-                             }
-                         }}
-                         title={this.renderCalendar()}
-                         placement={this.props.placement}
-                >
-                    {this.renderInput()}
-                </Tooltip>
-            );
-        }
-    }
-
-    private static isValid(info: MaskResult, value: Dayjs | null, offset: number): boolean {
-        const unit = info.info?.unit;
-        return this.checkDateValueValidity(value, offset, unit);
-    }
-
-    private static checkDateValueValidity(value: Dayjs | null, offset: number, unit: ManipulateType | undefined) {
-        if (value === null) {
-            return false;
-        }
-        let v = value.clone().add(offset, unit);
-        return v.isValid() && v.isSameOrAfter(dayjs(0));
-    }
-
-    private static parseDateTimeFormat(previousTime: Dayjs | null, value: string, mask: string, cursorPos: number | null): MaskResult {
-        let result: MaskResult = {
-            time: dayjs().startOf("day"),
-            info: undefined,
-            length: 0,
-        };
-
-        for (let v of DATE_TIME_DATA_MAP) {
-            let index: number = -1;
-            let length: number = 0;
-            let min: number = 0;
-            let max: number = 0;
-
-            if (Array.isArray(v.key) || Array.isArray(v.min) || Array.isArray(v.max)) {
-                for (let i = 0; i < v.key.length; i++) {
-                    const x = v.key[i];
-                    index = mask.indexOf(x);
-
-                    if (index !== -1) {
-                        length = x.length;
-                        min = (v.min as number[])[i];
-                        max = (v.max as number[])[i];
-                        break;
-                    }
-                }
-            } else {
-                index = mask.indexOf(v.key);
-                length = v.key.length;
-                min = v.min;
-                max = v.max;
-            }
-
-            if (index !== -1) {
-                let val: number = Number(value.substring(index, index + length));
-
-                if (!isNaN(val) && val >= min && val <= max) {
-                    if (v.unit === "M") {
-                        val--; // 0-11
-                    }
-
-                    if (v.unit === "d") {
-                        result.time = result.time?.set('D', val);
-                    } else if (v.unit === "y" && length === 2) {
-                        const century: number = (previousTime != null && previousTime.isValid()) ? Math.floor(previousTime.year() / 100) * 100 : (val > 70 ? 1900 : 2000); // if short year
-                        result.time = result.time?.set(v.unit, century + val)
-                    } else if (v.unit !== "weeks" && v.unit !== "week" && v.unit !== "w") {
-                        result.time = result.time?.set(v.unit, val);
-                    }
-                } else {
-                    result.time = undefined;
-                    result.info = undefined;
-                    result.length = 0;
-                    break;
-                }
-
-                if (cursorPos !== null && cursorPos >= index && cursorPos <= index + length) {
-                    result.info = v;
-                    result.length = length;
-                }
-            }
-        }
-
-        return result;
-    }
-
-    private static isValidValue(value?: Dayjs | null, minDateTime?: Dayjs, maxDateTime?: Dayjs, allowClear?: boolean): boolean {
-        return (!!value && value.isValid() && (!minDateTime || value.isSameOrAfter(minDateTime)) && (!maxDateTime || value.isSameOrBefore(maxDateTime))) || (!!allowClear && value === null);
-    }
-}