fineui/src/widget/yearmonth/trigger.yearmonth.js

import {
    shortcut,
    bind,
    createWidget,
    i18nText,
    HTapeLayout,
    CenterLayout,
    HorizontalFillLayout,
    isEmptyString,
    parseDateTime,
    isPositiveInteger,
    checkDateVoid,
    isNotEmptyString,
    getDate,
    print,
    isNotNull,
    checkDateLegal,
    parseInt,
    isNull
} from "@/core";
import { Trigger, TextButton } from "@/base";
import { TriggerIconButton, SignEditor } from "@/case";
import { DynamicDateCombo, DynamicDateHelper } from "../dynamicdate";

@shortcut()
export class DynamicYearMonthTrigger extends Trigger {
    static xtype = "bi.dynamic_year_month_trigger";

    _const = { hgap: 4, vgap: 2, iconWidth: 24 };

    static EVENT_VALID = "EVENT_VALID";
    static EVENT_FOCUS = "EVENT_FOCUS";
    static EVENT_ERROR = "EVENT_ERROR";
    static EVENT_START = "EVENT_START";
    static EVENT_CONFIRM = "EVENT_CONFIRM";
    static EVENT_STOP = "EVENT_STOP";
    static EVENT_KEY_DOWN = "EVENT_KEY_DOWN";

    props() {
        return {
            extraCls: "bi-year-month-trigger",
            min: "1900-01-01", // 最小日期
            max: "2099-12-31", // 最大日期
            height: 24,
            watermark: {
                year: i18nText("BI-Basic_Unrestricted"),
                month: i18nText("BI-Basic_Unrestricted"),
            },
        };
    }

    beforeInit(callback) {
        const o = this.options;
        o.title = bind(this._titleCreator, this);
        callback();
    }

    _init() {
        super._init(...arguments);
        const o = this.options;
        this.yearEditor = this._createEditor(true);
        this.monthEditor = this._createEditor(false);

        createWidget({
            element: this,
            type: HTapeLayout.xtype,
            items: [
                {
                    type: CenterLayout.xtype,
                    items: [
                        {
                            type: HorizontalFillLayout.xtype,
                            columnSize: ["fill", ""],
                            items: [
                                this.yearEditor,
                                {
                                    el: {
                                        type: TextButton.xtype,
                                        text: i18nText("BI-Multi_Date_Year"),
                                    },
                                }
                            ],
                        },
                        {
                            type: HorizontalFillLayout.xtype,
                            columnSize: ["fill", ""],
                            items: [
                                this.monthEditor,
                                {
                                    el: {
                                        type: TextButton.xtype,
                                        text: i18nText("BI-Multi_Date_Month"),
                                    },
                                }
                            ],
                        }
                    ],
                },
                {
                    el: {
                        type: TriggerIconButton.xtype,
                        width: this._const.iconWidth,
                    },
                    width: this._const.iconWidth,
                }
            ],
        });
        this.setValue(o.value);
    }

    _createEditor(isYear) {
        const o = this.options,
            c = this._const;
        const editor = createWidget({
            type: SignEditor.xtype,
            simple: o.simple,
            height: o.height,
            validationChecker: v => {
                if (isYear) {
                    let month = this.monthEditor.getValue();
                    if (isEmptyString(month)) {
                        month =
                            parseInt(v, 10) ===
                            parseDateTime(o.min, "%Y-%X-%d").getFullYear()
                                ? parseDateTime(o.min, "%Y-%X-%d").getMonth() +
                                  1
                                : 1;
                    }
                    
                    return (
                        v === "" ||
                        (isPositiveInteger(v) &&
                            !checkDateVoid(v, month, 1, o.min, o.max)[0])
                    );
                }
                const year = this.yearEditor.getValue();

                return (
                    v === "" ||
                    (isPositiveInteger(v) &&
                        v >= 1 &&
                        v <= 12 &&
                        (isEmptyString(year)
                            ? true
                            : !checkDateVoid(
                                this.yearEditor.getValue(),
                                v,
                                1,
                                o.min,
                                o.max
                            )[0]))
                );
            },
            quitChecker: () => false,
            watermark: isYear ? o.watermark?.year : o.watermark.month,
            errorText: v => {
                const year = isYear ? v : this.yearEditor.getValue();
                const month = isYear ? this.monthEditor.getValue() : v;
                if (
                    !isPositiveInteger(year) ||
                    !isPositiveInteger(month) ||
                    month > 12
                ) {
                    return i18nText("BI-Year_Trigger_Invalid_Text");
                }

                const start = parseDateTime(o.min, "%Y-%X-%d");
                const end = parseDateTime(o.max, "%Y-%X-%d");

                return i18nText(
                    "BI-Basic_Year_Month_Range_Error",
                    start.getFullYear(),
                    start.getMonth() + 1,
                    end.getFullYear(),
                    end.getMonth() + 1
                );
            },
            hgap: c.hgap,
            vgap: c.vgap,
            allowBlank: true,
        });
        editor.on(SignEditor.EVENT_KEY_DOWN, () => {
            this.fireEvent(DynamicYearMonthTrigger.EVENT_KEY_DOWN);
        });
        editor.on(SignEditor.EVENT_FOCUS, () => {
            this.fireEvent(DynamicYearMonthTrigger.EVENT_FOCUS);
        });
        editor.on(SignEditor.EVENT_STOP, () => {
            this.fireEvent(DynamicYearMonthTrigger.EVENT_STOP);
        });
        editor.on(SignEditor.EVENT_CONFIRM, () => {
            this._doEditorConfirm(editor);
            this.fireEvent(DynamicYearMonthTrigger.EVENT_CONFIRM);
        });
        editor.on(SignEditor.EVENT_SPACE, () => {
            if (editor.isValid()) {
                editor.blur();
            }
        });
        editor.on(SignEditor.EVENT_START, () => {
            this.fireEvent(DynamicYearMonthTrigger.EVENT_START);
        });
        editor.on(SignEditor.EVENT_ERROR, () => {
            this.fireEvent(DynamicYearMonthTrigger.EVENT_ERROR);
        });
        editor.on(SignEditor.EVENT_VALID, () => {
            const year = this.yearEditor.getValue();
            const month = this.monthEditor.getValue();
            if (isNotEmptyString(year) && isNotEmptyString(month)) {
                if (
                    isPositiveInteger(year) &&
                    month >= 1 &&
                    month <= 12 &&
                    !checkDateVoid(year, month, 1, o.min, o.max)[0]
                ) {
                    this.fireEvent(DynamicYearMonthTrigger.EVENT_VALID);
                }
            }
        });
        editor.on(SignEditor.EVENT_CHANGE, () => {
            if (isYear) {
                this._autoSwitch(editor);
            }
        });

        return editor;
    }

