@geezee/react-ui/esm/avatar/avatar.js

Modern and minimalist React UI library.

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _JSXStyle from "styled-jsx/style";
import React, { useMemo } from 'react';
import useTheme from '../styles/use-theme';
var defaultProps = {
  stacked: false,
  text: '',
  size: 'small',
  isSquare: false,
  className: ''
};

var getSize = function getSize(size) {
  var sizes = {
    mini: '1.25rem',
    small: '1.875rem',
    medium: '3.75rem',
    large: '5.625rem'
  };
  if (typeof size === 'number') return "".concat(size, "px");
  return sizes[size];
};

var safeText = function safeText(text) {
  if (text.length <= 4) return text;
  return text.slice(0, 3);
};

var Avatar = function Avatar(_ref) {
  var src = _ref.src,
      stacked = _ref.stacked,
      text = _ref.text,
      size = _ref.size,
      isSquare = _ref.isSquare,
      className = _ref.className,
      props = _objectWithoutProperties(_ref, ["src", "stacked", "text", "size", "isSquare", "className"]);

  var theme = useTheme();
  var showText = !src;
  var radius = isSquare ? theme.expressiveness.R2 : '50%';
  var marginLeft = stacked ? '-.625rem' : 0;
  var width = useMemo(function () {
    return getSize(size);
  }, [size]);
  return /*#__PURE__*/React.createElement("span", {
    className: _JSXStyle.dynamic([["2419652003", [width, width, theme.palette.accents_2, radius, theme.palette.background, marginLeft, radius]]]) + " " + "avatar ".concat(className)
  }, !showText && /*#__PURE__*/React.createElement("img", _extends({
    src: src
  }, props, {
    className: _JSXStyle.dynamic([["2419652003", [width, width, theme.palette.accents_2, radius, theme.palette.background, marginLeft, radius]]]) + " " + (props && props.className != null && props.className || "avatar-img")
  })), showText && /*#__PURE__*/React.createElement("span", _extends({}, props, {
    className: _JSXStyle.dynamic([["2419652003", [width, width, theme.palette.accents_2, radius, theme.palette.background, marginLeft, radius]]]) + " " + (props && props.className != null && props.className || "avatar-text")
  }), safeText(text)), /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "2419652003",
    dynamic: [width, width, theme.palette.accents_2, radius, theme.palette.background, marginLeft, radius]
  }, ".avatar.__jsx-style-dynamic-selector{width:".concat(width, ";height:").concat(width, ";display:inline-block;position:relative;overflow:hidden;border:1px solid ").concat(theme.palette.accents_2, ";border-radius:").concat(radius, ";vertical-align:top;background-color:").concat(theme.palette.background, ";margin:0 0 0 ").concat(marginLeft, ";}.avatar.__jsx-style-dynamic-selector:first-child{margin:0;}.avatar-img.__jsx-style-dynamic-selector{display:inline-block;width:100%;height:100%;border-radius:").concat(radius, ";}.avatar-text.__jsx-style-dynamic-selector{position:absolute;left:50%;top:50%;font-size:1em;text-align:center;-webkit-transform:translate(-50%,-50%) scale(0.65);-ms-transform:translate(-50%,-50%) scale(0.65);transform:translate(-50%,-50%) scale(0.65);white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}")));
};

Avatar.defaultProps = defaultProps;
export default React.memo(Avatar);