@sendbird/uikit-react 3.0.0-beta.5 → 3.0.0-rc.1

package/OpenChannelSettings/components/OpenChannelSettingsUI.js

@@ -1,47 +1,47 @@
 import React__default, { useContext } from 'react';
 import useSendbirdStateContext from '../../useSendbirdStateContext.js';
-import { useOpenChannelSettings } from '../context.js';
-import { U as UserProfileProvider } from '../../UserProfileContext-90704c73.js';
-import { a as LocalizationContext } from '../../LocalizationContext-0e05ddca.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-e1b93b3a.js';
+import { useOpenChannelSettingsContext } from '../context.js';
+import { U as UserProfileProvider } from '../../UserProfileContext-bcfe2804.js';
+import { a as LocalizationContext } from '../../LocalizationContext-0293a3fd.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-5729e2f0.js';
 import Icon, { IconTypes } from '../../ui/Icon.js';
-import { P as PlaceHolder, b as PlaceHolderTypes } from '../../index-df459121.js';
+import { P as PlaceHolder, b as PlaceHolderTypes } from '../../index-03332d0e.js';
 import { OperatorUI } from './OperatorUI.js';
 import ParticipantsList from './ParticipantUI.js';
-import '../../withSendBird.js';
-import '../../_rollupPluginBabelHelpers-c7eeba03.js';
+import '../../withSendbird.js';
+import '../../_rollupPluginBabelHelpers-38569358.js';
 import 'prop-types';
-import '../../stringSet-6c9c68ae.js';
-import '../../index-e7c0bc26.js';
+import '../../stringSet-6bcac8f5.js';
+import '../../index-6924378b.js';
 import '../../ui/Loader.js';
 import './OpenChannelProfile.js';
 import '../../ui/TextButton.js';
-import '../../color-a3d3742c.js';
+import '../../color-8ef428b9.js';
 import '../../ui/OpenChannelAvatar.js';
 import '../../ui/Avatar.js';
-import '../../tslib.es6-61821688.js';
+import '../../tslib.es6-528d1472.js';
 import '../../ui/ImageRenderer.js';
-import '../../uuid-6e6389e2.js';
-import '../../utils-5e25aca3.js';
+import '../../uuid-ae0ebd46.js';
+import '../../utils-91321bf8.js';
 import './EditDetailsModal.js';
 import '../../ui/Modal.js';
 import 'react-dom';
-import '../../index-80e330a9.js';
+import '../../index-f6405407.js';
 import '../../ui/IconButton.js';
-import '../../index-f78ebc31.js';
-import '../../utils-4e85584a.js';
+import '../../index-b9a1f38d.js';
+import '../../utils-d0e53d6f.js';
 import '../../ui/Input.js';
 import '../../ui/Accordion.js';
 import '../../ui/AccordionGroup.js';
-import '../../context-ae164d45.js';
+import '../../context-64a89b1b.js';
 import '../../ui/UserListItem.js';
 import '../../ui/MutedAvatarOverlay.js';
 import '../../ui/Checkbox.js';
 import '../../ui/UserProfile.js';
-import '../../sendBirdSelectors.js';
-import '../../topics-d347c996.js';
+import '../../sendbirdSelectors.js';
+import '../../topics-997dc2ef.js';
 import '../../ui/ContextMenu.js';
-import '../../index-03baba6a.js';
+import '../../index-f1c7b834.js';
 import '../../ui/SortByRow.js';
 
 function InvalidChannel(_a) {
@@ -75,13 +75,14 @@ var OpenChannelUI = function OpenChannelUI(_a) {
   var renderOperatorUI = _a.renderOperatorUI,
       renderParticipantList = _a.renderParticipantList;
 
-  var _e = useOpenChannelSettings(),
+  var _e = useOpenChannelSettingsContext(),
       channel = _e.channel,
       _onCloseClick = _e.onCloseClick;
 
   var globalStore = useSendbirdStateContext();
   var logger = (_b = globalStore === null || globalStore === void 0 ? void 0 : globalStore.config) === null || _b === void 0 ? void 0 : _b.logger;
   var user = (_d = (_c = globalStore === null || globalStore === void 0 ? void 0 : globalStore.stores) === null || _c === void 0 ? void 0 : _c.userStore) === null || _d === void 0 ? void 0 : _d.user;
+  var stringSet = useContext(LocalizationContext).stringSet;
 
   if (!channel) {
     return /*#__PURE__*/React__default.createElement(InvalidChannel, {
@@ -95,9 +96,24 @@ var OpenChannelUI = function OpenChannelUI(_a) {
     });
   }
 
-  return /*#__PURE__*/React__default.createElement(UserProfileProvider, {
+  return /*#__PURE__*/React__default.createElement(UserProfileProvider, null, /*#__PURE__*/React__default.createElement("div", {
     className: "sendbird-openchannel-settings"
-  }, (channel === null || channel === void 0 ? void 0 : channel.isOperator(user)) && ((renderOperatorUI === null || renderOperatorUI === void 0 ? void 0 : renderOperatorUI()) || /*#__PURE__*/React__default.createElement(OperatorUI, null)), !(channel === null || channel === void 0 ? void 0 : channel.isOperator(user)) && ((renderParticipantList === null || renderParticipantList === void 0 ? void 0 : renderParticipantList()) || /*#__PURE__*/React__default.createElement(ParticipantsList, null)));
+  }, (channel === null || channel === void 0 ? void 0 : channel.isOperator(user)) && ((renderOperatorUI === null || renderOperatorUI === void 0 ? void 0 : renderOperatorUI()) || /*#__PURE__*/React__default.createElement(OperatorUI, null)), !(channel === null || channel === void 0 ? void 0 : channel.isOperator(user)) && /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-openchannel-settings__participant"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-openchannel-settings__header"
+  }, /*#__PURE__*/React__default.createElement(Label, {
+    type: LabelTypography.H_2,
+    color: LabelColors.ONBACKGROUND_1
+  }, stringSet.OPEN_CHANNEL_SETTINGS__PARTICIPANTS_TITLE), /*#__PURE__*/React__default.createElement(Icon, {
+    type: IconTypes.CLOSE,
+    className: "sendbird-openchannel-settings__close-icon",
+    height: "24px",
+    width: "24px",
+    onClick: function onClick() {
+      _onCloseClick();
+    }
+  })), (renderParticipantList === null || renderParticipantList === void 0 ? void 0 : renderParticipantList()) || /*#__PURE__*/React__default.createElement(ParticipantsList, null))));
 };
 
 export { OpenChannelUI as default };

package/OpenChannelSettings/components/OpenChannelSettingsUI.js.map

