@catho/quantum/Avatar/Avatar.js

Catho react components

"use strict";

function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _Person = _interopRequireDefault(require("@mui/icons-material/Person"));
var _Icon = _interopRequireDefault(require("../Icon/Icon"));
var _theme = require("../shared/theme");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["picture", "text", "hasNotification", "hasToggle", "href"];
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
var borderStyle = 'border-radius: 50%;';
var AvatarWrapper = _styledComponents["default"].span.withConfig({
  displayName: "Avatar__AvatarWrapper",
  componentId: "sc-lxre52-0"
})(["display:inline-flex;position:relative;height:24px;text-decoration:unset;color:unset;"]);
var AvatarImage = _styledComponents["default"].img.attrs({
  alt: 'user picture',
  ariaHidden: 'true'
}).withConfig({
  displayName: "Avatar__AvatarImage",
  componentId: "sc-lxre52-1"
})(["", " width:24px;height:24px;overflow:hidden;pointer-events:none;"], borderStyle);
var AvatarIcon = (0, _styledComponents["default"])(_Person["default"]).attrs({
  style: {
    color: _theme.colors.neutral[300],
    fontSize: '18px'
  }
}).withConfig({
  displayName: "Avatar__AvatarIcon",
  componentId: "sc-lxre52-2"
})(["", " background:", ";padding:3px;pointer-events:none;"], borderStyle, _theme.colors.neutral[700]);
var AvatarNotification = _styledComponents["default"].span.withConfig({
  displayName: "Avatar__AvatarNotification",
  componentId: "sc-lxre52-3"
})(["", " background-color:", ";position:absolute;left:17px;top:0;width:12px;height:12px;"], borderStyle, _theme.colors.secondary[700]);
var AvatarText = _styledComponents["default"].span.withConfig({
  displayName: "Avatar__AvatarText",
  componentId: "sc-lxre52-4"
})(["display:inline-flex;margin-left:12px;pointer-events:none;"]);
var IconToggle = (0, _styledComponents["default"])(_Icon["default"]).withConfig({
  displayName: "Avatar__IconToggle",
  componentId: "sc-lxre52-5"
})(["pointer-events:none;"]);

/** This components is used to display the user picture. */
var Avatar = function Avatar(_ref) {
  var _ref$picture = _ref.picture,
    picture = _ref$picture === void 0 ? '' : _ref$picture,
    _ref$text = _ref.text,
    text = _ref$text === void 0 ? '' : _ref$text,
    _ref$hasNotification = _ref.hasNotification,
    hasNotification = _ref$hasNotification === void 0 ? false : _ref$hasNotification,
    _ref$hasToggle = _ref.hasToggle,
    hasToggle = _ref$hasToggle === void 0 ? false : _ref$hasToggle,
    _ref$href = _ref.href,
    href = _ref$href === void 0 ? '' : _ref$href,
    rest = _objectWithoutProperties(_ref, _excluded);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(AvatarWrapper, _objectSpread(_objectSpread({
    as: href && 'a',
    href: href || undefined
  }, rest), {}, {
    "aria-live": "polite",
    children: [picture ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AvatarImage, {
      src: picture
    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(AvatarIcon, {}), hasNotification && /*#__PURE__*/(0, _jsxRuntime.jsx)(AvatarNotification, {
      role: "alert"
    }), text && /*#__PURE__*/(0, _jsxRuntime.jsx)(AvatarText, {
      children: text
    }), hasToggle && /*#__PURE__*/(0, _jsxRuntime.jsx)(IconToggle, {
      name: "keyboard_arrow_down"
    })]
  }));
};
AvatarWrapper.displayName = 'AvatarWrapper';
Avatar.displayName = 'Avatar';
AvatarNotification.displayName = 'AvatarNotification';
Avatar.propTypes = {
  picture: _propTypes["default"].string,
  text: _propTypes["default"].string,
  href: _propTypes["default"].string,
  hasNotification: _propTypes["default"].bool,
  hasToggle: _propTypes["default"].bool
};
var _default = exports["default"] = Avatar;