fineui/src/widget/dynamicdatetime/dynamicdatetime.combo.js

import { shortcut, getDate, toPix, isEqual, isNotEmptyString, isEmptyString, isNotNull, isNotEmptyObject, checkDateVoid } from "@/core";
import { Single, Combo } from "@/base";
import { DynamicDateTimeTrigger } from "./dynamicdatetime.trigger";
import { DynamicDateTimePopup } from "./dynamicdatetime.popup";
import { DynamicDateCombo } from "../dynamicdate";

@shortcut()
export class DynamicDateTimeCombo extends Single {
    static xtype = "bi.dynamic_date_time_combo"

    static Static = 1
    static Dynamic = 2

    constants = {
        popupHeight: 259,
        popupWidth: 270,
        comboAdjustHeight: 1,
        border: 1,
        iconWidth: 24,
    }

    props = {
        baseCls: "bi-dynamic-date--time-combo",
        height: 24,
        minDate: "1900-01-01",
        maxDate: "2099-12-31",
        format: "",
        allowEdit: true,
        supportDynamic: true,
        attributes: {
            tabIndex: -1,
        },
        isNeedAdjustHeight: false,
        isNeedAdjustWidth: false,
    };

    static EVENT_KEY_DOWN = "EVENT_KEY_DOWN"
    static EVENT_CONFIRM = "EVENT_CONFIRM"
    static EVENT_FOCUS = "EVENT_FOCUS"
    static EVENT_BLUR = "EVENT_BLUR"
    static EVENT_CHANGE = "EVENT_CHANGE"
    static EVENT_VALID = "EVENT_VALID"
    static EVENT_ERROR = "EVENT_ERROR"
    static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"
    static EVENT_BEFORE_YEAR_MONTH_POPUPVIEW = "EVENT_BEFORE_YEAR_MONTH_POPUPVIEW"


    _init() {
        super._init(...arguments);
    }