@@ -1 +1 @@
-{"version":3,"file":"OpenChannelSettingsUI.js","sources":["../../../src/smart-components/OpenChannelSettings/components/InvalidChannel.tsx","../../../src/smart-components/OpenChannelSettings/components/OpenChannelSettingsUI/index.tsx"],"sourcesContent":["import React, { ReactElement, useContext } from 'react'\n\nimport { LocalizationContext } from '../../../lib/LocalizationContext';\n\nimport Label, { LabelTypography, LabelColors } from '../../../ui/Label';\nimport Icon, { IconTypes } from '../../../ui/Icon';\n\nimport PlaceHolder from '../../../ui/PlaceHolder';\nimport PlaceHolderTypes from '../../../ui/PlaceHolder/type';\n\ninterface Props {\n  onCloseClick?(): void;\n}\n\nexport default function InvalidChannel({\n  onCloseClick,\n}: Props): ReactElement {\n  const { stringSet } = useContext(LocalizationContext);\n  return (\n    <div className=\"sendbird-openchannel-settings\">\n      <div className=\"sendbird-openchannel-settings__header\">\n        <Label type={LabelTypography.H_2} color={LabelColors.ONBACKGROUND_1}>\n          {stringSet.CHANNEL_SETTING__HEADER__TITLE}\n        </Label>\n        <Icon\n          type={IconTypes.CLOSE}\n          className=\"sendbird-openchannel-settings__close-icon\"\n          height=\"24px\"\n          width=\"24px\"\n          onClick={() => {\n            onCloseClick();\n          }}\n        />\n      </div>\n      <div className=\"sendbird-openchannel-settings__placeholder\">\n        <PlaceHolder type={PlaceHolderTypes.WRONG} />\n      </div>\n    </div>\n  )\n}\n","import React from 'react';\nimport useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';\nimport { useOpenChannelSettings } from '../../context/OpenChannelSettingsProvider';\nimport { UserProfileProvider } from '../../../../lib/UserProfileContext';\n\nimport InvalidChannel from '../InvalidChannel';\nimport OperatorUI from '../OperatorUI';\nimport ParticipantUI from '../ParticipantUI';\n\nexport interface OpenChannelUIProps {\n  renderOperatorUI?: () => React.ReactNode;\n  renderParticipantList?: () => React.ReactNode;\n}\n\nconst OpenChannelUI: React.FC<OpenChannelUIProps> = ({\n  renderOperatorUI,\n  renderParticipantList,\n}: OpenChannelUIProps) => {\n  const {\n    channel,\n    onCloseClick,\n  } = useOpenChannelSettings();\n  const globalStore = useSendbirdStateContext();\n  const logger = globalStore?.config?.logger;\n  const user = globalStore?.stores?.userStore?.user;\n\n  if (!channel) {\n    return (\n      <InvalidChannel\n        onCloseClick={() => {\n          logger.info('OpenChannelSettings: Click close');\n          if (onCloseClick) {\n            onCloseClick();\n          }\n        }}\n      />\n    );\n  }\n  return (\n    <UserProfileProvider\n      className=\"sendbird-openchannel-settings\"\n    >\n      {\n        channel?.isOperator(user) && (\n          renderOperatorUI?.() || (\n            <OperatorUI />\n          )\n        )\n      }\n      {\n        !(channel?.isOperator(user)) && (\n          renderParticipantList?.() || (\n            <ParticipantUI />\n          )\n        )\n      }\n    </UserProfileProvider>\n  )\n};\n\nexport default OpenChannelUI;\n"],"names":["InvalidChannel","_a","onCloseClick","stringSet","useContext","LocalizationContext","React","LabelTypography","H_2","LabelColors","ONBACKGROUND_1","CHANNEL_SETTING__HEADER__TITLE","IconTypes","CLOSE","PlaceHolderTypes","WRONG","OpenChannelUI","renderOperatorUI","renderParticipantList","_e","useOpenChannelSettings","channel","globalStore","useSendbirdStateContext","logger","config","user","stores","userStore","info","isOperator","ParticipantUI"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAcwBA,eAAeC;MACrCC,YAAY;AAEJ,MAAAC,SAAS,GAAKC,UAAU,CAACC,mBAAD,CAAV,UAAd;AACR,sBACEC;AAAK,IAAA,SAAS,EAAC;AAAf,kBACEA;AAAK,IAAA,SAAS,EAAC;AAAf,kBACEA,6BAAC,KAAD;AAAO,IAAA,IAAI,EAAEC,eAAe,CAACC,GAA7B;AAAkC,IAAA,KAAK,EAAEC,WAAW,CAACC;AAArD,KACGP,SAAS,CAACQ,8BADb,CADF,eAIEL,6BAAC,IAAD;AACE,IAAA,IAAI,EAAEM,SAAS,CAACC,KADlB;AAEE,IAAA,SAAS,EAAC,2CAFZ;AAGE,IAAA,MAAM,EAAC,MAHT;AAIE,IAAA,KAAK,EAAC,MAJR;AAKE,IAAA,OAAO,EAAE;AACPX,MAAAA,YAAY;AACb;AAPH,IAJF,CADF,eAeEI;AAAK,IAAA,SAAS,EAAC;AAAf,kBACEA,6BAAC,WAAD;AAAa,IAAA,IAAI,EAAEQ,gBAAgB,CAACC;AAApC,IADF,CAfF,CADF;AAqBD;;ICzBKC,aAAa,GAAiC,SAA9CA,aAA8C,CAACf,EAAD;;;MAClDgB,gBAAgB;MAChBC,qBAAqB;;AAEf,MAAAC,KAGFC,sBAAsB,EAHpB;AAAA,MACJC,OAAO,aADH;AAAA,MAEJnB,aAAY,kBAFR;;AAIN,MAAMoB,WAAW,GAAGC,uBAAuB,EAA3C;AACA,MAAMC,MAAM,GAAG,MAAAF,WAAW,SAAX,IAAAA,WAAW,WAAX,SAAA,GAAAA,WAAW,CAAEG,MAAb,UAAA,iBAAA,SAAA,MAAqBD,MAApC;AACA,MAAME,IAAI,GAAG,MAAA,MAAAJ,WAAW,SAAX,IAAAA,WAAW,WAAX,SAAA,GAAAA,WAAW,CAAEK,MAAb,UAAA,iBAAA,SAAA,MAAqBC,SAArB,UAAA,iBAAA,SAAA,MAAgCF,IAA7C;;AAEA,MAAI,CAACL,OAAL,EAAc;AACZ,wBACEf,6BAAC,cAAD;AACE,MAAA,YAAY,EAAE;AACZkB,QAAAA,MAAM,CAACK,IAAP,CAAY,kCAAZ;;AACA,YAAI3B,aAAJ,EAAkB;AAChBA,UAAAA,aAAY;AACb;AACF;AANH,MADF;AAUD;;AACD,sBACEI,6BAAC,mBAAD;AACE,IAAA,SAAS,EAAC;AADZ,KAII,CAAAe,OAAO,SAAP,IAAAA,OAAO,WAAP,SAAA,GAAAA,OAAO,CAAES,UAAT,CAAoBJ,IAApB,CAAA,MACE,CAAAT,gBAAgB,SAAhB,IAAAA,gBAAgB,WAAhB,SAAA,GAAAA,gBAAgB,EAAhB,kBACEX,6BAAC,UAAD,OAFJ,CAJJ,EAWI,EAAEe,OAAO,SAAP,IAAAA,OAAO,WAAP,SAAA,GAAAA,OAAO,CAAES,UAAT,CAAoBJ,IAApB,CAAF,MACE,CAAAR,qBAAqB,SAArB,IAAAA,qBAAqB,WAArB,SAAA,GAAAA,qBAAqB,EAArB,kBACEZ,6BAACyB,gBAAD,OAFJ,CAXJ,CADF;AAoBD;;;;"}
+{"version":3,"file":"OpenChannelSettingsUI.js","sources":["../../../src/smart-components/OpenChannelSettings/components/InvalidChannel.tsx","../../../src/smart-components/OpenChannelSettings/components/OpenChannelSettingsUI/index.tsx"],"sourcesContent":["import React, { ReactElement, useContext } from 'react'\n\nimport { LocalizationContext } from '../../../lib/LocalizationContext';\n\nimport Label, { LabelTypography, LabelColors } from '../../../ui/Label';\nimport Icon, { IconTypes } from '../../../ui/Icon';\n\nimport PlaceHolder from '../../../ui/PlaceHolder';\nimport PlaceHolderTypes from '../../../ui/PlaceHolder/type';\n\ninterface Props {\n  onCloseClick?(): void;\n}\n\nexport default function InvalidChannel({\n  onCloseClick,\n}: Props): ReactElement {\n  const { stringSet } = useContext(LocalizationContext);\n  return (\n    <div className=\"sendbird-openchannel-settings\">\n      <div className=\"sendbird-openchannel-settings__header\">\n        <Label type={LabelTypography.H_2} color={LabelColors.ONBACKGROUND_1}>\n          {stringSet.CHANNEL_SETTING__HEADER__TITLE}\n        </Label>\n        <Icon\n          type={IconTypes.CLOSE}\n          className=\"sendbird-openchannel-settings__close-icon\"\n          height=\"24px\"\n          width=\"24px\"\n          onClick={() => {\n            onCloseClick();\n          }}\n        />\n      </div>\n      <div className=\"sendbird-openchannel-settings__placeholder\">\n        <PlaceHolder type={PlaceHolderTypes.WRONG} />\n      </div>\n    </div>\n  )\n}\n","import './open-channel-ui.scss';\n\nimport React, { useContext } from 'react';\nimport useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';\nimport { useOpenChannelSettingsContext } from '../../context/OpenChannelSettingsProvider';\nimport { UserProfileProvider } from '../../../../lib/UserProfileContext';\nimport { LocalizationContext } from '../../../../lib/LocalizationContext';\n\nimport InvalidChannel from '../InvalidChannel';\nimport OperatorUI from '../OperatorUI';\nimport ParticipantUI from '../ParticipantUI';\n\nimport Label, { LabelTypography, LabelColors } from '../../../../ui/Label';\nimport Icon, { IconTypes } from '../../../../ui/Icon';\n\nexport interface OpenChannelUIProps {\n  renderOperatorUI?: () => React.ReactNode;\n  renderParticipantList?: () => React.ReactNode;\n}\n\nconst OpenChannelUI: React.FC<OpenChannelUIProps> = ({\n  renderOperatorUI,\n  renderParticipantList,\n}: OpenChannelUIProps) => {\n  const {\n    channel,\n    onCloseClick,\n  } = useOpenChannelSettingsContext();\n  const globalStore = useSendbirdStateContext();\n  const logger = globalStore?.config?.logger;\n  const user = globalStore?.stores?.userStore?.user;\n\n  const { stringSet } = useContext(LocalizationContext);\n  if (!channel) {\n    return (\n      <InvalidChannel\n        onCloseClick={() => {\n          logger.info('OpenChannelSettings: Click close');\n          if (onCloseClick) {\n            onCloseClick();\n          }\n        }}\n      />\n    );\n  }\n  return (\n    <UserProfileProvider>\n      <div className='sendbird-openchannel-settings'>\n        {\n          channel?.isOperator(user) && (\n            renderOperatorUI?.() || (\n              <OperatorUI />\n            )\n          )\n        }\n        {\n          !(channel?.isOperator(user)) && (\n            <div className=\"sendbird-openchannel-settings__participant\">\n              <div className=\"sendbird-openchannel-settings__header\">\n                <Label type={LabelTypography.H_2} color={LabelColors.ONBACKGROUND_1}>\n                  {stringSet.OPEN_CHANNEL_SETTINGS__PARTICIPANTS_TITLE}\n                </Label>\n                <Icon\n                  type={IconTypes.CLOSE}\n                  className=\"sendbird-openchannel-settings__close-icon\"\n                  height=\"24px\"\n                  width=\"24px\"\n                  onClick={() => {\n                    onCloseClick();\n                  }}\n                />\n              </div>\n              {\n                renderParticipantList?.() || (\n                  <ParticipantUI />\n                )\n              }\n            </div>\n          )\n        }\n      </div>\n    </UserProfileProvider>\n  )\n};\n\nexport default OpenChannelUI;\n"],"names":["InvalidChannel","_a","onCloseClick","stringSet","useContext","LocalizationContext","React","LabelTypography","H_2","LabelColors","ONBACKGROUND_1","CHANNEL_SETTING__HEADER__TITLE","IconTypes","CLOSE","PlaceHolderTypes","WRONG","OpenChannelUI","renderOperatorUI","renderParticipantList","_e","useOpenChannelSettingsContext","channel","globalStore","useSendbirdStateContext","logger","config","user","stores","userStore","info","isOperator","OPEN_CHANNEL_SETTINGS__PARTICIPANTS_TITLE","ParticipantUI"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAcwBA,eAAeC;MACrCC,YAAY;AAEJ,MAAAC,SAAS,GAAKC,UAAU,CAACC,mBAAD,CAAV,UAAd;AACR,sBACEC;AAAK,IAAA,SAAS,EAAC;AAAf,kBACEA;AAAK,IAAA,SAAS,EAAC;AAAf,kBACEA,6BAAC,KAAD;AAAO,IAAA,IAAI,EAAEC,eAAe,CAACC,GAA7B;AAAkC,IAAA,KAAK,EAAEC,WAAW,CAACC;AAArD,KACGP,SAAS,CAACQ,8BADb,CADF,eAIEL,6BAAC,IAAD;AACE,IAAA,IAAI,EAAEM,SAAS,CAACC,KADlB;AAEE,IAAA,SAAS,EAAC,2CAFZ;AAGE,IAAA,MAAM,EAAC,MAHT;AAIE,IAAA,KAAK,EAAC,MAJR;AAKE,IAAA,OAAO,EAAE;AACPX,MAAAA,YAAY;AACb;AAPH,IAJF,CADF,eAeEI;AAAK,IAAA,SAAS,EAAC;AAAf,kBACEA,6BAAC,WAAD;AAAa,IAAA,IAAI,EAAEQ,gBAAgB,CAACC;AAApC,IADF,CAfF,CADF;AAqBD;;ICnBKC,aAAa,GAAiC,SAA9CA,aAA8C,CAACf,EAAD;;;MAClDgB,gBAAgB;MAChBC,qBAAqB;;AAEf,MAAAC,KAGFC,6BAA6B,EAH3B;AAAA,MACJC,OAAO,aADH;AAAA,MAEJnB,aAAY,kBAFR;;AAIN,MAAMoB,WAAW,GAAGC,uBAAuB,EAA3C;AACA,MAAMC,MAAM,GAAG,MAAAF,WAAW,SAAX,IAAAA,WAAW,WAAX,SAAA,GAAAA,WAAW,CAAEG,MAAb,UAAA,iBAAA,SAAA,MAAqBD,MAApC;AACA,MAAME,IAAI,GAAG,MAAA,MAAAJ,WAAW,SAAX,IAAAA,WAAW,WAAX,SAAA,GAAAA,WAAW,CAAEK,MAAb,UAAA,iBAAA,SAAA,MAAqBC,SAArB,UAAA,iBAAA,SAAA,MAAgCF,IAA7C;AAEQ,MAAAvB,SAAS,GAAKC,UAAU,CAACC,mBAAD,CAAV,UAAd;;AACR,MAAI,CAACgB,OAAL,EAAc;AACZ,wBACEf,6BAAC,cAAD;AACE,MAAA,YAAY,EAAE;AACZkB,QAAAA,MAAM,CAACK,IAAP,CAAY,kCAAZ;;AACA,YAAI3B,aAAJ,EAAkB;AAChBA,UAAAA,aAAY;AACb;AACF;AANH,MADF;AAUD;;AACD,sBACEI,6BAAC,mBAAD,qBACEA;AAAK,IAAA,SAAS,EAAC;AAAf,KAEI,CAAAe,OAAO,SAAP,IAAAA,OAAO,WAAP,SAAA,GAAAA,OAAO,CAAES,UAAT,CAAoBJ,IAApB,CAAA,MACE,CAAAT,gBAAgB,SAAhB,IAAAA,gBAAgB,WAAhB,SAAA,GAAAA,gBAAgB,EAAhB,kBACEX,6BAAC,UAAD,OAFJ,CAFJ,EASI,EAAEe,OAAO,SAAP,IAAAA,OAAO,WAAP,SAAA,GAAAA,OAAO,CAAES,UAAT,CAAoBJ,IAApB,CAAF,kBACEpB;AAAK,IAAA,SAAS,EAAC;AAAf,kBACEA;AAAK,IAAA,SAAS,EAAC;AAAf,kBACEA,6BAAC,KAAD;AAAO,IAAA,IAAI,EAAEC,eAAe,CAACC,GAA7B;AAAkC,IAAA,KAAK,EAAEC,WAAW,CAACC;AAArD,KACGP,SAAS,CAAC4B,yCADb,CADF,eAIEzB,6BAAC,IAAD;AACE,IAAA,IAAI,EAAEM,SAAS,CAACC,KADlB;AAEE,IAAA,SAAS,EAAC,2CAFZ;AAGE,IAAA,MAAM,EAAC,MAHT;AAIE,IAAA,KAAK,EAAC,MAJR;AAKE,IAAA,OAAO,EAAE;AACPX,MAAAA,aAAY;AACb;AAPH,IAJF,CADF,EAgBI,CAAAgB,qBAAqB,SAArB,IAAAA,qBAAqB,WAArB,SAAA,GAAAA,qBAAqB,EAArB,kBACEZ,6BAAC0B,gBAAD,OAjBN,CAVN,CADF,CADF;AAsCD;;;;"}

package/OpenChannelSettings/components/OperatorUI.js

@@ -1,43 +1,43 @@
 import React__default, { useState, useContext } from 'react';
-import { a as LocalizationContext } from '../../LocalizationContext-0e05ddca.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-e1b93b3a.js';
-import Icon, { IconTypes } from '../../ui/Icon.js';
-import { useOpenChannelSettings } from '../context.js';
+import { a as LocalizationContext } from '../../LocalizationContext-0293a3fd.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-5729e2f0.js';
+import Icon, { IconTypes, IconColors } from '../../ui/Icon.js';
+import { useOpenChannelSettingsContext } from '../context.js';
 import ChannelProfile from './OpenChannelProfile.js';
 import Modal from '../../ui/Modal.js';
 import useSendbirdStateContext from '../../useSendbirdStateContext.js';
 import ParticipantsList from './ParticipantUI.js';
-import { AccordionGroup } from '../../ui/Accordion.js';
-import '../../stringSet-6c9c68ae.js';
-import '../../index-e7c0bc26.js';
-import '../../_rollupPluginBabelHelpers-c7eeba03.js';
+import Accordion, { AccordionGroup } from '../../ui/Accordion.js';
+import '../../stringSet-6bcac8f5.js';
+import '../../index-6924378b.js';
+import '../../_rollupPluginBabelHelpers-38569358.js';
 import 'prop-types';
-import '../../UserProfileContext-90704c73.js';
-import '../../withSendBird.js';
+import '../../UserProfileContext-bcfe2804.js';
+import '../../withSendbird.js';
 import '../../ui/TextButton.js';
-import '../../color-a3d3742c.js';
+import '../../color-8ef428b9.js';
 import '../../ui/OpenChannelAvatar.js';
 import '../../ui/Avatar.js';
-import '../../tslib.es6-61821688.js';
+import '../../tslib.es6-528d1472.js';
 import '../../ui/ImageRenderer.js';
-import '../../uuid-6e6389e2.js';
-import '../../utils-5e25aca3.js';
+import '../../uuid-ae0ebd46.js';
+import '../../utils-91321bf8.js';
 import './EditDetailsModal.js';
 import '../../ui/Input.js';
-import '../../index-f78ebc31.js';
+import '../../index-b9a1f38d.js';
 import 'react-dom';
-import '../../index-80e330a9.js';
+import '../../index-f6405407.js';
 import '../../ui/IconButton.js';
-import '../../utils-4e85584a.js';
-import '../../context-ae164d45.js';
+import '../../utils-d0e53d6f.js';
+import '../../context-64a89b1b.js';
 import '../../ui/UserListItem.js';
 import '../../ui/MutedAvatarOverlay.js';
 import '../../ui/Checkbox.js';
 import '../../ui/UserProfile.js';
-import '../../sendBirdSelectors.js';
-import '../../topics-d347c996.js';
+import '../../sendbirdSelectors.js';
+import '../../topics-997dc2ef.js';
 import '../../ui/ContextMenu.js';
-import '../../index-03baba6a.js';
+import '../../index-f1c7b834.js';
 import '../../ui/SortByRow.js';
 import '../../ui/AccordionGroup.js';
 
@@ -53,27 +53,24 @@ function DeleteChannel() {
   var isOnline = (_a = globalState === null || globalState === void 0 ? void 0 : globalState.config) === null || _a === void 0 ? void 0 : _a.isOnline;
   var logger = (_b = globalState === null || globalState === void 0 ? void 0 : globalState.config) === null || _b === void 0 ? void 0 : _b.logger;
 
-  var _d = useOpenChannelSettings(),
+  var _d = useOpenChannelSettingsContext(),
       channel = _d.channel,
       onDeleteChannel = _d.onDeleteChannel;
 
   var deleteChannel = function deleteChannel() {
-    channel === null || channel === void 0 ? void 0 : channel.delete(function (response, error) {
-      if (error) {
-        logger.warning('OpenChannelSettings: Delete channel failed', error);
-        return;
-      }
-
+    channel === null || channel === void 0 ? void 0 : channel.delete().then(function (response) {
       logger.info('OpenChannelSettings: Delete channel success', response);
 
       if (onDeleteChannel) {
         onDeleteChannel(channel);
       }
+    }).catch(function (error) {
+      logger.warning('OpenChannelSettings: Delete channel failed', error);
     });
   };
 
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-    className: "sendbird-openchannel-settings__panel-item\n          sendbird-openchannel-settings__delete-channel\n            " + (!isOnline ? 'sendbird-openchannel-settings__panel-item__disabled' : ''),
+    className: "sendbird-openchannel-settings__panel-item\n          sendbird-openchannel-settings__delete-channel\n            ".concat(!isOnline ? 'sendbird-openchannel-settings__panel-item__disabled' : ''),
     role: "button",
     tabIndex: 0,
     onKeyDown: function onKeyDown() {
@@ -141,7 +138,7 @@ var OperatorUI = function OperatorUI(_a) {
   var renderChannelProfile = _a.renderChannelProfile;
   var stringSet = useContext(LocalizationContext).stringSet;
 
-  var _b = useOpenChannelSettings(),
+  var _b = useOpenChannelSettingsContext(),
       onCloseClick = _b.onCloseClick,
       channel = _b.channel;
 
@@ -177,7 +174,25 @@ var OperatorUI = function OperatorUI(_a) {
   }, stringSet.OPEN_CHANNEL_SETTINGS__OPERATOR_URL), /*#__PURE__*/React__default.createElement(Label, {
     className: "sendbird-openchannel-settings__url-value",
     type: LabelTypography.SUBTITLE_2
-  }, channel === null || channel === void 0 ? void 0 : channel.url)), /*#__PURE__*/React__default.createElement(AccordionGroup, null, /*#__PURE__*/React__default.createElement(ParticipantsList, null)), /*#__PURE__*/React__default.createElement(DeleteChannel, null));
+  }, channel === null || channel === void 0 ? void 0 : channel.url)), /*#__PURE__*/React__default.createElement(AccordionGroup, null, /*#__PURE__*/React__default.createElement(Accordion, {
+    className: "sendbird-channel-settings__operators-list",
+    id: "participants",
+    renderTitle: function renderTitle() {
+      return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Icon, {
+        type: IconTypes.MEMBERS,
+        fillColor: IconColors.PRIMARY,
+        width: 24,
+        height: 24,
+        className: "sendbird-openchannel-settings__operator-accordion-icon"
+      }), /*#__PURE__*/React__default.createElement(Label, {
+        type: LabelTypography.SUBTITLE_1,
+        color: LabelColors.ONBACKGROUND_1
+      }, stringSet.OPEN_CHANNEL_SETTINGS__PARTICIPANTS_ACCORDION_TITLE));
+    },
+    renderContent: function renderContent() {
+      return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ParticipantsList, null));
+    }
+  })), /*#__PURE__*/React__default.createElement(DeleteChannel, null));
 };
 
 export { OperatorUI, copyToClipboard, OperatorUI as default };

