@sendbird/uikit-react 3.7.0 → 3.8.0

package/cjs/CreateChannel/components/InviteUsers.js

@@ -1,208 +1,167 @@
 'use strict';
 
-var tslib_es6 = require('../../tslib.es6-c74b513f.js');
+var _tslib = require('../../chunks/bundle-hK4x7nmG.js');
 var React = require('react');
-var LocalizationContext = require('../../LocalizationContext-58b6ed7c.js');
-var CreateChannel_context = require('../../CreateChannelProvider-c3c843e4.js');
+var LocalizationContext = require('../../chunks/bundle-QmSa90PC.js');
+var CreateChannel_context = require('../../chunks/bundle-kWUEW1ZN.js');
 var useSendbirdStateContext = require('../../useSendbirdStateContext.js');
-var ui_Modal = require('../../ui/Modal.js');
-var ui_Label = require('../../index-b5a9b4b7.js');
-var types = require('../../types-d0d770c3.js');
+var ui_Modal = require('../../chunks/bundle-UooP2IDU.js');
+var ui_Label = require('../../chunks/bundle-6ziaqiUd.js');
+var ui_Button = require('../../ui/Button.js');
 var ui_UserListItem = require('../../ui/UserListItem.js');
-var utils = require('../../utils-eb6d90e0.js');
-require('../../stringSet-1539ac47.js');
-require('../../index-e8928da6.js');
+var utils = require('../../chunks/bundle-1yOirqug.js');
+require('../../chunks/bundle-z-Bvsn0B.js');
+require('../../chunks/bundle-n1yh-qDb.js');
 require('../../sendbirdSelectors.js');
 require('../../pubSub/topics.js');
 require('../../withSendbird.js');
 require('react-dom');
-require('../../index-54279ec2.js');
-require('../../index-b8ba4548.js');
-require('../../MediaQueryContext-6141d955.js');
+require('../../chunks/bundle-Y9TkHVI5.js');
 require('../../ui/IconButton.js');
-require('../../ui/Button.js');
-require('prop-types');
 require('../../ui/Icon.js');
-require('../../UserProfileContext-c6d7abb7.js');
+require('../../chunks/bundle-4bb_98h6.js');
 require('../../ui/Avatar.js');
 require('../../ui/ImageRenderer.js');
-require('../../uuid-9a117e16.js');
+require('../../chunks/bundle-gMxOq93o.js');
 require('../../ui/MutedAvatarOverlay.js');
 require('../../ui/Checkbox.js');
 require('../../ui/UserProfile.js');
 require('../../ui/ContextMenu.js');
 require('../../ui/SortByRow.js');
-require('../../index-dbe8dd84.js');
+require('../../chunks/bundle-FHx0K-3z.js');
 require('../../utils/message/getOutgoingMessageState.js');
