@momentum-ui/react-collaboration
Version:
Cisco Momentum UI Framework for React Collaboration Applications
238 lines • 10.5 kB
JavaScript
/** @component avatar */
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
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 from 'react';
import PropTypes from 'prop-types';
import { Button, Loading, Icon } from '@momentum-ui/react-collaboration';
/**
* @deprecated - Components in the legacy folder (/src/legacy) are deprecated. Please use a component from the components folder (/src/components) instead. Legacy components may not follow accessibility standards.
**/
var Avatar = /** @class */ (function (_super) {
__extends(Avatar, _super);
function Avatar() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
isImageLoaded: false,
isImageErrored: false,
};
_this.handleImgChange = function () {
_this.setState({
isImageLoaded: false,
isImageErrored: false,
});
};
_this.handleImgError = function () {
_this.setState({
isImageErrored: true,
});
};
_this.handleImgLoaded = function () {
_this.setState({
isImageLoaded: true,
});
};
return _this;
}
Avatar.prototype.componentDidMount = function () {
var img = this.image;
if (img && img.complete) {
this.handleImgLoaded();
}
};
Avatar.prototype.componentDidUpdate = function (prevProps) {
if (prevProps.src !== this.props.src) {
this.handleImgChange();
}
};
Avatar.prototype.render = function () {
var _this = this;
var _a = this.props, alt = _a.alt, backgroundColor = _a.backgroundColor, buttonClassName = _a.buttonClassName, className = _a.className, color = _a.color, failureBadge = _a.failureBadge, hasNotification = _a.hasNotification, hideDefaultTooltip = _a.hideDefaultTooltip, icon = _a.icon, initials = _a.initials, isDecrypting = _a.isDecrypting, isOverview = _a.isOverview, onClick = _a.onClick, size = _a.size, src = _a.src, theme = _a.theme, title = _a.title, type = _a.type, otherProps = __rest(_a, ["alt", "backgroundColor", "buttonClassName", "className", "color", "failureBadge", "hasNotification", "hideDefaultTooltip", "icon", "initials", "isDecrypting", "isOverview", "onClick", "size", "src", "theme", "title", "type"]);
var _b = this.state, isImageLoaded = _b.isImageLoaded, isImageErrored = _b.isImageErrored;
var getInitials = function () {
if (initials)
return initials;
if (!title.replace(/\s/g, '').length)
return '';
var letters = [];
var words = title.trim().split(/ +/);
letters.push(String.fromCodePoint(words[0].codePointAt(0)));
if (type !== 'group' && words.length > 1) {
letters.push(String.fromCodePoint(words[words.length - 1].codePointAt(0)));
}
return letters.join('');
};
var getIcon = function () {
if (icon.type.displayName === 'Icon') {
return (React.createElement("span", { className: 'md-avatar__icon' + "".concat(isOverview ? ' md-avatar__icon--overview' : ''), style: { backgroundColor: backgroundColor, color: color } }, icon));
}
throw new Error('Icon prop should be a component of type Icon');
};
var getLetter = function () {
return (React.createElement("span", { key: "letter", className: 'md-avatar__letter' +
"".concat((isDecrypting && " md-decrypting") || '') +
"".concat((isImageLoaded && " md-avatar__img--hidden") || ''), style: { backgroundColor: backgroundColor, color: color } }, getInitials()));
};
var getChildren = function () {
if (type === 'self') {
return (React.createElement("span", { key: "self", className: "md-avatar__self", style: { backgroundColor: backgroundColor, color: color } },
React.createElement(Icon, { name: size === 40 || size === 'medium' ? 'chat-active_18' : 'chat-active_16' })));
}
else if (src && !isImageErrored) {
// image src is present and image has not yet errored
var imgChildren = [];
// image is not loaded and title is provided
if (title && !isImageLoaded) {
imgChildren.push(getLetter());
}
imgChildren.push(React.createElement("img", { alt: alt, className: "md-avatar__img" + "".concat((!isImageLoaded && " md-avatar__img--hidden") || ''), draggable: false, key: "image-".concat(imgChildren.length), onError: _this.handleImgError, onLoad: _this.handleImgLoaded, src: src, ref: function (ref) { return (_this.image = ref); } }));
return imgChildren;
}
else if (icon) {
return getIcon();
}
else if (title) {
return getLetter();
}
};
var getAvatar = function () { return (React.createElement("div", __assign({ className: 'md-avatar' +
"".concat((onClick && " md-avatar--clickable") || '') +
"".concat((onClick && type === 'bot' && " md-avatar--clickable-bot") || '') +
"".concat((type && " md-avatar--".concat(type)) || '') +
"".concat((size && " md-avatar--".concat(size)) || '') +
"".concat((theme && " md-avatar--".concat(theme)) || '') +
"".concat((isDecrypting && " md-decrypting") || '') +
"".concat((className && " ".concat(className)) || ''), title: !hideDefaultTooltip ? title : '' }, (!onClick && __assign({}, otherProps))),
getChildren(),
type === 'typing' && React.createElement(Loading, null),
failureBadge && React.createElement("span", { className: "md-avatar__failure-badge" }),
hasNotification && React.createElement("span", { className: "md-avatar__notification-badge" }))); };
return onClick ? (React.createElement(Button, __assign({ className: buttonClassName, circle: true, onClick: onClick, removeStyle: true }, otherProps), getAvatar())) : (getAvatar());
};
Avatar.displayName = 'Avatar';
return Avatar;
}(React.Component));
Avatar.propTypes = {
/** @prop Image alt tag | '' */
alt: PropTypes.string,
/** @prop Set Avatar background color | '' */
backgroundColor: PropTypes.string,
/** @prop Optional css class string for button | '' */
buttonClassName: PropTypes.string,
/** @prop Optional css class string for Avatar component | null */
className: PropTypes.string,
/** @prop Set Avatar text color | '' */
color: PropTypes.string,
/** @prop Set existance of a failureBadge on the Avatar | false */
failureBadge: PropTypes.bool,
/** @prop Set existance of a notification on the Avatar | false */
hasNotification: PropTypes.bool,
/** @prop Set the visibility of Avatar's default tooltip | false */
hideDefaultTooltip: PropTypes.bool,
/** @prop Optional icon component for the Avatar | null */
icon: PropTypes.element,
/** @prop Optional string for avatar's initials | null*/
initials: PropTypes.string,
/** @prop Set if Avatar's content is decrypting | false */
isDecrypting: PropTypes.bool,
/** @prop Set existance of Avatar's Overview | false */
isOverview: PropTypes.bool,
/** @prop Handler to be called when the user taps the Avatar | null */
onClick: PropTypes.func,
/** @prop Set the size of the Avatar from one of the preconfigured options | 'medium' */
size: PropTypes.oneOf([
'xsmall',
'small',
'medium',
'large',
'xlarge',
18,
24,
28,
36,
40,
44,
52,
56,
72,
80,
84,
]),
/** @prop Optional image source for the Avatar | null */
src: PropTypes.string,
/** @prop Optional Avatar color theme | null */
theme: PropTypes.string,
/** @prop set Avatar title / user's name | null */
title: PropTypes.string,
/** @prop optional Avatar type | '' */
type: PropTypes.oneOf([
'',
'active',
'bot',
'call',
'dnd',
'group',
'inactive',
'meeting',
'ooo',
'presenting',
'self',
'typing',
]),
};
Avatar.defaultProps = {
alt: '',
backgroundColor: '',
buttonClassName: '',
className: null,
color: '',
failureBadge: false,
hasNotification: false,
hideDefaultTooltip: false,
icon: null,
initials: null,
isDecrypting: false,
isOverview: false,
onClick: null,
size: 'medium',
src: null,
theme: null,
title: null,
type: '',
};
export default Avatar;
//# sourceMappingURL=index.js.map