fineui/src/widget/multitree/multi.tree.list.combo.js

import {
    shortcut,
    extend,
    emptyFn,
    createWidget,
    toPix,
    nextTick,
    Events,
    AbsoluteLayout,
    VerticalAdaptLayout,
    deepClone
} from "@/core";
import { Single, Combo } from "@/base";
import { MultiTreeSearchInsertPane } from "trigger/multi.tree.search.insert.pane";
import { MultiTreePopup } from "multi.tree.popup";
import { MultiSelectTrigger } from "../multiselect/multiselect.trigger";
import {
    TriggerIconButton,
    ListPartTree,
    ListDisplayTree,
    Listasynctree
} from "@/case";
import { MultiSelectCheckSelectedSwitcher } from "../multiselect/trigger/switcher.checkselected";

@shortcut()
export class MultiTreeListCombo extends Single {
    static xtype = "bi.multi_tree_list_combo";

    static EVENT_FOCUS = "EVENT_FOCUS";
    static EVENT_BLUR = "EVENT_BLUR";
    static EVENT_STOP = "EVENT_STOP";
    static EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM";
    static EVENT_SEARCHING = "EVENT_SEARCHING";
    static EVENT_CONFIRM = "EVENT_CONFIRM";
    static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";

    _defaultConfig() {
        return extend(super._defaultConfig(...arguments), {
            baseCls: "bi-multi-tree-list-combo",
            itemsCreator: emptyFn,
            valueFormatter: emptyFn,
            height: 24,
            allowEdit: true,
            allowInsertValue: true,
            isNeedAdjustWidth: true,
            text: "",
        });
    }