+require('../../chunks/bundle-I_9_5a8a.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-var filterUser = function (idsToFilter) {
-  return function (currentId) {
-    return idsToFilter === null || idsToFilter === void 0 ? void 0 : idsToFilter.includes(currentId);
-  };
-};
-var setChannelType = function (params, type) {
-  if (type === 'broadcast') {
-    // eslint-disable-next-line no-param-reassign
-    params.isBroadcast = true;
-  }
-  if (type === 'supergroup') {
-    // eslint-disable-next-line no-param-reassign
-    params.isSuper = true;
-  }
-  return params;
-};
-var createDefaultUserListQuery = function (_a) {
-  var sdk = _a.sdk,
-    userFilledApplicationUserListQuery = _a.userFilledApplicationUserListQuery;
-  if (sdk === null || sdk === void 0 ? void 0 : sdk.createApplicationUserListQuery) {
-    var params_1 = sdk === null || sdk === void 0 ? void 0 : sdk.createApplicationUserListQuery();
-    if (userFilledApplicationUserListQuery) {
-      Object.keys(userFilledApplicationUserListQuery).forEach(function (key) {
-        params_1[key] = userFilledApplicationUserListQuery[key];
-      });
-    }
-    return params_1;
-  }
+var filterUser = function (idsToFilter) { return function (currentId) { return idsToFilter === null || idsToFilter === void 0 ? void 0 : idsToFilter.includes(currentId); }; };
+var setChannelType = function (params, type) {
+    if (type === 'broadcast') {
+        // eslint-disable-next-line no-param-reassign
+        params.isBroadcast = true;
+    }
+    if (type === 'supergroup') {
+        // eslint-disable-next-line no-param-reassign
+        params.isSuper = true;
+    }
+    return params;
+};
+var createDefaultUserListQuery = function (_a) {
+    var sdk = _a.sdk, userFilledApplicationUserListQuery = _a.userFilledApplicationUserListQuery;
+    if (sdk === null || sdk === void 0 ? void 0 : sdk.createApplicationUserListQuery) {
+        var params_1 = sdk === null || sdk === void 0 ? void 0 : sdk.createApplicationUserListQuery();
+        if (userFilledApplicationUserListQuery) {
+            Object.keys(userFilledApplicationUserListQuery).forEach(function (key) {
+                params_1[key] = userFilledApplicationUserListQuery[key];
+            });
+        }
+        return params_1;
+    }
 };
 
-var appHeight = function () {
-  try {
-    var doc = document.documentElement;
-    doc.style.setProperty('--sendbird-vh', window.innerHeight * 0.01 + 'px');
-  } catch (_a) {
-    //
-  }
-};
-var BUFFER = 50;
-var InviteUsers = function (_a) {
-  var _b, _c, _d;
-  var onCancel = _a.onCancel,
-    userListQuery = _a.userListQuery;
-  var _e = CreateChannel_context.useCreateChannelContext(),
-    onBeforeCreateChannel = _e.onBeforeCreateChannel,
-    onCreateChannel = _e.onCreateChannel,
-    overrideInviteUser = _e.overrideInviteUser,
-    createChannel = _e.createChannel,
-    type = _e.type;
-  var globalStore = useSendbirdStateContext.useSendbirdStateContext();
-  var userId = (_b = globalStore === null || globalStore === void 0 ? void 0 : globalStore.config) === null || _b === void 0 ? void 0 : _b.userId;
-  var sdk = (_d = (_c = globalStore === null || globalStore === void 0 ? void 0 : globalStore.stores) === null || _c === void 0 ? void 0 : _c.sdkStore) === null || _d === void 0 ? void 0 : _d.sdk;
-  var idsToFilter = [userId];
-  var _f = React.useState([]),
-    users = _f[0],
-    setUsers = _f[1];
-  var _g = React.useState({}),
-    selectedUsers = _g[0],
-    setSelectedUsers = _g[1];
-  var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
-  var _h = React.useState(null),
-    usersDataSource = _h[0],
-    setUsersDataSource = _h[1];
-  var selectedCount = Object.keys(selectedUsers).length;
-  var titleText = stringSet.MODAL__CREATE_CHANNEL__TITLE;
-  var submitText = stringSet.BUTTON__CREATE;
-  var userQueryCreator = userListQuery ? userListQuery() : createDefaultUserListQuery({
-    sdk: sdk
-  });
-  React.useEffect(function () {
-    var applicationUserListQuery = userQueryCreator;
-    setUsersDataSource(applicationUserListQuery);
-    // @ts-ignore
-    if (!(applicationUserListQuery === null || applicationUserListQuery === void 0 ? void 0 : applicationUserListQuery.isLoading)) {
-      applicationUserListQuery.next().then(function (users_) {
-        setUsers(users_);
-      });
-    }
-  }, []);
-  // https://stackoverflow.com/a/70302463
-  // https://css-tricks.com/the-trick-to-viewport-units-on-mobile/#css-custom-properties-the-trick-to-correct-sizing
-  // to fix navbar break in mobile
-  React.useEffect(function () {
-    appHeight();
-    window.addEventListener('resize', appHeight);
-    return function () {
-      window.removeEventListener('resize', appHeight);
-    };
-  }, []);
-  return /*#__PURE__*/React__default["default"].createElement(ui_Modal.Modal, {
-    isFullScreenOnMobile: true,
-    titleText: titleText,
-    submitText: submitText,
-    type: types.ButtonTypes.PRIMARY
-    // Disable the create button if no users are selected,
-    // but if there's only the logged-in user in the user list,
-    // then the create button should be enabled
-    ,
-    disabled: users.length > 1 && Object.keys(selectedUsers).length === 0,
-    onCancel: onCancel,
-    onSubmit: function () {
-      var selectedUserList = Object.keys(selectedUsers).length > 0 ? Object.keys(selectedUsers) : [userId];
-      if (typeof overrideInviteUser === 'function') {
-        overrideInviteUser({
-          users: selectedUserList,
-          onClose: onCancel !== null && onCancel !== void 0 ? onCancel : utils.noop,
-          channelType: type
-        });
-        return;
-      }
-      if (onBeforeCreateChannel) {
-        var params = onBeforeCreateChannel(selectedUserList);
-        setChannelType(params, type);
-        createChannel(params).then(function (channel) {
-          onCreateChannel === null || onCreateChannel === void 0 ? void 0 : onCreateChannel(channel);
-        });
-      } else {
-        var params = {};
-        params.invitedUserIds = selectedUserList;
-        params.isDistinct = false;
-        if (userId) {
-          params.operatorUserIds = [userId];
-        }
-        setChannelType(params, type);
-        // do not have custom params
-        createChannel(params).then(function (channel) {
-          onCreateChannel === null || onCreateChannel === void 0 ? void 0 : onCreateChannel(channel);
-        });
-      }
-      onCancel === null || onCancel === void 0 ? void 0 : onCancel();
-    }
-  }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
-    color: selectedCount > 0 ? ui_Label.LabelColors.PRIMARY : ui_Label.LabelColors.ONBACKGROUND_3,
-    type: ui_Label.LabelTypography.CAPTION_1
-  }, "".concat(selectedCount, " ").concat(stringSet.MODAL__INVITE_MEMBER__SELECTED)), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "sendbird-create-channel--scroll",
-    onScroll: function (e) {
-      if (!usersDataSource) return;
-      var eventTarget = e.target;
-      var hasNext = usersDataSource.hasNext,
-        isLoading = usersDataSource.isLoading;
-      var fetchMore = eventTarget.clientHeight + eventTarget.scrollTop + BUFFER > eventTarget.scrollHeight;
-      if (hasNext && fetchMore && !isLoading) {
-        usersDataSource.next().then(function (usersBatch) {
-          setUsers(tslib_es6.__spreadArray(tslib_es6.__spreadArray([], users, true), usersBatch, true));
-        });
-      }
-    }
-  }, users.map(function (user) {
-    return !filterUser(idsToFilter)(user.userId) && /*#__PURE__*/React__default["default"].createElement(ui_UserListItem, {
-      key: user.userId,
-      user: user,
-      checkBox: true,
-      checked: selectedUsers[user.userId],
-      onChange: function (event) {
-        var _a;
-        var modifiedSelectedUsers = tslib_es6.__assign(tslib_es6.__assign({}, selectedUsers), (_a = {}, _a[event.target.id] = event.target.checked, _a));
-        if (!event.target.checked) {
-          delete modifiedSelectedUsers[event.target.id];
-        }
-        setSelectedUsers(modifiedSelectedUsers);
-      }
-    });
-  }))));
+var appHeight = function () {
+    try {
+        var doc = document.documentElement;
+        doc.style.setProperty('--sendbird-vh', (window.innerHeight * 0.01) + 'px');
+    }
+    catch (_a) {
+        //
+    }
+};
+var BUFFER = 50;
+var InviteUsers = function (_a) {
+    var _b, _c, _d;
+    var onCancel = _a.onCancel, userListQuery = _a.userListQuery;
+    var _e = CreateChannel_context.useCreateChannelContext(), onBeforeCreateChannel = _e.onBeforeCreateChannel, onCreateChannel = _e.onCreateChannel, overrideInviteUser = _e.overrideInviteUser, createChannel = _e.createChannel, type = _e.type;
+    var globalStore = useSendbirdStateContext.useSendbirdStateContext();
+    var userId = (_b = globalStore === null || globalStore === void 0 ? void 0 : globalStore.config) === null || _b === void 0 ? void 0 : _b.userId;
+    var sdk = (_d = (_c = globalStore === null || globalStore === void 0 ? void 0 : globalStore.stores) === null || _c === void 0 ? void 0 : _c.sdkStore) === null || _d === void 0 ? void 0 : _d.sdk;
+    var idsToFilter = [userId];
+    var _f = React.useState([]), users = _f[0], setUsers = _f[1];
+    var _g = React.useState({}), selectedUsers = _g[0], setSelectedUsers = _g[1];
+    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+    var _h = React.useState(null), usersDataSource = _h[0], setUsersDataSource = _h[1];
+    var selectedCount = Object.keys(selectedUsers).length;
+    var titleText = stringSet.MODAL__CREATE_CHANNEL__TITLE;
+    var submitText = stringSet.BUTTON__CREATE;
+    var userQueryCreator = userListQuery ? userListQuery() : createDefaultUserListQuery({ sdk: sdk });
+    React.useEffect(function () {
+        var applicationUserListQuery = userQueryCreator;
+        setUsersDataSource(applicationUserListQuery);
+        // @ts-ignore
+        if (!(applicationUserListQuery === null || applicationUserListQuery === void 0 ? void 0 : applicationUserListQuery.isLoading)) {
+            applicationUserListQuery.next().then(function (users_) {
+                setUsers(users_);
+            });
+        }
+    }, []);
+    // https://stackoverflow.com/a/70302463
+    // https://css-tricks.com/the-trick-to-viewport-units-on-mobile/#css-custom-properties-the-trick-to-correct-sizing
+    // to fix navbar break in mobile
+    React.useEffect(function () {
+        appHeight();
+        window.addEventListener('resize', appHeight);
+        return function () {
+            window.removeEventListener('resize', appHeight);
+        };
+    }, []);
+    return (React.createElement(ui_Modal.Modal, { isFullScreenOnMobile: true, titleText: titleText, submitText: submitText, type: ui_Button.ButtonTypes.PRIMARY, 
+        // Disable the create button if no users are selected,
+        // but if there's only the logged-in user in the user list,
+        // then the create button should be enabled
+        disabled: users.length > 1 && Object.keys(selectedUsers).length === 0, onCancel: onCancel, onSubmit: function () {
+            var selectedUserList = Object.keys(selectedUsers).length > 0
+                ? Object.keys(selectedUsers)
+                : [userId];
+            if (typeof overrideInviteUser === 'function') {
+                overrideInviteUser({
+                    users: selectedUserList,
+                    onClose: onCancel !== null && onCancel !== void 0 ? onCancel : utils.noop,
+                    channelType: type,
+                });
+                return;
+            }
+            if (onBeforeCreateChannel) {
+                var params = onBeforeCreateChannel(selectedUserList);
+                setChannelType(params, type);
+                createChannel(params).then(function (channel) {
+                    onCreateChannel === null || onCreateChannel === void 0 ? void 0 : onCreateChannel(channel);
+                });
+            }
+            else {
+                var params = {};
+                params.invitedUserIds = selectedUserList;
+                params.isDistinct = false;
+                if (userId) {
+                    params.operatorUserIds = [userId];
+                }
+                setChannelType(params, type);
+                // do not have custom params
+                createChannel(params).then(function (channel) {
+                    onCreateChannel === null || onCreateChannel === void 0 ? void 0 : onCreateChannel(channel);
+                });
+            }
+            onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+        } },
+        React.createElement("div", null,
+            React.createElement(ui_Label.Label, { color: (selectedCount > 0) ? ui_Label.LabelColors.PRIMARY : ui_Label.LabelColors.ONBACKGROUND_3, type: ui_Label.LabelTypography.CAPTION_1 }, "".concat(selectedCount, " ").concat(stringSet.MODAL__INVITE_MEMBER__SELECTED)),
+            React.createElement("div", { className: "sendbird-create-channel--scroll", onScroll: function (e) {
+                    if (!usersDataSource)
+                        return;
+                    var eventTarget = e.target;
+                    var hasNext = usersDataSource.hasNext, isLoading = usersDataSource.isLoading;
+                    var fetchMore = ((eventTarget.clientHeight + eventTarget.scrollTop + BUFFER) > eventTarget.scrollHeight);
+                    if (hasNext && fetchMore && !isLoading) {
+                        usersDataSource.next().then(function (usersBatch) {
+                            setUsers(_tslib.__spreadArray(_tslib.__spreadArray([], users, true), usersBatch, true));
+                        });
+                    }
+                } }, users.map(function (user) { return (!filterUser(idsToFilter)(user.userId)) && (React.createElement(ui_UserListItem, { key: user.userId, user: user, checkBox: true, checked: selectedUsers[user.userId], onChange: function (event) {
+                    var _a;
+                    var modifiedSelectedUsers = _tslib.__assign(_tslib.__assign({}, selectedUsers), (_a = {}, _a[event.target.id] = event.target.checked, _a));
+                    if (!event.target.checked) {
+                        delete modifiedSelectedUsers[event.target.id];
+                    }
+                    setSelectedUsers(modifiedSelectedUsers);
+                } })); })))));
 };
 
 module.exports = InviteUsers;

