stream-chat-react
Version:
React components to create chat conversations or livestream style chat
29 lines (28 loc) • 1.98 kB
JavaScript
import React, { useEffect, useState } from 'react';
import { getWholeChar } from '../../utils';
/**
* A round avatar image with fallback to username's first letter
*/
export var Avatar = function (props) {
var image = props.image, name = props.name, _a = props.onClick, onClick = _a === void 0 ? function () { return undefined; } : _a, _b = props.onMouseOver, onMouseOver = _b === void 0 ? function () { return undefined; } : _b, _c = props.shape, shape = _c === void 0 ? 'circle' : _c, _d = props.size, size = _d === void 0 ? 32 : _d;
var _e = useState(false), error = _e[0], setError = _e[1];
var _f = useState(false), loaded = _f[0], setLoaded = _f[1];
useEffect(function () {
setError(false);
setLoaded(false);
}, [image]);
var nameStr = (name === null || name === void 0 ? void 0 : name.toString()) || '';
var initials = getWholeChar(nameStr, 0);
return (React.createElement("div", { className: "str-chat__avatar str-chat__avatar--".concat(shape, " str-chat__message-sender-avatar"), "data-testid": 'avatar', onClick: onClick, onMouseOver: onMouseOver, style: {
flexBasis: "".concat(size, "px"),
fontSize: "".concat(size / 2, "px"),
height: "".concat(size, "px"),
lineHeight: "".concat(size, "px"),
width: "".concat(size, "px"),
}, title: name }, image && !error ? (React.createElement("img", { alt: initials, className: "str-chat__avatar-image".concat(loaded ? ' str-chat__avatar-image--loaded' : ''), "data-testid": 'avatar-img', onError: function () { return setError(true); }, onLoad: function () { return setLoaded(true); }, src: image, style: {
flexBasis: "".concat(size, "px"),
height: "".concat(size, "px"),
objectFit: 'cover',
width: "".concat(size, "px"),
} })) : (React.createElement("div", { className: 'str-chat__avatar-fallback', "data-testid": 'avatar-fallback' }, initials))));
};