package/OpenChannelSettings/components/OperatorUI.js.map

@@ -1 +1 @@
-{"version":3,"file":"OperatorUI.js","sources":["../../../src/smart-components/OpenChannelSettings/components/DeleteOpenChannel.tsx","../../../src/smart-components/OpenChannelSettings/components/OperatorUI/index.tsx"],"sourcesContent":["import React, {\n  ReactElement,\n  useState,\n  useContext,\n} from 'react';\n\nimport Modal from '../../../ui/Modal';\nimport Label, { LabelTypography, LabelColors } from '../../../ui/Label';\nimport Icon, { IconTypes } from '../../../ui/Icon';\nimport { LocalizationContext } from '../../../lib/LocalizationContext';\nimport useSendbirdStateContext from '../../../hooks/useSendbirdStateContext';\nimport { useOpenChannelSettings } from '../context/OpenChannelSettingsProvider';\n\nexport default function DeleteChannel(): ReactElement {\n  const [showDeleteChannelModal, setShowDeleteChannelModal] = useState(false);\n  const { stringSet } = useContext(LocalizationContext);\n  const globalState = useSendbirdStateContext();\n  const isOnline = globalState?.config?.isOnline;\n  const logger = globalState?.config?.logger;\n\n  const { channel, onDeleteChannel } = useOpenChannelSettings();\n\n  const deleteChannel = () => {\n    channel?.delete((response, error) => {\n      if (error) {\n        logger.warning('OpenChannelSettings: Delete channel failed', error);\n        return;\n      }\n      logger.info('OpenChannelSettings: Delete channel success', response);\n      if (onDeleteChannel) {\n        onDeleteChannel(channel);\n      }\n    });\n  }\n  return (\n    <>\n      <div\n        className={\n          `sendbird-openchannel-settings__panel-item\n          sendbird-openchannel-settings__delete-channel\n            ${!isOnline ? 'sendbird-openchannel-settings__panel-item__disabled' : ''}`\n        }\n        role=\"button\"\n        tabIndex={0}\n        onKeyDown={() => {\n          if (!isOnline) { return; }\n          setShowDeleteChannelModal(true);\n        }}\n        onClick={() => {\n          if (!isOnline) { return; }\n          setShowDeleteChannelModal(true);\n        }}\n      >\n        <Icon\n          type={IconTypes.DELETE}\n          className={[\n            'sendbird-openchannel-settings__panel-icon-left',\n            'sendbird-openchannel-settings__panel-icon__delete',\n          ].join(' ')}\n          height=\"24px\"\n          width=\"24px\"\n        />\n        <Label\n          type={LabelTypography.SUBTITLE_1}\n          color={LabelColors.ONBACKGROUND_1}\n        >\n          {stringSet.OPEN_CHANNEL_SETTINGS__DELETE_CHANNEL_PANEL}\n        </Label>\n      </div>\n      {\n        showDeleteChannelModal && (\n          <Modal\n            onCancel={() => {\n              setShowDeleteChannelModal(false);\n            }}\n            onSubmit={() => {\n              deleteChannel();\n            }}\n            submitText={stringSet.OPEN_CHANNEL_SETTINGS__DELETE_CHANNEL_SUBMIT}\n            titleText={stringSet.OPEN_CHANNEL_SETTINGS__DELETE_CHANNEL_TITLE}\n          />\n        )\n      }\n    </>\n  )\n}\n","import React, { useContext } from 'react';\nimport { LocalizationContext } from '../../../../lib/LocalizationContext';\n\nimport Label, {\n  LabelTypography,\n  LabelColors,\n} from '../../../../ui/Label';\nimport Icon, {\n  IconTypes,\n} from '../../../../ui/Icon';\nimport { useOpenChannelSettings } from '../../context/OpenChannelSettingsProvider';\nimport OpenChannelProfile from '../OpenChannelProfile';\nimport DeleteChannel from '../DeleteOpenChannel';\nimport ParticipantsAccordion from '../ParticipantUI';\nimport { AccordionGroup } from '../../../../ui/Accordion';\n\nexport const copyToClipboard = (text: string): boolean => {\n  // @ts-ignore: Unreachable code error\n  if (window.clipboardData && window.clipboardData.setData) {\n    // Internet Explorer-specific code path to prevent textarea being shown while dialog is visible.\n    // @ts-ignore: Unreachable code error\n    return window.clipboardData.setData('Text', text);\n  }\n  if (document.queryCommandSupported && document.queryCommandSupported('copy')) {\n    const textarea = document.createElement('textarea');\n    textarea.textContent = text;\n    textarea.style.position = 'fixed'; // Prevent scrolling to bottom of page in Microsoft Edge.\n    document.body.appendChild(textarea);\n    textarea.select();\n    try {\n      return document.execCommand('copy'); // Security exception may be thrown by some browsers.\n    } catch (ex) {\n      return false;\n    } finally {\n      document.body.removeChild(textarea);\n    }\n  }\n  return false;\n};\n\nexport interface OperatorUIProps {\n  renderChannelProfile?: () => React.ReactNode;\n}\n\nexport const OperatorUI: React.FC<OperatorUIProps> = ({\n  renderChannelProfile,\n}: OperatorUIProps) => {\n  const { stringSet } = useContext(LocalizationContext);\n  const {\n    onCloseClick,\n    channel,\n  } = useOpenChannelSettings();\n  return (\n    <>\n      <div className=\"sendbird-openchannel-settings__header\">\n        <Label type={LabelTypography.H_2} color={LabelColors.ONBACKGROUND_1}>\n          {stringSet.CHANNEL_SETTING__HEADER__TITLE}\n        </Label>\n        <Icon\n          className=\"sendbird-openchannel-settings__close-icon\"\n          type={IconTypes.CLOSE}\n          height=\"24px\"\n          width=\"24px\"\n          onClick={() => {\n            onCloseClick();\n          }}\n        />\n      </div>\n      <div className=\"sendbird-openchannel-settings__profile\">\n        {\n          renderChannelProfile?.() || (\n            <OpenChannelProfile />\n          )\n        }\n      </div>\n      <div className=\"sendbird-openchannel-settings__url\">\n        <Icon\n          className=\"sendbird-openchannel-settings__copy-icon\"\n          type={IconTypes.COPY}\n          height=\"22px\"\n          width=\"22px\"\n          onClick={() => {\n            copyToClipboard(channel?.url);\n          }}\n        />\n        <Label\n          className=\"sendbird-openchannel-settings__url-label\"\n          type={LabelTypography.CAPTION_2}\n          color={LabelColors.ONBACKGROUND_2}\n        >\n          {stringSet.OPEN_CHANNEL_SETTINGS__OPERATOR_URL}\n        </Label>\n        <Label\n          className=\"sendbird-openchannel-settings__url-value\"\n          type={LabelTypography.SUBTITLE_2}\n        >\n          {channel?.url}\n        </Label>\n      </div>\n      <AccordionGroup>\n        <ParticipantsAccordion />\n      </AccordionGroup>\n      <DeleteChannel />\n    </>\n  );\n};\n\nexport default OperatorUI;\n"],"names":["DeleteChannel","_c","useState","showDeleteChannelModal","setShowDeleteChannelModal","stringSet","useContext","LocalizationContext","globalState","useSendbirdStateContext","isOnline","config","logger","_d","useOpenChannelSettings","channel","onDeleteChannel","deleteChannel","delete","response","error","warning","info","React","IconTypes","DELETE","join","LabelTypography","SUBTITLE_1","LabelColors","ONBACKGROUND_1","OPEN_CHANNEL_SETTINGS__DELETE_CHANNEL_PANEL","OPEN_CHANNEL_SETTINGS__DELETE_CHANNEL_SUBMIT","OPEN_CHANNEL_SETTINGS__DELETE_CHANNEL_TITLE","copyToClipboard","text","window","clipboardData","setData","document","queryCommandSupported","textarea","createElement","textContent","style","position","body","appendChild","select","execCommand","ex","removeChild","OperatorUI","_a","renderChannelProfile","_b","onCloseClick","H_2","CHANNEL_SETTING__HEADER__TITLE","CLOSE","OpenChannelProfile","COPY","url","CAPTION_2","ONBACKGROUND_2","OPEN_CHANNEL_SETTINGS__OPERATOR_URL","SUBTITLE_2","ParticipantsAccordion"],"mappings":"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"}
+{"version":3,"file":"OperatorUI.js","sources":["../../../src/smart-components/OpenChannelSettings/components/DeleteOpenChannel.tsx","../../../src/smart-components/OpenChannelSettings/components/OperatorUI/index.tsx"],"sourcesContent":["import React, {\n  ReactElement,\n  useState,\n  useContext,\n} from 'react';\n\nimport Modal from '../../../ui/Modal';\nimport Label, { LabelTypography, LabelColors } from '../../../ui/Label';\nimport Icon, { IconTypes } from '../../../ui/Icon';\nimport { LocalizationContext } from '../../../lib/LocalizationContext';\nimport useSendbirdStateContext from '../../../hooks/useSendbirdStateContext';\nimport { useOpenChannelSettingsContext } from '../context/OpenChannelSettingsProvider';\n\nexport default function DeleteChannel(): ReactElement {\n  const [showDeleteChannelModal, setShowDeleteChannelModal] = useState(false);\n  const { stringSet } = useContext(LocalizationContext);\n  const globalState = useSendbirdStateContext();\n  const isOnline = globalState?.config?.isOnline;\n  const logger = globalState?.config?.logger;\n\n  const { channel, onDeleteChannel } = useOpenChannelSettingsContext();\n\n  const deleteChannel = () => {\n    channel?.delete().then((response) => {\n      logger.info('OpenChannelSettings: Delete channel success', response);\n      if (onDeleteChannel) {\n        onDeleteChannel(channel);\n      }\n    }).catch((error) => {\n      logger.warning('OpenChannelSettings: Delete channel failed', error);\n    });\n  }\n  return (\n    <>\n      <div\n        className={\n          `sendbird-openchannel-settings__panel-item\n          sendbird-openchannel-settings__delete-channel\n            ${!isOnline ? 'sendbird-openchannel-settings__panel-item__disabled' : ''}`\n        }\n        role=\"button\"\n        tabIndex={0}\n        onKeyDown={() => {\n          if (!isOnline) { return; }\n          setShowDeleteChannelModal(true);\n        }}\n        onClick={() => {\n          if (!isOnline) { return; }\n          setShowDeleteChannelModal(true);\n        }}\n      >\n        <Icon\n          type={IconTypes.DELETE}\n          className={[\n            'sendbird-openchannel-settings__panel-icon-left',\n            'sendbird-openchannel-settings__panel-icon__delete',\n          ].join(' ')}\n          height=\"24px\"\n          width=\"24px\"\n        />\n        <Label\n          type={LabelTypography.SUBTITLE_1}\n          color={LabelColors.ONBACKGROUND_1}\n        >\n          {stringSet.OPEN_CHANNEL_SETTINGS__DELETE_CHANNEL_PANEL}\n        </Label>\n      </div>\n      {\n        showDeleteChannelModal && (\n          <Modal\n            onCancel={() => {\n              setShowDeleteChannelModal(false);\n            }}\n            onSubmit={() => {\n              deleteChannel();\n            }}\n            submitText={stringSet.OPEN_CHANNEL_SETTINGS__DELETE_CHANNEL_SUBMIT}\n            titleText={stringSet.OPEN_CHANNEL_SETTINGS__DELETE_CHANNEL_TITLE}\n          />\n        )\n      }\n    </>\n  )\n}\n","import React, { useContext } from 'react';\nimport { LocalizationContext } from '../../../../lib/LocalizationContext';\n\nimport Label, {\n  LabelTypography,\n  LabelColors,\n} from '../../../../ui/Label';\nimport Icon, {\n  IconTypes,\n  IconColors,\n} from '../../../../ui/Icon';\nimport { useOpenChannelSettingsContext } from '../../context/OpenChannelSettingsProvider';\nimport OpenChannelProfile from '../OpenChannelProfile';\nimport DeleteChannel from '../DeleteOpenChannel';\nimport ParticipantsAccordion from '../ParticipantUI';\nimport Accordion, { AccordionGroup } from '../../../../ui/Accordion';\n\nexport const copyToClipboard = (text: string): boolean => {\n  // @ts-ignore: Unreachable code error\n  if (window.clipboardData && window.clipboardData.setData) {\n    // Internet Explorer-specific code path to prevent textarea being shown while dialog is visible.\n    // @ts-ignore: Unreachable code error\n    return window.clipboardData.setData('Text', text);\n  }\n  if (document.queryCommandSupported && document.queryCommandSupported('copy')) {\n    const textarea = document.createElement('textarea');\n    textarea.textContent = text;\n    textarea.style.position = 'fixed'; // Prevent scrolling to bottom of page in Microsoft Edge.\n    document.body.appendChild(textarea);\n    textarea.select();\n    try {\n      return document.execCommand('copy'); // Security exception may be thrown by some browsers.\n    } catch (ex) {\n      return false;\n    } finally {\n      document.body.removeChild(textarea);\n    }\n  }\n  return false;\n};\n\nexport interface OperatorUIProps {\n  renderChannelProfile?: () => React.ReactNode;\n}\n\nexport const OperatorUI: React.FC<OperatorUIProps> = ({\n  renderChannelProfile,\n}: OperatorUIProps) => {\n  const { stringSet } = useContext(LocalizationContext);\n  const {\n    onCloseClick,\n    channel,\n  } = useOpenChannelSettingsContext();\n  return (\n    <>\n      <div className=\"sendbird-openchannel-settings__header\">\n        <Label type={LabelTypography.H_2} color={LabelColors.ONBACKGROUND_1}>\n          {stringSet.CHANNEL_SETTING__HEADER__TITLE}\n        </Label>\n        <Icon\n          className=\"sendbird-openchannel-settings__close-icon\"\n          type={IconTypes.CLOSE}\n          height=\"24px\"\n          width=\"24px\"\n          onClick={() => {\n            onCloseClick();\n          }}\n        />\n      </div>\n      <div className=\"sendbird-openchannel-settings__profile\">\n        {\n          renderChannelProfile?.() || (\n            <OpenChannelProfile />\n          )\n        }\n      </div>\n      <div className=\"sendbird-openchannel-settings__url\">\n        <Icon\n          className=\"sendbird-openchannel-settings__copy-icon\"\n          type={IconTypes.COPY}\n          height=\"22px\"\n          width=\"22px\"\n          onClick={() => {\n            copyToClipboard(channel?.url);\n          }}\n        />\n        <Label\n          className=\"sendbird-openchannel-settings__url-label\"\n          type={LabelTypography.CAPTION_2}\n          color={LabelColors.ONBACKGROUND_2}\n        >\n          {stringSet.OPEN_CHANNEL_SETTINGS__OPERATOR_URL}\n        </Label>\n        <Label\n          className=\"sendbird-openchannel-settings__url-value\"\n          type={LabelTypography.SUBTITLE_2}\n        >\n          {channel?.url}\n        </Label>\n      </div>\n      <AccordionGroup>\n        <Accordion\n          className=\"sendbird-channel-settings__operators-list\"\n          id=\"participants\"\n          renderTitle={() => (\n            <>\n              <Icon\n                type={IconTypes.MEMBERS}\n                fillColor={IconColors.PRIMARY}\n                width={24}\n                height={24}\n                className=\"sendbird-openchannel-settings__operator-accordion-icon\"\n              />\n              <Label\n                type={LabelTypography.SUBTITLE_1}\n                color={LabelColors.ONBACKGROUND_1}\n              >\n                {stringSet.OPEN_CHANNEL_SETTINGS__PARTICIPANTS_ACCORDION_TITLE}\n              </Label>\n            </>\n          )}\n          renderContent={() => (\n            <>\n              <ParticipantsAccordion />\n            </>\n          )}\n        />\n      </AccordionGroup>\n      <DeleteChannel />\n    </>\n  );\n};\n\nexport default OperatorUI;\n"],"names":["DeleteChannel","_c","useState","showDeleteChannelModal","setShowDeleteChannelModal","stringSet","useContext","LocalizationContext","globalState","useSendbirdStateContext","isOnline","config","logger","_d","useOpenChannelSettingsContext","channel","onDeleteChannel","deleteChannel","delete","then","response","info","catch","error","warning","React","IconTypes","DELETE","join","LabelTypography","SUBTITLE_1","LabelColors","ONBACKGROUND_1","OPEN_CHANNEL_SETTINGS__DELETE_CHANNEL_PANEL","OPEN_CHANNEL_SETTINGS__DELETE_CHANNEL_SUBMIT","OPEN_CHANNEL_SETTINGS__DELETE_CHANNEL_TITLE","copyToClipboard","text","window","clipboardData","setData","document","queryCommandSupported","textarea","createElement","textContent","style","position","body","appendChild","select","execCommand","ex","removeChild","OperatorUI","_a","renderChannelProfile","_b","onCloseClick","H_2","CHANNEL_SETTING__HEADER__TITLE","CLOSE","OpenChannelProfile","COPY","url","CAPTION_2","ONBACKGROUND_2","OPEN_CHANNEL_SETTINGS__OPERATOR_URL","SUBTITLE_2","MEMBERS","IconColors","PRIMARY","OPEN_CHANNEL_SETTINGS__PARTICIPANTS_ACCORDION_TITLE","ParticipantsAccordion"],"mappings":"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"}

