fineui/src/base/combination/tab.js

import { ButtonGroup } from "./group.button";
import {
    CardLayout,
    shortcut,
    Widget,
    Controller,
    ShowListener,
    extend,
    createWidget,
    isObject,
    each,
    isFunction,
    contains,
    any,
    isEqual,
    LogicFactory
} from "@/core";

/**
 * Created by GUY on 2015/6/26.
 */

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

    static EVENT_CHANGE = "EVENT_CHANGE";

    _defaultConfig() {
        return extend(super._defaultConfig(...arguments), {
            baseCls: "bi-tab",
            direction: "top", // top, bottom, left, right, custom
            single: false, // 是不是单页面
            logic: {
                dynamic: false,
            },
            showIndex: false,
            tab: false,
            cardCreator: v => createWidget(),
            keepAlives: [],
        });
    }

    render() {
        const { tab, direction, logic, cardCreator } = this.options;
        if (isObject(tab)) {
            this.tab = createWidget(this.options.tab, { type: ButtonGroup.xtype });
            this.tab.on(Controller.EVENT_CHANGE, (type, value, obj, ...args) => {
                this.fireEvent(Controller.EVENT_CHANGE, type, value, obj, ...args);
            });
        }
        this.cardMap = {};
        this.layout = createWidget({
            type: CardLayout.xtype,
        });

        createWidget(
            extend(
                {
                    element: this,
                },
                LogicFactory.createLogic(
                    LogicFactory.createLogicTypeByDirection(direction),
                    extend({}, logic, {
                        items: LogicFactory.createLogicItemsByDirection(direction, this.tab, this.layout),
                    })
                )
            )
        );

        const listener = new ShowListener({
            eventObj: this.tab,
            cardLayout: this.layout,
            cardCreator: v => {
                Widget.execWithContext(this, () => {
                    this.cardMap[v] = cardCreator(v);
                });

                return this.cardMap[v];
            },
            afterCardShow: v => {
                this._deleteOtherCards(v);
                this.curr = v;
            },
        });
        listener.on(ShowListener.EVENT_CHANGE, value => {
            this.fireEvent(Tab.EVENT_CHANGE, value, this);
        });
    }

    _deleteOtherCards(currCardName) {
        const { single } = this.options;
        if (single === true) {
            each(this.cardMap, (name, card) => {
                if (name !== `${currCardName}` && this._keepAlive(name) !== true) {
                    this.layout.deleteCardByName(name);
                    delete this.cardMap[name];
                }
            });
        }
    }

    _assertCard(v) {
        const { cardCreator } = this.options;
        if (!this.layout.isCardExisted(v)) {
            Widget.execWithContext(this, () => {
                this.cardMap[v] = cardCreator(v);
            });
            this.layout.addCardByName(v, this.cardMap[v]);
        }
    }

    _keepAlive(v) {
        const { keepAlives } = this.options;

        return isFunction(keepAlives) ? keepAlives(v) : contains(keepAlives, v);
    }

    created() {
        const o = this.options;
        let showIndex;

        if (isFunction(o.showIndex)) {
            showIndex = this.__watch(o.showIndex, (context, newValue) => {
                this.setSelect(newValue);
            });
        } else {
            showIndex = o.showIndex;
        }

        if (showIndex !== false) {
            this.setSelect(showIndex);
        }
    }

    setSelect(v, action, callback) {
        this.tab && this.tab.setValue(v);
        this._assertCard(v);
        this.layout.showCardByName(v, action, callback);
        this._deleteOtherCards(v);
        if (this.curr !== v) {
            this.curr = v;
        }
    }

    removeTab(cardname) {
        any(this.cardMap, (name, card) => {
            if (isEqual(name, `${cardname}`)) {
                this.layout.deleteCardByName(name);
                delete this.cardMap[name];

                return true;
            }
        });
    }

    isCardExisted(cardName) {
        return this.layout.isCardExisted(cardName);
    }

    getSelect() {
        return this.curr;
    }

    getSelectedTab() {
        return this.layout.getShowingCard();
    }

    getTab(v) {
        this._assertCard(v);

        return this.layout.getCardByName(v);
    }

    setValue(v) {
        const card = this.layout.getShowingCard();
        if (card) {
            card.setValue(v);
        }
    }

    getValue() {
        const card = this.layout.getShowingCard();
        if (card) {
            return card.getValue();
        }
    }

    populate() {
        const card = this.layout.getShowingCard();
        if (card) {
            return card.populate && card.populate(...arguments);
        }
    }

    empty() {
        this.layout.deleteAllCard();
        this.cardMap = {};
    }

    destroy() {
        this.cardMap = {};
        super.destroy(arguments);
    }
}