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

EVG-UI library inspired by Material Design.

import _extends from '@babel/runtime/helpers/extends';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import withStyles from '../styles/withStyles.js';
import Color from '../styles/Color/Color.js';
import Person from '../internal/icons/Avatar/Person.js';

var styles = {
  base: {
    position: 'relative',
    display: 'inline-block',
    borderRadius: '50%'
  },
  avatar: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    width: function width(props) {
      return props.size;
    },
    height: function height(props) {
      return props.size;
    },
    borderRadius: '50%',
    overflow: 'hidden',
    fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
    lineHeight: 'normal',
    backgroundColor: function backgroundColor(props) {
      return Color(props.color === 'default' ? '#8a8a8a' : props.color).Base();
    },
    color: function color(props) {
      return Color(props.color === 'default' ? '#8a8a8a' : props.color).Contrast();
    },
    '& img': {
      width: '100%',
      height: '100%',
      objectFit: 'cover',
      opacity: 0,
      transition: 'opacity 100ms ease-out'
    }
  },
  avatars: {
    width: function width(props) {
      return props.size;
    },
    height: function height(props) {
      return props.size;
    },
    borderRadius: '50%',
    overflow: 'hidden',
    display: 'flex',
    flexDirection: 'column',
    flexWrap: 'wrap',
    '&>*': {
      borderRadius: 0,
      flexGrow: 1,
      width: function width(props) {
        return props.size / 2;
      },
      height: function height(props) {
        return props.srcs.length === 2 ? props.size : props.size / 2;
      }
    }
  },
  loaded: {
    '& img': {
      opacity: 1
    }
  },
  spare: {
    textTransform: 'uppercase',
    position: 'absolute',
    fontSize: function fontSize(props) {
      return props.size / 2;
    },
    '&>svg': {
      fontSize: function fontSize(props) {
        return props.size * 0.7;
      }
    }
  },
  status: {
    '&:after': {
      content: '""',
      pointerEvents: 'none',
      position: 'absolute',
      width: '8px',
      height: '8px',
      border: '2px solid #fff',
      borderRadius: '50%',
      right: '2%',
      bottom: '2%',
      backgroundColor: function backgroundColor(props) {
        return Color(props.statusColor).Base();
      }
    }
  }
};
/**
 * Этот компонент обычно используют для отображения изображения профиля пользователей. 
 * Так же отображает первую букву в имени контакта если изображение еще не загрузилось.
*/

var Avatar = /*#__PURE__*/React.forwardRef(function Avatar(props, ref) {
  var classes = props.classes,
      className = props.className;
      props.children;
      var src = props.src,
      srcs = props.srcs,
      alt = props.alt,
      altMax = props.altMax;
      props.size;
      var status = props.status;
      props.color;
      props.statusColor;
      var otherProps = _objectWithoutProperties(props, ["classes", "className", "children", "src", "srcs", "alt", "altMax", "size", "status", "color", "statusColor"]);

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

  var handOnLoad = function handOnLoad() {
    return setIsLoaded(true);
  };

  var SpareImg = function SpareImg() {
    return /*#__PURE__*/React.createElement("span", {
      className: classes.spare
    }, alt === "" ? /*#__PURE__*/React.createElement(Person, null) : alt.slice(0, altMax));
  };

  var AvatarImg = function AvatarImg(srcUrl) {
    var key = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
    var classe = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : classes;
    // бесмысленное решение передавать classes, дабы линтер не ругался
    return /*#__PURE__*/React.createElement("div", {
      key: key,
      className: classNames(classe.avatar, _defineProperty({}, classe.loaded, isLoaded))
    }, /*#__PURE__*/React.createElement("img", {
      src: srcUrl,
      alt: alt,
      onLoad: handOnLoad
    }), !isLoaded && SpareImg());
  };

  var AvatarImgs = srcs.length === 1 ? AvatarImg(srcs[0]) : /*#__PURE__*/React.createElement("div", {
    className: classes.avatars
  }, srcs.map(function (srcUrl, index) {
    return AvatarImg(srcUrl, index);
  }));
  return /*#__PURE__*/React.createElement("div", _extends({
    ref: ref,
    className: classNames(classes.base, _defineProperty({}, classes.status, status), className)
  }, otherProps), srcs.length > 0 ? AvatarImgs : AvatarImg(src));
});
Avatar.propTypes = {
  /**
   * Это контент между открывающим и закрывающим тегом компонента.
  */
  children: PropTypes.node,

  /**
   * Объект содержит jss стили компонента.
  */
  classes: PropTypes.object,

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

  /**
   * Название цвета в разных форматах.
  */
  color: PropTypes.string,

  /**
   * url изображения.
  */
  src: PropTypes.string,

  /**
   * Массив url изображений.
  */
  srcs: PropTypes.arrayOf(PropTypes.string),

  /**
   * Альтернативный текст для изображений.
  */
  alt: PropTypes.string,

  /**
   * Количество первых букв alt для отображения если src пуст.
  */
  altMax: PropTypes.number,

  /**
   * Размер компонента.
  */
  size: PropTypes.number,

  /**
   * Отображать статус или нет.
  */
  status: PropTypes.bool,

  /**
   * Цвет статуса.
  */
  statusColor: PropTypes.string
};
Avatar.defaultProps = {
  alt: '',
  color: 'default',
  size: 40,
  status: false,
  statusColor: 'success',
  altMax: 1,
  src: '',
  srcs: []
};
Avatar.displayName = 'AvatarEVG';
var Avatar$1 = withStyles(styles)(Avatar);

export default Avatar$1;