fineui/packages/fineui/src/widget/dynamicdatetime/dynamicdatetime.timeselect.js

import {
    CenterAdaptLayout,
    VerticalAdaptLayout,
    shortcut,
    Widget,
    isNaturalNumber,
    parseInt,
    isNumeric,
    i18nText,
    isNull,
    isEmptyString,
    SIZE_CONSANTS
} from "@/core";
import { NumberEditor } from "../numbereditor/number.editor";
import { Label } from "@/base";
import { SignEditor } from "@/case";

@shortcut()
export class DynamicDateTimeSelect extends Widget {
    static xtype = "bi.dynamic_date_time_select";

    static HOUR = 1;
    static MINUTE = 2;
    static SECOND = 3;

    static EVENT_CONFIRM = "EVENT_CONFIRM";

    props () {
        return {
            baseCls: "bi-date-time-select",
            editorHeight: SIZE_CONSANTS.LIST_ITEM_HEIGHT,
            timeSelectTypes: [DynamicDateTimeSelect.HOUR, DynamicDateTimeSelect.MINUTE, DynamicDateTimeSelect.SECOND],
        };
    }

    render() {
        const { editorHeight, timeSelectTypes } = this.options;
        
        return {
            type: CenterAdaptLayout.xtype,
            items: [
                {
                    type: VerticalAdaptLayout.xtype,
                    items: [
                        {
                            el: {
                                type: NumberEditor.xtype,
                                disabled: !timeSelectTypes.includes(DynamicDateTimeSelect.HOUR),
                                warningTitle: i18nText("BI-Basic_Do_Not_Support_Modification"),
                                ref: _ref => {
                                    this.hour = _ref;
                                },
                                validationChecker(v) {
                                    return isNaturalNumber(v) && parseInt(v) < 24;
                                },
                                errorText(v) {
                                    if (isNumeric(v)) {
                                        return i18nText("BI-Basic_Input_From_To_Number", "\"00-23\"");
                                    }
                                    
                                    return i18nText("BI-Numerical_Interval_Input_Data");
                                },
                                listeners: [
                                    {
                                        eventName: SignEditor.EVENT_CONFIRM,
                                        action: () => {
                                            const value = this.hour.getValue();
                                            this._checkHour(value);
                                            this.hour.setValue(this._formatValueToDoubleDigit(value));
                                            this.fireEvent(DynamicDateTimeSelect.EVENT_CONFIRM);
                                        },
                                    },
                                    {
                                        eventName: SignEditor.EVENT_CHANGE,
                                        action: () => {
                                            const value = this._autoSwitch(
                                                this.hour.getValue(),
                                                DynamicDateTimeSelect.HOUR
                                            );
                                            this.hour.setValue(value);
                                        },
                                    }
                                ],
                                width: 60,
                                height: editorHeight,
                            },
                        },
                        {
                            type: Label.xtype,
                            text: ":",
                            width: 20,
                        },
                        {
                            type: NumberEditor.xtype,
                            disabled: !timeSelectTypes.includes(DynamicDateTimeSelect.MINUTE),
                            warningTitle: i18nText("BI-Basic_Do_Not_Support_Modification"),
                            ref: _ref => {
                                this.minute = _ref;
                            },
                            validationChecker(v) {
                                return isNaturalNumber(v) && parseInt(v) < 60;
                            },
                            errorText(v) {
                                if (isNumeric(v)) {
                                    return i18nText("BI-Basic_Input_From_To_Number", "\"00-59\"");
                                }

                                return i18nText("BI-Numerical_Interval_Input_Data");
                            },
                            listeners: [
                                {
                                    eventName: SignEditor.EVENT_CONFIRM,
                                    action: () => {
                                        const value = this.minute.getValue();
                                        this._checkMinute(value);
                                        this.minute.setValue(
                                            this._formatValueToDoubleDigit(value),
                                            DynamicDateTimeSelect.MINUTE
                                        );
                                        this.fireEvent(DynamicDateTimeSelect.EVENT_CONFIRM);
                                    },
                                },
                                {
                                    eventName: SignEditor.EVENT_CHANGE,
                                    action: () => {
                                        const value = this._autoSwitch(this.minute.getValue(), DynamicDateTimeSelect.MINUTE);
                                        this.minute.setValue(value);
                                    },
                                }
                            ],
                            width: 60,
                            height: editorHeight,
                        },
                        {
                            type: Label.xtype,
                            text: ":",
                            width: 20,
                        },
                        {
                            type: NumberEditor.xtype,
                            disabled: !timeSelectTypes.includes(DynamicDateTimeSelect.SECOND),
                            warningTitle: i18nText("BI-Basic_Do_Not_Support_Modification"),
                            ref: _ref => {
                                this.second = _ref;
                            },
                            validationChecker(v) {
                                return isNaturalNumber(v) && parseInt(v) < 60;
                            },
                            errorText(v) {
                                if (isNumeric(v)) {
                                    return i18nText("BI-Basic_Input_From_To_Number", "\"00-59\"");
                                }

                                return i18nText("BI-Numerical_Interval_Input_Data");
                            },
                            listeners: [
                                {
                                    eventName: SignEditor.EVENT_CONFIRM,
                                    action: () => {
                                        const value = this.second.getValue();
                                        this._checkSecond(value);
                                        this.second.setValue(this._formatValueToDoubleDigit(value));
                                        this.fireEvent(DynamicDateTimeSelect.EVENT_CONFIRM);
                                    },
                                }
                            ],
                            width: 60,
                            height: editorHeight,
                        }
                    ],
                }
            ],
        };
    }

