UNPKG

@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
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