fineui/src/base/combination/navigation.js

/**
 * Created by GUY on 2015/6/26.
 */
import { shortcut, Widget, Controller, extend, createWidget, bind, ShowListener, isFunction, each, nextTick, isKey, values } from "../../core";

@shortcut()
export default class Navigation extends Widget {
    static xtype = "bi.navigation";
    
    static EVENT_CHANGE = "EVENT_CHANGE";

    _defaultConfig() {
        return extend(super._defaultConfig(arguments), {
            direction: "bottom", // top, bottom, left, right, custom
            logic: {
                dynamic: false,
            },
            single: false,
            showIndex: false,
            tab: false,
            cardCreator: (v) => {
                return createWidget();
            },

            afterCardCreated: BI.emptyFn,
            afterCardShow: BI.emptyFn,
        });
    }

    render() {
        const { direction, logic, cardCreator, showIndex } = this.options;
        this.tab = createWidget(this.options.tab, { type: "bi.button_group" });
        this.cardMap = {};
        this.showIndex = 0;
        this.layout = createWidget({
            type: "bi.card",
        });
        createWidget(extend({
            element: this,
        }, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(direction), extend({}, logic, {
            items: BI.LogicFactory.createLogicItemsByDirection(direction, this.tab, this.layout),
        }))));


        new ShowListener({
            eventObj: this.tab,
            cardLayout: this.layout,
            cardNameCreator: (v) => {
                return this.showIndex + v;
            },
            cardCreator: (v) => {
                Widget.execWithContext(this, () => {
                    this.cardMap[v] = cardCreator(v);
                });
                return this.cardMap[v];
            },
            afterCardCreated: bind(this.afterCardCreated, this),
            afterCardShow: bind(this.afterCardShow, this),
        });

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

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

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

    afterCardCreated(v) {
        this.cardMap[v].on(Controller.EVENT_CHANGE, (type, value, obj, ...args) => {
            this.fireEvent(Controller.EVENT_CHANGE, type, value, obj, ...args);
            if (type === BI.Events.CLICK) {
                this.fireEvent(Navigation.EVENT_CHANGE, obj);
            }
        });
        this.options.afterCardCreated.apply(this, arguments);
    }

    afterCardShow(v) {
        this.showIndex = v;
        this._deleteOtherCards(v);
        this.options.afterCardShow.apply(this, arguments);
    }

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

    _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]);
            this.afterCardCreated(v);
        }
    }

    setSelect(v) {
        this._assertCard(v);
        this.layout.showCardByName(v);
        this._deleteOtherCards(v);
        if (this.showIndex !== v) {
            this.showIndex = v;
            nextTick(bind(this.afterCardShow, this, v));
        }
    }

    getSelect() {
        return this.showIndex;
    }

    getSelectedCard() {
        if (isKey(this.showIndex)) {
            return this.cardMap[this.showIndex];
        }
    }

    getAllCard() {
        return values(this.cardMap);
    }

    /**
     * @override
     */
    setValue(v) {
        const card = this.layout.getShowingCard();
        if (card) {
            card.setValue(v);
        }
    }

    /**
     * @override
     */
    getValue() {
        const card = this.layout.getShowingCard();
        if (card) {
            return card.getValue();
        }
    }

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

    destroy() {
        super.destroy(arguments);
    }

}