    render() {
        const opts = this.options;
        this.storeTriggerValue = "";
        const date = getDate();
        this.storeValue = opts.value;
        const border = opts.simple ? 1 : 2;

        return {
            type: "bi.absolute",
            items: [{
                el: {
                    type: "bi.combo",
                    cls: `${opts.simple ? "bi-border-bottom" : "bi-border bi-border-radius"} bi-focus-shadow`,
                    destroyWhenHide: true,
                    container: opts.container,
                    ref: _ref => {
                        this.combo = _ref;
                    },
                    toggle: false,
                    isNeedAdjustHeight: opts.isNeedAdjustHeight,
                    isNeedAdjustWidth: opts.isNeedAdjustWidth,
                    el: {
                        type: "bi.horizontal_fill",
                        columnSize: [this.constants.iconWidth, "fill"],
                        height: toPix(opts.height, border),
                        items: [{
                            el: {
                                type: "bi.icon_button",
                                cls: "bi-trigger-icon-button date-change-h-font",
                                width: this.constants.iconWidth,
                                height: toPix(opts.height, border),
                                ref: _ref => {
                                    this.changeIcon = _ref;
                                },
                            },
                        }, {
                            type: "bi.dynamic_date_time_trigger",
                            simple: opts.simple,
                            min: opts.minDate,
                            max: opts.maxDate,
                            allowEdit: opts.allowEdit,
                            watermark: opts.watermark,
                            format: opts.format,
                            iconWidth: this.constants.iconWidth,
                            height: toPix(opts.height, border),
                            value: opts.value,
                            ref: _ref => {
                                this.trigger = _ref;
                            },
                            listeners: [{
                                eventName: DynamicDateTimeTrigger.EVENT_KEY_DOWN,
                                action: (...args) => {
                                    if (this.combo.isViewVisible()) {
                                        this.combo.hideView();
                                    }
                                    this.fireEvent(DynamicDateTimeCombo.EVENT_KEY_DOWN, ...args);
                                },
                            }, {
                                eventName: DynamicDateTimeTrigger.EVENT_STOP,
                                action: () => {
                                    if (!this.combo.isViewVisible()) {
                                        this.combo.showView();
                                    }
                                },
                            }, {
                                eventName: DynamicDateTimeTrigger.EVENT_TRIGGER_CLICK,
                                action: () => {
                                    this.combo.toggle();
                                },
                            }, {
                                eventName: DynamicDateTimeTrigger.EVENT_FOCUS,
                                action: () => {
                                    this.storeTriggerValue = this.trigger.getKey();
                                    if (!this.combo.isViewVisible()) {
                                        this.combo.showView();
                                    }
                                    this.fireEvent(DynamicDateTimeCombo.EVENT_FOCUS);
                                },
                            }, {
                                eventName: DynamicDateTimeTrigger.EVENT_BLUR,
                                action: () => {
                                    this.fireEvent(DynamicDateTimeCombo.EVENT_BLUR);
                                },
                            }, {
                                eventName: DynamicDateTimeTrigger.EVENT_ERROR,
                                action: () => {
                                    this.storeValue = {
                                        type: DynamicDateTimeCombo.Static,
                                        value: {
                                            year: date.getFullYear(),
                                            month: date.getMonth() + 1,
                                        },
                                    };
                                    this.combo.element.addClass("error");
                                    this.fireEvent(DynamicDateTimeCombo.EVENT_ERROR);
                                },
                            }, {
                                eventName: DynamicDateTimeTrigger.EVENT_VALID,
                                action: () => {
                                    this.storeValue = this.trigger.getValue();
                                    this.combo.element.removeClass("error");
                                    this.fireEvent(DynamicDateTimeCombo.EVENT_VALID);
                                },
                            }, {
                                eventName: DynamicDateTimeTrigger.EVENT_CHANGE,
                                action: () => {
                                    this.fireEvent(DynamicDateTimeCombo.EVENT_CHANGE);
                                },
                            }, {
                                eventName: DynamicDateTimeTrigger.EVENT_CONFIRM,
                                action: () => {
                                    const dateStore = this.storeTriggerValue;
                                    const dateObj = this.trigger.getKey();
                                    if (this.combo.isViewVisible() || isEqual(dateObj, dateStore)) {
                                        return;
                                    }
                                    if (isNotEmptyString(dateObj) && !isEqual(dateObj, dateStore)) {
                                        this.storeValue = this.trigger.getValue();
                                        this.setValue(this.trigger.getValue());
                                    } else if (isEmptyString(dateObj)) {
                                        this.storeValue = null;
                                        this.trigger.setValue();
                                    }
                                    this._checkDynamicValue(this.storeValue);
                                    this.fireEvent(DynamicDateTimeCombo.EVENT_CONFIRM);
                                },
                            }],
                        }],
                    },
                    adjustLength: this.constants.comboAdjustHeight,
                    popup: {
                        el: {
                            type: "bi.dynamic_date_time_popup",
                            width: opts.isNeedAdjustWidth ? opts.width : undefined,
                            supportDynamic: opts.supportDynamic,
                            behaviors: opts.behaviors,
                            min: opts.minDate,
                            max: opts.maxDate,
                            ref: _ref => {
                                this.popup = _ref;
                            },
                            listeners: [{
                                eventName: DynamicDateTimePopup.BUTTON_CLEAR_EVENT_CHANGE,
                                action: () => {
                                    this.setValue();
                                    this.combo.hideView();
                                    this.fireEvent(DynamicDateTimeCombo.EVENT_CONFIRM);
                                },
                            }, {
                                eventName: DynamicDateTimePopup.BUTTON_lABEL_EVENT_CHANGE,
                                action: () => {
                                    const date = getDate();
                                    this.setValue({
                                        type: DynamicDateTimeCombo.Static,
                                        value: {
                                            year: date.getFullYear(),
                                            month: date.getMonth() + 1,
                                            day: date.getDate(),
                                            hour: 0,
                                            minute: 0,
                                            second: 0,
                                        },
                                    });
                                    this.combo.hideView();
                                    this.fireEvent(DynamicDateTimeCombo.EVENT_CONFIRM);
                                },
                            }, {
                                eventName: DynamicDateTimePopup.BUTTON_OK_EVENT_CHANGE,
                                action: () => {
                                    const value = this.popup.getValue();
                                    if (this._checkValue(value)) {
                                        this.setValue(value);
                                    }
                                    this.combo.hideView();
                                    this.fireEvent(DynamicDateTimeCombo.EVENT_CONFIRM);
                                },
                            }, {
                                eventName: DynamicDateTimePopup.EVENT_CHANGE,
                                action: () => {
                                    this.setValue(this.popup.getValue());
                                    this.combo.hideView();
                                    this.fireEvent(DynamicDateTimeCombo.EVENT_CONFIRM);
                                },
                            }, {
                                eventName: DynamicDateTimePopup.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW,
                                action: () => {
                                    this.fireEvent(DynamicDateTimeCombo.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW);
                                },
                            }],
                        },
                    },
                    listeners: [{
                        eventName: Combo.EVENT_BEFORE_POPUPVIEW,
                        action: () => {
                            this.popup.setMinDate(opts.minDate);
                            this.popup.setMaxDate(opts.maxDate);
                            this.popup.setValue(this.storeValue);
                            this.fireEvent(DynamicDateTimeCombo.EVENT_BEFORE_POPUPVIEW);
                        },
                    }],
                    // // DEC-4250 和复选下拉一样，点击不收起
                    // hideChecker: function (e) {
                    //     return self.triggerBtn.element.find(e.target).length === 0;
                    // }
                },
                top: 0,
                left: 0,
                right: 0,
                bottom: 0,
            }],
        };
    }

    created() {
        this._checkDynamicValue(this.storeValue);
    }

    _checkDynamicValue(v) {
        let type = null;
        if (isNotNull(v)) {
            type = v.type;
        }
        switch (type) {
        case DynamicDateTimeCombo.Dynamic:
            this.changeIcon.setVisible(true);
            // this.comboWrapper.attr("items")[0].width = o.height - (this.options.simple ? 1 : 2);
            // this.comboWrapper.resize();
            break;
        default:
            // this.comboWrapper.attr("items")[0].width = 0;
            // this.comboWrapper.resize();
            this.changeIcon.setVisible(false);
            break;
        }
    }

    _checkValue(v) {
        const o = this.options;
        const value = v.value || {};
        switch (v.type) {
        case DynamicDateCombo.Dynamic:
            return isNotEmptyObject(v.value);
        case DynamicDateCombo.Static:
            return !checkDateVoid(value.year, value.month, value.day, 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);
    }

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

    getValue() {
        return this.storeValue;
    }

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

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

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

    focus() {
        this.trigger.focus();
    }

    blur() {
        this.trigger.blur();
    }

    setWaterMark(v) {
        this.trigger.setWaterMark(v);
    }
}