tsp-component/lib/img-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 Hammer from 'react-hammerjs';
import classNames from 'classnames';
import { getUrlParams } from '../util/router';
import Exception from '../exception';
var prefix = 'tsp-component-ImgView';
var ImgView = (function (_super) {
    __extends(ImgView, _super);
    function ImgView(props, state) {
        var _this = _super.call(this, props, state) || this;
        _this.status = 'loading';
        _this.onLoad = _this.onLoad.bind(_this);
        _this.onError = _this.onError.bind(_this);
        _this.onTap = _this.onTap.bind(_this);
        return _this;
    }
    ImgView.prototype.componentWillUnmount = function () {
        if (this.img) {
            this.img.src = '';
            this.img = null;
            this.isDestory = true;
        }
        clearTimeout(this.timeoutInstance);
    };
    ImgView.prototype.componentDidMount = function () {
        var src = this.props.src ? this.props.src : this.props.default;
        this.elem = this.refs.elem;
        this.imgInitial(src);
    };
    ImgView.prototype.componentWillReceiveProps = function (nextProps) {
        if (this.props.src !== nextProps.src && !this.props.default) {
            this.setImgSrc(nextProps.src);
        }
        else if (!this.props.src && this.props.default) {
            this.setImgSrc(nextProps.default);
        }
    };
    ImgView.prototype.onLoad = function () {
        this.setStatus('complete');
    };
    ImgView.prototype.onError = function () {
        if (!this.isDestory) {
            this.setStatus('fail');
        }
    };
    ImgView.prototype.onTap = function () {
        if (this.status === 'timeout') {
            var time = new Date().getTime();
            var src = this.props.src;
            if (getUrlParams(this.props.src).search) {
                src += "&componentLoadTimestamp=" + time;
            }
            else {
                src += "?componentLoadTimestamp=" + time;
            }
            this.imgInitial(src);
            this.status = 'loading';
        }
        else if (this.props.onClick) {
            this.props.onClick();
        }
    };
    ImgView.prototype.imgInitial = function (src) {
        this.img = new Image();
        this.img.onload = this.onLoad;
        this.img.onerror = this.onError;
        this.setImgSrc(src);
    };
    ImgView.prototype.setStatus = function (status) {
        var exceptionParams = {
            errorType: undefined,
            url: this.props.src,
            content: "id: " + (this.props.id ? this.props.id : '') + ";",
            details: JSON.stringify(this.props.describe)
        };
        this.status = status;
        switch (status) {
            case 'loading':
                this.elem.style.backgroundImage = "url(" + this.props.loading + ")";
                this.elem.classList.remove(prefix + "-timeout");
                this.elem.classList.add(prefix + "-loading");
                break;
            case 'complete':
                this.elem.style.backgroundImage = "url(" + (this.props.src ? this.props.src : this.props.default) + ")";
                this.elem.classList.remove(prefix + "-loading");
                this.elem.classList.add(prefix + "-complete");
                this.elem.dataset.trackurl = this.props.src;
                break;
            case 'timeout':
                this.elem.style.backgroundImage = "url(" + this.props.timeout + ")";
                this.elem.classList.remove(prefix + "-loading");
                this.elem.classList.add(prefix + "-timeout");
                exceptionParams.errorType = 5;
                Exception.send(exceptionParams);
                break;
            case 'fail':
                this.elem.style.backgroundImage = "url(" + this.props.fail + ")";
                this.elem.classList.remove(prefix + "-loading");
                this.elem.classList.add(prefix + "-fail");
                exceptionParams.errorType = 4;
                Exception.send(exceptionParams);
                break;
            default: break;
        }
        if (this.props.onStatusChange) {
            this.props.onStatusChange(status);
        }
    };
    ImgView.prototype.setImgSrc = function (src) {
        var _this = this;
        if (src) {
            clearTimeout(this.timeoutInstance);
            this.img.src = src;
            this.timeoutInstance = setTimeout(function () {
                if (_this.status === 'loading') {
                    _this.setStatus('loading');
                    if (_this.props.timeout) {
                        _this.timeoutInstance = setTimeout(function () {
                            if (_this.status === 'loading') {
                                _this.img.onerror = null;
                                _this.img.src = '';
                                _this.img = null;
                                _this.setStatus('timeout');
                            }
                        }, 15000);
                    }
                }
            }, 100);
        }
        else {
            this.setStatus('loading');
        }
    };
    ImgView.prototype.render = function () {
        var classname = classNames((_a = {},
            _a[prefix] = true,
            _a[this.props.className] = this.props.className,
            _a));
        return (React.createElement(Hammer, { onTap: this.onTap },
            React.createElement("div", { className: classname, id: this.props.id ? this.props.id : '', ref: "elem" })));
        var _a;
    };
    ImgView.defaultProps = {
        src: '',
        loading: '',
        fail: '',
        timeout: ''
    };
    return ImgView;
}(React.Component));
export default ImgView;