@evg-b/evg-ui/dist/Image/Image.js

EVG-UI library inspired by Material Design.

import _extends from '@babel/runtime/helpers/extends';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React, { useState, useCallback, useEffect } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import withStyles from '../styles/withStyles.js';
import '@babel/runtime/helpers/construct';
import '@babel/runtime/helpers/toConsumableArray';
import '@babel/runtime/helpers/defineProperty';
import '@babel/runtime/helpers/classCallCheck';
import '@babel/runtime/helpers/createClass';
import Loader from '../Loader/Loader.js';
import ImageError from '../internal/icons/ImageError/ImageError.js';

var styles = {
  base: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    width: '100%',
    height: '100%',
    backgroundColor: '#f7f7f7'
  }
};
/**
 * Image - обертка над тегом `<img>`. Показывает статус загрузки или ошибки у изображения.
*/

var Image = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var classes = props.classes,
      className = props.className,
      src = props.src,
      alt = props.alt,
      otherProps = _objectWithoutProperties(props, ["classes", "className", "src", "alt"]);

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      isLoad = _useState2[0],
      setIsLoad = _useState2[1];

  var _useState3 = useState(false),
      _useState4 = _slicedToArray(_useState3, 2),
      isError = _useState4[0],
      setIsError = _useState4[1];

  var loadImg = useCallback(function (urlSrc) {
    setIsLoad(false);
    setIsError(false);
    var image = document.createElement('img');
    image.src = urlSrc;
    setIsLoad(image.complete);

    image.onload = function (e) {
      setIsLoad(true);
      setIsError(function (prev) {
        return prev ? false : prev;
      });
    };

    image.onerror = function (e) {
      setIsError(true);
    };
  }, []);
  useEffect(function () {
    // setIsLoad(false)
    // setIsError(false)
    loadImg(src);
  }, [src, loadImg]);
  var capImg = /*#__PURE__*/React.createElement("div", _extends({
    className: classNames(classes.base, className)
  }, otherProps), isError ? /*#__PURE__*/React.createElement(ImageError, {
    viewBox: 200,
    style: {
      fontSize: 80,
      stroke: '#c7c7c7'
    }
  }) : /*#__PURE__*/React.createElement(Loader, null));
  return /*#__PURE__*/React.createElement(React.Fragment, null, isLoad ? /*#__PURE__*/React.createElement("img", _extends({
    ref: ref,
    className: className,
    src: src,
    alt: alt
  }, otherProps)) : capImg);
});
Image.propTypes = {
  /**
   * Объект содержит jss стили компонента.
  */
  classes: PropTypes.object,

  /**
   * Чтобы указать CSS классы, используйте этот атрибут.
  */
  className: PropTypes.string,

  /**
   * Корневой узел. Это HTML элемент или компонент.
  */
  component: PropTypes.elementType,

  /**
   * Атрибут `src` обязателен и содержит путь к изображению.
  */
  src: PropTypes.string,

  /**
   * Атрибут `alt` содержит текстовое описание изображения. Опционально.
  */
  alt: PropTypes.string
};
Image.defaultProps = {};
Image.displayName = 'ImageEVG';
var Image$1 = withStyles(styles)(Image);

export default Image$1;