/** * Created by GUY on 2015/6/26. */ import { shortcut, Widget, Controller, extend, createWidget, bind, ShowListener, isFunction, each, nextTick, isKey, values } from "../../core"; @shortcut() export 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 => 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 => 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); } }