package/OpenChannelSettings/components/ParticipantUI.js

@@ -1,34 +1,34 @@
-import { a as __spreadArray } from '../../tslib.es6-61821688.js';
+import { a as __spreadArray } from '../../tslib.es6-528d1472.js';
 import React__default, { useRef, useContext, useState, useEffect } from 'react';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-e1b93b3a.js';
-import Icon, { IconTypes } from '../../ui/Icon.js';
-import { a as LocalizationContext } from '../../LocalizationContext-0e05ddca.js';
-import { a as UserProfileContext } from '../../UserProfileContext-90704c73.js';
-import '../../index-f78ebc31.js';
-import '../../context-ae164d45.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-5729e2f0.js';
+import { a as LocalizationContext } from '../../LocalizationContext-0293a3fd.js';
+import { a as UserProfileContext } from '../../UserProfileContext-bcfe2804.js';
+import '../../index-b9a1f38d.js';
+import '../../ui/Icon.js';
+import '../../context-64a89b1b.js';
 import Avatar from '../../ui/Avatar.js';
 import '../../ui/Modal.js';
 import '../../ui/UserListItem.js';
 import ConnectedUserProfile from '../../ui/UserProfile.js';
 import ContextMenu, { MenuItems } from '../../ui/ContextMenu.js';