    _checkBorder(v) {
        v = v || {};
        this._checkHour(v.hour);
        this._checkMinute(v.minute);
        this._checkSecond(v.second);
    }

    _checkHour(value) {
        this.hour.setDownEnable(parseInt(value) > 0);
        this.hour.setUpEnable(parseInt(value) < 23);
    }

    _checkMinute(value) {
        this.minute.setDownEnable(parseInt(value) > 0);
        this.minute.setUpEnable(parseInt(value) < 59);
    }

    _checkSecond(value) {
        this.second.setDownEnable(parseInt(value) > 0);
        this.second.setUpEnable(parseInt(value) < 59);
    }

    _autoSwitch(v, type) {
        let limit = 0;
        let value = `${v}`;
        switch (type) {
            case DynamicDateTimeSelect.HOUR:
                limit = 2;
                break;
            case DynamicDateTimeSelect.MINUTE:
                limit = 5;
                break;
            default:
                break;
        }
        if (value.length === 1 && parseInt(value) > limit) {
            value = `0${value}`;
        }
        if (value.length === 2) {
            switch (type) {
                case DynamicDateTimeSelect.HOUR:
                    this.hour.isEditing() && this.minute.focus();
                    break;
                case DynamicDateTimeSelect.MINUTE:
                    this.minute.isEditing() && this.second.focus();
                    break;
                case DynamicDateTimeSelect.SECOND:
                default:
                    break;
            }
        }

        return value;
    }

    _formatValueToDoubleDigit(v) {
        if (isNull(v) || isEmptyString(v)) {
            v = 0;
        }
        let value = parseInt(v);
        if (value < 10) {
            value = `0${value}`;
        }

        return value;
    }

    _assertValue(v) {
        v = v || {};
        v.hour = this._formatValueToDoubleDigit(v.hour) || "00";
        v.minute = this._formatValueToDoubleDigit(v.minute) || "00";
        v.second = this._formatValueToDoubleDigit(v.second) || "00";

        return v;
    }

    getValue() {
        return {
            hour: parseInt(this.hour.getValue()),
            minute: parseInt(this.minute.getValue()),
            second: parseInt(this.second.getValue()),
        };
    }

    setValue(v) {
        v = this._assertValue(v);
        this.hour.setValue(v.hour);
        this.minute.setValue(v.minute);
        this.second.setValue(v.second);
        this._checkBorder(v);
    }
}