fineui/packages/fineui/src/base/1.pane.js

import {
    AbsoluteCenterLayout,
    CenterAdaptLayout,
    HorizontalAdaptLayout,
    VerticalLayout,
    Widget,
    shortcut,
    isNotEmptyString,
    extend,
    isNull,
    isEmpty,
    createWidget,
    Providers,
    i18nText,
    emptyFn,
    SystemProvider
} from "@/core";
import { Label, Text } from "./single";
import { Layers } from "@/base/0.base";

/**
 * 当没有元素时有提示信息的view
 *
 * Created by GUY on 2015/9/8.
 * @class Pane
 * @extends Widget
 * @abstract
 */

@shortcut()
export class Pane extends Widget {
    static xtype = "bi.pane";
    static EVENT_LOADED = "EVENT_LOADED";
    static EVENT_LOADING = "EVENT_LOADING";

    _defaultConfig() {
        return extend(super._defaultConfig(), {
            _baseCls: "bi-pane",
            tipText: i18nText("BI-No_Selected_Item"),
            loadingText: "",
            loadingSize: "small",
            overlap: true,
            onLoaded: emptyFn,
        });
    }

    _assertTip() {
        if (!this._tipText) {
            createWidget({
                type: AbsoluteCenterLayout.xtype,
                element: this,
                items: [
                    {
                        type: Label.xtype,
                        ref: _ref => {
                            this._tipText = _ref;
                        },
                        cls: "bi-tips",
                        text: this.options.tipText,
                        height: 25,
                    }
                ],
            });
        }
    }

    loading() {
        const o = this.options;
        const loadingAnimation = createWidget(
            Providers.getProvider(SystemProvider.xtype).getLoading({
                loadingSize: o.loadingSize,
                context: this,
            })
        );
        // pane在同步方式下由items决定tipText的显示与否
        // loading的异步情况下由loaded后对面板的populate的时机决定
        this.setTipVisible(false);
        if (o.overlap === true) {
            if (!Layers.has(`${this.getName()}-loading`)) {
                createWidget({
                    type: CenterAdaptLayout.xtype,
                    cls: "loading-container",
                    items: this._getLoadingTipItems(loadingAnimation),
                    element: Layers.make(`${this.getName()}-loading`, this),
                });
            }
            Layers.show(`${this.getName()}-loading`);
        } else if (isNull(this._loading)) {
            loadingAnimation.element.css("zIndex", 1);
            createWidget({
                type: CenterAdaptLayout.xtype,
                element: this,
                cls: "loading-container",
                items: this._getLoadingTipItems(loadingAnimation),
            });
        }
        this.fireEvent(Pane.EVENT_LOADING);
        this.element.addClass("loading-status");
    }

    _getSize(v) {
        return Math.ceil(v / (this.options.loadingSize === "small" ? 2 : 1));
    }

    _getLoadingTipItems(loadingTip) {
        const o = this.options;
        const loadingTipItems = [
            {
                type: HorizontalAdaptLayout.xtype,
                items: [loadingTip],
            }
        ];
        isNotEmptyString(o.loadingText) &&
        loadingTipItems.push({
            type: Text.xtype,
            text: o.loadingText,
            tgap: this._getSize(10),
        });

        return [
            {
                type: VerticalLayout.xtype,
                ref: _ref => {
                    this._loading = _ref;
                },
                items: loadingTipItems,
            }
        ];
    }

    loaded() {
        Layers.remove(`${this.getName()}-loading`);
        this._loading && this._loading.destroy();
        this.options.onLoaded();
        this.fireEvent(Pane.EVENT_LOADED);
        this.element.removeClass("loading-status");
    }

    check() {
        this.setTipVisible(isEmpty(this.options.items));
    }

    setTipVisible(b) {
        if (b === true) {
            this._assertTip();
            this._tipText && this._tipText.setVisible(true);
        } else {
            this._tipText && this._tipText.setVisible(false);
        }
    }

    setTipText(text) {
        this._assertTip();
        this._tipText.setText(text);
    }

    populate(items) {
        this.options.items = items || [];
        this.check();
    }

    destroyed() {
        super.destroyed?.();
        Layers.remove(`${this.getName()}-loading`);
        this._loading?.destroy();
    }
}