d2coreui 23.0.14 → 23.0.15

package/components/date/dateTimeInput.tsx

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