@lyra/components/lib/utilities/ImageLoader.js

Basic UX components

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = undefined;

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _loadImage = require('./loadImage');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

class ImageLoader extends _react2.default.PureComponent {
  constructor(...args) {
    var _temp;

    return _temp = super(...args), this.state = {
      loadedImage: null,
      error: null
    }, _temp;
  }

  componentWillMount() {
    this.loadImage(this.props.src);
  }

  componentWillUnmount() {
    this.unsubscribe();
  }

  unsubscribe() {
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }

  loadImage(src) {
    this.unsubscribe();
    this.subscription = (0, _loadImage.loadImage)(src).subscribe({
      next: url => this.setState({ loadedImage: url, error: null }),
      error: _error => this.setState({ loadImage: null, error: _error })
    });
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.src !== this.props.src) {
      this.loadImage(nextProps.src);
    }
  }

  render() {
    const children = this.props.children;
    var _state = this.state;
    const error = _state.error,
          loadedImage = _state.loadedImage;

    return error || loadedImage ? children({ image: loadedImage, error }) : null;
  }
}
exports.default = ImageLoader;
ImageLoader.propTypes = {
  src: _propTypes2.default.string.isRequired,
  children: _propTypes2.default.func
};