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-CJU8YwbS.js'); var LocalizationContext = require('../../chunks/bundle-CpTDlea1.js'); var ui_Badge = require('../../ui/Badge.js'); var ui_Label = require('../../chunks/bundle-BHzRqGq7.js'); var ui_Icon = require('../../ui/Icon.js'); var MemberList = require('../../chunks/bundle-BRqElheX.js'); require('../../chunks/bundle-t_oZmZ9n.js'); require('../../chunks/bundle-C8VvVV0P.js'); require('../../chunks/bundle-CJV1ehy9.js'); require('@sendbird/chat/groupChannel'); require('../../chunks/bundle-DOU45JCK.js'); require('../../chunks/bundle-D7LW79iA.js'); require('../../chunks/bundle-CFoLTSSR.js'); require('../../chunks/bundle-Dsi0B6WF.js'); require('../../chunks/bundle-Ca9F08jN.js'); require('@sendbird/chat'); require('@sendbird/chat/openChannel'); require('../../chunks/bundle-XZ8qGH7O.js'); require('../../chunks/bundle-mZOg8YmN.js'); require('../../ui/Button.js'); require('../../chunks/bundle-COP6DvmD.js'); require('../../chunks/bundle-DTHYr0GL.js'); require('react-dom'); require('../../ui/SortByRow.js'); require('../../ui/IconButton.js'); require('../../chunks/bundle-D-jQ3JP_.js'); require('../../utils/message/getOutgoingMessageState.js'); require('../../chunks/bundle-CiBS1Ovq.js'); require('../../chunks/bundle-D0vvN7I4.js'); require('../../chunks/bundle-CZ9HZzlb.js'); require('../../ui/UserListItem.js'); require('../../chunks/bundle-D604_AmM.js'); require('../../ui/ImageRenderer.js'); require('../../chunks/bundle-CcbqrlOG.js'); require('../../ui/MutedAvatarOverlay.js'); require('../../ui/Checkbox.js'); require('../../ui/UserProfile.js'); require('../../sendbirdSelectors.js'); require('../../chunks/bundle-Dq_3Fsbm.js'); require('../../chunks/bundle-YfPjtnJ0.js'); require('../../chunks/bundle-CTarVwtF.js'); require('../../chunks/bundle-CAYM7A1m.js'); require('../../chunks/bundle-w8GqiNwE.js'); require('@sendbird/chat/message'); require('@sendbird/uikit-tools'); require('../../chunks/bundle-Di0sonBU.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