fineui/src/case/combo/icontextvaluecombo/combo.icontextvalue.js

import { IconTextValueComboPopup } from "./popup.icontextvalue";
import {
    shortcut,
    Widget,
    extend,
    isFunction,
    createWidget,
    toPix,
    Controller,
    isKey,
    isNull,
    isEmptyArray,
    isEmptyString,
    isArray,
    find,
    contains
} from "@/core";
import { SelectIconTextTrigger } from "../../trigger";
import { Combo } from "@/base";

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

    static EVENT_CHANGE = "EVENT_CHANGE";

    _defaultConfig(config) {
        return extend(super._defaultConfig(...arguments), {
            baseCls: `bi-icon-text-value-combo ${config.simple ? "bi-border-bottom" : "bi-border bi-border-radius"}`,
            height: 24,
            iconHeight: null,
            iconWidth: null,
            value: "",
        });
    }

    _init() {
        const o = this.options;
        o.value = isFunction(o.value)
            ? this.__watch(o.value, (context, newValue) => {
                  this.setValue(newValue);
              })
            : o.value;
        o.items = isFunction(o.items)
            ? this.__watch(o.items, (context, newValue) => {
                  this.populate(newValue);
              })
            : o.items;
        super._init(...arguments);
        this.trigger = createWidget({
            type: SelectIconTextTrigger.xtype,
            cls: "icon-text-value-trigger",
            items: o.items,
            height: toPix(o.height, 2),
            text: o.text,
            iconCls: o.iconCls,
            value: o.value,
            iconHeight: o.iconHeight,
            iconWidth: o.iconWidth,
            iconWrapperWidth: o.iconWrapperWidth,
            title: o.title,
            warningTitle: o.warningTitle,
        });
        this.popup = createWidget({
            type: IconTextValueComboPopup.xtype,
            items: o.items,
            value: o.value,
            iconHeight: o.iconHeight,
            iconWidth: o.iconWidth,
            iconWrapperWidth: o.iconWrapperWidth,
        });
        this.popup.on(IconTextValueComboPopup.EVENT_CHANGE, (...args) => {
            this.setValue(this.popup.getValue());
            this.textIconCombo.hideView();
            this.fireEvent(IconTextValueCombo.EVENT_CHANGE, ...args);
        });
        this.popup.on(Controller.EVENT_CHANGE, (...args) => {
            this.fireEvent(Controller.EVENT_CHANGE, ...args);
        });
        this.textIconCombo = createWidget({
            type: Combo.xtype,
            height: toPix(o.height, 2),
            width: toPix(o.width, 2),
            element: this,
            container: o.container,
            direction: o.direction,
            adjustLength: 2,
            el: this.trigger,
            popup: {
                el: this.popup,
                maxHeight: 240,
                minHeight: 25,
            },
        });
        if (isKey(o.value)) {
            this.setValue(o.value);
        }
    }

    _checkError(v) {
        if (isNull(v) || isEmptyArray(v) || isEmptyString(v)) {
            this.trigger.options.tipType = "success";
            this.element.removeClass("combo-error");
        } else {
            v = isArray(v) ? v : [v];
            const result = find(this.options.items, (idx, item) => contains(v, item.value));
            if (isNull(result)) {
                this.trigger.options.tipType = "warning";
                this.element.removeClass("combo-error").addClass("combo-error");
            } else {
                this.trigger.options.tipType = "success";
                this.element.removeClass("combo-error");
            }
        }
    }

    setValue(v) {
        this.trigger.setValue(v);
        this.popup.setValue(v);
        this._checkError(v);
    }

    getValue() {
        const value = this.popup.getValue();

        return isNull(value) ? [] : isArray(value) ? value : [value];
    }

    populate(items) {
        this.options.items = items;
        this.textIconCombo.populate(items);
    }
}