fineui/packages/fineui/src/widget/yearquarter/combo.yearquarter.js

import {
    shortcut,
    Widget,
    createWidget,
    toPix,
    isEqual,
    isNotEmptyString,
    getDate,
    AbsoluteLayout,
    HorizontalFillLayout,
    isNotNull,
    isNotEmptyObject,
    checkDateVoid,
    getQuarter
} from "@/core";
import { DynamicYearQuarterTrigger } from "./trigger.yearquarter";
import { DynamicYearMonthCombo } from "../yearmonth/combo.yearmonth";
import { DynamicYearQuarterPopup } from "./popup.yearquarter";
import { DynamicDateCombo } from "../dynamicdate";
import { Combo, IconButton } from "@/base";

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

    _consts = { iconWidth: 24 };
    props = {
        baseCls: "bi-year-quarter-combo",
        behaviors: {},
        minDate: "1900-01-01",
        maxDate: "2099-12-31",
        height: 24,
        supportDynamic: true,
        isNeedAdjustHeight: false,
        isNeedAdjustWidth: false,
        isPreview: false, // 是否是预览状态
    };

    static EVENT_CONFIRM = "EVENT_CONFIRM";
    static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
    static EVENT_ERROR = "EVENT_ERROR";
    static EVENT_VALID = "EVENT_VALID";
    static EVENT_FOCUS = "EVENT_FOCUS";
    static Static = 1;
    static Dynamic = 2;

    _init() {
        const o = this.options;
        super._init(...arguments);
        this.storeValue = o.value;
        const border = o.simple ? 1 : 2;
        this.storeTriggerValue = "";
        this.trigger = createWidget({
            type: DynamicYearQuarterTrigger.xtype,
            simple: o.simple,
            min: o.minDate,
            max: o.maxDate,
            height: toPix(o.height, border),
            value: o.value || "",
            watermark: o.watermark,
        });
        this.trigger.on(DynamicYearQuarterTrigger.EVENT_KEY_DOWN, () => {
            this.combo.isViewVisible() && this.combo.hideView();
        });
        this.trigger.on(DynamicYearQuarterTrigger.EVENT_START, () => {
            this.combo.isViewVisible() && this.combo.hideView();
        });
        this.trigger.on(DynamicYearQuarterTrigger.EVENT_STOP, () => {
            this.combo.showView();
        });
        this.trigger.on(DynamicYearQuarterTrigger.EVENT_ERROR, () => {
            this.combo.isViewVisible() && this.combo.hideView();
            this.comboWrapper.element.addClass("error");
            this.fireEvent(DynamicYearQuarterCombo.EVENT_ERROR);
        });
        this.trigger.on(DynamicYearQuarterTrigger.EVENT_VALID, () => {
            this.comboWrapper.element.removeClass("error");
            this.fireEvent(DynamicYearMonthCombo.EVENT_VALID);
        });
        this.trigger.on(DynamicYearQuarterTrigger.EVENT_CONFIRM, () => {
            const dateStore = this.storeTriggerValue;
            const dateObj = this.trigger.getKey();
            if (isEqual(dateObj, dateStore)) {
                return;
            }
            if (isNotEmptyString(dateObj) && !isEqual(dateObj, dateStore)) {
                this.storeValue = this.trigger.getValue();
                this.setValue(this.trigger.getValue());
            }
            this._checkDynamicValue(this.storeValue);
            this.fireEvent(DynamicYearQuarterCombo.EVENT_CONFIRM);
        });
        this.trigger.on(DynamicYearQuarterTrigger.EVENT_FOCUS, () => {
            this.storeTriggerValue = this.trigger.getKey();
            this.fireEvent(DynamicYearQuarterCombo.EVENT_FOCUS);
        });

        this.combo = createWidget({
            type: Combo.xtype,
            container: o.container,
            isNeedAdjustHeight: o.isNeedAdjustHeight,
            isNeedAdjustWidth: o.isNeedAdjustWidth,
            el: this.trigger,
            destroyWhenHide: true,
            adjustLength: 1,
            popup: {
                minWidth: 85,
                stopPropagation: false,
                el: {
                    type: DynamicYearQuarterPopup.xtype,
                    width: o.isNeedAdjustWidth ? o.width : undefined,
                    supportDynamic: o.supportDynamic,
                    isPreview: o.isPreview,
                    ref: _ref => {
                        this.popup = _ref;
                    },
                    listeners: [
                        {
                            eventName: DynamicYearQuarterPopup.EVENT_CHANGE,
                            action: () => {
                                this.setValue(this.popup.getValue());
                                this.combo.hideView();
                                this.fireEvent(DynamicYearQuarterCombo.EVENT_CONFIRM);
                            },
                        },
                        {
                            eventName: DynamicYearQuarterPopup.BUTTON_CLEAR_EVENT_CHANGE,
                            action: () => {
                                this.setValue();
                                this.comboWrapper.element.removeClass("error");
                                this.combo.hideView();
                                this.fireEvent(DynamicYearQuarterCombo.EVENT_CONFIRM);
                            },
                        },
                        {
                            eventName: DynamicYearQuarterPopup.BUTTON_lABEL_EVENT_CHANGE,
                            action: () => {
                                const date = getDate();
                                this.setValue({
                                    type: DynamicYearMonthCombo.Static,
                                    value: {
                                        year: date.getFullYear(),
                                        quarter: getQuarter(date),
                                    },
                                });
                                this.combo.hideView();
                                this.fireEvent(DynamicDateCombo.EVENT_CONFIRM);
                            },
                        },
                        {
                            eventName: DynamicYearQuarterPopup.BUTTON_OK_EVENT_CHANGE,
                            action: () => {
                                const value = this.popup.getValue();
                                if (this._checkValue(value)) {
                                    this.setValue(value);
                                }
                                this.combo.hideView();
                                this.fireEvent(DynamicDateCombo.EVENT_CONFIRM);
                            },
                        }
                    ],
                    behaviors: o.behaviors,
                    min: o.minDate,
                    max: o.maxDate,
                },
                value: o.value || "",
            },
        });
        this.combo.on(Combo.EVENT_BEFORE_POPUPVIEW, () => {
            this.popup.setMinDate(o.minDate);
            this.popup.setMaxDate(o.maxDate);
            this.popup.setValue(this.storeValue);
            this.fireEvent(DynamicYearQuarterCombo.EVENT_BEFORE_POPUPVIEW);
        });

        createWidget({
            type: AbsoluteLayout.xtype,
            element: this,
            items: [
                {
                    el: {
                        type: HorizontalFillLayout.xtype,
                        columnSize: ["", "fill"],
                        cls: `${o.simple ? "bi-border-bottom" : "bi-border bi-border-radius"} bi-focus-shadow`,
                        ref: _ref => {
                            this.comboWrapper = _ref;
                        },
                        items: [
                            {
                                el: {
                                    type: IconButton.xtype,
                                    cls: "bi-trigger-icon-button date-change-h-font",
                                    width: this._consts.iconWidth,
                                    height: toPix(o.height, border),
                                    ref: _ref => {
                                        this.changeIcon = _ref;
                                    },
                                },
                            },
                            this.combo
                        ],
                    },
                    top: 0,
                    left: 0,
                    right: 0,
                    bottom: 0,
                }
            ],
        });
        this._checkDynamicValue(o.value);
    }

    _checkDynamicValue(v) {
        let type = null;
        if (isNotNull(v)) {
            type = v.type;
        }
        switch (type) {
        case DynamicYearQuarterCombo.Dynamic:
            this.changeIcon.setVisible(true);
            break;
        default:
            this.changeIcon.setVisible(false);
            break;
        }
    }

    _checkValue(v) {
        const o = this.options;
        let value;
        switch (v.type) {
        case DynamicDateCombo.Dynamic:
            return isNotEmptyObject(v.value);
        case DynamicDateCombo.Static:
            value = v.value || {};

            return !checkDateVoid(value.year, (value.quarter - 1) * 3 + 1, 1, o.minDate, o.maxDate)[0];
        default:
            return true;
        }
    }

    setMinDate(minDate) {
        const o = this.options;
        o.minDate = minDate;
        this.trigger.setMinDate(minDate);
        this.popup && this.popup.setMinDate(minDate);
    }

    setMaxDate(maxDate) {
        const o = this.options;
        o.maxDate = maxDate;
        this.trigger.setMaxDate(maxDate);
        this.popup && this.popup.setMaxDate(maxDate);
    }

    hideView() {
        this.combo.hideView();
    }

    getKey() {
        return this.trigger.getKey();
    }

    setValue(v) {
        this.storeValue = v;
        this.trigger.setValue(v);
        this._checkDynamicValue(v);
    }

    getValue() {
        return this.storeValue;
    }

    isStateValid() {
        return this.trigger.isStateValid();
    }
}