wix-style-react/dist/es/src/Avatar/Avatar.js

wix-style-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; };

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; }

import React from 'react';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import { Avatar as CoreAvatar } from 'wix-ui-core/avatar';
import { avatar as avatarStyle } from 'wix-ui-core/themes/backoffice';

import style from './Avatar.st.css';
import { capitalize } from '../utils/cssClassUtils';

/**
 * Avatar is a type of element that visually represents a user, either as an image, name initials or placeholder icon.
 */
var Avatar = function Avatar(props) {
  var size = props.size,
      color = props.color,
      dataHook = props.dataHook,
      className = props.className,
      rest = _objectWithoutProperties(props, ['size', 'color', 'dataHook', 'className']);

  return React.createElement(CoreAvatar, _extends({}, rest, {
    'data-hook': dataHook,
    className: classNames(className, avatarStyle(size, color && 'color' + capitalize(color)))
  }));
};

var CoreAvatarPropTypes = {
  /** The name of the avatar user. Text initials will be generated from the name. The name value will be used as default value for html `title` and `aria-label` attributes. And also as default value for the image's `alt` attribute if `imgProps` is provided. */
  name: PropTypes.string,
  /** Text to render as content. */
  text: PropTypes.string,
  /** A node with a placeholder to be rendered as content. Will be displayed if no `text`, `name` or `imgProps` are provided. Defaults to an generic Avatar user icon. */
  placeholder: PropTypes.node,
  /** Props for an `<img>` tag to be rendered as content. */
  imgProps: PropTypes.object,
  /** HTML aria-label attribute value. To be applied on the root element */
  ariaLabel: PropTypes.string,
  /** HTML title attribute value. To be applied on the root element */
  title: PropTypes.string
};
Avatar.displayName = 'Avatar';

Avatar.propTypes = _extends({}, CoreAvatarPropTypes, {
  /** Avatar size. Options like 'size90' mean that the width and height are 90px */
  size: PropTypes.oneOf(['size90', 'size72', 'size60', 'size48', 'size36', 'size30', 'size24', 'size18']),
  /** Bakcground color when text (initials) content is displayed */
  color: PropTypes.oneOf(['blue', 'green', 'grey', 'red', 'orange']),
  /** classes to be applied to the root elemenet */
  className: PropTypes.string,
  /** Applied as data-hook HTML attribute that can be used to create an Avatar driver in testing */
  dataHook: PropTypes.string
});

// Extracted icon as a component, in order to AutoDocs API to show a nice default value.
function AvatarDefaultPlaceholder() {
  return React.createElement(
    'svg',
    {
      className: style.placeholder,
      xmlns: 'http://www.w3.org/2000/svg',
      viewBox: '0 0 48 48'
    },
    React.createElement('path', { d: 'M40,46.6666667 C40,39.827681 35.7091909,33.9908675 29.6727884,31.7014418 C32.67293,29.8137334 34.6666667,26.4730311 34.6666667,22.6666667 C34.6666667,16.7756293 29.8910373,12 24,12 C18.1089627,12 13.3333333,16.7756293 13.3333333,22.6666667 C13.3333333,26.4730311 15.32707,29.8137334 18.3272116,31.7014418 C12.2908091,33.9908675 8,39.827681 8,46.6666667 L8,48 L40,48 L40,46.6666667 Z' })
  );
}

Avatar.defaultProps = {
  placeholder: React.createElement(AvatarDefaultPlaceholder, null)
};

export default Avatar;