-import { useOpenChannelSettings } from '../context.js';
+import { useOpenChannelSettingsContext } from '../context.js';
 import useSendbirdStateContext from '../../useSendbirdStateContext.js';
-import '../../_rollupPluginBabelHelpers-c7eeba03.js';
+import '../../_rollupPluginBabelHelpers-38569358.js';
 import 'prop-types';
-import '../../stringSet-6c9c68ae.js';
-import '../../index-e7c0bc26.js';
-import '../../utils-4e85584a.js';
+import '../../stringSet-6bcac8f5.js';
+import '../../index-6924378b.js';
+import '../../utils-d0e53d6f.js';
 import '../../ui/ImageRenderer.js';
-import '../../uuid-6e6389e2.js';
+import '../../uuid-ae0ebd46.js';
 import 'react-dom';
-import '../../index-80e330a9.js';
+import '../../index-f6405407.js';
 import '../../ui/IconButton.js';
 import '../../ui/MutedAvatarOverlay.js';
 import '../../ui/Checkbox.js';
-import '../../withSendBird.js';
-import '../../sendBirdSelectors.js';
-import '../../topics-d347c996.js';
-import '../../index-03baba6a.js';
+import '../../withSendbird.js';
+import '../../sendbirdSelectors.js';
+import '../../topics-997dc2ef.js';
+import '../../index-f1c7b834.js';
 import '../../ui/SortByRow.js';
 
 var UserListItem = function UserListItem(_a) {
@@ -93,52 +93,29 @@ function ParticipantsList() {
 
   var globalState = useSendbirdStateContext();
   var currentUser = (_a = globalState === null || globalState === void 0 ? void 0 : globalState.config) === null || _a === void 0 ? void 0 : _a.userId;
-
-  var _b = useOpenChannelSettings(),
-      channel = _b.channel,
-      onCloseClick = _b.onCloseClick;
-
+  var channel = useOpenChannelSettingsContext().channel;
   var stringSet = useContext(LocalizationContext).stringSet;
 
-  var _c = useState([]),
-      participants = _c[0],
-      setParticipants = _c[1];
+  var _b = useState([]),
+      participants = _b[0],
+      setParticipants = _b[1];
 
-  var _d = useState(null),
-      participantListQuery = _d[0],
-      setParticipantListQuery = _d[1];
+  var _c = useState(null),
+      participantListQuery = _c[0],
+      setParticipantListQuery = _c[1];
 
   useEffect(function () {
-    if (!channel || !channel.createParticipantListQuery) {
+    if (!channel || !(channel === null || channel === void 0 ? void 0 : channel.createParticipantListQuery)) {
       return;
     }
 
-    var participantListQuery = channel.createParticipantListQuery();
+    var participantListQuery = channel === null || channel === void 0 ? void 0 : channel.createParticipantListQuery({});
     setParticipantListQuery(participantListQuery);
-    participantListQuery.next(function (participantList, error) {
-      if (error) {
-        return;
-      }
-
+    participantListQuery.next().then(function (participantList) {
       setParticipants(participantList);
     });
   }, [channel]);
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "sendbird-openchannel-settings__participant"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "sendbird-openchannel-settings__header"
-  }, /*#__PURE__*/React__default.createElement(Label, {
-    type: LabelTypography.H_2,
-    color: LabelColors.ONBACKGROUND_1
-  }, stringSet.OPEN_CHANNEL_SETTINGS__PARTICIPANTS_TITLE), /*#__PURE__*/React__default.createElement(Icon, {
-    type: IconTypes.CLOSE,
-    className: "sendbird-openchannel-settings__close-icon",
-    height: "24px",
-    width: "24px",
-    onClick: function onClick() {
-      onCloseClick();
-    }
-  })), /*#__PURE__*/React__default.createElement("div", {
     className: "sendbird-openchannel-settings__participants-list",
     onScroll: function onScroll(e) {
       var hasNext = participantListQuery.hasNext;
@@ -146,11 +123,7 @@ function ParticipantsList() {
       var fetchMore = target.clientHeight + target.scrollTop === target.scrollHeight;
 
       if (hasNext && fetchMore) {
-        participantListQuery.next(function (fetchedParticipants, error) {
-          if (error) {
-            return;
-          }
-
+        participantListQuery.next().then(function (fetchedParticipants) {
           setParticipants(__spreadArray(__spreadArray([], participants, true), fetchedParticipants, true));
         });
       }
@@ -165,7 +138,7 @@ function ParticipantsList() {
     className: "sendbird-channel-settings__empty-list",
     type: LabelTypography.SUBTITLE_2,
     color: LabelColors.ONBACKGROUND_3
-  }, stringSet.OPEN_CHANNEL_SETTINGS__EMPTY_LIST) : null)));
+  }, stringSet.OPEN_CHANNEL_SETTINGS__EMPTY_LIST) : null));
 }
 
 export { ParticipantsList as default };