package/cjs/CreateChannel/components/InviteUsers.js.map

@@ -1 +1 @@
-{"version":3,"file":"InviteUsers.js","sources":["../../../../src/modules/CreateChannel/components/InviteUsers/utils.ts","../../../../src/modules/CreateChannel/components/InviteUsers/index.tsx"],"sourcesContent":["import type { ApplicationUserListQuery } from '@sendbird/chat';\nimport type { GroupChannelCreateParams, SendbirdGroupChat } from '@sendbird/chat/groupChannel';\nimport { CHANNEL_TYPE } from '../../types';\n\nexport const filterUser = (idsToFilter: string[]) => (currentId: string): boolean => idsToFilter?.includes(currentId);\n\nexport const setChannelType = (\n  params: GroupChannelCreateParams,\n  type: CHANNEL_TYPE,\n): GroupChannelCreateParams => {\n  if (type === 'broadcast') {\n    // eslint-disable-next-line no-param-reassign\n    params.isBroadcast = true;\n  }\n  if (type === 'supergroup') {\n    // eslint-disable-next-line no-param-reassign\n    params.isSuper = true;\n  }\n  return params;\n};\n\ntype CreateDefaultUserListQueryType = {\n  sdk: SendbirdGroupChat;\n  userFilledApplicationUserListQuery?: ApplicationUserListQuery;\n};\n\nexport const createDefaultUserListQuery = (\n  { sdk, userFilledApplicationUserListQuery }: CreateDefaultUserListQueryType,\n): ApplicationUserListQuery => {\n  if (sdk?.createApplicationUserListQuery) {\n    const params = sdk?.createApplicationUserListQuery();\n    if (userFilledApplicationUserListQuery) {\n      Object.keys(userFilledApplicationUserListQuery).forEach((key) => {\n        params[key] = userFilledApplicationUserListQuery[key];\n      });\n    }\n    return params;\n  }\n};\n","import React, { useState, useEffect, useContext } from 'react';\nimport type { ApplicationUserListQuery, User } from '@sendbird/chat';\nimport type { GroupChannelCreateParams, SendbirdGroupChat } from '@sendbird/chat/groupChannel';\n\nimport './invite-users.scss';\nimport { LocalizationContext } from '../../../../lib/LocalizationContext';\nimport { useCreateChannelContext } from '../../context/CreateChannelProvider';\nimport useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';\n\nimport Modal from '../../../../ui/Modal';\nimport Label, {\n  LabelColors,\n  LabelTypography,\n} from '../../../../ui/Label';\nimport { ButtonTypes } from '../../../../ui/Button';\nimport UserListItem from '../../../../ui/UserListItem';\n\nimport {\n  filterUser,\n  setChannelType,\n  createDefaultUserListQuery,\n} from './utils';\nimport { noop } from '../../../../utils/utils';\n\nexport interface InviteUsersProps {\n  onCancel?: () => void;\n  userListQuery?(): ApplicationUserListQuery;\n}\n\nconst appHeight = () => {\n  try {\n    const doc = document.documentElement;\n    doc.style.setProperty('--sendbird-vh', (window.innerHeight * 0.01) + 'px');\n  } catch {\n    //\n  }\n};\n\nconst BUFFER = 50;\n\nconst InviteUsers: React.FC<InviteUsersProps> = ({\n  onCancel,\n  userListQuery,\n}: InviteUsersProps) => {\n  const {\n    onBeforeCreateChannel,\n    onCreateChannel,\n    overrideInviteUser,\n    createChannel,\n    type,\n  } = useCreateChannelContext();\n\n  const globalStore = useSendbirdStateContext();\n  const userId = globalStore?.config?.userId;\n  const sdk = globalStore?.stores?.sdkStore?.sdk as SendbirdGroupChat;\n  const idsToFilter = [userId];\n  const [users, setUsers] = useState<User[]>([]);\n  const [selectedUsers, setSelectedUsers] = useState({});\n  const { stringSet } = useContext(LocalizationContext);\n  const [usersDataSource, setUsersDataSource] = useState<ApplicationUserListQuery | null>(null);\n  const selectedCount = Object.keys(selectedUsers).length;\n  const titleText = stringSet.MODAL__CREATE_CHANNEL__TITLE;\n  const submitText = stringSet.BUTTON__CREATE;\n\n  const userQueryCreator = userListQuery ? userListQuery() : createDefaultUserListQuery({ sdk });\n\n  useEffect(() => {\n    const applicationUserListQuery = userQueryCreator;\n    setUsersDataSource(applicationUserListQuery);\n    // @ts-ignore\n    if (!applicationUserListQuery?.isLoading) {\n      applicationUserListQuery.next().then((users_) => {\n        setUsers(users_);\n      });\n    }\n  }, []);\n\n  // https://stackoverflow.com/a/70302463\n  // https://css-tricks.com/the-trick-to-viewport-units-on-mobile/#css-custom-properties-the-trick-to-correct-sizing\n  // to fix navbar break in mobile\n  useEffect(() => {\n    appHeight();\n    window.addEventListener('resize', appHeight);\n    return () => {\n      window.removeEventListener('resize', appHeight);\n    };\n  }, []);\n\n  return (\n    <Modal\n      isFullScreenOnMobile\n      titleText={titleText}\n      submitText={submitText}\n      type={ButtonTypes.PRIMARY}\n      // Disable the create button if no users are selected,\n      // but if there's only the logged-in user in the user list,\n      // then the create button should be enabled\n      disabled={users.length > 1 && Object.keys(selectedUsers).length === 0}\n      onCancel={onCancel}\n      onSubmit={() => {\n        const selectedUserList = Object.keys(selectedUsers).length > 0\n          ? Object.keys(selectedUsers)\n          : [userId];\n        if (typeof overrideInviteUser === 'function') {\n          overrideInviteUser({\n            users: selectedUserList,\n            onClose: onCancel ?? noop,\n            channelType: type,\n          });\n          return;\n        }\n\n        if (onBeforeCreateChannel) {\n          const params = onBeforeCreateChannel(selectedUserList);\n          setChannelType(params, type);\n          createChannel(params).then((channel) => {\n            onCreateChannel?.(channel);\n          });\n        } else {\n          const params: GroupChannelCreateParams = {};\n          params.invitedUserIds = selectedUserList;\n          params.isDistinct = false;\n          if (userId) {\n            params.operatorUserIds = [userId];\n          }\n          setChannelType(params, type);\n          // do not have custom params\n          createChannel(params).then((channel) => {\n            onCreateChannel?.(channel);\n          });\n        }\n        onCancel?.();\n      }}\n    >\n      <div>\n        <Label\n          color={(selectedCount > 0) ? LabelColors.PRIMARY : LabelColors.ONBACKGROUND_3}\n          type={LabelTypography.CAPTION_1}\n        >\n          {`${selectedCount} ${stringSet.MODAL__INVITE_MEMBER__SELECTED}`}\n        </Label>\n        <div\n          className=\"sendbird-create-channel--scroll\"\n          onScroll={(e) => {\n            if (!usersDataSource) return;\n            const eventTarget = e.target as HTMLDivElement;\n            const { hasNext, isLoading } = usersDataSource;\n            const fetchMore = (\n              (eventTarget.clientHeight + eventTarget.scrollTop + BUFFER) > eventTarget.scrollHeight\n            );\n\n            if (hasNext && fetchMore && !isLoading) {\n              usersDataSource.next().then((usersBatch) => {\n                setUsers([\n                  ...users,\n                  ...usersBatch,\n                ]);\n              });\n            }\n          }}\n        >\n          {\n            users.map((user) => (!filterUser(idsToFilter)(user.userId)) && (\n              <UserListItem\n                key={user.userId}\n                user={user}\n                checkBox\n                checked={selectedUsers[user.userId]}\n                onChange={\n                  (event) => {\n                    const modifiedSelectedUsers = {\n                      ...selectedUsers,\n                      [event.target.id]: event.target.checked,\n                    };\n                    if (!event.target.checked) {\n                      delete modifiedSelectedUsers[event.target.id];\n                    }\n                    setSelectedUsers(modifiedSelectedUsers);\n                  }\n                }\n              />\n            ))\n          }\n        </div>\n      </div>\n    </Modal>\n  );\n};\n\nexport default InviteUsers;\n"],"names":["filterUser","idsToFilter","currentId","includes","setChannelType","params","type","isBroadcast","isSuper","createDefaultUserListQuery","_a","sdk","userFilledApplicationUserListQuery","createApplicationUserListQuery","params_1","Object","keys","forEach","key","appHeight","doc","document","documentElement","style","setProperty","window","innerHeight","BUFFER","InviteUsers","onCancel","userListQuery","_e","useCreateChannelContext","onBeforeCreateChannel","onCreateChannel","overrideInviteUser","createChannel","globalStore","useSendbirdStateContext","userId","_b","config","_d","_c","stores","sdkStore","_f","useState","users","setUsers","_g","selectedUsers","setSelectedUsers","stringSet","useContext","LocalizationContext","_h","usersDataSource","setUsersDataSource","selectedCount","length","titleText","MODAL__CREATE_CHANNEL__TITLE","submitText","BUTTON__CREATE","userQueryCreator","useEffect","applicationUserListQuery","isLoading","next","then","users_","addEventListener","removeEventListener","React","createElement","Modal","isFullScreenOnMobile","ButtonTypes","PRIMARY","disabled","onSubmit","selectedUserList","onClose","noop","channelType","channel","invitedUserIds","isDistinct","operatorUserIds","Label","color","LabelColors","ONBACKGROUND_3","LabelTypography","CAPTION_1","concat","MODAL__INVITE_MEMBER__SELECTED","className","onScroll","e","eventTarget","target","hasNext","fetchMore","clientHeight","scrollTop","scrollHeight","usersBatch","__spreadArray","map","user","UserListItem","checkBox","checked","onChange","event","modifiedSelectedUsers","__assign","id"],"mappings":"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"}
+{"version":3,"file":"InviteUsers.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/CreateChannel/components/SelectChannelType.js

@@ -3,132 +3,79 @@
 var React = require('react');
 var sendbirdSelectors = require('../../sendbirdSelectors.js');
 var useSendbirdStateContext = require('../../useSendbirdStateContext.js');
-var CreateChannel_context = require('../../CreateChannelProvider-c3c843e4.js');
-var LocalizationContext = require('../../LocalizationContext-58b6ed7c.js');
-var ui_Label = require('../../index-b5a9b4b7.js');
+var CreateChannel_context = require('../../chunks/bundle-kWUEW1ZN.js');
+var LocalizationContext = require('../../chunks/bundle-QmSa90PC.js');
+var ui_Label = require('../../chunks/bundle-6ziaqiUd.js');
 var ui_Icon = require('../../ui/Icon.js');
-var ui_Modal = require('../../ui/Modal.js');
+var ui_Modal = require('../../chunks/bundle-UooP2IDU.js');
 require('../../pubSub/topics.js');
-require('../../utils-eb6d90e0.js');
+require('../../chunks/bundle-1yOirqug.js');
 require('../../withSendbird.js');
-require('../../tslib.es6-c74b513f.js');
-require('../../stringSet-1539ac47.js');
-require('../../index-e8928da6.js');
-require('prop-types');
+require('../../chunks/bundle-hK4x7nmG.js');
+require('../../chunks/bundle-z-Bvsn0B.js');
+require('../../chunks/bundle-n1yh-qDb.js');
 require('react-dom');
-require('../../index-54279ec2.js');
-require('../../index-b8ba4548.js');
-require('../../MediaQueryContext-6141d955.js');
+require('../../chunks/bundle-Y9TkHVI5.js');
 require('../../ui/IconButton.js');
 require('../../ui/Button.js');
-require('../../types-d0d770c3.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-var isBroadcastChannelEnabled = function (sdk) {
-  var _a;
-  var ALLOW_BROADCAST_CHANNEL = 'allow_broadcast_channel';
-  var applicationAttributes = (_a = sdk === null || sdk === void 0 ? void 0 : sdk.appInfo) === null || _a === void 0 ? void 0 : _a.applicationAttributes;
-  if (Array.isArray(applicationAttributes)) {
-    return applicationAttributes.includes(ALLOW_BROADCAST_CHANNEL);
-  }
-  return false;
-};
-var isSuperGroupChannelEnabled = function (sdk) {
-  var _a;
-  var ALLOW_SUPER_GROUP_CHANNEL = 'allow_super_group_channel';
-  var applicationAttributes = (_a = sdk === null || sdk === void 0 ? void 0 : sdk.appInfo) === null || _a === void 0 ? void 0 : _a.applicationAttributes;
-  if (Array.isArray(applicationAttributes)) {
-    return applicationAttributes.includes(ALLOW_SUPER_GROUP_CHANNEL);
-  }
-  return false;
+var isBroadcastChannelEnabled = function (sdk) {
+    var _a;
+    var ALLOW_BROADCAST_CHANNEL = 'allow_broadcast_channel';
+    var applicationAttributes = (_a = sdk === null || sdk === void 0 ? void 0 : sdk.appInfo) === null || _a === void 0 ? void 0 : _a.applicationAttributes;
+    if (Array.isArray(applicationAttributes)) {
+        return applicationAttributes.includes(ALLOW_BROADCAST_CHANNEL);
+    }
+    return false;
+};
+var isSuperGroupChannelEnabled = function (sdk) {
+    var _a;
+    var ALLOW_SUPER_GROUP_CHANNEL = 'allow_super_group_channel';
+    var applicationAttributes = (_a = sdk === null || sdk === void 0 ? void 0 : sdk.appInfo) === null || _a === void 0 ? void 0 : _a.applicationAttributes;
+    if (Array.isArray(applicationAttributes)) {
+        return applicationAttributes.includes(ALLOW_SUPER_GROUP_CHANNEL);
+    }
+    return false;
 };
 
-var SelectChannelType = function (props) {
-  var onCancel = props.onCancel;
-  var store = useSendbirdStateContext.useSendbirdStateContext();
-  var sdk = sendbirdSelectors.getSdk(store);
-  var createChannelProps = CreateChannel_context.useCreateChannelContext();
-  var setStep = createChannelProps.setStep,
-    setType = createChannelProps.setType;
-  var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
-  var isBroadcastAvailable = isBroadcastChannelEnabled(sdk);
-  var isSupergroupAvailable = isSuperGroupChannelEnabled(sdk);
-  return /*#__PURE__*/React__default["default"].createElement(ui_Modal.Modal, {
-    titleText: stringSet === null || stringSet === void 0 ? void 0 : stringSet.MODAL__CREATE_CHANNEL__TITLE,
-    hideFooter: true,
-    onCancel: function () {
-      onCancel();
-    },
-    className: "sendbird-add-channel__modal"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "sendbird-add-channel__rectangle-wrap"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "sendbird-add-channel__rectangle",
-    onClick: function () {
-      setType(CreateChannel_context.CHANNEL_TYPE.GROUP);
-      setStep(1);
-    },
-    role: "button",
-    tabIndex: 0,
-    onKeyDown: function () {
-      setType(CreateChannel_context.CHANNEL_TYPE.GROUP);
-      setStep(1);
-    }
-  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
-    className: "sendbird-add-channel__rectangle__chat-icon",
-    type: ui_Icon.IconTypes.CHAT,
-    fillColor: ui_Icon.IconColors.PRIMARY,
-    width: "28px",
-    height: "28px"
-  }), /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
-    type: ui_Label.LabelTypography.SUBTITLE_1,
-    color: ui_Label.LabelColors.ONBACKGROUND_1
-  }, stringSet.MODAL__CREATE_CHANNEL__GROUP)), isSupergroupAvailable && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "sendbird-add-channel__rectangle",
-    onClick: function () {
-      setType(CreateChannel_context.CHANNEL_TYPE.SUPERGROUP);
-      setStep(1);
-    },
-    role: "button",
-    tabIndex: 0,
-    onKeyDown: function () {
-      setType(CreateChannel_context.CHANNEL_TYPE.SUPERGROUP);
-      setStep(1);
-    }
-  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
-    className: "sendbird-add-channel__rectangle__supergroup-icon",
-    type: ui_Icon.IconTypes.SUPERGROUP,
-    fillColor: ui_Icon.IconColors.PRIMARY,
-    width: "28px",
-    height: "28px"
-  }), /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
-    type: ui_Label.LabelTypography.SUBTITLE_1,
-    color: ui_Label.LabelColors.ONBACKGROUND_1
-  }, stringSet.MODAL__CREATE_CHANNEL__SUPER)), isBroadcastAvailable && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "sendbird-add-channel__rectangle",
-    onClick: function () {
-      setType(CreateChannel_context.CHANNEL_TYPE.BROADCAST);
-      setStep(1);
-    },
-    role: "button",
-    tabIndex: 0,
-    onKeyDown: function () {
-      setType(CreateChannel_context.CHANNEL_TYPE.BROADCAST);
-      setStep(1);
-    }
-  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
-    className: "sendbird-add-channel__rectangle__broadcast-icon",
-    type: ui_Icon.IconTypes.BROADCAST,
-    fillColor: ui_Icon.IconColors.PRIMARY,
-    width: "28px",
-    height: "28px"
-  }), /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
-    type: ui_Label.LabelTypography.SUBTITLE_1,
-    color: ui_Label.LabelColors.ONBACKGROUND_1
-  }, stringSet.MODAL__CREATE_CHANNEL__BROADCAST))));
+var SelectChannelType = function (props) {
+    var onCancel = props.onCancel;
+    var store = useSendbirdStateContext.useSendbirdStateContext();
+    var sdk = sendbirdSelectors.getSdk(store);
+    var createChannelProps = CreateChannel_context.useCreateChannelContext();
+    var setStep = createChannelProps.setStep, setType = createChannelProps.setType;
+    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+    var isBroadcastAvailable = isBroadcastChannelEnabled(sdk);
+    var isSupergroupAvailable = isSuperGroupChannelEnabled(sdk);
+    return (React.createElement(ui_Modal.Modal, { titleText: stringSet === null || stringSet === void 0 ? void 0 : stringSet.MODAL__CREATE_CHANNEL__TITLE, hideFooter: true, onCancel: function () { onCancel(); }, className: "sendbird-add-channel__modal" },
+        React.createElement("div", { className: "sendbird-add-channel__rectangle-wrap" },
+            React.createElement("div", { className: "sendbird-add-channel__rectangle", onClick: function () {
+                    setType(CreateChannel_context.CHANNEL_TYPE.GROUP);
+                    setStep(1);
+                }, role: "button", tabIndex: 0, onKeyDown: function () {
+                    setType(CreateChannel_context.CHANNEL_TYPE.GROUP);
+                    setStep(1);
+                } },
+                React.createElement(ui_Icon.default, { className: "sendbird-add-channel__rectangle__chat-icon", type: ui_Icon.IconTypes.CHAT, fillColor: ui_Icon.IconColors.PRIMARY, width: "28px", height: "28px" }),
+                React.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.SUBTITLE_1, color: ui_Label.LabelColors.ONBACKGROUND_1 }, stringSet.MODAL__CREATE_CHANNEL__GROUP)),
+            isSupergroupAvailable && (React.createElement("div", { className: "sendbird-add-channel__rectangle", onClick: function () {
+                    setType(CreateChannel_context.CHANNEL_TYPE.SUPERGROUP);
+                    setStep(1);
+                }, role: "button", tabIndex: 0, onKeyDown: function () {
+                    setType(CreateChannel_context.CHANNEL_TYPE.SUPERGROUP);
+                    setStep(1);
+                } },
+                React.createElement(ui_Icon.default, { className: "sendbird-add-channel__rectangle__supergroup-icon", type: ui_Icon.IconTypes.SUPERGROUP, fillColor: ui_Icon.IconColors.PRIMARY, width: "28px", height: "28px" }),
+                React.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.SUBTITLE_1, color: ui_Label.LabelColors.ONBACKGROUND_1 }, stringSet.MODAL__CREATE_CHANNEL__SUPER))),
+            isBroadcastAvailable && (React.createElement("div", { className: "sendbird-add-channel__rectangle", onClick: function () {
+                    setType(CreateChannel_context.CHANNEL_TYPE.BROADCAST);
+                    setStep(1);
+                }, role: "button", tabIndex: 0, onKeyDown: function () {
+                    setType(CreateChannel_context.CHANNEL_TYPE.BROADCAST);
+                    setStep(1);
+                } },
+                React.createElement(ui_Icon.default, { className: "sendbird-add-channel__rectangle__broadcast-icon", type: ui_Icon.IconTypes.BROADCAST, fillColor: ui_Icon.IconColors.PRIMARY, width: "28px", height: "28px" }),
+                React.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.SUBTITLE_1, color: ui_Label.LabelColors.ONBACKGROUND_1 }, stringSet.MODAL__CREATE_CHANNEL__BROADCAST))))));
 };
 
 module.exports = SelectChannelType;