fineui/packages/fineui/src/base/combination/switcher.js

import {
    VerticalLayout,
    shortcut,
    Widget,
    Controller,
    extend,
    nextTick,
    createWidget,
    each,
    debounce,
    isNull,
    Events,
    Direction,
    EVENT_RESPONSE_TIME, isFunction
} from "@/core";
import { ButtonGroup } from "./group.button";
import { Maskers } from "@/base/0.base";

/**
 *
 * 切换显示或隐藏面板
 *
 * Created by GUY on 2015/11/2.
 * @class Switcher
 * @extends Widget
 */

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

    static EVENT_EXPAND = "EVENT_EXPAND";
    static EVENT_COLLAPSE = "EVENT_COLLAPSE";
    static EVENT_TRIGGER_CHANGE = "EVENT_TRIGGER_CHANGE";
    static EVENT_CHANGE = "EVENT_CHANGE";
    static EVENT_AFTER_INIT = "EVENT_AFTER_INIT";

    static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
    static EVENT_AFTER_POPUPVIEW = "EVENT_AFTER_POPUPVIEW";
    static EVENT_BEFORE_HIDEVIEW = "EVENT_BEFORE_HIDEVIEW";
    static EVENT_AFTER_HIDEVIEW = "EVENT_AFTER_HIDEVIEW";

    _defaultConfig() {
        return extend(super._defaultConfig(...arguments), {
            baseCls: "bi-switcher",
            direction: Direction.Top,
            trigger: "click",
            toggle: true,
            el: {},
            popup: {},
            adapter: null,
            masker: {},
            switcherClass: "bi-switcher-popup",
            hoverClass: "bi-switcher-hover",
        });
    }

    render() {
        const { hoverClass, isDefaultInit } = this.options;
        this._initSwitcher();
        // 延迟绑定事件，这样可以将自己绑定的事情优先执行
        nextTick(() => {
            !this.isDestroyed() && this._initPullDownAction();
        });
        this.switcher.on(Controller.EVENT_CHANGE, (type, value, obj, ...args) => {
            if (this.isEnabled() && this.isValid()) {
                if (type === Events.EXPAND) {
                    this._popupView();
                }
                if (type === Events.COLLAPSE) {
                    this._hideView();
                }
                if (type === Events.EXPAND) {
                    this.fireEvent(Controller.EVENT_CHANGE, type, value, obj, ...args);
                    this.fireEvent(Switcher.EVENT_EXPAND);
                }
                if (type === Events.COLLAPSE) {
                    this.fireEvent(Controller.EVENT_CHANGE, type, value, obj, ...args);
                    this.isViewVisible() && this.fireEvent(Switcher.EVENT_COLLAPSE);
                }
                if (type === Events.CLICK) {
                    this.fireEvent(Switcher.EVENT_TRIGGER_CHANGE, value, obj);
                }
            }
        });

        this.element.hover(
            () => {
                if (this.isEnabled() && this.switcher.isEnabled()) {
                    this.element.addClass(hoverClass);
                }
            },
            () => {
                if (this.isEnabled() && this.switcher.isEnabled()) {
                    this.element.removeClass(hoverClass);
                }
            }
        );
        createWidget({
            type: VerticalLayout.xtype,
            scrolly: false,
            element: this,
            items: [{ el: this.switcher }],
        });
        isDefaultInit && this._assertPopupView();
    }

    _toggle() {
        this._assertPopupView();
        if (this.isExpanded()) {
            this._hideView();
        } else {
            if (this.isEnabled()) {
                this._popupView();
            }
        }
    }

    _initPullDownAction() {
        const { toggle } = this.options;
        const evs = this.options.trigger.split(",");
        each(evs, (i, e) => {
            switch (e) {
                case "hover":
                    this.element[e](
                        e => {
                            if (this.isEnabled() && this.switcher.isEnabled()) {
                                this._popupView();
                                this.fireEvent(Controller.EVENT_CHANGE, Events.EXPAND, "", this.switcher);
                                this.fireEvent(Switcher.EVENT_EXPAND);
                            }
                        },
                        () => {
                            if (this.isEnabled() && this.switcher.isEnabled() && toggle) {
                                this._hideView();
                                this.fireEvent(Controller.EVENT_CHANGE, Events.COLLAPSE, "", this.switcher);
                                this.fireEvent(Switcher.EVENT_COLLAPSE);
                            }
                        }
                    );
                    break;
                default:
                    if (e) {
                        this.element.off(`${e}.${this.getName()}`).on(
                            `${e}.${this.getName()}`,
                            debounce(
                                e => {
                                    if (this.switcher.element.__isMouseInBounds__(e)) {
                                        if (this.isEnabled() && this.switcher.isEnabled()) {
                                            toggle ? this._toggle() : this._popupView();
                                            if (this.isExpanded()) {
                                                this.fireEvent(
                                                    Controller.EVENT_CHANGE,
                                                    Events.EXPAND,
                                                    "",
                                                    this.switcher
                                                );
                                                this.fireEvent(Switcher.EVENT_EXPAND);
                                            } else {
                                                this.fireEvent(
                                                    Controller.EVENT_CHANGE,
                                                    Events.COLLAPSE,
                                                    "",
                                                    this.switcher
                                                );
                                                this.fireEvent(Switcher.EVENT_COLLAPSE);
                                            }
                                        }
                                    }
                                },
                                EVENT_RESPONSE_TIME,
                                {
                                    leading: true,
                                    trailing: false,
                                }
                            )
                        );
                    }
                    break;
            }
        });
    }

    _initSwitcher() {
        this.switcher = createWidget(this.options.el, {
            value: this.options.value,
        });
    }

    _assertPopupView() {
        const { popup, masker, value, direction } = this.options;
        const adapter = isFunction(this.options.adapter) ? this.options.adapter() : this.options.adapter;
        if (!this._created) {
            this.popupView = createWidget(
                popup,
                {
                    type: ButtonGroup.xtype,
                    element: adapter && Maskers.create(this.getName(), adapter, extend({ container: this }, masker)),
                    cls: "switcher-popup",
                    layouts: [
                        {
                            type: VerticalLayout.xtype,
                            hgap: 0,
                            vgap: 0,
                        }
                    ],
                    value,
                },
                this
            );
            this.popupView.on(Controller.EVENT_CHANGE, (type, value, obj, ...args) => {
                this.fireEvent(Controller.EVENT_CHANGE, type, value, obj, ...args);
                if (type === Events.CLICK) {
                    this.fireEvent(Switcher.EVENT_CHANGE, value, obj);
                }
            });
            if (direction !== Direction.Custom && !adapter) {
                createWidget({
                    type: VerticalLayout.xtype,
                    scrolly: false,
                    element: this,
                    items: [{ el: this.popupView }],
                });
            }
            this._created = true;
            nextTick(() => {
                this.fireEvent(Switcher.EVENT_AFTER_INIT);
            });
        }
    }

    _hideView() {
        this.fireEvent(Switcher.EVENT_BEFORE_HIDEVIEW);
        const { adapter, switcherClass } = this.options;
        adapter ? Maskers.hide(this.getName()) : this.popupView && this.popupView.setVisible(false);
        nextTick(() => {
            adapter ? Maskers.hide(this.getName()) : this.popupView && this.popupView.setVisible(false);
            this.element.removeClass(switcherClass);
            this.fireEvent(Switcher.EVENT_AFTER_HIDEVIEW);
        });
    }

    _popupView() {
        const { adapter, switcherClass } = this.options;
        this._assertPopupView();
        this.fireEvent(Switcher.EVENT_BEFORE_POPUPVIEW);
        adapter ? Maskers.show(this.getName()) : this.popupView.setVisible(true);
        nextTick(name => {
            adapter ? Maskers.show(name) : this.popupView.setVisible(true);
            this.element.addClass(switcherClass);
            this.fireEvent(Switcher.EVENT_AFTER_POPUPVIEW);
        }, this.getName());
    }

    _populate() {
        this._assertPopupView();
        this.popupView.populate(...arguments);
    }

    populate(items) {
        this._populate(...arguments);
        this.switcher.populate && this.switcher.populate(...arguments);
    }

    _setEnable(arg) {
        super._setEnable(...arguments);
        !arg && this.isViewVisible() && this._hideView();
    }

    setValue(v) {
        this.switcher.setValue(v);
        if (isNull(this.popupView)) {
            this.options.popup.value = v;
        } else {
            this.popupView.setValue(v);
        }
    }

    getValue() {
        if (isNull(this.popupView)) {
            return this.options.popup.value;
        } else {
            return this.popupView.getValue();
        }
    }

    setAdapter(adapter) {
        this.options.adapter = adapter;
        Maskers.remove(this.getName());
    }

    isViewVisible() {
        return (
            this.isEnabled() &&
            this.switcher.isEnabled() &&
            (this.options.adapter ? Maskers.isVisible(this.getName()) : this.popupView && this.popupView.isVisible())
        );
    }

    isExpanded() {
        return this.isViewVisible();
    }

    showView() {
        if (this.isEnabled() && this.switcher.isEnabled()) {
            this._popupView();
        }
    }

    hideView() {
        this._hideView();
    }

    getView() {
        return this.popupView;
    }

    adjustView() {
        this.isViewVisible() && Maskers.show(this.getName());
    }

    getAllLeaves() {
        return this.popupView && this.popupView.getAllLeaves();
    }

    getNodeById(id) {
        if (this.switcher.attr("id") === id) {
            return this.switcher;
        }

        return this.popupView && this.popupView.getNodeById(id);
    }

    getNodeByValue(value) {
        if (this.switcher.getValue() === value) {
            return this.switcher;
        }

        return this.popupView && this.popupView.getNodeByValue(value);
    }

    empty() {
        this.popupView && this.popupView.empty();
    }
}