@makeen.io/material-ui-kit/distr/atoms/Avatar/index.js

Makeen UI components kit. Based on material-ui.

import _extends from "@babel/runtime/helpers/extends";import _typeof from "@babel/runtime/helpers/typeof";import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";function _templateObject3() {var data = _taggedTemplateLiteral(["\n  display: inline-block;\n  width: 100%;\n  height: 100%;\n\n  background: url(", ") no-repeat center;\n  background-size: cover;\n"]);_templateObject3 = function _templateObject3() {return data;};return data;}function _templateObject2() {var data = _taggedTemplateLiteral(["\n      ", "\n    "]);_templateObject2 = function _templateObject2() {return data;};return data;}function _templateObject() {var data = _taggedTemplateLiteral(["\n  border-radius: 4px;\n  font-size: ", "px;\n  display: flex;\n\n  width: ", ";\n  height: ", ";\n\n  background-color: ", ";\n  color: ", ";\n  ", ";\n"]);_templateObject = function _templateObject() {return data;};return data;}import React from "react";
import Avatar from "@material-ui/core/Avatar";
import constants from "../../config/constants";
import _ from "lodash";
import sample from "lodash/sample";
import styled, { css } from "styled-components";
import { getImageUrl, isEmail } from "../../utils";
var palettes = ["success", "warning", "infoLight", "tertiary"];
var AvatarWrapper = styled(Avatar)(_templateObject(),

function (props) {return props.width / 2.25;},


function (_ref) {var width = _ref.width;return _.isNumber(width) ? "".concat(width, "px") : width || "40px";},
function (_ref2) {var height = _ref2.height;return _.isNumber(height) ? "".concat(height, "px") : height || "40px";},

function (_ref3) {var theme = _ref3.theme,palette = _ref3.palette;return theme.palette[palette].main;},
function (_ref4) {var theme = _ref4.theme,palette = _ref4.palette;return theme.palette[palette].contrastText;},
function (props) {
  var avatarStyle = props.avatarstyle || "";
  return css(_templateObject2(),
  avatarStyle);

});

var ImageBlock = styled.i(_templateObject3(),




function (props) {return props.src ? props.src : "";});


export default (function (_ref5) {var _ref5$width = _ref5.width,width = _ref5$width === void 0 ? 40 : _ref5$width,_ref5$height = _ref5.height,height = _ref5$height === void 0 ? 40 : _ref5$height,image = _ref5.image,imageAlt = _ref5.imageAlt,theme = _ref5.theme,palette = _ref5.palette,title = _ref5.title,type = _ref5.type,avatarStyle = _ref5.avatarStyle,variant = _ref5.variant,rest = _objectWithoutProperties(_ref5, ["width", "height", "image", "imageAlt", "theme", "palette", "title", "type", "avatarStyle", "variant"]);
  var avatarText = "";
  if (!image) {
    avatarText = (title[0] || "").toUpperCase();
    if (type === "user") {
      palette = palette || constants.avatarPalette.light.green;
      if (isEmail(title)) {
        avatarText = title.substring(0, 2).toUpperCase();
      } else
      {
        var nameParts = title.split(" ");
        if (nameParts.length > 1) {
          avatarText = "".concat((nameParts[0][0] || "").toUpperCase()).concat((nameParts[nameParts.length - 1][0] || "").toUpperCase());
        } else
        {
          avatarText = "".concat((nameParts[0][0] || "").toUpperCase());
        }
      }
    }
  } else
  if (_typeof(image) === "object") {
    image = getImageUrl(image);
  }
  return /*#__PURE__*/React.createElement(AvatarWrapper, _extends({ theme: theme, width: width, height: height, palette: palette || sample(palettes), avatarstyle: avatarStyle, variant: variant }, rest),
  !image && /*#__PURE__*/React.createElement("span", null, avatarText),
  image && /*#__PURE__*/React.createElement(ImageBlock, { "aria-labelledby": imageAlt || title, src: image }));
});
//# sourceMappingURL=index.js.map