UNPKG

@sendbird/uikit-react

Version:

Sendbird UIKit for React: A feature-rich and customizable chat UI kit with messaging, channel management, and user authentication.

83 lines (77 loc) 4.37 kB
'use strict'; var React = require('react'); var useChannelSettings = require('../../chunks/bundle-DDSgAZ7n.js'); var LocalizationContext = require('../../chunks/bundle-O9GJGA-U.js'); var ui_Badge = require('../../ui/Badge.js'); var ui_Label = require('../../chunks/bundle-DONg2mag.js'); var ui_Icon = require('../../ui/Icon.js'); var MemberList = require('../../chunks/bundle-BcNQT2_6.js'); require('../../chunks/bundle-3pIN38MR.js'); require('../../chunks/bundle-Sfn_RLlP.js'); require('../../chunks/bundle-CyENaxLd.js'); require('@sendbird/chat/groupChannel'); require('../../chunks/bundle-ByzBZitI.js'); require('../../chunks/bundle-CZLKAZCV.js'); require('../../chunks/bundle-CJhoVxdz.js'); require('../../chunks/bundle-C562G-JW.js'); require('../../chunks/bundle-CMlV_h38.js'); require('@sendbird/chat'); require('@sendbird/chat/openChannel'); require('../../chunks/bundle-BRv5cK_w.js'); require('../../chunks/bundle-CIulWkOG.js'); require('../../ui/Button.js'); require('../../chunks/bundle-DGI3KmLP.js'); require('../../chunks/bundle-BbP1ND3d.js'); require('react-dom'); require('../../ui/SortByRow.js'); require('../../ui/IconButton.js'); require('../../chunks/bundle-DrGYNNB5.js'); require('../../utils/message/getOutgoingMessageState.js'); require('../../chunks/bundle-BROd4sV1.js'); require('../../chunks/bundle-BnDEMyZ4.js'); require('../../chunks/bundle-CiHUpz7L.js'); require('../../ui/UserListItem.js'); require('../../chunks/bundle-BikLdyZe.js'); require('../../ui/ImageRenderer.js'); require('../../chunks/bundle-XIN-6-ar.js'); require('../../ui/MutedAvatarOverlay.js'); require('../../ui/Checkbox.js'); require('../../ui/UserProfile.js'); require('../../sendbirdSelectors.js'); require('../../chunks/bundle-C8f_4-N0.js'); require('../../chunks/bundle-DfzBeTAr.js'); require('../../chunks/bundle-DlPLN3bg.js'); require('../../chunks/bundle-CbBu6KFu.js'); require('../../chunks/bundle-ajPzzYnD.js'); require('@sendbird/chat/message'); require('@sendbird/uikit-tools'); require('../../chunks/bundle-BmFe2W3e.js'); function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; } var React__default = /*#__PURE__*/_interopDefaultCompat(React); var kFormatter = function (num) { return Math.abs(num) > 999 ? "".concat((Math.abs(num) / 1000).toFixed(1), "K") : num; }; var UserPanel = function () { var stringSet = LocalizationContext.useLocalization().stringSet; var _a = React.useState(false), showAccordion = _a[0], setShowAccordion = _a[1]; var channel = useChannelSettings.useChannelSettings().state.channel; return (React__default.default.createElement("div", { className: 'sendbird-channel-settings__user-panel' }, React__default.default.createElement("div", { className: [ 'sendbird-channel-settings__panel-item', 'sendbird-channel-settings__members', ].join(' '), role: "switch", "aria-checked": showAccordion, onKeyDown: function () { return setShowAccordion(!showAccordion); }, onClick: function () { return setShowAccordion(!showAccordion); }, tabIndex: 0 }, React__default.default.createElement(ui_Icon.default, { className: "sendbird-channel-settings__panel-icon-left", type: ui_Icon.IconTypes.MEMBERS, fillColor: ui_Icon.IconColors.PRIMARY, height: "24px", width: "24px" }), React__default.default.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.SUBTITLE_1, color: ui_Label.LabelColors.ONBACKGROUND_1 }, stringSet.CHANNEL_SETTING__MEMBERS__TITLE, React__default.default.createElement(ui_Badge, { className: 'sendbird-channel-settings__badge', count: channel ? kFormatter(channel === null || channel === void 0 ? void 0 : channel.memberCount) : '' })), React__default.default.createElement(ui_Icon.default, { className: [ 'sendbird-channel-settings__panel-icon-right', 'sendbird-channel-settings__panel-icon--chevron', (showAccordion ? 'sendbird-channel-settings__panel-icon--open' : ''), ].join(' '), type: ui_Icon.IconTypes.CHEVRON_RIGHT, height: "24px", width: "24px" })), showAccordion && (React__default.default.createElement(MemberList.MemberList, null)))); }; module.exports = UserPanel; //# sourceMappingURL=UserPanel.js.map