fineui/src/case/combo/textvaluecombo/combo.textvalue.js

/**
 * @class BI.TextValueCombo
 * @extend BI.Widget
 * combo : text + icon, popup : text
 * 参见场景dashboard布局方式选择
 */
BI.TextValueCombo = BI.inherit(BI.Widget, {
    _defaultConfig: function (config) {
        return BI.extend(BI.TextValueCombo.superclass._defaultConfig.apply(this, arguments), {
            baseCls: "bi-text-value-combo " + (config.simple ? "bi-border-bottom" : "bi-border bi-border-radius"),
            height: 24,
            chooseType: BI.ButtonGroup.CHOOSE_TYPE_SINGLE,
            text: "",
            value: "",
            defaultText: "",
            el: {},
            allowClear: false,
            status: "success", //  success | warning | error,
            title: null
        });
    },

    _init: function () {
        var self = this, o = this.options;
        BI.isNumeric(o.width) && (o.width -= (o.simple ? 0 : 2));
        BI.isNumeric(o.height) && (o.height -= (o.simple ? 1 : 2));
        o.value = BI.isFunction(o.value) ? this.__watch(o.value, function (context, newValue) {
            self.setValue(newValue);
        }) : o.value;
        o.items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
            self.populate(newValue);
        }) : o.items;
        BI.TextValueCombo.superclass._init.apply(this, arguments);
    },

    render: function () {

        const o = this.options;

        const title = () => {
            if (BI.isFunction(o.title)) {
                return o.title();
            }
            if (this.options.status === "error") {
                return {
                    level: "warning",
                    text: o.warningTitle
                };
            }
            return {
                level: "success"
            };
        };

        const trigger = {
            type: "bi.select_text_trigger",
            ref: ref => this.trigger = ref,
            cls: "text-value-trigger",
            items: o.items,
            height: o.height,
            text: o.text,
            value: o.value,
            title,
            allowClear: o.allowClear,
            defaultText: o.defaultText,
            listeners: [
                {
                    eventName: BI.SelectTextTrigger.EVENT_CLEAR,
                    action: () => {
                        this._clear();
                        this.fireEvent(BI.TextValueCombo.EVENT_CHANGE);
                    }
                }
            ],
            ...o.el
        };
        let changeTag = false;
        const popup = {
            type: "bi.text_value_combo_popup",
            ref: ref => this.popup = ref,
            chooseType: o.chooseType,
            items: o.items,
            listeners: [
                {
                    eventName: BI.TextValueComboPopup.EVENT_CHANGE,
                    action: (...args) => {
                        changeTag = true;
                        const value = this.popup.getValue();
                        this.setValue(value);
                        if (o.chooseType === BI.ButtonGroup.CHOOSE_TYPE_SINGLE) {
                            this.combo.hideView();
                            this.fireEvent(BI.TextValueCombo.EVENT_CHANGE, ...args);
                        }
                        if (o.chooseType === BI.ButtonGroup.CHOOSE_TYPE_MULTI && BI.isEmptyArray(value)) {
                            this._clear();
                        }
                    }
                }, {
                    eventName: BI.Controller.EVENT_CHANGE,
                    action: (...args) => {
                        this.fireEvent(BI.Controller.EVENT_CHANGE, ...args);
                    }
                }, {
                    eventName: BI.TextValueComboPopup.EVENT_CLEAR,
                    action: (...args) => {
                        changeTag = true;
                        this._clear();
                        this.combo.hideView();
                    }
                }, {
                    eventName: BI.TextValueComboPopup.EVENT_CONFIRM,
                    action: (...args) => {
                        this.combo.hideView();
                    }
                }
            ]
        };

        return {
            type: "bi.combo",
            ref: ref => this.combo = ref,
            container: o.container,
            direction: o.direction,
            adjustLength: 2,
            el: trigger,
            listeners: [
                {
                    eventName: BI.Combo.EVENT_BEFORE_POPUPVIEW,
                    action: (...args) => {
                        changeTag = false;
                    }
                }, {
                    eventName: BI.Combo.EVENT_AFTER_HIDEVIEW,
                    action: (...args) => {
                        if (o.chooseType !== BI.ButtonGroup.CHOOSE_TYPE_SINGLE && changeTag) {
                            this.fireEvent(BI.TextValueCombo.EVENT_CHANGE, ...args);
                        }
                    }
                }
            ],
            popup: {
                el: popup,
                value: o.value,
                maxHeight: 240,
                minHeight: 25
            }
        };
    },

    mounted: function () {
        const o = this.options;
        if (BI.isKey(o.value) || BI.isObject(o.value)) {
            this._checkError(o.value);
        }
    },

    _clear: function () {
        this.trigger.setText("");
        this.combo.setValue();
        this.setStatus("success");
    },

    _checkError: function (v) {

        if (BI.isNull(v)) {
            this.setStatus("success");
            return;
        }

        var vals = BI.isArray(v) ? v : [v];

        var result = BI.intersection(BI.map(this.options.items, "value"), vals);

        if (result.length !== vals.length) {
            this.setStatus("error");
        } else {
            this.setStatus("success");
        }
    },

    clear: function () {
        this._clear();
    },

    setText: function (text) {
        this.trigger.setText(text);
    },

    setValue: function (v) {
        this.combo.setValue(v);
        this._checkError(v);
    },

    setStatus: function (status) {
        this.element.removeClass(`bi-status-${this.options.status}`);
        this.element.addClass(`bi-status-${status}`);
        this.options.status = status;
    },

    getValue: function () {
        var value = this.combo.getValue();
        return BI.isNull(value) ? [] : (BI.isArray(value) ? value : [value]);
    },

    populate: function (items) {
        this.options.items = items;
        this.combo.populate(items);
    }
});
BI.TextValueCombo.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.text_value_combo", BI.TextValueCombo);