fineui/src/widget/multitree/trigger/searcher.multi.tree.js

import {
    shortcut,
    Widget,
    extend,
    emptyFn,
    createWidget,
    isNotNull,
    isNumber,
    size,
    keys,
    each,
    isEmptyObject, Func
} from "@/core";
import { MultiSelectEditor } from "../../multiselect/trigger/editor.multiselect";
import { MultiSelectSearcher } from "../../multiselect/trigger/searcher.multiselect";
import { MultiTreeSearchPane } from "multi.tree.search.pane";
import { Searcher } from "@/base";
import { SimpleStateEditor } from "@/case";

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

    static EVENT_SEARCHING = "EVENT_SEARCHING";
    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_CLICK_TREE_NODE = "EVENT_CLICK_TREE_NODE";

    _defaultConfig() {
        return extend(super._defaultConfig(...arguments), {
            baseCls: "bi-multi-tree-searcher",
            itemsCreator: emptyFn,
            valueFormatter(v) {
                return v;
            },
            popup: {},

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

    _init() {
        super._init(...arguments);
        const self = this,
            o = this.options;
        this.editor = createWidget({
            type: "bi.multi_select_editor",
            watermark: o.watermark,
            height: o.height,
            el: {
                type: SimpleStateEditor.xtype,
                text: o.text,
                defaultText: o.defaultText,
                height: o.height,
            },
            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,
            isAutoSearch: false,
            isAutoSync: false,
            onSearch(op, callback) {
                callback({
                    keyword: self.editor.getValue(),
                });
            },
            el: this.editor,

            popup: extend(
                {
                    type: MultiTreeSearchPane.xtype,
                    keywordGetter() {
                        return self.editor.getValue();
                    },
                    itemsCreator(op, callback) {
                        op.keyword = self.editor.getValue();
                        o.itemsCreator(op, callback);
                    },
                    listeners: [
                        {
                            eventName:
                            MultiTreeSearchPane.EVENT_CLICK_TREE_NODE,
                            action() {
                                self.fireEvent(
                                    MultiTreeSearcher.EVENT_CLICK_TREE_NODE,
                                    arguments
                                );
                            },
                        }
                    ],
                    value: o.value,
                },
                o.popup
            ),

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

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

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

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

    setState(ob) {
        const o = this.options;
        ob || (ob = {});
        ob.value || (ob.value = {});
        let count = 0;
        if (isNumber(ob)) {
            this.editor.setState(ob);
        } else if (size(ob.value) === 0) {
            this.editor.setState(BI.Selection.None);
        } else {
            let text = "";
            const value = ob.value;
            const names = BI.Func.getSortedResult(keys(value));
            each(names, (idx, name) => {
                const childNodes = getChildrenNode(value[name]);
                text +=
                    `${(name === "null"
                        ? ""
                        : o.valueFormatter(`${name}`) || name) +
                    (childNodes === ""
                        ? isEmptyObject(value[name])
                            ? ""
                            : ":"
                        : `:${childNodes}`)
                    }; `;
                if (childNodes === "") {
                    count++;
                }
            });

            if (count > 20) {
                this.editor.setState(Selection.Multi);
            } else {
                this.editor.setState(text);
            }
        }

        function getChildrenNode(ob) {
            let text = "";
            const size = size(ob);
            let index = 0;

            const names = Func.getSortedResult(keys(ob));
            each(names, (idx, name) => {
                index++;
                const childNodes = getChildrenNode(ob[name]);
                text +=
                    (name === "null"
                        ? ""
                        : o.valueFormatter(`${name}`) || name) +
                    (childNodes === "" ? "" : `:${childNodes}`) +
                    (index === size ? "" : ",");
                if (childNodes === "") {
                    count++;
                }
            });

            return text;
        }
    }

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

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

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

    setWaterMark(v) {
        this.editor.setWaterMark(v);
    }
}