backpack-ui/dist/components/imageLoader/index.js

Lonely Planet's Components

"use strict";

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

var _extends2 = require("babel-runtime/helpers/extends");

var _extends3 = _interopRequireDefault(_extends2);

var _getPrototypeOf = require("babel-runtime/core-js/object/get-prototype-of");

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require("babel-runtime/helpers/createClass");

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require("babel-runtime/helpers/possibleConstructorReturn");

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require("babel-runtime/helpers/inherits");

var _inherits3 = _interopRequireDefault(_inherits2);

var _class, _temp;

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _validReactAttributes = require("../../utils/validReactAttributes");

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

var Status = {
  PENDING: "pending",
  LOADING: "loading",
  LOADED: "loaded",
  FAILED: "failed"
};

var ImageLoader = (_temp = _class = function (_React$Component) {
  (0, _inherits3.default)(ImageLoader, _React$Component);

  function ImageLoader(props) {
    (0, _classCallCheck3.default)(this, ImageLoader);

    var _this = (0, _possibleConstructorReturn3.default)(this, (ImageLoader.__proto__ || (0, _getPrototypeOf2.default)(ImageLoader)).call(this, props));

    _this.state = { status: props.src ? Status.LOADING : Status.PENDING };
    return _this;
  }

  (0, _createClass3.default)(ImageLoader, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      if (this.state.status === Status.LOADING) {
        this.createLoader();
      }
    }
  }, {
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      if (this.props.src !== nextProps.src) {
        this.setState({
          status: nextProps.src ? Status.LOADING : Status.PENDING
        });
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      if (this.state.status === Status.LOADING && !this.img) {
        this.createLoader();
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.destroyLoader();
    }
  }, {
    key: "getClassName",
    value: function getClassName() {
      var className = "imageloader " + this.state.status;
      if (this.props.className) className = className + " " + this.props.className;
      return className;
    }
  }, {
    key: "createLoader",
    value: function createLoader() {
      this.destroyLoader(); // We can only have one loader at a time.

      this.img = new Image();
      this.img.onload = this.handleLoad.bind(this);
      this.img.onerror = this.handleError.bind(this);
      this.img.src = this.props.src;
    }
  }, {
    key: "destroyLoader",
    value: function destroyLoader() {
      if (this.img) {
        this.img.onload = null;
        this.img.onerror = null;
        this.img = null;
      }
    }
  }, {
    key: "handleLoad",
    value: function handleLoad(event) {
      this.destroyLoader();
      this.setState({ status: Status.LOADED });

      if (this.props.onLoad) this.props.onLoad(event);
    }
  }, {
    key: "handleError",
    value: function handleError(error) {
      this.destroyLoader();
      this.setState({ status: Status.FAILED });

      if (this.props.onError) this.props.onError(error);
    }
  }, {
    key: "renderImg",
    value: function renderImg() {
      var _props = this.props,
          src = _props.src,
          imgProps = _props.imgProps;

      var props = { src: src };

      for (var k in imgProps) {
        // eslint-disable-line
        if (imgProps.hasOwnProperty(k)) {
          // eslint-disable-line
          props[k] = imgProps[k];
        }
      }

      var sanitizedProps = (0, _validReactAttributes.validReactAttributes)(props);

      return _react2.default.createElement("img", (0, _extends3.default)({ alt: "Loader" }, sanitizedProps));
    }
  }, {
    key: "render",
    value: function render() {
      var _props2;

      var wrapperProps = {
        className: this.getClassName()
      };

      if (this.props.style) {
        wrapperProps.style = this.props.style;
      }

      var wrapperArgs = [wrapperProps];

      switch (this.state.status) {
        case Status.LOADED:
          wrapperArgs.push(this.renderImg());
          break;

        case Status.FAILED:
          if (this.props.children) wrapperArgs.push(this.props.children);
          break;

        default:
          if (this.props.preloader) wrapperArgs.push(this.props.preloader());
          break;
      }

      return (_props2 = this.props).wrapper.apply(_props2, wrapperArgs);
    }
  }]);
  return ImageLoader;
}(_react2.default.Component), _class.propTypes = {
  wrapper: _propTypes2.default.func,
  className: _propTypes2.default.string,
  style: _propTypes2.default.shape({}),
  preloader: _propTypes2.default.func,
  src: _propTypes2.default.string,
  onLoad: _propTypes2.default.func,
  onError: _propTypes2.default.func,
  children: _propTypes2.default.node,
  imgProps: _propTypes2.default.shape({})
}, _class.defaultProps = {
  wrapper: _react2.default.createFactory("span")
}, _temp);
exports.default = ImageLoader;