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

wix-style-react

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

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 _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _avatar = require('wix-ui-core/avatar');

var _backoffice = require('wix-ui-core/themes/backoffice');

var _AvatarSt = require('./Avatar.st.css');

var _AvatarSt2 = _interopRequireDefault(_AvatarSt);

var _cssClassUtils = require('../utils/cssClassUtils');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

/**
 * 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 _react2.default.createElement(_avatar.Avatar, _extends({}, rest, {
    'data-hook': dataHook,
    className: (0, _classnames2.default)(className, (0, _backoffice.avatar)(size, color && 'color' + (0, _cssClassUtils.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: _propTypes2.default.string,
  /** Text to render as content. */
  text: _propTypes2.default.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: _propTypes2.default.node,
  /** Props for an `<img>` tag to be rendered as content. */
  imgProps: _propTypes2.default.object,
  /** HTML aria-label attribute value. To be applied on the root element */
  ariaLabel: _propTypes2.default.string,
  /** HTML title attribute value. To be applied on the root element */
  title: _propTypes2.default.string
};
Avatar.displayName = 'Avatar';

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

// Extracted icon as a component, in order to AutoDocs API to show a nice default value.
function AvatarDefaultPlaceholder() {
  return _react2.default.createElement(
    'svg',
    {
      className: _AvatarSt2.default.placeholder,
      xmlns: 'http://www.w3.org/2000/svg',
      viewBox: '0 0 48 48'
    },
    _react2.default.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: _react2.default.createElement(AvatarDefaultPlaceholder, null)
};

exports.default = Avatar;