fineui/src/widget/searchmultitextvaluecombo/multitextvalue.combo.trigger.search.js

import { shortcut, extend, emptyFn, createWidget, Events, nextTick, HTapeLayout, RightVerticalAdaptLayout } from "@/core";
import { Trigger } from "@/base";
import { MultiSelectCheckSelectedSwitcher, MultiSelectSearcher, SearchMultiSelectSearcher } from "@/widget";

@shortcut()
export class SearchMultiSelectTrigger extends Trigger {
    static xtype = "bi.search_multi_select_trigger";

    constants = { height: 14, rgap: 4, lgap: 4 };

    static EVENT_TRIGGER_CLICK = "EVENT_TRIGGER_CLICK";
    static EVENT_COUNTER_CLICK = "EVENT_COUNTER_CLICK";
    static EVENT_CHANGE = "EVENT_CHANGE";
    static EVENT_START = "EVENT_START";
    static EVENT_STOP = "EVENT_STOP";
    static EVENT_PAUSE = "EVENT_PAUSE";
    static EVENT_SEARCHING = "EVENT_SEARCHING";
    static EVENT_BEFORE_COUNTER_POPUPVIEW = "EVENT_BEFORE_COUNTER_POPUPVIEW";

    _defaultConfig() {
        const conf = super._defaultConfig(...arguments);

        return extend(conf, {
            baseCls: "bi-multi-select-trigger",
            itemsCreator: emptyFn,
            valueFormatter: emptyFn,
            searcher: {},
            switcher: {},

            adapter: null,
            masker: {},
        });
    }

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

        const o = this.options;

        this.searcher = createWidget(o.searcher, {
            type: SearchMultiSelectSearcher.xtype,
            height: o.height,
            itemsCreator: o.itemsCreator,
            valueFormatter: o.valueFormatter,
            allValueGetter: o.allValueGetter,
            popup: {},
            adapter: o.adapter,
            masker: o.masker,
            value: o.value,
            text: o.text,
            tipType: o.tipType,
            warningTitle: o.warningTitle,
        });
        this.searcher.on(MultiSelectSearcher.EVENT_START, () => {
            this.fireEvent(SearchMultiSelectTrigger.EVENT_START);
        });
        this.searcher.on(MultiSelectSearcher.EVENT_PAUSE, () => {
            this.fireEvent(SearchMultiSelectTrigger.EVENT_PAUSE);
        });
        this.searcher.on(MultiSelectSearcher.EVENT_SEARCHING, () => {
            this.fireEvent(SearchMultiSelectTrigger.EVENT_SEARCHING, ...arguments);
        });
        this.searcher.on(MultiSelectSearcher.EVENT_STOP, () => {
            this.fireEvent(SearchMultiSelectTrigger.EVENT_STOP);
        });
        this.searcher.on(MultiSelectSearcher.EVENT_CHANGE, () => {
            this.fireEvent(SearchMultiSelectTrigger.EVENT_CHANGE, ...arguments);
        });
        this.numberCounter = createWidget(o.switcher, {
            type: MultiSelectCheckSelectedSwitcher.xtype,
            valueFormatter: o.valueFormatter,
            itemsCreator: o.itemsCreator,
            adapter: o.adapter,
            masker: o.masker,
            value: o.value,
        });
        this.numberCounter.on(
            MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE,
            () => {
                this.fireEvent(SearchMultiSelectTrigger.EVENT_COUNTER_CLICK);
            }
        );
        this.numberCounter.on(
            MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW,
            () => {
                this.fireEvent(
                    SearchMultiSelectTrigger.EVENT_BEFORE_COUNTER_POPUPVIEW
                );
            }
        );

        const wrapNumberCounter = createWidget({
            type: RightVerticalAdaptLayout.xtype,
            hgap: 4,
            items: [
                {
                    el: this.numberCounter,
                }
            ],
        });

        const wrapper = createWidget({
            type: HTapeLayout.xtype,
            element: this,
            items: [
                {
                    el: this.searcher,
                    width: "fill",
                },
                {
                    el: wrapNumberCounter,
                    width: 0,
                },
                {
                    el: createWidget(),
                    width: 24,
                }
            ],
        });

        this.numberCounter.on(Events.VIEW, b => {
            nextTick(() => {
                // 自动调整宽度
                wrapper.attr("items")[1].width =
                    b === true
                        ? this.numberCounter.element.outerWidth() + 8
                        : 0;
                wrapper.resize();
            });
        });

        this.element.click(e => {
            if (this.element.find(e.target).length > 0) {
                this.numberCounter.hideView();
            }
        });
    }

    getCounter() {
        return this.numberCounter;
    }

    getSearcher() {
        return this.searcher;
    }

    stopEditing() {
        this.searcher.stopSearch();
        this.numberCounter.hideView();
    }

    setAdapter(adapter) {
        this.searcher.setAdapter(adapter);
        this.numberCounter.setAdapter(adapter);
    }

    setValue(ob) {
        this.searcher.setValue(ob);
        this.numberCounter.setValue(ob);
    }

    setTipType(v) {
        this.searcher.setTipType(v);
    }

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

    getValue() {
        return this.searcher.getValue();
    }
}