ukelli-ui/core/loading/loading.js

Base on React's UI lib. Make frontend's dev simpler and faster.

var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
import React, { Component } from 'react';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import { IsFunc } from 'basic-helper';
// import LoadingDOMSnip from './snip';
import LoadingProgress from './progress';
import LoadingDOMPlaceholder from './placeholder';
var childrenFuncFilter = function (children) { return (IsFunc(children) ? children() : children); };
var Loading = /** @class */ (function (_super) {
    __extends(Loading, _super);
    function Loading() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    Loading.prototype.transitionWrap = function (key, children) {
        var timeout = this.props.timeout;
        return (React.createElement(CSSTransition, { classNames: "loading", timeout: timeout, key: key },
            React.createElement("div", null, children)));
    };
    Loading.prototype.render = function () {
        var _a = this.props, loading = _a.loading, children = _a.children, inrow = _a.inrow, loadingDOM = _a.loadingDOM;
        var loadingDOMFilterRes;
        switch (true) {
            case !!loadingDOM: // custom mode
                loadingDOMFilterRes = loadingDOM;
                break;
            case inrow: // progress
                loadingDOMFilterRes = React.createElement(LoadingProgress, null);
                break;
            default: // placeholder
                loadingDOMFilterRes = React.createElement(LoadingDOMPlaceholder, null);
        }
        var container;
        switch (true) {
            // solution 1, render chidlren with progress
            case loading && inrow:
                container = [
                    this.transitionWrap('loading', React.createElement("div", { className: "loading-container" }, loadingDOMFilterRes)),
                    this.transitionWrap('loaded', childrenFuncFilter(children))
                ];
                break;
            // solution 2, when inrow and no children or not inrow, just render placeholder
            case loading && !inrow:
                container = this.transitionWrap('loading', React.createElement("div", { className: "loading-container" }, loadingDOMFilterRes));
                break;
            // solution 3, just render children
            case !loading:
                container = this.transitionWrap('loaded', childrenFuncFilter(children));
                break;
            default:
        }
        return (React.createElement("div", { className: "loading-control " + (loading ? 'loading' : 'planning') },
            React.createElement(TransitionGroup, { component: null }, container)));
    };
    Loading.defaultProps = {
        inrow: false,
        timeout: 200,
        animationClass: 'loading',
    };
    return Loading;
}(Component));
export default Loading;