react-lite-misc/lib/module/image-loading.js

Misc Components of jianliao.com

(function() {
  var React, T, div, i, img, span;

  React = require('react');

  div = React.createFactory('div');

  i = React.createFactory('i');

  img = React.createFactory('img');

  span = React.createFactory('span');

  T = React.PropTypes;

  module.exports = React.createClass({
    displayName: 'image-loading',
    propTypes: {
      onClick: T.func,
      onLoaded: T.func,
      src: T.string.isRequired
    },
    getInitialState: function() {
      var isDataUri;
      isDataUri = this.props.src.substring(0, 4) === 'data';
      return {
        loaded: isDataUri,
        loading: !isDataUri
      };
    },
    componentDidMount: function() {
      return this.load();
    },
    componentWillReceiveProps: function(props) {
      if (this.props.src !== props.src) {
        return this.load();
      }
    },
    componentWillUnmount: function() {
      return this.destroy();
    },
    load: function() {
      this.imgEl = document.createElement('img');
      this.imgEl.onload = this.onLoad;
      this.imgEl.onerror = this.onError;
      this.imgEl.src = this.props.src;
      return this.setState({
        loaded: this.imgEl.complete,
        loading: !this.imgEl.complete
      });
    },
    destroy: function() {
      if (this.imgEl) {
        this.imgEl.onload = null;
        this.imgEl.onerror = null;
        return this.imgEl = null;
      }
    },
    onLoad: function() {
      this.setState({
        loading: false,
        loaded: true
      });
      return this.onLoaded();
    },
    onError: function() {
      return this.setState({
        loading: false,
        loaded: false
      });
    },
    onClick: function() {
      var base;
      return typeof (base = this.props).onClick === "function" ? base.onClick() : void 0;
    },
    onLoaded: function() {
      var base;
      return typeof (base = this.props).onLoaded === "function" ? base.onLoaded() : void 0;
    },
    onReloadImage: function(event) {
      this.setState({
        loading: true
      });
      return this.load();
    },
    renderImage: function() {
      if (this.state.loaded) {
        return img({
          src: this.props.src,
          onClick: this.onClick
        });
      } else {
        return div({
          className: 'image-error'
        });
      }
    },
    renderButton: function() {
      if (!this.state.loaded && !this.state.loading) {
        return i({
          className: 'image-reload ti ti-refresh',
          onClick: this.onReloadImage
        });
      }
    },
    renderLoading: function() {
      if (!this.state.loaded && this.state.loading) {
        return div({
          className: 'image-loader-box'
        }, i({
          className: 'ti ti-refresh image-loader'
        }));
      }
    },
    render: function() {
      return div({
        className: 'image-loading'
      }, this.renderImage(), this.renderButton(), this.renderLoading());
    }
  });

}).call(this);