tsp-component/lib/view/index.js

提供多端和react版本的UI组件

var __extends = (this && this.__extends) || (function () {
    var 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 function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
import * as React from 'react';
import classNames from 'classnames';
import Hammer from 'react-hammerjs';
import assign from 'object-assign';
var prefix = 'component-View';
var View = (function (_super) {
    __extends(View, _super);
    function View(props, state) {
        var _this = _super.call(this, props, state) || this;
        _this.state = {
            status: _this.props.apiConfig ? undefined : (_this.props.status ? _this.props.status : 'complete'),
            updateId: 0
        };
        _this.loadingOver = false;
        _this.success = _this.success.bind(_this);
        _this.timeoutCallback = _this.timeoutCallback.bind(_this);
        _this.request = _this.request.bind(_this);
        return _this;
    }
    View.prototype.componentDidMount = function () {
        var _this = this;
        if (this.props.apiConfig) {
            if (this.props.delay) {
                this.timeoutInstance = setTimeout(function () {
                    _this.request();
                }, this.props.delay);
            }
            else {
                this.request();
            }
        }
    };
    View.prototype.shouldComponentUpdate = function (nextProps, nextState) {
        var statusChange = (nextProps.status !== this.props.status) || (this.state.status !== nextState.status);
        var propsReloadIdChange = this.props.reloadId === undefined ? true : (nextProps.reloadId !== this.props.reloadId);
        var stateUpdateIdChange = this.state.updateId !== nextState.updateId;
        var propsRefreshIdChange = nextProps.refreshId !== this.props.refreshId;
        return statusChange || propsReloadIdChange || stateUpdateIdChange || propsRefreshIdChange;
    };
    View.prototype.componentWillReceiveProps = function (nextProps) {
        if (nextProps.status !== this.props.status) {
            this.setState({
                status: nextProps.status
            });
        }
        if ((nextProps.reloadId !== this.props.reloadId) && this.props.apiConfig) {
            this.request(nextProps);
        }
        if (nextProps.refreshId !== this.props.refreshId) {
            this.setState({
                updateId: this.state.updateId + 1
            });
        }
    };
    View.prototype.componentWillUnmount = function () {
        clearTimeout(this.timeoutInstance);
    };
    View.prototype.statusRender = function () {
        switch (this.state.status) {
            case 'loading': return this.props.loadingView;
            case 'complete': return this.props.render(this.data);
            case 'fail': return this.timeoutView();
            case 'timeout': return this.timeoutView();
            case 'empty': return this.props.emptyView;
            default: return null;
        }
    };
    View.prototype.timeoutView = function () {
        var _this = this;
        return (React.createElement(Hammer, { onTap: function () { return _this.request(); } }, this.props.timeoutView));
    };
    View.prototype.request = function (props) {
        var _this = this;
        if (props === void 0) { props = this.props; }
        var params = assign({}, props.apiConfig, {
            success: this.success,
            timeoutCallback: this.timeoutCallback,
        });
        this.loadingOver = false;
        this.props.request(params);
        this.timeoutInstance = setTimeout(function () {
            if (!_this.loadingOver) {
                _this.setState({
                    status: 'loading'
                });
            }
        }, 300);
    };
    View.prototype.success = function (data, status) {
        var temp;
        if (status) {
            this.data = data[this.props.dataKey];
            if (this.data) {
                if (this.data.length === undefined || this.data.length) {
                    temp = 'complete';
                }
                else {
                    temp = 'empty';
                }
            }
            else {
                temp = 'empty';
            }
        }
        else {
            temp = 'fail';
        }
        this.loadingOver = true;
        this.setState({
            status: temp,
            updateId: this.state.updateId + 1
        });
    };
    View.prototype.timeoutCallback = function () {
        this.data = undefined;
        this.setState({
            status: 'timeout',
            updateId: this.state.updateId + 1
        });
    };
    View.prototype.render = function () {
        return (React.createElement("div", { className: classNames((_a = {},
                _a[prefix] = true,
                _a[this.props.className] = this.props.className,
                _a)) }, this.statusRender()));
        var _a;
    };
    View.defaultProps = {
        delay: 0,
        loadingView: null,
        render: null,
        failView: null,
        timeoutView: null,
        emptyView: null,
        apiConfig: undefined,
        dataKey: 'result'
    };
    return View;
}(React.Component));
export default View;