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

import { TextValueComboPopup } from "./popup.textvalue";
import {
    shortcut,
    Widget,
    extend,
    isFunction,
    toPix,
    isEmptyArray,
    Controller,
    isKey,
    isObject,
    isNull,
    isArray,
    intersection,
    map
} from "@/core";
import { ButtonGroup, Combo } from "@/base";
import { SelectTextTrigger } from "../../trigger";

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

    static EVENT_CHANGE = "EVENT_CHANGE";
    static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";

    _defaultConfig(config) {
        return extend(super._defaultConfig(...arguments), {
            baseCls: `bi-text-value-combo ${config.simple ? "bi-border-bottom" : "bi-border bi-border-radius"}`,
            height: 24,
            chooseType: ButtonGroup.CHOOSE_TYPE_SINGLE,
            text: "",
            value: "",
            defaultText: "",
            el: {},
            allowClear: false,
            status: "success", //  success | warning | error,
            title: null,
            allowSelectAll: true,
        });
    }

    _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);
    }

    render() {
        const o = this.options;

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

            return {
                level: "success",
            };
        };

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

        return {
            type: Combo.xtype,
            height: toPix(o.height, o.simple ? 1 : 2),
            width: toPix(o.width, o.simple ? 0 : 2),
            ref: ref => (this.combo = ref),
            container: o.container,
            direction: o.direction,
            adjustLength: 2,
            el: trigger,
            listeners: [
                {
                    eventName: Combo.EVENT_BEFORE_POPUPVIEW,
                    action: () => {
                        changeTag = false;
                        this.fireEvent(TextValueCombo.EVENT_BEFORE_POPUPVIEW);
                    },
                }, {
                    eventName: Combo.EVENT_AFTER_HIDEVIEW,
                    action: (...args) => {
                        if (o.chooseType !== ButtonGroup.CHOOSE_TYPE_SINGLE && changeTag) {
                            this.fireEvent(TextValueCombo.EVENT_CHANGE, ...args);
                        }
                    },
                }
            ],
            popup: {
                el: popup,
                value: o.value,
                maxHeight: 240,
                minHeight: o.chooseType === ButtonGroup.CHOOSE_TYPE_MULTI && o.allowSelectAll ? 55 : 25,
            },
        };
    }

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

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

    _checkError(v) {
        if (isNull(v)) {
            this.setStatus("success");

            return;
        }

        const vals = isArray(v) ? v : [v];

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

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

    clear() {
        this._clear();
    }

    setText(text) {
        this.trigger.setText(text);
    }

    setValue(v) {
        this.options.value = v;
        this.combo.setValue(v);
        this._checkError(v);
    }

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

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

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

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