@momentum-ui/react-collaboration
Version:
Cisco Momentum UI Framework for React Collaboration Applications
84 lines • 5.77 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React, { forwardRef } from 'react';
import classnames from 'classnames';
import './Avatar.style.scss';
import { STYLE, DEFAULTS, AVATAR_ICON_SIZE_MAPPING } from './Avatar.constants';
import Icon from '../Icon';
import ButtonSimple from '../ButtonSimple';
import Presence from './Presence';
import Initials from './Initials';
import { getInitials } from './Avatar.utils';
import { getPresenceIconColor } from './Presence.utils';
import { useAvatarImage } from './Avatar.hooks';
var Avatar = function (props, ref) {
var _a;
var className = props.className, buttonClassName = props.buttonClassName, src = props.src, title = props.title, initials = props.initials, _b = props.size, size = _b === void 0 ? DEFAULTS.SIZE : _b, _c = props.color, color = _c === void 0 ? DEFAULTS.COLOR : _c, presence = props.presence, _d = props.type, type = _d === void 0 ? DEFAULTS.TYPE : _d, icon = props.icon, iconOnHover = props.iconOnHover, isTyping = props.isTyping, onPress = props.onPress, failureBadge = props.failureBadge, _e = props.mainLabel, mainLabel = _e === void 0 ? DEFAULTS.LABEL : _e, _f = props.presenceLabel, presenceLabel = _f === void 0 ? DEFAULTS.LABEL : _f, _g = props.typingLabel, typingLabel = _g === void 0 ? DEFAULTS.LABEL : _g, _h = props.extraLabel, extraLabel = _h === void 0 ? DEFAULTS.LABEL : _h, rest = __rest(props, ["className", "buttonClassName", "src", "title", "initials", "size", "color", "presence", "type", "icon", "iconOnHover", "isTyping", "onPress", "failureBadge", "mainLabel", "presenceLabel", "typingLabel", "extraLabel"]);
var initialsText = initials ? initials : title ? getInitials(title, type) : undefined;
var _j = getPresenceIconColor(presence, failureBadge), presenceColor = _j.presenceColor, presenceIcon = _j.presenceIcon, isCircularWrapper = _j.isCircularWrapper;
var _k = useAvatarImage(src), imageLoaded = _k.imageLoaded, handleOnLoad = _k.handleOnLoad, handleOnError = _k.handleOnError;
if (src && icon) {
console.warn('Avatar: You can only use either an image or an icon inside the Avatar but not both.');
}
var avatarLabels = [];
if (mainLabel) {
avatarLabels.push(mainLabel);
}
if (presence && presenceLabel) {
avatarLabels.push(presenceLabel);
}
if (isTyping && typingLabel) {
avatarLabels.push(typingLabel);
}
if (extraLabel) {
avatarLabels.push(extraLabel);
}
var containerAriaLabel = rest['aria-label'] || avatarLabels.join(', ');
delete rest['aria-label'];
var content = (React.createElement("div", __assign({ className: classnames(STYLE.wrapper, className), "data-size": size, "data-color": color, "aria-label": onPress ? undefined : containerAriaLabel, role: onPress ? undefined : 'img', "aria-hidden": onPress ? 'true' : 'false' }, (!onPress && __assign({}, rest))),
!imageLoaded && !icon && initialsText && (React.createElement(Initials, { initials: initialsText, type: type, className: STYLE.wrapperChildren })),
src && (
// eslint-disable-next-line jsx-a11y/alt-text
React.createElement("img", { src: src, "aria-hidden": "true", onLoad: handleOnLoad, onError: handleOnError, className: classnames(STYLE.wrapperChildren, (_a = {}, _a[STYLE.imageHidden] = !imageLoaded, _a)) })),
icon && (React.createElement(Icon, { className: classnames(STYLE.wrapperChildren, STYLE.iconWrapper), name: icon, scale: AVATAR_ICON_SIZE_MAPPING[size].scale, weight: AVATAR_ICON_SIZE_MAPPING[size].weight })),
iconOnHover && (React.createElement("div", { className: classnames(STYLE.wrapperChildren, STYLE.iconOnHoverWrapper) },
React.createElement(Icon, { className: classnames(STYLE.wrapperChildren, STYLE.iconWrapper), name: iconOnHover, scale: AVATAR_ICON_SIZE_MAPPING[size].scale, weight: AVATAR_ICON_SIZE_MAPPING[size].weight }))),
isTyping && (React.createElement("span", { className: classnames(STYLE.wrapperChildren, STYLE.animationWrapper), "aria-hidden": "true" },
React.createElement("div", { style: { transform: 'scale(0.4)' }, className: STYLE.loadingAnimation }))),
presenceColor && presenceIcon && (React.createElement(Presence, { presenceColor: presenceColor, presenceIcon: presenceIcon, isCircularWrapper: isCircularWrapper, size: size }))));
if (onPress) {
return (React.createElement(ButtonSimple, __assign({ "aria-label": containerAriaLabel, useNativeKeyDown: true, ref: ref, className: classnames(STYLE.buttonWrapper, buttonClassName), onPress: onPress }, rest), content));
}
else
return content;
};
/**
* Avatar component that can contain an image or initials
*/
/**
* @deprecated Use the equivalent from momentum.design (NPM: `@momentum-design/components/dist/react`)
*/
var _Avatar = forwardRef(Avatar);
_Avatar.displayName = 'Avatar';
export default _Avatar;
//# sourceMappingURL=Avatar.js.map