@bigbinary/neetoui
Version:
neetoUI drives the experience at all neeto products
99 lines (96 loc) • 4.01 kB
JavaScript
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