fineui/src/widget/multiselect/trigger/searcher.multiselect.js

import {
    shortcut,
    Widget,
    extend,
    emptyFn,
    i18nText,
    createWidget,
    isNotNull,
    size,
    each
} from "@/core";
import { MultiSelectEditor } from "./editor.multiselect";
import { Searcher } from "@/base";
import { MultiSelectSearchPane } from "../search/multiselect.search.pane";

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

    static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
    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_FOCUS = "EVENT_FOCUS";
    static EVENT_BLUR = "EVENT_BLUR";

    _defaultConfig() {
        return extend(super._defaultConfig(...arguments), {
            baseCls: "bi-multi-select-searcher",
            itemsCreator: emptyFn,
            el: {},
            popup: {},
            valueFormatter: emptyFn,
            adapter: null,
            masker: {},
            defaultText: i18nText("BI-Basic_Please_Select"),
            itemHeight: 24,
        });
    }

    _init() {
        super._init(...arguments);
        const self = this,
            o = this.options;
        this.editor = createWidget(o.el, {
            type: MultiSelectEditor.xtype,
            height: o.height,
            text: o.text,
            defaultText: o.defaultText,
            watermark: o.watermark,
            listeners: [
                {
                    eventName: MultiSelectEditor.EVENT_FOCUS,
                    action() {
                        self.fireEvent(MultiSelectSearcher.EVENT_FOCUS);
                    },
                },
                {
                    eventName: MultiSelectEditor.EVENT_BLUR,
                    action() {
                        self.fireEvent(MultiSelectSearcher.EVENT_BLUR);
                    },
                }
            ],
        });

        this.searcher = createWidget({
            type: Searcher.xtype,
            element: this,
            height: o.height,
            isAutoSearch: false,
            isAutoSync: false,
            onSearch(op, callback) {
                callback();
            },
            el: this.editor,
            popup: extend(
                {
                    type: MultiSelectSearchPane.xtype,
                    valueFormatter: o.valueFormatter,
                    itemFormatter: o.itemFormatter,
                    keywordGetter() {
                        return self.editor.getValue();
                    },
                    itemsCreator(op, callback) {
                        const keyword = self.editor.getValue();
                        op.keywords = [keyword];
                        o.itemsCreator(op, () => {
                            const keyword = self.editor.getValue();
                            op.keywords = [keyword];
                            o.itemsCreator(op, function () {
                                if (keyword === self.editor.getValue()) {
                                    callback(...arguments);
                                }
                            });
                        });
                    },
                    itemHeight: o.itemHeight,
                    value: o.value,
                },
                o.popup
            ),

            adapter: o.adapter,
            masker: o.masker,
        });
        this.searcher.on(Searcher.EVENT_START, () => {
            self.fireEvent(MultiSelectSearcher.EVENT_START);
        });
        this.searcher.on(Searcher.EVENT_PAUSE, () => {
            self.fireEvent(MultiSelectSearcher.EVENT_PAUSE);
        });
        this.searcher.on(Searcher.EVENT_STOP, () => {
            self.fireEvent(MultiSelectSearcher.EVENT_STOP);
        });
        this.searcher.on(Searcher.EVENT_CHANGE, function () {
            self.fireEvent(MultiSelectSearcher.EVENT_CHANGE, arguments);
        });
        this.searcher.on(Searcher.EVENT_SEARCHING, function () {
            const keywords = this.getKeywords();
            self.fireEvent(MultiSelectSearcher.EVENT_SEARCHING, keywords);
        });
        if (isNotNull(o.value)) {
            this.setState(o.value);
        }
    }

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

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

    adjustView() {
        this.searcher.adjustView();
    }

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

    stopSearch() {
        this.searcher.stopSearch();
    }

    getKeyword() {
        return this.editor.getValue();
    }

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

    hasChecked() {
        return this.searcher.getView() && this.searcher.getView().hasChecked();
    }

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

    setState(ob) {
        let state;
        const o = this.options;
        ob || (ob = {});
        ob.value || (ob.value = []);
        if (ob.type === BI.Selection.All) {
            if (ob.value.length === 0) {
                this.editor.setState(BI.Selection.All);
            } else if (size(ob.assist) <= 20) {
                state = "";
                each(ob.assist, (i, v) => {
                    if (i === 0) {
                        state +=
                            `${
                                v === null ? "" : o.valueFormatter(`${v}`) || v}`;
                    } else {
                        state +=
                            `,${
                                v === null ? "" : o.valueFormatter(`${v}`) || v}`;
                    }
                });
                this.editor.setState(state);
            } else {
                this.editor.setState(BI.Selection.Multi);
            }
        } else {
            if (ob.value.length === 0) {
                this.editor.setState(BI.Selection.None);
            } else if (size(ob.value) <= 20) {
                state = "";
                each(ob.value, (i, v) => {
                    if (i === 0) {
                        state +=
                            `${
                                v === null ? "" : o.valueFormatter(`${v}`) || v}`;
                    } else {
                        state +=
                            `,${
                                v === null ? "" : o.valueFormatter(`${v}`) || v}`;
                    }
                });
                this.editor.setState(state);
            } else {
                this.editor.setState(BI.Selection.Multi);
            }
        }
    }

    getState() {
        return this.editor.getState();
    }

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

    getKey() {
        return this.editor.getValue();
    }

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

    populate(items) {
        this.searcher.populate(...arguments);
    }
}