package/OpenChannelSettings/components/ParticipantUI.js.map

@@ -1 +1 @@
-{"version":3,"file":"ParticipantUI.js","sources":["../../../src/smart-components/OpenChannelSettings/components/ParticipantUI/ParticipantItem.tsx","../../../src/smart-components/OpenChannelSettings/components/ParticipantUI/index.tsx"],"sourcesContent":["import React, {\n  ReactElement,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react'\nimport { LocalizationContext } from '../../../../lib/LocalizationContext';\n\nimport { UserProfileContext } from '../../../../lib/UserProfileContext';\nimport Button, { ButtonTypes, ButtonSizes } from '../../../../ui/Button';\nimport Accordion from '../../../../ui/Accordion';\nimport Icon, { IconTypes, IconColors } from '../../../../ui/Icon';\nimport Avatar from '../../../../ui/Avatar/index';\nimport Label, { LabelTypography, LabelColors } from '../../../../ui/Label';\nimport ParticipantsModal from './ParticipantsModal';\nimport UserProfile from '../../../../ui/UserProfile';\nimport ContextMenu, { MenuItems } from '../../../../ui/ContextMenu';\nimport { useOpenChannelSettings } from '../../context/OpenChannelSettingsProvider';\nimport useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';\n\nconst SHOWN_MEMBER_MAX = 10;\n\ninterface UserListItemProps {\n  member: SendBird.User;\n  currentUser?: string;\n}\n\nexport const UserListItem: React.FC<UserListItemProps> = ({\n  member,\n  currentUser,\n}: UserListItemProps) => {\n  const avatarRef = useRef(null);\n  const {\n    disableUserProfile,\n    renderUserProfile,\n  } = useContext(UserProfileContext);\n  const { stringSet } = useContext(LocalizationContext);\n  return (\n    <div className=\"sendbird-participants-accordion__member\">\n      <div className=\"sendbird-participants-accordion__member-avatar\">\n        <ContextMenu\n          menuTrigger={(toggleDropdown) => (\n            <Avatar\n              onClick={() => {\n                if (!disableUserProfile) {\n                  toggleDropdown();\n                }\n              }}\n              ref={avatarRef}\n              src={member.profileUrl}\n              width={24}\n              height={24}\n            />\n          )}\n          menuItems={(closeDropdown) => (\n            <MenuItems\n              openLeft\n              parentRef={avatarRef}\n              // for catching location(x, y) of MenuItems\n              parentContainRef={avatarRef}\n              // for toggling more options(menus & reactions)\n              closeDropdown={closeDropdown}\n              style={{ paddingTop: 0, paddingBottom: 0 }}\n            >\n              {\n                renderUserProfile\n                  ? renderUserProfile({\n                    user: member,\n                    currentUserId: currentUser,\n                    close: closeDropdown,\n                  })\n                  : (\n                    <UserProfile\n                      disableMessaging\n                      user={member}\n                      currentUserId={currentUser}\n                      onSuccess={closeDropdown}\n                    />\n                  )\n              }\n            </MenuItems>\n          )}\n        />\n      </div>\n      <Label type={LabelTypography.SUBTITLE_2} color={LabelColors.ONBACKGROUND_1}>\n        {member.nickname || stringSet.NO_NAME}\n        {\n          (currentUser === member.userId) && (\n            stringSet.CHANNEL_SETTING__MEMBERS__YOU\n          )\n        }\n      </Label>\n    </div>\n  );\n};\n\nexport interface ParticipantsAccordionProps {\n  maxMembers?: number;\n}\n\nexport default function ParticipantsAccordion(props: ParticipantsAccordionProps): ReactElement {\n  const maxMembers = props?.maxMembers || SHOWN_MEMBER_MAX;\n  const { channel } = useOpenChannelSettings();\n  const globalState = useSendbirdStateContext();\n  const currentUser = globalState?.config?.userId;\n  const [participants, setParticipants] = useState([]);\n  const [showMoreModal, setShowMoreModal] = useState(false);\n  const { stringSet } = useContext(LocalizationContext);\n\n  useEffect(() => {\n    if (!channel || !channel.createParticipantListQuery) {\n      return;\n    }\n    const participantListQuery = channel.createParticipantListQuery();\n    participantListQuery.next((participantList, error) => {\n      if (error) {\n        return;\n      }\n      setParticipants(participantList);\n    });\n  }, [channel]);\n\n  return (\n    <Accordion\n      className=\"sendbird-participants-accordion\"\n      id=\"participants\"\n      renderTitle={() => (\n        <>\n          <Icon\n            type={IconTypes.MEMBERS}\n            fillColor={IconColors.PRIMARY}\n            width={24}\n            height={24}\n            className=\"sendbird-openchannel-settings__accordion-icon\"\n          />\n          <Label\n            type={LabelTypography.SUBTITLE_1}\n            color={LabelColors.ONBACKGROUND_1}\n          >\n            {stringSet.OPEN_CHANNEL_SETTINGS__PARTICIPANTS_ACCORDION_TITLE}\n          </Label>\n        </>\n      )}\n      renderContent={() => (\n        <div className=\"\">\n          <div className=\"sendbird-participants-accordion__list\">\n            {\n              participants.slice(0, maxMembers).map((p) => (\n                <UserListItem\n                  member={p}\n                  currentUser={currentUser}\n                  key={p.userId}\n                />\n              ))\n            }\n            {\n              (participants && participants.length === 0)\n                ? (\n                    <Label\n                      className=\"sendbird-channel-settings__empty-list\"\n                      type={LabelTypography.SUBTITLE_2}\n                      color={LabelColors.ONBACKGROUND_3}\n                    >\n                      {stringSet.OPEN_CHANNEL_SETTINGS__EMPTY_LIST}\n                    </Label>\n                ): null\n            }\n          </div>\n          {\n            participants.length >= maxMembers && (\n              <div className=\"sendbird-participants-accordion__footer\">\n                <Button\n                  className=\"sendbird-participants-accordion__footer__all-participants\"\n                  type={ButtonTypes.SECONDARY}\n                  size={ButtonSizes.SMALL}\n                  onClick={() => setShowMoreModal(true)}\n                >\n                  {stringSet.OPEN_CHANNEL_SETTINGS__SEE_ALL}\n                </Button>\n                {\n                  showMoreModal && (\n                    <ParticipantsModal\n                      onCancel={() => {\n                        setShowMoreModal(false);\n                      }}\n                    />\n                  )\n                }\n              </div>\n            )\n          }\n        </div>\n      )}\n    />\n  );\n}\n","import React, {\n  ReactElement,\n  useContext,\n  useState,\n  useEffect,\n} from 'react';\n\nimport Label, { LabelTypography, LabelColors } from '../../../../ui/Label';\nimport Icon, { IconTypes } from '../../../../ui/Icon';\n\nimport { UserListItem } from './ParticipantItem';\nimport { LocalizationContext } from '../../../../lib/LocalizationContext';\nimport { useOpenChannelSettings } from '../../context/OpenChannelSettingsProvider';\nimport useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';\n\nexport default function ParticipantsList(): ReactElement {\n  const globalState = useSendbirdStateContext();\n  const currentUser = globalState?.config?.userId;\n  const { channel, onCloseClick } = useOpenChannelSettings();\n  const { stringSet } = useContext(LocalizationContext);\n  const [participants, setParticipants] = useState<Array<SendBird.User>|null>([]);\n  const [participantListQuery, setParticipantListQuery] = useState<SendBird.ParticipantListQuery | null>(null);\n  useEffect(() => {\n    if (!channel || !channel.createParticipantListQuery) {\n      return;\n    }\n    const participantListQuery = channel.createParticipantListQuery();\n    setParticipantListQuery(participantListQuery);\n    participantListQuery.next((participantList, error) => {\n      if (error) {\n        return;\n      }\n      setParticipants(participantList);\n    });\n  }, [channel]);\n  return (\n    <div className=\"sendbird-openchannel-settings__participant\">\n      <div className=\"sendbird-openchannel-settings__header\">\n        <Label type={LabelTypography.H_2} color={LabelColors.ONBACKGROUND_1}>\n          {stringSet.OPEN_CHANNEL_SETTINGS__PARTICIPANTS_TITLE}\n        </Label>\n        <Icon\n          type={IconTypes.CLOSE}\n          className=\"sendbird-openchannel-settings__close-icon\"\n          height=\"24px\"\n          width=\"24px\"\n          onClick={() => {\n            onCloseClick();\n          }}\n        />\n      </div>\n      <div\n        className=\"sendbird-openchannel-settings__participants-list\"\n        onScroll={(e) => {\n          const { hasNext } = participantListQuery;\n          const target = e.target as HTMLTextAreaElement;\n          const fetchMore = (\n            target.clientHeight + target.scrollTop === target.scrollHeight\n          );\n\n          if (hasNext && fetchMore) {\n            participantListQuery.next((fetchedParticipants, error) => {\n              if (error) {\n                return;\n              }\n              setParticipants([\n                ...participants,\n                ...fetchedParticipants,\n              ])\n            });\n          }\n        }}\n      >\n        <div>\n          {\n            participants.map((p: SendBird.User) => (\n              <UserListItem\n                member={p}\n                currentUser={currentUser}\n                key={p.userId}\n              />\n            ))\n          }\n          {\n            (participants && participants.length === 0)\n              ? (\n                  <Label\n                    className=\"sendbird-channel-settings__empty-list\"\n                    type={LabelTypography.SUBTITLE_2}\n                    color={LabelColors.ONBACKGROUND_3}\n                  >\n                    {stringSet.OPEN_CHANNEL_SETTINGS__EMPTY_LIST}\n                  </Label>\n              ): null\n          }\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"names":["UserListItem","_a","member","currentUser","avatarRef","useRef","_b","useContext","UserProfileContext","disableUserProfile","renderUserProfile","stringSet","LocalizationContext","React","toggleDropdown","profileUrl","closeDropdown","paddingTop","paddingBottom","user","currentUserId","close","UserProfile","LabelTypography","SUBTITLE_2","LabelColors","ONBACKGROUND_1","nickname","NO_NAME","userId","CHANNEL_SETTING__MEMBERS__YOU","ParticipantsList","globalState","useSendbirdStateContext","config","useOpenChannelSettings","channel","onCloseClick","_c","useState","participants","setParticipants","_d","participantListQuery","setParticipantListQuery","useEffect","createParticipantListQuery","next","participantList","error","H_2","OPEN_CHANNEL_SETTINGS__PARTICIPANTS_TITLE","IconTypes","CLOSE","e","hasNext","target","fetchMore","clientHeight","scrollTop","scrollHeight","fetchedParticipants","map","p","length","ONBACKGROUND_3","OPEN_CHANNEL_SETTINGS__EMPTY_LIST"],"mappings":"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"}
+{"version":3,"file":"ParticipantUI.js","sources":["../../../src/smart-components/OpenChannelSettings/components/ParticipantUI/ParticipantItem.tsx","../../../src/smart-components/OpenChannelSettings/components/ParticipantUI/index.tsx"],"sourcesContent":["import React, {\n  ReactElement,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react'\nimport type { User } from '@sendbird/chat';\nimport { LocalizationContext } from '../../../../lib/LocalizationContext';\n\nimport { UserProfileContext } from '../../../../lib/UserProfileContext';\nimport Button, { ButtonTypes, ButtonSizes } from '../../../../ui/Button';\nimport Accordion from '../../../../ui/Accordion';\nimport Icon, { IconTypes, IconColors } from '../../../../ui/Icon';\nimport Avatar from '../../../../ui/Avatar/index';\nimport Label, { LabelTypography, LabelColors } from '../../../../ui/Label';\nimport ParticipantsModal from './ParticipantsModal';\nimport UserProfile from '../../../../ui/UserProfile';\nimport ContextMenu, { MenuItems } from '../../../../ui/ContextMenu';\nimport { useOpenChannelSettingsContext } from '../../context/OpenChannelSettingsProvider';\nimport useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';\n\nconst SHOWN_MEMBER_MAX = 10;\n\ninterface UserListItemProps {\n  member: User;\n  currentUser?: string;\n}\n\nexport const UserListItem: React.FC<UserListItemProps> = ({\n  member,\n  currentUser,\n}: UserListItemProps) => {\n  const avatarRef = useRef(null);\n  const {\n    disableUserProfile,\n    renderUserProfile,\n  } = useContext(UserProfileContext);\n  const { stringSet } = useContext(LocalizationContext);\n  return (\n    <div className=\"sendbird-participants-accordion__member\">\n      <div className=\"sendbird-participants-accordion__member-avatar\">\n        <ContextMenu\n          menuTrigger={(toggleDropdown) => (\n            <Avatar\n              onClick={() => {\n                if (!disableUserProfile) {\n                  toggleDropdown();\n                }\n              }}\n              ref={avatarRef}\n              src={member.profileUrl}\n              width={24}\n              height={24}\n            />\n          )}\n          menuItems={(closeDropdown) => (\n            <MenuItems\n              openLeft\n              parentRef={avatarRef}\n              // for catching location(x, y) of MenuItems\n              parentContainRef={avatarRef}\n              // for toggling more options(menus & reactions)\n              closeDropdown={closeDropdown}\n              style={{ paddingTop: 0, paddingBottom: 0 }}\n            >\n              {\n                renderUserProfile\n                  ? renderUserProfile({\n                    user: member,\n                    currentUserId: currentUser,\n                    close: closeDropdown,\n                  })\n                  : (\n                    <UserProfile\n                      disableMessaging\n                      user={member}\n                      currentUserId={currentUser}\n                      onSuccess={closeDropdown}\n                    />\n                  )\n              }\n            </MenuItems>\n          )}\n        />\n      </div>\n      <Label type={LabelTypography.SUBTITLE_2} color={LabelColors.ONBACKGROUND_1}>\n        {member.nickname || stringSet.NO_NAME}\n        {\n          (currentUser === member.userId) && (\n            stringSet.CHANNEL_SETTING__MEMBERS__YOU\n          )\n        }\n      </Label>\n    </div>\n  );\n};\n\nexport interface ParticipantsAccordionProps {\n  maxMembers?: number;\n}\n\nexport default function ParticipantsAccordion(props: ParticipantsAccordionProps): ReactElement {\n  const maxMembers = props?.maxMembers || SHOWN_MEMBER_MAX;\n  const { channel } = useOpenChannelSettingsContext();\n  const globalState = useSendbirdStateContext();\n  const currentUser = globalState?.config?.userId;\n  const [participants, setParticipants] = useState([]);\n  const [showMoreModal, setShowMoreModal] = useState(false);\n  const { stringSet } = useContext(LocalizationContext);\n\n  useEffect(() => {\n    if (!channel || !channel?.createParticipantListQuery) {\n      return;\n    }\n    const participantListQuery = channel?.createParticipantListQuery({});\n    participantListQuery.next().then((participantList) => {\n      setParticipants(participantList);\n    });\n  }, [channel]);\n\n  return (\n    <Accordion\n      className=\"sendbird-participants-accordion\"\n      id=\"participants\"\n      renderTitle={() => (\n        <>\n          <Icon\n            type={IconTypes.MEMBERS}\n            fillColor={IconColors.PRIMARY}\n            width={24}\n            height={24}\n            className=\"sendbird-openchannel-settings__accordion-icon\"\n          />\n          <Label\n            type={LabelTypography.SUBTITLE_1}\n            color={LabelColors.ONBACKGROUND_1}\n          >\n            {stringSet.OPEN_CHANNEL_SETTINGS__PARTICIPANTS_ACCORDION_TITLE}\n          </Label>\n        </>\n      )}\n      renderContent={() => (\n        <div className=\"\">\n          <div className=\"sendbird-participants-accordion__list\">\n            {\n              participants.slice(0, maxMembers).map((p) => (\n                <UserListItem\n                  member={p}\n                  currentUser={currentUser}\n                  key={p.userId}\n                />\n              ))\n            }\n            {\n              (participants && participants.length === 0)\n                ? (\n                    <Label\n                      className=\"sendbird-channel-settings__empty-list\"\n                      type={LabelTypography.SUBTITLE_2}\n                      color={LabelColors.ONBACKGROUND_3}\n                    >\n                      {stringSet.OPEN_CHANNEL_SETTINGS__EMPTY_LIST}\n                    </Label>\n                ): null\n            }\n          </div>\n          {\n            participants.length >= maxMembers && (\n              <div className=\"sendbird-participants-accordion__footer\">\n                <Button\n                  className=\"sendbird-participants-accordion__footer__all-participants\"\n                  type={ButtonTypes.SECONDARY}\n                  size={ButtonSizes.SMALL}\n                  onClick={() => setShowMoreModal(true)}\n                >\n                  {stringSet.OPEN_CHANNEL_SETTINGS__SEE_ALL}\n                </Button>\n                {\n                  showMoreModal && (\n                    <ParticipantsModal\n                      onCancel={() => {\n                        setShowMoreModal(false);\n                      }}\n                    />\n                  )\n                }\n              </div>\n            )\n          }\n        </div>\n      )}\n    />\n  );\n}\n","import React, {\n  ReactElement,\n  useContext,\n  useState,\n  useEffect,\n} from 'react';\nimport type { User } from '@sendbird/chat';\nimport type { ParticipantListQuery } from '@sendbird/chat/openChannel';\n\nimport Label, { LabelTypography, LabelColors } from '../../../../ui/Label';\n\nimport { UserListItem } from './ParticipantItem';\nimport { LocalizationContext } from '../../../../lib/LocalizationContext';\nimport { useOpenChannelSettingsContext } from '../../context/OpenChannelSettingsProvider';\nimport useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';\n\nexport default function ParticipantsList(): ReactElement {\n  const globalState = useSendbirdStateContext();\n  const currentUser = globalState?.config?.userId;\n  const { channel } = useOpenChannelSettingsContext();\n  const { stringSet } = useContext(LocalizationContext);\n  const [participants, setParticipants] = useState<Array<User>|null>([]);\n  const [participantListQuery, setParticipantListQuery] = useState<ParticipantListQuery | null>(null);\n  useEffect(() => {\n    if (!channel || !channel?.createParticipantListQuery) {\n      return;\n    }\n    const participantListQuery = channel?.createParticipantListQuery({});\n    setParticipantListQuery(participantListQuery);\n    participantListQuery.next().then((participantList) => {\n      setParticipants(participantList);\n    });\n  }, [channel]);\n  return (\n    <div\n      className=\"sendbird-openchannel-settings__participants-list\"\n      onScroll={(e) => {\n        const { hasNext } = participantListQuery;\n        const target = e.target as HTMLTextAreaElement;\n        const fetchMore = (\n          target.clientHeight + target.scrollTop === target.scrollHeight\n        );\n\n        if (hasNext && fetchMore) {\n          participantListQuery.next().then((fetchedParticipants) => {\n            setParticipants([\n              ...participants,\n              ...fetchedParticipants,\n            ])\n          });\n        }\n      }}\n    >\n      <div>\n        {\n          participants.map((p: User) => (\n            <UserListItem\n              member={p}\n              currentUser={currentUser}\n              key={p.userId}\n            />\n          ))\n        }\n        {\n          (participants && participants.length === 0)\n            ? (\n                <Label\n                  className=\"sendbird-channel-settings__empty-list\"\n                  type={LabelTypography.SUBTITLE_2}\n                  color={LabelColors.ONBACKGROUND_3}\n                >\n                  {stringSet.OPEN_CHANNEL_SETTINGS__EMPTY_LIST}\n                </Label>\n            ): null\n        }\n      </div>\n    </div>\n  )\n}\n"],"names":["UserListItem","_a","member","currentUser","avatarRef","useRef","_b","useContext","UserProfileContext","disableUserProfile","renderUserProfile","stringSet","LocalizationContext","React","toggleDropdown","profileUrl","closeDropdown","paddingTop","paddingBottom","user","currentUserId","close","UserProfile","LabelTypography","SUBTITLE_2","LabelColors","ONBACKGROUND_1","nickname","NO_NAME","userId","CHANNEL_SETTING__MEMBERS__YOU","ParticipantsList","globalState","useSendbirdStateContext","config","channel","useOpenChannelSettingsContext","useState","participants","setParticipants","_c","participantListQuery","setParticipantListQuery","useEffect","createParticipantListQuery","next","then","participantList","e","hasNext","target","fetchMore","clientHeight","scrollTop","scrollHeight","fetchedParticipants","map","p","length","ONBACKGROUND_3","OPEN_CHANNEL_SETTINGS__EMPTY_LIST"],"mappings":"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"}