@helpscout/hsds-react/components/AvatarSelector/AvatarSelector.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _getValidProps = _interopRequireDefault(require("@helpscout/react-utils/dist/getValidProps"));

var _classnames = _interopRequireDefault(require("classnames"));

var _Icon = _interopRequireDefault(require("../Icon"));

var _Avatar = _interopRequireDefault(require("../Avatar"));

var _AvatarSelectorCss = require("./AvatarSelector.css.js");

var _jsxRuntime = require("react/jsx-runtime");

var AvatarSelector = /*#__PURE__*/function (_React$PureComponent) {
  (0, _inheritsLoose2.default)(AvatarSelector, _React$PureComponent);

  function AvatarSelector() {
    return _React$PureComponent.apply(this, arguments) || this;
  }

  var _proto = AvatarSelector.prototype;

  _proto.renderAvatar = function renderAvatar() {
    var _this$props = this.props,
        image = _this$props.image,
        initials = _this$props.initials,
        name = _this$props.name;
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AvatarSelectorCss.AvatarWrapperUI, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
        size: "smmd",
        image: image,
        name: name,
        initials: initials
      })
    });
  };

  _proto.renderBlankAvatar = function renderBlankAvatar() {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AvatarSelectorCss.IconAssignUI, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
        name: "assigned",
        size: "24"
      })
    });
  };

  _proto.render = function render() {
    var _this$props2 = this.props,
        image = _this$props2.image,
        initials = _this$props2.initials,
        isHovered = _this$props2.isHovered,
        isOpen = _this$props2.isOpen,
        name = _this$props2.name,
        size = _this$props2.size,
        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props2, ["image", "initials", "isHovered", "isOpen", "name", "size"]);
    var classnames = (0, _classnames.default)('c-AvatarSelector', isOpen ? 'is-open' : '', isHovered && 'is-hovered');
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_AvatarSelectorCss.AvatarSelectorWrapperUI, (0, _extends2.default)({
      className: classnames,
      tabIndex: "0",
      size: size
    }, (0, _getValidProps.default)(rest), {
      children: [image || initials || name ? this.renderAvatar() : this.renderBlankAvatar(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_AvatarSelectorCss.IconCaretUI, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
          size: "14",
          name: isOpen ? 'caret-up' : 'caret-down'
        })
      })]
    }));
  };

  return AvatarSelector;
}(_react.default.PureComponent);

AvatarSelector.defaultProps = {
  'data-cy': 'AvatarSelector',
  image: '',
  initials: '',
  isHovered: false,
  isOpen: false,
  name: '',
  size: 'lg'
};
AvatarSelector.propTypes = {
  /** URL of the image. */
  image: _propTypes.default.string,

  /** Initials of image */
  initials: _propTypes.default.string,

  /** Fallback for the image. */
  name: _propTypes.default.string,

  /** Used to control the direction of the caret. */
  isOpen: _propTypes.default.bool,

  /** Size of the avatar. */
  size: _propTypes.default.oneOf(['xl', 'lg', 'md', 'smmd', 'sm', 'xxs']),

  /** Data attr for Cypress tests. */
  'data-cy': _propTypes.default.string
};
var _default = AvatarSelector;
exports.default = _default;