    _init() {
        const self = this,
            o = this.options;
        super._init(...arguments);
        let isInit = false;
        let want2showCounter = false;

        this.storeValue = { value: o.value || [] };

        this.trigger = createWidget({
            type: "bi.multi_select_trigger",
            allowEdit: o.allowEdit,
            text: o.text,
            defaultText: o.defaultText,
            watermark: o.watermark,
            height: toPix(o.height, o.simple ? 1 : 2),
            valueFormatter: o.valueFormatter,
            masker: {
                offset: {
                    left: 0,
                    top: 0,
                    right: 0,
                    bottom: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 1,
                },
            },
            searcher: {
                type: "bi.multi_list_tree_searcher",
                itemsCreator: o.itemsCreator,
                popup: {
                    type: o.allowInsertValue
                        ? "bi.multi_tree_search_insert_pane"
                        : "bi.multi_tree_search_pane",
                    el: {
                        type: ListPartTree.xtype,
                    },
                    listeners: [
                        {
                            eventName: MultiTreeSearchInsertPane.EVENT_ADD_ITEM,
                            action () {
                                self.storeValue.value.unshift([
                                    self.trigger.getSearcher().getKeyword()
                                ]);
                                self._assertShowValue();
                                // setValue以更新paras.value, 之后从search popup中拿到的就能有add的值了
                                self.combo.setValue(self.storeValue);
                                self.numberCounter.setValue(self.storeValue);
                                self._stopEditing();
                                self._dataChange = true;
                            },
                        }
                    ],
                },
            },
            switcher: {
                el: {
                    type: "bi.multi_tree_check_selected_button",
                },
                popup: {
                    type: "bi.multi_tree_check_pane",
                    el: {
                        type: ListDisplayTree.xtype,
                    },
                    itemsCreator: o.itemsCreator,
                },
            },
            value: this.storeValue,
        });

        this.combo = createWidget({
            type: Combo.xtype,
            cls: o.simple ? "bi-border-bottom" : "bi-border bi-border-radius",
            toggle: !o.allowEdit,
            container: o.container,
            el: this.trigger,
            adjustLength: 1,
            popup: {
                type: MultiTreePopup.xtype,
                ref () {
                    self.popup = this;
                    self.trigger.setAdapter(this);
                    self.numberCounter.setAdapter(this);
                },
                el: {
                    type: Listasynctree.xtype,
                },
                listeners: [
                    {
                        eventName: MultiTreePopup.EVENT_AFTERINIT,
                        action () {
                            self.numberCounter.adjustView();
                            isInit = true;
                            if (want2showCounter === true) {
                                showCounter();
                            }
                        },
                    },
                    {
                        eventName: MultiTreePopup.EVENT_CHANGE,
                        action () {
                            change = true;
                            const val = {
                                type: BI.Selection.Multi,
                                value: this.hasChecked() ? this.getValue() : [],
                            };
                            self.trigger.getSearcher().setState(val);
                            self.numberCounter.setButtonChecked(val);
                            self.storeValue = { value: self.combo.getValue() };
                            self.fireEvent(
                                MultiTreeListCombo.EVENT_CLICK_ITEM,
                                self.getValue()
                            );
                            self._dataChange = true;
                        },
                    },
                    {
                        eventName: MultiTreePopup.EVENT_CLICK_CONFIRM,
                        action () {
                            self.combo.hideView();
                        },
                    },
                    {
                        eventName: MultiTreePopup.EVENT_CLICK_CLEAR,
                        action () {
                            clear = true;
                            self._dataChange = true;
                            self.setValue();
                            self._defaultState();
                        },
                    }
                ],
                itemsCreator: o.itemsCreator,
                onLoaded () {
                    nextTick(() => {
                        self.numberCounter.adjustView();
                        self.trigger.getSearcher().adjustView();
                    });
                },
                maxWidth: o.isNeedAdjustWidth ? "auto" : 500,
            },
            isNeedAdjustWidth: o.isNeedAdjustWidth,
            value: this.storeValue,
            hideChecker (e) {
                return (
                    triggerBtn.element.find(e.target).length === 0 &&
                    self.numberCounter.element.find(e.target).length === 0
                );
            },
        });

        var change = false;
        var clear = false; // 标识当前是否点击了清空

        const isSearching = function () {
            return self.trigger.getSearcher().isSearching();
        };

        const isPopupView = function () {
            return self.combo.isViewVisible();
        };

        this.trigger.on(MultiSelectTrigger.EVENT_FOCUS, () => {
            self.fireEvent(MultiTreeListCombo.EVENT_FOCUS);
        });
        this.trigger.on(MultiSelectTrigger.EVENT_BLUR, () => {
            self.fireEvent(MultiTreeListCombo.EVENT_BLUR);
        });

        this.trigger.on(MultiSelectTrigger.EVENT_START, function () {
            self.storeValue = { value: self.combo.getValue() };
            this.setValue(self.storeValue);
            self.numberCounter.setValue(self.storeValue);
        });
        this.trigger.on(MultiSelectTrigger.EVENT_STOP, function () {
            self.storeValue = { value: this.getValue() };
            self.combo.setValue(self.storeValue);
            self.numberCounter.setValue(self.storeValue);
            nextTick(() => {
                if (isPopupView()) {
                    self.combo.populate();
                }
            });
            self.fireEvent(MultiTreeListCombo.EVENT_STOP);
        });

        this.trigger.on(MultiSelectTrigger.EVENT_SEARCHING, () => {
            self.fireEvent(MultiTreeListCombo.EVENT_SEARCHING);
        });

        function showCounter() {
            if (isSearching()) {
                self.storeValue = { value: self.trigger.getValue() };
            } else if (isPopupView()) {
                self.storeValue = { value: self.combo.getValue() };
            }
            self.trigger.setValue(self.storeValue);
            self.numberCounter.setValue(self.storeValue);
        }

        this.trigger.on(MultiSelectTrigger.EVENT_TRIGGER_CLICK, () => {
            self.combo.toggle();
        });

        this.trigger.on(MultiSelectTrigger.EVENT_CHANGE, function () {
            const checked = this.getSearcher().hasChecked();
            const val = {
                type: BI.Selection.Multi,
                value: checked ? { 1: 1 } : {},
            };
            this.getSearcher().setState(
                checked ? BI.Selection.Multi : BI.Selection.None
            );
            self.numberCounter.setButtonChecked(val);
            self.fireEvent(
                MultiTreeListCombo.EVENT_CLICK_ITEM,
                self.combo.getValue()
            );
            self._dataChange = true;
        });

        this.combo.on(Combo.EVENT_BEFORE_POPUPVIEW, function () {
            if (isSearching()) {
                return;
            }
            if (!this.isViewVisible()) {
                self._dataChange = false; // 标记数据是否发生变化
            }
            if (change === true) {
                self.storeValue = { value: self.combo.getValue() };
                change = false;
            }
            self.combo.setValue(self.storeValue);
            self.numberCounter.setValue(self.storeValue);
            self.populate();
            self.fireEvent(MultiTreeListCombo.EVENT_BEFORE_POPUPVIEW);
        });
        this.combo.on(Combo.EVENT_BEFORE_HIDEVIEW, () => {
            if (isSearching()) {
                self.trigger.stopEditing();
                self._dataChange &&
                    self.fireEvent(MultiTreeListCombo.EVENT_CONFIRM);
            } else {
                if (isPopupView()) {
                    self._stopEditing();
                    self.storeValue = { value: self.combo.getValue() };
                    if (clear === true) {
                        self.storeValue = { value: [] };
                    }
                    self._dataChange &&
                        self.fireEvent(MultiTreeListCombo.EVENT_CONFIRM);
                }
            }
            clear = false;
            change = false;
        });

        var triggerBtn = createWidget({
            type: TriggerIconButton.xtype,
            width: o.height,
            height: o.height,
            cls: "multi-select-trigger-icon-button",
        });
        triggerBtn.on(TriggerIconButton.EVENT_CHANGE, () => {
            self.numberCounter.hideView();
            if (self.combo.isViewVisible()) {
                self.combo.hideView();
            } else {
                self.combo.showView();
            }
        });

        this.numberCounter = createWidget({
            type: "bi.multi_select_check_selected_switcher",
            el: {
                type: "bi.multi_tree_check_selected_button",
            },
            popup: {
                type: "bi.multi_tree_check_pane",
            },
            itemsCreator: o.itemsCreator,
            masker: {
                offset: {
                    left: 0,
                    top: 0,
                    right: 0,
                    bottom: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 1,
                },
            },
            valueFormatter: o.valueFormatter,
            value: o.value,
        });
        this.numberCounter.on(
            MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE,
            () => {
                if (!self.combo.isViewVisible()) {
                    self.combo.showView();
                }
            }
        );
        this.numberCounter.on(
            MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW,
            () => {
                if (want2showCounter === false) {
                    want2showCounter = true;
                }
                if (isInit === true) {
                    want2showCounter = null;
                    showCounter();
                }
            }
        );

        this.numberCounter.on(Events.VIEW, b => {
            nextTick(() => {
                // 自动调整宽度
                self.trigger.refreshPlaceHolderWidth(
                    b === true ? self.numberCounter.element.outerWidth() + 8 : 0
                );
            });
        });

        this.numberCounter.on(
            MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW,
            () => {
                nextTick(() => {
                    // 收起时自动调整宽度
                    self.trigger.refreshPlaceHolderWidth(0);
                });
            }
        );

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

        createWidget({
            type: AbsoluteLayout.xtype,
            element: this,
            items: [
                {
                    el: this.combo,
                    left: 0,
                    right: 0,
                    top: 0,
                    bottom: 0,
                },
                {
                    el: triggerBtn,
                    right: 0,
                    top: 0,
                    bottom: 0,
                },
                {
                    el: {
                        type: VerticalAdaptLayout.xtype,
                        items: [this.numberCounter],
                    },
                    right: o.height,
                    top: 0,
                    height: o.height,
                }
            ],
        });
    }

    _assertShowValue() {
        this.trigger.getSearcher().setState(this.storeValue);
        this.numberCounter.setButtonChecked(this.storeValue);
    }

    _stopEditing() {
        this.trigger.stopEditing();
        this.numberCounter.hideView();
    }

    _defaultState() {
        this._stopEditing();
        this.combo.hideView();
    }

    showView() {
        this.combo.showView();
    }

    hideView() {
        this.combo.hideView();
    }

    getSearcher() {
        return this.trigger.getSearcher();
    }

    setValue(v) {
        this.storeValue.value = v || [];
        this.combo.setValue({
            value: v || [],
        });
        this.numberCounter.setValue({
            value: v || [],
        });
    }

    getValue() {
        return deepClone(this.storeValue.value);
    }

    populate() {
        this.combo.populate();
    }

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

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

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