@sendbird/uikit-react
Version:
Sendbird UIKit for React: A feature-rich and customizable chat UI kit with messaging, channel management, and user authentication.
72 lines (68 loc) • 5.45 kB
JavaScript
import { c as __spreadArray } from './bundle-yl5d1NoZ.js';
import React__default from 'react';
import ImageRenderer from '../ui/ImageRenderer.js';
import { p as pxToNumber } from './bundle-Dl_v8XoN.js';
import Icon, { IconTypes, IconColors } from '../ui/Icon.js';
import { c as classnames } from './bundle-MlG9piGf.js';
var AvatarDefault = function (props) {
var width = props.width, height = props.height, text = props.text;
var iconWidth = pxToNumber(width);
var iconHeight = pxToNumber(height);
if (typeof iconWidth === 'number' && !Number.isNaN(iconWidth)) {
iconWidth *= 0.575;
}
if (typeof iconHeight === 'number' && !Number.isNaN(iconHeight)) {
iconHeight *= 0.575;
}
return (React__default.createElement("div", { className: classnames('sendbird-avatar-img--default', text && 'text'), style: { width: width, height: height } }, text
? React__default.createElement("div", { className: 'sendbird-avatar-text' }, text)
: React__default.createElement(Icon, { type: IconTypes.USER, fillColor: IconColors.CONTENT, width: iconWidth, height: iconHeight })));
};
var imageRendererClassName = 'sendbird-avatar-img';
var AvatarInner = function (_a) {
var _b = _a.src, src = _b === void 0 ? '' : _b, _c = _a.alt, alt = _c === void 0 ? '' : _c, height = _a.height, width = _a.width, customDefaultComponent = _a.customDefaultComponent;
var defaultComponent = function () { return customDefaultComponent
? customDefaultComponent({ width: width, height: height })
: React__default.createElement(AvatarDefault, { width: width, height: height }); };
if (typeof src === 'string') {
return (React__default.createElement(ImageRenderer, { className: imageRendererClassName, url: src, height: height, width: width, alt: alt, defaultComponent: defaultComponent }));
}
if (src && src.length) {
if (src.length === 1) {
return (React__default.createElement(ImageRenderer, { className: imageRendererClassName, url: src[0], height: height, width: width, alt: alt, defaultComponent: defaultComponent }));
}
if (src.length === 2) {
return (React__default.createElement("div", { className: "sendbird-avatar--inner__two-child" },
React__default.createElement(ImageRenderer, { className: imageRendererClassName, url: src[0], height: height, width: width, alt: alt, defaultComponent: defaultComponent }),
React__default.createElement(ImageRenderer, { className: imageRendererClassName, url: src[1], height: height, width: width, alt: alt, defaultComponent: defaultComponent })));
}
if (src.length === 3) {
return (React__default.createElement(React__default.Fragment, null,
React__default.createElement("div", { className: "sendbird-avatar--inner__three-child--upper" },
React__default.createElement(ImageRenderer, { className: imageRendererClassName, url: src[0], height: height, width: width, alt: alt, defaultComponent: defaultComponent })),
React__default.createElement("div", { className: "sendbird-avatar--inner__three-child--lower" },
React__default.createElement(ImageRenderer, { className: imageRendererClassName, url: src[1], height: height, width: width, alt: alt, defaultComponent: defaultComponent }),
React__default.createElement(ImageRenderer, { className: imageRendererClassName, url: src[2], height: height, width: width, alt: alt, defaultComponent: defaultComponent }))));
}
return (React__default.createElement("div", { className: "sendbird-avatar--inner__four-child" }, src.slice(0, 4)
.map(function (url, index) { return (React__default.createElement(ImageRenderer, { className: imageRendererClassName, url: url, height: height, width: width, alt: alt, key: "".concat(url, "-").concat(index), defaultComponent: defaultComponent })); })));
}
// default img
return (React__default.createElement(ImageRenderer, { className: imageRendererClassName, url: "", height: height, width: width, alt: alt, defaultComponent: defaultComponent }));
};
function Avatar(_a, ref) {
var _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.src, src = _c === void 0 ? '' : _c, _d = _a.alt, alt = _d === void 0 ? '' : _d, _e = _a.width, width = _e === void 0 ? '56px' : _e, _f = _a.height, height = _f === void 0 ? '56px' : _f, _g = _a.zIndex, zIndex = _g === void 0 ? 0 : _g, _h = _a.left, left = _h === void 0 ? '' : _h, _j = _a.bottom, bottom = _j === void 0 ? '' : _j, onClick = _a.onClick, customDefaultComponent = _a.customDefaultComponent;
return (React__default.createElement("div", { className: __spreadArray(__spreadArray([], (Array.isArray(className) ? className : [className]), true), [
'sendbird-avatar',
], false).join(' '), role: "button", ref: ref, style: {
height: height,
width: width,
zIndex: zIndex,
left: left,
bottom: bottom,
}, onClick: onClick, onKeyDown: onClick, tabIndex: 0 },
React__default.createElement(AvatarInner, { src: src, width: width, height: height, alt: alt, customDefaultComponent: customDefaultComponent })));
}
var Avatar$1 = React__default.forwardRef(Avatar);
export { Avatar$1 as A, AvatarDefault as a, AvatarInner as b };
//# sourceMappingURL=bundle-CAEBoiEz.js.map