UNPKG

@bigbinary/neetoui

Version:

neetoUI drives the experience at all neeto products

99 lines (96 loc) 4.01 kB
import _extends from '@babel/runtime/helpers/extends'; import _slicedToArray from '@babel/runtime/helpers/slicedToArray'; import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties'; import React__default, { useState } from 'react'; import Avvvatars from 'avvvatars-react'; import classnames from 'classnames'; import { isEmpty, isNil } from 'ramda'; import Tooltip from './Tooltip.js'; import '@babel/runtime/helpers/defineProperty'; import '@tippyjs/react'; import 'tippy.js'; var _excluded = ["size", "user", "status", "onClick", "className", "showTooltip", "tooltipProps"]; var SIZE = { small: 24, medium: 32, large: 40, extraLarge: 64 }; var getInitials = function getInitials(fullName) { if (typeof fullName !== "string" || isEmpty(fullName)) return " "; var allNames = fullName.trim().split(" "); if (allNames.length === 1) return fullName.substring(0, 2).toUpperCase(); return "".concat(allNames[0][0]).concat(allNames[allNames.length - 1][0]).toUpperCase(); }; var Avatar = function Avatar(_ref) { var _ref$size = _ref.size, size = _ref$size === void 0 ? "medium" : _ref$size, _ref$user = _ref.user, user = _ref$user === void 0 ? {} : _ref$user, _ref$status = _ref.status, status = _ref$status === void 0 ? null : _ref$status, _ref$onClick = _ref.onClick, onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick, _ref$className = _ref.className, className = _ref$className === void 0 ? "" : _ref$className, _ref$showTooltip = _ref.showTooltip, showTooltip = _ref$showTooltip === void 0 ? false : _ref$showTooltip, _ref$tooltipProps = _ref.tooltipProps, tooltipProps = _ref$tooltipProps === void 0 ? {} : _ref$tooltipProps, otherProps = _objectWithoutProperties(_ref, _excluded); var _useState = useState(false), _useState2 = _slicedToArray(_useState, 2), isLoadingFailed = _useState2[0], setIsLoadingFailed = _useState2[1]; var _user$name = user.name, name = _user$name === void 0 ? "" : _user$name, imageUrl = user.imageUrl; var isMedium = size === "medium"; var isLarge = size === "large"; var isExtraLarge = size === "extraLarge"; var containerClasses = classnames("neeto-ui-avatar__container neeto-ui-select-none", { "neeto-ui-avatar__container--medium": isMedium, "neeto-ui-avatar__container--large": isLarge, "neeto-ui-avatar__container--xlarge": isExtraLarge }, className); var imageClasses = classnames("neeto-ui-avatar", { "neeto-ui-avatar--medium": isMedium, "neeto-ui-avatar--large": isLarge, "neeto-ui-avatar--xlarge": isExtraLarge, hidden: isLoadingFailed }); var statusClasses = classnames("neeto-ui-avatar__status", status, { "neeto-ui-avatar__status-medium": isMedium, "neeto-ui-avatar__status-large": isLarge, "neeto-ui-avatar__status-xlarge": isExtraLarge }); var Indicator = function Indicator() { return isNil(status) ? React__default.Fragment : /*#__PURE__*/React__default.createElement("span", { className: statusClasses, "data-testid": "indicator" }); }; var shouldDisplayFallbackAvatar = !(imageUrl && !isLoadingFailed); return /*#__PURE__*/React__default.createElement(Tooltip, _extends({ content: name, disabled: !showTooltip, position: "bottom" }, tooltipProps), /*#__PURE__*/React__default.createElement("span", _extends({ onClick: onClick, className: containerClasses, "data-testid": "avatar" }, otherProps), /*#__PURE__*/React__default.createElement(Indicator, null), shouldDisplayFallbackAvatar ? /*#__PURE__*/React__default.createElement(Avvvatars, { displayValue: getInitials(name), size: SIZE[size], value: name }) : /*#__PURE__*/React__default.createElement("img", { alt: "avatar-".concat(name), className: imageClasses, src: imageUrl, onError: function onError() { return setIsLoadingFailed(true); } }))); }; export { Avatar as default }; //# sourceMappingURL=Avatar.js.map