@gssfed/vital-ui-kit-react/dist/Avatar/Avatar.js

Vital UI Kit for React!

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _templateObject = _taggedTemplateLiteral(['\n  position: relative;\n  display: inline-block;\n'], ['\n  position: relative;\n  display: inline-block;\n']),
    _templateObject2 = _taggedTemplateLiteral(['\n  width: ', ';\n  height: ', ';\n  border-radius: ', ';\n  background-color: ', ';\n  box-sizing: border-box;\n'], ['\n  width: ', ';\n  height: ', ';\n  border-radius: ', ';\n  background-color: ', ';\n  box-sizing: border-box;\n']);

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

/**
 * 
 * Copyright © 2018 Galaxy Software Services https://github.com/GSS-FED/vital-ui-kit-react
 * MIT license
 */

import React from 'react';
import styled from 'styled-components';

import AvatarBadge from './AvatarBadge';
import { avatarSizes } from './constants';
import DEFAULT_AVATAR from './assets/default-avatar.svg';
import DEFAULT_AVATAR_OUTLINE from './assets/default-avatar-o.svg';
import DEFAULT_AVATAR_M from './assets/default-avatar-m.svg';
import DEFAULT_AVATAR_F from './assets/default-avatar-f.svg';
import DEFAULT_AVATAR_M_O from './assets/default-avatar-m-o.svg';
import DEFAULT_AVATAR_F_O from './assets/default-avatar-f-o.svg';

var Root = styled.div(_templateObject);

var Image = styled.img(_templateObject2, function (_ref) {
  var size = _ref.size;
  return avatarSizes[size].size;
}, function (_ref2) {
  var size = _ref2.size;
  return avatarSizes[size].size;
}, function (_ref3) {
  var size = _ref3.size,
      round = _ref3.round;
  return round ? '50%' : avatarSizes[size].borderRadius;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.grey200;
});

/**
 * @render react
 * @name Avatar
 * @description Vital UI Kit Avatar Component
 * @example
 * <Avatar
 *  badge="99+"
 *  size="large"
 *  gender="male"
 *  round
 * />
 */

var Avatar = function Avatar(_ref5) {
  var src = _ref5.src,
      round = _ref5.round,
      size = _ref5.size,
      badge = _ref5.badge,
      outline = _ref5.outline,
      gender = _ref5.gender,
      containerStyle = _ref5.containerStyle,
      imageStyle = _ref5.imageStyle,
      badgeStyle = _ref5.badgeStyle,
      props = _objectWithoutProperties(_ref5, ['src', 'round', 'size', 'badge', 'outline', 'gender', 'containerStyle', 'imageStyle', 'badgeStyle']);

  var renderBadge = function renderBadge() {
    if (!badge) {
      return null;
    }

    return React.createElement(AvatarBadge, {
      label: badge,
      size: size,
      round: round,
      style: badgeStyle
    });
  };

  var renderDefaultAvatar = function renderDefaultAvatar() {
    if (src) {
      return src;
    }
    if (outline && gender) {
      if (gender === 'female') return DEFAULT_AVATAR_F_O;
      if (gender === 'male') return DEFAULT_AVATAR_M_O;
      return DEFAULT_AVATAR_OUTLINE;
    }
    if (!outline && gender) {
      if (gender === 'female') return DEFAULT_AVATAR_F;
      if (gender === 'male') return DEFAULT_AVATAR_M;
      return DEFAULT_AVATAR;
    }
    if (outline && !gender) {
      return DEFAULT_AVATAR_OUTLINE;
    }
    return DEFAULT_AVATAR;
  };

  return React.createElement(
    Root,
    _extends({ style: containerStyle }, props),
    React.createElement(Image, _extends({
      src: renderDefaultAvatar(),
      size: size,
      round: round,
      style: imageStyle
    }, props)),
    renderBadge()
  );
};

Avatar.defaultProps = {
  badge: null,
  src: null,
  gender: undefined,
  round: false,
  size: 'medium',
  outline: false,
  imageStyle: null,
  containerStyle: null,
  badgeStyle: null
};

export default Avatar;