fineui/src/widget/multilayersingletree/multilayersingletree.combo.js

import { shortcut, Widget, extend, emptyFn, isKey, toPix, AbsoluteLayout, nextTick, isArray } from "@/core";
import { SingleTreeTrigger } from "../singletree/singletree.trigger";
import { MultiLayerSingleTreePopup } from "./multilayersingletree.popup";
import { Combo } from "@/base";
import { MultiLayerSingleTreeTrigger } from "./multilayersingletree.trigger";
import { TriggerIconButton } from "@/case";

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

    static EVENT_SEARCHING = "EVENT_SEARCHING";
    static EVENT_BLUR = "EVENT_BLUR";
    static EVENT_FOCUS = "EVENT_FOCUS";
    static EVENT_CHANGE = "EVENT_CHANGE";
    static EVENT_STOP = "EVENT_STOP";
    static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";

    _defaultConfig() {
        return extend(super._defaultConfig(...arguments), {
            baseCls: "bi-multilayer-single-tree-combo",
            isDefaultInit: false,
            height: 24,
            text: "",
            defaultText: "",
            itemsCreator: emptyFn,
            items: [],
            allowEdit: false,
            allowSearchValue: false,
            allowInsertValue: false,
            isNeedAdjustWidth: true,
        });
    }

    render() {
        const self = this,
            o = this.options;

        const cls =
            (o.simple ? "bi-border-bottom bi-focus-shadow " : "bi-border bi-border-radius bi-focus-shadow ") +
            (isKey(o.status) ? `status-${o.status}` : "");

        const baseConfig = this._getBaseConfig();

        if (o.allowEdit) {
            return {
                type: AbsoluteLayout.xtype,
                width: toPix(o.width, 2),
                height: toPix(o.height, 2),
                cls,
                items: [
                    {
                        el: extend(baseConfig, this._getSearchConfig()),
                        top: 0,
                        bottom: 0,
                        right: 0,
                        left: 0,
                    },
                    {
                        el: self._getTriggerIconButton(),
                        top: 0,
                        bottom: 0,
                        right: 0,
                    }
                ],
            };
        }

        return extend(
            baseConfig,
            {
                width: toPix(o.width, 2),
                height: toPix(o.height, 2),
                el: {
                    type: SingleTreeTrigger.xtype,
                    ref (_ref) {
                        self.textTrigger = _ref;
                    },
                    text: o.text,
                    defaultText: o.defaultText,
                    height: toPix(o.height, 2),
                    items: o.items,
                    value: o.value,
                    tipType: o.tipType,
                    warningTitle: o.warningTitle,
                    valueFormatter: o.valueFormatter,
                },
            },
            { cls }
        );
    }

    _getBaseConfig() {
        const self = this,
            o = this.options;
        
        return {
            type: Combo.xtype,
            container: o.container,
            destroyWhenHide: o.destroyWhenHide,
            adjustLength: 2,
            ref (_ref) {
                self.combo = _ref;
            },
            popup: {
                el: {
                    type: "bi.multilayer_single_tree_popup",
                    isDefaultInit: o.isDefaultInit,
                    itemsCreator: o.itemsCreator,
                    items: o.items,
                    ref (_ref) {
                        self.trigger && self.trigger.getSearcher().setAdapter(_ref);
                    },
                    listeners: [
                        {
                            eventName: MultiLayerSingleTreePopup.EVENT_CHANGE,
                            action () {
                                self.setValue(this.getValue());
                                self.combo.hideView();
                                self.fireEvent(MultiLayerSingleTreeCombo.EVENT_CHANGE);
                            },
                        }
                    ],
                    onLoaded () {
                        nextTick(() => {
                            self.combo.adjustWidth();
                            self.combo.adjustHeight();
                        });
                    },
                },
                value: o.value,
                maxHeight: 400,
                maxWidth: o.isNeedAdjustWidth ? "auto" : 500,
                minHeight: 240,
            },
            isNeedAdjustWidth: o.isNeedAdjustWidth,
            listeners: [
                {
                    eventName: Combo.EVENT_BEFORE_POPUPVIEW,
                    action () {
                        self.fireEvent(MultiLayerSingleTreeCombo.EVENT_BEFORE_POPUPVIEW);
                    },
                }
            ],
        };
    }

    _getSearchConfig() {
        const self = this,
            o = this.options;
        
        return {
            el: {
                type: "bi.multilayer_single_tree_trigger",
                container: o.container,
                allowInsertValue: o.allowInsertValue,
                allowSearchValue: o.allowSearchValue,
                cls: "multilayer-single-tree-trigger",
                ref (_ref) {
                    self.trigger = _ref;
                },
                watermark: o.watermark,
                items: o.items,
                itemsCreator: o.itemsCreator,
                valueFormatter: o.valueFormatter,
                height: toPix(o.height, 2),
                text: o.text,
                defaultText: o.defaultText,
                value: o.value,
                tipType: o.tipType,
                warningTitle: o.warningTitle,
                title: o.title,
                listeners: [
                    {
                        eventName: MultiLayerSingleTreeTrigger.EVENT_CHANGE,
                        action () {
                            self.setValue(this.getValue());
                            self.combo.hideView();
                            self.fireEvent(MultiLayerSingleTreeCombo.EVENT_CHANGE);
                        },
                    },
                    {
                        eventName: MultiLayerSingleTreeTrigger.EVENT_FOCUS,
                        action () {
                            self.fireEvent(MultiLayerSingleTreeCombo.EVENT_FOCUS);
                        },
                    },
                    {
                        eventName: MultiLayerSingleTreeTrigger.EVENT_BLUR,
                        action () {
                            self.fireEvent(MultiLayerSingleTreeCombo.EVENT_BLUR);
                        },
                    },
                    {
                        eventName: MultiLayerSingleTreeTrigger.EVENT_SEARCHING,
                        action () {
                            self.fireEvent(MultiLayerSingleTreeCombo.EVENT_SEARCHING);
                        },
                    },
                    {
                        eventName: MultiLayerSingleTreeTrigger.EVENT_STOP,
                        action () {
                            self.fireEvent(MultiLayerSingleTreeCombo.EVENT_STOP);
                        },
                    },
                    {
                        eventName: MultiLayerSingleTreeTrigger.EVENT_ADD_ITEM,
                        action () {
                            const value = self.trigger.getSearcher().getKeyword();
                            self.combo.setValue([value]);
                            self.combo.hideView();
                            self.fireEvent(MultiLayerSingleTreeCombo.EVENT_CHANGE);
                        },
                    }
                ],
            },
            toggle: !o.allowEdit,
            hideChecker (e) {
                // 新增传配置container后对应hideChecker的修改
                // IE11下，popover(position: fixed)下放置下拉控件(position: fixed), 滚动的时候会异常卡顿
                // 通过container参数将popup放置于popover之外解决此问题, 其他下拉控件由于元素少或者有分页，所以
                // 卡顿不明显, 先在此做尝试, 并在FineUI特殊处理待解决文档中标记跟踪
                return o.container &&
                    self.trigger.getSearcher().isSearching() &&
                    self.trigger.getSearcher().getView().element.find(e.target).length > 0
                    ? false
                    : self.triggerBtn?.element.find(e.target).length === 0;
            },
            listeners: [
                {
                    eventName: Combo.EVENT_AFTER_HIDEVIEW,
                    action () {
                        self.trigger.stopEditing();
                    },
                },
                {
                    eventName: Combo.EVENT_BEFORE_POPUPVIEW,
                    action () {
                        self.fireEvent(MultiLayerSingleTreeCombo.EVENT_BEFORE_POPUPVIEW);
                    },
                }
            ],
        };
    }

    _getTriggerIconButton() {
        const self = this,
            o = this.options;
        
        return {
            type: TriggerIconButton.xtype,
            cls: "bi-trigger trigger-icon-button",
            ref (_ref) {
                self.triggerBtn = _ref;
            },
            width: toPix(o.height, 2),
            height: toPix(o.height, 2),
            listeners: [
                {
                    eventName: TriggerIconButton.EVENT_CHANGE,
                    action () {
                        if (self.combo.isViewVisible()) {
                            self.combo.hideView();
                        } else {
                            self.combo.showView();
                        }
                    },
                }
            ],
        };
    }

    getSearcher() {
        return this.trigger ? this.trigger.getSearcher() : this.textTrigger.getTextor();
    }

    setValue(v) {
        v = isArray(v) ? v : [v];
        this.combo.setValue(v);
    }

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

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

    setTipType(v) {
        this.trigger ? this.trigger.setTipType(v) : this.textTrigger.setTipType(v);
    }

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

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

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

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

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