fineui/packages/fineui/src/core/wrapper/layout/layout.card.js

import { shortcut } from "../../decorator";
import { Layout } from "../layout";
import { extend, each, isNotNull, isFunction, findIndex, isWidget, some, map, isKey } from "../../2.base";
import { _lazyCreateWidget } from "../../5.inject";
import { Events } from "../../constant";
import { Action } from "../../action";

/**
 * 卡片布局，可以做到当前只显示一个组件，其他的都隐藏
 * @class CardLayout
 * @extends Layout
 *
 * @cfg {JSON} options 配置属性
 * @cfg {String} options.defaultShowName 默认展示的子组件名
 */
@shortcut()
export class CardLayout extends Layout {
    static xtype = "bi.card";

    props() {
        return extend(super.props(...arguments), {
            baseCls: "bi-card-layout",
            items: [],
        });
    }

    render() {
        super.render(...arguments);
        const o = this.options;
        const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
            this.populate(newValue);
        }) : o.items;
        this.populate(items);
    }

    stroke(items) {
        const o = this.options;
        this.showIndex = void 0;
        each(items, (i, item) => {
            if (item) {
                let w;
                if (!this.hasWidget(item.cardName)) {
                    w = _lazyCreateWidget(item);
                    w.on(Events.DESTROY, () => {
                        const index = findIndex(o.items, (i, tItem) => tItem.cardName === item.cardName);
                        if (index > -1) {
                            o.items.splice(index, 1);
                        }
                    });
                    this.addWidget(this._getChildName(item.cardName), w);
                } else {
                    w = this.getWidgetByName(this._getChildName(item.cardName));
                }
                w.element.css({
                    position: "relative",
                    top: "0",
                    left: "0",
                    width: "100%",
                    height: "100%",
                });
                w.setVisible(false);
            }
        });
    }

    resize() {
        // console.log("Card布局不需要resize");
    }

    update(opt) {
        return this.forceUpdate(opt);
    }

    empty(...args) {
        super.empty(...args);
        this.options.items = [];
    }

    populate(...args) {
        super.populate(...args);
        this._mount();
        this.options.defaultShowName && this.showCardByName(this.options.defaultShowName);
    }

    isCardExisted(cardName) {
        return some(this.options.items, (i, item) => item.cardName == cardName && item.el);
    }

    getCardByName(cardName) {
        if (!this.isCardExisted(cardName)) {
            throw new Error("cardName not exist", cardName);
        }
        
        return this._children[this._getChildName(cardName)];
    }

    _deleteCardByName(cardName) {
        delete this._children[this._getChildName(cardName)];
        const index = findIndex(this.options.items, (i, item) => item.cardName == cardName);
        if (index > -1) {
            this.options.items.splice(index, 1);
        }
    }

    deleteCardByName(cardName) {
        if (!this.isCardExisted(cardName)) {
            throw new Error("cardName not exist", cardName);
        }

        const child = this._children[this._getChildName(cardName)];
        this._deleteCardByName(cardName);
        child && child._destroy();
    }

    addCardByName(cardName, cardItem) {
        if (this.isCardExisted(cardName)) {
            throw new Error("cardName already exist", cardName);
        }
        const widget = _lazyCreateWidget(cardItem, this);
        widget.element.css({
            position: "relative",
            top: "0",
            left: "0",
            width: "100%",
            height: "100%",
        }).appendTo(this.element);
        widget.invisible();
        this.addWidget(this._getChildName(cardName), widget);
        this.options.items.push({ el: cardItem, cardName });
        
        return widget;
    }

    showCardByName(name, action, callback) {
        // name不存在的时候全部隐藏
        const exist = this.isCardExisted(name);
        if (isNotNull(this.showIndex)) {
            this.lastShowIndex = this.showIndex;
        }
        this.showIndex = name;
        let flag = false;
        each(this.options.items, (i, item) => {
            const el = this._children[this._getChildName(item.cardName)];
            if (el) {
                if (name !== item.cardName) {
                    // 动画效果只有在全部都隐藏的时候才有意义,且只要执行一次动画操作就够了
                    !flag && !exist && (Action && action instanceof Action) ? (action.actionBack(el), flag = true) : el.invisible();
                } else {
                    (Action && action instanceof Action) ? action.actionPerformed(void 0, el, callback) : (el.visible(), callback && callback());
                }
            }
        });
    }

    showLastCard() {
        this.showIndex = this.lastShowIndex;
        each(this.options.items, (i, item) => {
            this._children[this._getChildName(item.cardName)].setVisible(this.showIndex === i);
        });
    }

    setDefaultShowName(name) {
        this.options.defaultShowName = name;
        
        return this;
    }

    getDefaultShowName() {
        return this.options.defaultShowName;
    }

    getAllCardNames() {
        return map(this.options.items, (i, item) => item.cardName);
    }

    getShowingCard() {
        if (!isKey(this.showIndex)) {
            return void 0;
        }
        
        return this.getWidgetByName(this._getChildName(this.showIndex));
    }

    deleteAllCard() {
        each(this.getAllCardNames(), (i, name) => {
            this.deleteCardByName(name);
        });
    }

    hideAllCard() {
        each(this.options.items, (i, item) => {
            this._children[this._getChildName(item.cardName)].invisible();
        });
    }

    isAllCardHide() {
        let flag = true;
        some(this.options.items, (i, item) => {
            if (this._children[this._getChildName(item.cardName)].isVisible()) {
                flag = false;
                
                return false;
            }
        });
        
        return flag;
    }

    removeWidget(nameOrWidget) {
        let removeName;
        if (isWidget(nameOrWidget)) {
            each(this._children, (name, child) => {
                if (child === nameOrWidget) {
                    removeName = name;
                }
            });
        } else {
            removeName = nameOrWidget;
        }
        if (removeName) {
            this._deleteCardByName(removeName);
        }
    }
}