    _titleCreator() {
        const storeValue = this.storeValue || {};
        const type = storeValue.type || DynamicDateCombo.Static;
        let value = storeValue.value;
        if (!this.monthEditor.isValid() || !this.yearEditor.isValid()) {
            return "";
        }
        switch (type) {
        case DynamicDateCombo.Dynamic: {
            const text = this._getText(value);
            let date = getDate();
            date = DynamicDateHelper.getCalculation(value);
            const dateStr = print(date, "%Y-%x");
            
            return isEmptyString(text) ? dateStr : `${text}:${dateStr}`;
        }
        case DynamicDateCombo.Static:
        default:
            value = value || {};
            
            return this._getStaticTitle(value);
        }
    }

    _doEditorConfirm(editor) {
        const value = editor.getValue();
        if (isNotNull(value)) {
            editor.setValue(value);
        }
        const monthValue = this.monthEditor.getValue();
        this.storeValue = {
            type: DynamicDateCombo.Static,
            value: {
                year: this.yearEditor.getValue(),
                month: isEmptyString(this.monthEditor.getValue())
                    ? ""
                    : monthValue,
            },
        };
    }

    _yearCheck(v) {
        const date = print(parseDateTime(v, "%Y-%X-%d"), "%Y-%X-%d");
        
        return (
            print(parseDateTime(v, "%Y"), "%Y") === v &&
            date >= this.options.min &&
            date <= this.options.max
        );
    }

    _autoSwitch(editor) {
        const v = editor.getValue();
        if (isNotEmptyString(v) && checkDateLegal(v)) {
            if (v.length === 4 && this._yearCheck(v)) {
                this._doEditorConfirm(editor);
                this.fireEvent(DynamicYearMonthTrigger.EVENT_CONFIRM);
                this.monthEditor.focus();
            }
        }
    }

    _getText(obj) {
        let value = "";
        if (isNotNull(obj.year) && parseInt(obj.year) !== 0) {
            value +=
                Math.abs(obj.year) +
                i18nText("BI-Basic_Year") +
                (obj.year < 0
                    ? i18nText("BI-Basic_Front")
                    : i18nText("BI-Basic_Behind"));
        }
        if (isNotNull(obj.month) && parseInt(obj.month) !== 0) {
            value +=
                Math.abs(obj.month) +
                i18nText("BI-Basic_Month") +
                (obj.month < 0
                    ? i18nText("BI-Basic_Front")
                    : i18nText("BI-Basic_Behind"));
        }
        
        return value;
    }

    _setInnerValue(date, text) {
        this.yearEditor.setValue(date.getFullYear());
        this.monthEditor.setValue(date.getMonth() + 1);
    }

    _getStaticTitle(value) {
        value = value || {};
        const hasYear = !(isNull(value.year) || isEmptyString(value.year));
        const hasMonth = !(isNull(value.month) || isEmptyString(value.month));
        switch ((hasYear << 1) | hasMonth) {
        // !hasYear && !hasMonth
        case 0:
            return "";
            // !hasYear && hasMonth
        case 1:
            return value.month;
            // hasYear && !hasMonth
        case 2:
            return value.year;
            // hasYear && hasMonth
        case 3:
        default:
            return `${value.year}-${value.month}`;
        }
    }

    setMinDate(minDate) {
        if (isNotEmptyString(this.options.min)) {
            this.options.min = minDate;
        }
    }

    setMaxDate(maxDate) {
        if (isNotEmptyString(this.options.max)) {
            this.options.max = maxDate;
        }
    }

    setValue(v) {
        let type, value;
        let date = getDate();
        this.storeValue = v;
        if (isNotNull(v)) {
            type = v.type || DynamicDateCombo.Static;
            value = v.value || v;
        }
        switch (type) {
        case DynamicDateCombo.Dynamic: {
            const text = this._getText(value);
            date = DynamicDateHelper.getCalculation(value);
            this._setInnerValue(date, text);
            break;
        }
        case DynamicDateCombo.Static:
        default: {
            value = value || {};
            const month = isNull(value.month) ? null : value.month;
            this.yearEditor.setValue(value.year);
            this.monthEditor.setValue(month);
            break;
        }
        }
    }

    getValue() {
        return this.storeValue;
    }

    getKey() {
        return `${this.yearEditor.getValue()}-${this.monthEditor.getValue()}`;
    }

    isStateValid() {
        return this.yearEditor.isValid() && this.monthEditor.isValid();
    }
}