@sendbird/uikit-react-native 2.2.0 → 2.4.0

package/lib/module/fragments/createOpenChannelMutedParticipantsFragment.js

@@ -0,0 +1,100 @@
+import React from 'react';
+import { useChannelHandler, useUserList } from '@sendbird/uikit-chat-hooks';
+import { useActionMenu } from '@sendbird/uikit-react-native-foundation';
+import { NOOP, ifThenOr, isDifferentChannel, useFreshCallback, useUniqHandlerId } from '@sendbird/uikit-utils';
+import StatusComposition from '../components/StatusComposition';
+import UserActionBar from '../components/UserActionBar';
+import { createOpenChannelMutedParticipantsModule } from '../domain/openChannelMutedParticipants';
+import { useLocalization, useSendbirdChat } from '../hooks/useContext';
+
+const createOpenChannelMutedParticipantsFragment = initModule => {
+  const OpenChannelMutedParticipantsModule = createOpenChannelMutedParticipantsModule(initModule);
+  return _ref => {
+    let {
+      onPressHeaderLeft = NOOP,
+      channel,
+      renderUser
+    } = _ref;
+    const handlerId = useUniqHandlerId('OpenChannelMutedParticipants');
+    const {
+      STRINGS
+    } = useLocalization();
+    const {
+      sdk,
+      currentUser
+    } = useSendbirdChat();
+    const {
+      openMenu
+    } = useActionMenu();
+    const {
+      users,
+      deleteUser,
+      upsertUser,
+      loading,
+      refresh,
+      error,
+      next
+    } = useUserList(sdk, {
+      queryCreator: () => channel.createMutedUserListQuery({
+        limit: 20
+      })
+    });
+    useChannelHandler(sdk, handlerId, {
+      onUserMuted(eventChannel, user) {
+        if (isDifferentChannel(eventChannel, channel)) return;
+        upsertUser(user);
+      },
+
+      onUserUnmuted(eventChannel, user) {
+        if (isDifferentChannel(eventChannel, channel)) return;
+        deleteUser(user.userId);
+      }
+
+    }, 'open');
+
+    const _renderUser = useFreshCallback(props => {
+      if (renderUser) return renderUser(props);
+      const {
+        user
+      } = props;
+      const isUserOperator = channel.isOperator(user.userId);
+      return /*#__PURE__*/React.createElement(UserActionBar, {
+        muted: true,
+        uri: user.profileUrl,
+        label: ifThenOr(isUserOperator, STRINGS.LABELS.USER_BAR_OPERATOR, ''),
+        name: (user.nickname || STRINGS.LABELS.USER_NO_NAME) + (user.userId === (currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId) ? STRINGS.LABELS.USER_BAR_ME_POSTFIX : ''),
+        disabled: user.userId === (currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId),
+        onPressActionMenu: () => {
+          openMenu({
+            title: user.nickname || STRINGS.LABELS.USER_NO_NAME,
+            menuItems: [{
+              title: STRINGS.LABELS.UNMUTE,
+              onPress: () => channel.unmuteUser(user).then(() => deleteUser(user.userId))
+            }]
+          });
+        }
+      });
+    });
+
+    return /*#__PURE__*/React.createElement(OpenChannelMutedParticipantsModule.Provider, {
+      channel: channel
+    }, /*#__PURE__*/React.createElement(OpenChannelMutedParticipantsModule.Header, {
+      onPressHeaderLeft: onPressHeaderLeft
+    }), /*#__PURE__*/React.createElement(StatusComposition, {
+      loading: loading,
+      LoadingComponent: /*#__PURE__*/React.createElement(OpenChannelMutedParticipantsModule.StatusLoading, null),
+      error: Boolean(error),
+      ErrorComponent: /*#__PURE__*/React.createElement(OpenChannelMutedParticipantsModule.StatusError, {
+        onPressRetry: refresh
+      })
+    }, /*#__PURE__*/React.createElement(OpenChannelMutedParticipantsModule.List, {
+      renderUser: _renderUser,
+      mutedParticipants: users,
+      onLoadNext: next,
+      ListEmptyComponent: /*#__PURE__*/React.createElement(OpenChannelMutedParticipantsModule.StatusEmpty, null)
+    })));
+  };
+};
+
+export default createOpenChannelMutedParticipantsFragment;
+//# sourceMappingURL=createOpenChannelMutedParticipantsFragment.js.map

package/lib/module/fragments/createOpenChannelMutedParticipantsFragment.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useChannelHandler","useUserList","useActionMenu","NOOP","ifThenOr","isDifferentChannel","useFreshCallback","useUniqHandlerId","StatusComposition","UserActionBar","createOpenChannelMutedParticipantsModule","useLocalization","useSendbirdChat","createOpenChannelMutedParticipantsFragment","initModule","OpenChannelMutedParticipantsModule","onPressHeaderLeft","channel","renderUser","handlerId","STRINGS","sdk","currentUser","openMenu","users","deleteUser","upsertUser","loading","refresh","error","next","queryCreator","createMutedUserListQuery","limit","onUserMuted","eventChannel","user","onUserUnmuted","userId","_renderUser","props","isUserOperator","isOperator","profileUrl","LABELS","USER_BAR_OPERATOR","nickname","USER_NO_NAME","USER_BAR_ME_POSTFIX","title","menuItems","UNMUTE","onPress","unmuteUser","then","Boolean"],"sources":["createOpenChannelMutedParticipantsFragment.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useChannelHandler, useUserList } from '@sendbird/uikit-chat-hooks';\nimport { useActionMenu } from '@sendbird/uikit-react-native-foundation';\nimport { NOOP, ifThenOr, isDifferentChannel, useFreshCallback, useUniqHandlerId } from '@sendbird/uikit-utils';\n\nimport StatusComposition from '../components/StatusComposition';\nimport UserActionBar from '../components/UserActionBar';\nimport { createOpenChannelMutedParticipantsModule } from '../domain/openChannelMutedParticipants';\nimport type {\n  OpenChannelMutedParticipantsFragment,\n  OpenChannelMutedParticipantsModule,\n} from '../domain/openChannelMutedParticipants/types';\nimport { useLocalization, useSendbirdChat } from '../hooks/useContext';\n\nconst createOpenChannelMutedParticipantsFragment = (\n  initModule?: Partial<OpenChannelMutedParticipantsModule>,\n): OpenChannelMutedParticipantsFragment => {\n  const OpenChannelMutedParticipantsModule = createOpenChannelMutedParticipantsModule(initModule);\n\n  return ({ onPressHeaderLeft = NOOP, channel, renderUser }) => {\n    const handlerId = useUniqHandlerId('OpenChannelMutedParticipants');\n\n    const { STRINGS } = useLocalization();\n    const { sdk, currentUser } = useSendbirdChat();\n    const { openMenu } = useActionMenu();\n\n    const { users, deleteUser, upsertUser, loading, refresh, error, next } = useUserList(sdk, {\n      queryCreator: () => channel.createMutedUserListQuery({ limit: 20 }),\n    });\n\n    useChannelHandler(\n      sdk,\n      handlerId,\n      {\n        onUserMuted(eventChannel, user) {\n          if (isDifferentChannel(eventChannel, channel)) return;\n          upsertUser(user);\n        },\n        onUserUnmuted(eventChannel, user) {\n          if (isDifferentChannel(eventChannel, channel)) return;\n          deleteUser(user.userId);\n        },\n      },\n      'open',\n    );\n\n    const _renderUser: NonNullable<typeof renderUser> = useFreshCallback((props) => {\n      if (renderUser) return renderUser(props);\n\n      const { user } = props;\n      const isUserOperator = channel.isOperator(user.userId);\n\n      return (\n        <UserActionBar\n          muted\n          uri={user.profileUrl}\n          label={ifThenOr(isUserOperator, STRINGS.LABELS.USER_BAR_OPERATOR, '')}\n          name={\n            (user.nickname || STRINGS.LABELS.USER_NO_NAME) +\n            (user.userId === currentUser?.userId ? STRINGS.LABELS.USER_BAR_ME_POSTFIX : '')\n          }\n          disabled={user.userId === currentUser?.userId}\n          onPressActionMenu={() => {\n            openMenu({\n              title: user.nickname || STRINGS.LABELS.USER_NO_NAME,\n              menuItems: [\n                {\n                  title: STRINGS.LABELS.UNMUTE,\n                  onPress: () => channel.unmuteUser(user).then(() => deleteUser(user.userId)),\n                },\n              ],\n            });\n          }}\n        />\n      );\n    });\n\n    return (\n      <OpenChannelMutedParticipantsModule.Provider channel={channel}>\n        <OpenChannelMutedParticipantsModule.Header onPressHeaderLeft={onPressHeaderLeft} />\n        <StatusComposition\n          loading={loading}\n          LoadingComponent={<OpenChannelMutedParticipantsModule.StatusLoading />}\n          error={Boolean(error)}\n          ErrorComponent={<OpenChannelMutedParticipantsModule.StatusError onPressRetry={refresh} />}\n        >\n          <OpenChannelMutedParticipantsModule.List\n            renderUser={_renderUser}\n            mutedParticipants={users}\n            onLoadNext={next}\n            ListEmptyComponent={<OpenChannelMutedParticipantsModule.StatusEmpty />}\n          />\n        </StatusComposition>\n      </OpenChannelMutedParticipantsModule.Provider>\n    );\n  };\n};\n\nexport default createOpenChannelMutedParticipantsFragment;\n"],"mappings":"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"}

package/lib/module/fragments/createOpenChannelOperatorsFragment.js

@@ -0,0 +1,106 @@
+import React from 'react';
+import { useChannelHandler, useUserList } from '@sendbird/uikit-chat-hooks';
+import { useActionMenu } from '@sendbird/uikit-react-native-foundation';
+import { NOOP, ifThenOr, isDifferentChannel, useFreshCallback, useUniqHandlerId } from '@sendbird/uikit-utils';
+import StatusComposition from '../components/StatusComposition';
+import UserActionBar from '../components/UserActionBar';
+import { UNKNOWN_USER_ID } from '../constants';
+import { createOpenChannelOperatorsModule } from '../domain/openChannelOperators';
+import { useLocalization, useSendbirdChat, useUserProfile } from '../hooks/useContext';
+
+const createOpenChannelOperatorsFragment = initModule => {
+  const OpenChannelOperatorsModule = createOpenChannelOperatorsModule(initModule);
+  return _ref => {
+    let {
+      onPressHeaderLeft = NOOP,
+      onPressHeaderRight = NOOP,
+      channel,
+      renderUser
+    } = _ref;
+    const handlerId = useUniqHandlerId('OpenChannelOperatorsFragment');
+    const {
+      STRINGS
+    } = useLocalization();
+    const {
+      sdk,
+      currentUser
+    } = useSendbirdChat();
+    const {
+      openMenu
+    } = useActionMenu();
+    const {
+      show
+    } = useUserProfile();
+    const {
+      users,
+      deleteUser,
+      upsertUser,
+      loading,
+      refresh,
+      next,
+      error
+    } = useUserList(sdk, {
+      queryCreator: () => channel.createOperatorListQuery({
+        limit: 20
+      })
+    });
+    useChannelHandler(sdk, handlerId, {
+      onUserBanned(eventChannel, user) {
+        if (isDifferentChannel(eventChannel, channel)) return;
+        deleteUser(user.userId);
+      },
+
+      onOperatorUpdated(eventChannel, updatedUsers) {
+        if (isDifferentChannel(eventChannel, channel)) return;
+        const operatorsAdded = users.length < updatedUsers.length;
+        if (operatorsAdded) updatedUsers.forEach(upsertUser);
+      }
+
+    }, 'open');
+
+    const _renderUser = useFreshCallback(props => {
+      if (renderUser) return renderUser(props);
+      const {
+        user
+      } = props;
+      return /*#__PURE__*/React.createElement(UserActionBar, {
+        muted: false,
+        uri: user.profileUrl,
+        name: (user.nickname || STRINGS.LABELS.USER_NO_NAME) + (user.userId === (currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId) ? STRINGS.LABELS.USER_BAR_ME_POSTFIX : ''),
+        disabled: user.userId === (currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId),
+        onPressAvatar: () => show(user),
+        onPressActionMenu: ifThenOr(channel.isOperator((currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId) ?? UNKNOWN_USER_ID), () => {
+          openMenu({
+            title: user.nickname || STRINGS.LABELS.USER_NO_NAME,
+            menuItems: [{
+              title: STRINGS.LABELS.UNREGISTER_OPERATOR,
+              onPress: () => channel.removeOperators([user.userId]).then(() => deleteUser(user.userId))
+            }]
+          });
+        })
+      });
+    });
+
+    return /*#__PURE__*/React.createElement(OpenChannelOperatorsModule.Provider, {
+      channel: channel
+    }, /*#__PURE__*/React.createElement(OpenChannelOperatorsModule.Header, {
+      onPressHeaderLeft: onPressHeaderLeft,
+      onPressHeaderRight: onPressHeaderRight
+    }), /*#__PURE__*/React.createElement(StatusComposition, {
+      loading: loading,
+      LoadingComponent: /*#__PURE__*/React.createElement(OpenChannelOperatorsModule.StatusLoading, null),
+      error: Boolean(error),
+      ErrorComponent: /*#__PURE__*/React.createElement(OpenChannelOperatorsModule.StatusError, {
+        onPressRetry: refresh
+      })
+    }, /*#__PURE__*/React.createElement(OpenChannelOperatorsModule.List, {
+      operators: users,
+      renderUser: _renderUser,
+      onLoadNext: next,
+      ListEmptyComponent: /*#__PURE__*/React.createElement(OpenChannelOperatorsModule.StatusEmpty, null)
+    })));
+  };
+};
+
+export default createOpenChannelOperatorsFragment;
+//# sourceMappingURL=createOpenChannelOperatorsFragment.js.map

package/lib/module/fragments/createOpenChannelOperatorsFragment.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useChannelHandler","useUserList","useActionMenu","NOOP","ifThenOr","isDifferentChannel","useFreshCallback","useUniqHandlerId","StatusComposition","UserActionBar","UNKNOWN_USER_ID","createOpenChannelOperatorsModule","useLocalization","useSendbirdChat","useUserProfile","createOpenChannelOperatorsFragment","initModule","OpenChannelOperatorsModule","onPressHeaderLeft","onPressHeaderRight","channel","renderUser","handlerId","STRINGS","sdk","currentUser","openMenu","show","users","deleteUser","upsertUser","loading","refresh","next","error","queryCreator","createOperatorListQuery","limit","onUserBanned","eventChannel","user","userId","onOperatorUpdated","updatedUsers","operatorsAdded","length","forEach","_renderUser","props","profileUrl","nickname","LABELS","USER_NO_NAME","USER_BAR_ME_POSTFIX","isOperator","title","menuItems","UNREGISTER_OPERATOR","onPress","removeOperators","then","Boolean"],"sources":["createOpenChannelOperatorsFragment.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useChannelHandler, useUserList } from '@sendbird/uikit-chat-hooks';\nimport { useActionMenu } from '@sendbird/uikit-react-native-foundation';\nimport { NOOP, ifThenOr, isDifferentChannel, useFreshCallback, useUniqHandlerId } from '@sendbird/uikit-utils';\n\nimport StatusComposition from '../components/StatusComposition';\nimport UserActionBar from '../components/UserActionBar';\nimport { UNKNOWN_USER_ID } from '../constants';\nimport { createOpenChannelOperatorsModule } from '../domain/openChannelOperators';\nimport type { OpenChannelOperatorsFragment, OpenChannelOperatorsModule } from '../domain/openChannelOperators/types';\nimport { useLocalization, useSendbirdChat, useUserProfile } from '../hooks/useContext';\n\nconst createOpenChannelOperatorsFragment = (\n  initModule?: Partial<OpenChannelOperatorsModule>,\n): OpenChannelOperatorsFragment => {\n  const OpenChannelOperatorsModule = createOpenChannelOperatorsModule(initModule);\n\n  return ({ onPressHeaderLeft = NOOP, onPressHeaderRight = NOOP, channel, renderUser }) => {\n    const handlerId = useUniqHandlerId('OpenChannelOperatorsFragment');\n\n    const { STRINGS } = useLocalization();\n    const { sdk, currentUser } = useSendbirdChat();\n    const { openMenu } = useActionMenu();\n    const { show } = useUserProfile();\n\n    const { users, deleteUser, upsertUser, loading, refresh, next, error } = useUserList(sdk, {\n      queryCreator: () => channel.createOperatorListQuery({ limit: 20 }),\n    });\n\n    useChannelHandler(\n      sdk,\n      handlerId,\n      {\n        onUserBanned(eventChannel, user) {\n          if (isDifferentChannel(eventChannel, channel)) return;\n          deleteUser(user.userId);\n        },\n        onOperatorUpdated(eventChannel, updatedUsers) {\n          if (isDifferentChannel(eventChannel, channel)) return;\n          const operatorsAdded = users.length < updatedUsers.length;\n          if (operatorsAdded) updatedUsers.forEach(upsertUser);\n        },\n      },\n      'open',\n    );\n\n    const _renderUser: NonNullable<typeof renderUser> = useFreshCallback((props) => {\n      if (renderUser) return renderUser(props);\n\n      const { user } = props;\n      return (\n        <UserActionBar\n          muted={false}\n          uri={user.profileUrl}\n          name={\n            (user.nickname || STRINGS.LABELS.USER_NO_NAME) +\n            (user.userId === currentUser?.userId ? STRINGS.LABELS.USER_BAR_ME_POSTFIX : '')\n          }\n          disabled={user.userId === currentUser?.userId}\n          onPressAvatar={() => show(user)}\n          onPressActionMenu={ifThenOr(channel.isOperator(currentUser?.userId ?? UNKNOWN_USER_ID), () => {\n            openMenu({\n              title: user.nickname || STRINGS.LABELS.USER_NO_NAME,\n              menuItems: [\n                {\n                  title: STRINGS.LABELS.UNREGISTER_OPERATOR,\n                  onPress: () => channel.removeOperators([user.userId]).then(() => deleteUser(user.userId)),\n                },\n              ],\n            });\n          })}\n        />\n      );\n    });\n\n    return (\n      <OpenChannelOperatorsModule.Provider channel={channel}>\n        <OpenChannelOperatorsModule.Header\n          onPressHeaderLeft={onPressHeaderLeft}\n          onPressHeaderRight={onPressHeaderRight}\n        />\n        <StatusComposition\n          loading={loading}\n          LoadingComponent={<OpenChannelOperatorsModule.StatusLoading />}\n          error={Boolean(error)}\n          ErrorComponent={<OpenChannelOperatorsModule.StatusError onPressRetry={refresh} />}\n        >\n          <OpenChannelOperatorsModule.List\n            operators={users}\n            renderUser={_renderUser}\n            onLoadNext={next}\n            ListEmptyComponent={<OpenChannelOperatorsModule.StatusEmpty />}\n          />\n        </StatusComposition>\n      </OpenChannelOperatorsModule.Provider>\n    );\n  };\n};\n\nexport default createOpenChannelOperatorsFragment;\n"],"mappings":"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"}

package/lib/module/fragments/createOpenChannelParticipantsFragment.js

@@ -0,0 +1,140 @@
+import React, { useRef } from 'react';
+import { useChannelHandler, useUserList } from '@sendbird/uikit-chat-hooks';
+import { useActionMenu } from '@sendbird/uikit-react-native-foundation';
+import { ASYNC_NOOP, ifThenOr, isDifferentChannel, useFreshCallback, useUniqHandlerId } from '@sendbird/uikit-utils';
+import StatusComposition from '../components/StatusComposition';
+import UserActionBar from '../components/UserActionBar';
+import { UNKNOWN_USER_ID } from '../constants';
+import createUserListModule from '../domain/userList/module/createUserListModule';
+import { useLocalization, useSendbirdChat, useUserProfile } from '../hooks/useContext';
+
+const RETURN_EMPTY_STRING = () => '';
+
+const createOpenChannelParticipantsFragment = initModule => {
+  const UserListModule = createUserListModule(initModule);
+  return _ref => {
+    let {
+      channel,
+      onPressHeaderLeft,
+      renderUser
+    } = _ref;
+    const handlerId = useUniqHandlerId('OpenChannelParticipantsFragment');
+    const refreshSchedule = useRef();
+    const {
+      STRINGS
+    } = useLocalization();
+    const {
+      sdk,
+      currentUser
+    } = useSendbirdChat();
+    const {
+      openMenu
+    } = useActionMenu();
+    const {
+      show
+    } = useUserProfile();
+    const {
+      users,
+      refresh,
+      loading,
+      next,
+      error,
+      upsertUser,
+      deleteUser
+    } = useUserList(sdk, {
+      queryCreator: () => channel.createParticipantListQuery({
+        limit: 20
+      })
+    });
+    useChannelHandler(sdk, handlerId, {
+      onUserExited(eventChannel, user) {
+        if (isDifferentChannel(eventChannel, channel)) return;
+        deleteUser(user.userId);
+      },
+
+      onUserBanned(eventChannel, user) {
+        if (isDifferentChannel(eventChannel, channel)) return;
+        deleteUser(user.userId);
+      },
+
+      onOperatorUpdated(eventChannel) {
+        if (isDifferentChannel(eventChannel, channel)) return;
+        if (refreshSchedule.current) clearTimeout(refreshSchedule.current);
+        refreshSchedule.current = setTimeout(() => refresh(), 500);
+      },
+
+      onUserMuted(eventChannel, user) {
+        if (isDifferentChannel(eventChannel, channel) || !eventChannel.isOpenChannel()) return; // @ts-ignore - SDK should migrate User to Participant
+
+        user.isMuted = true;
+        upsertUser(user);
+      },
+
+      onUserUnmuted(eventChannel, user) {
+        if (isDifferentChannel(eventChannel, channel) || !eventChannel.isOpenChannel()) return; // @ts-ignore - SDK should migrate User to Participant
+
+        user.isMuted = false;
+        upsertUser(user);
+      }
+
+    }, 'open');
+
+    const _renderUser = useFreshCallback((user, selectedUsers, setSelectedUsers) => {
+      if (renderUser) return renderUser(user, selectedUsers, setSelectedUsers);
+      const isUserMuted = user.isMuted;
+      const isUserOperator = channel.isOperator(user.userId);
+      const isCurrentUserOperator = channel.isOperator((currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId) ?? UNKNOWN_USER_ID);
+      return /*#__PURE__*/React.createElement(UserActionBar, {
+        muted: isUserMuted,
+        uri: user.profileUrl,
+        label: ifThenOr(isUserOperator, STRINGS.LABELS.USER_BAR_OPERATOR, ''),
+        name: (user.nickname || STRINGS.LABELS.USER_NO_NAME) + ifThenOr(user.userId === (currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId), STRINGS.LABELS.USER_BAR_ME_POSTFIX, ''),
+        disabled: user.userId === (currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId),
+        onPressActionMenu: ifThenOr(isCurrentUserOperator, () => {
+          const menuItems = [];
+          menuItems.push({
+            title: ifThenOr(isUserOperator, STRINGS.LABELS.UNREGISTER_OPERATOR, STRINGS.LABELS.REGISTER_AS_OPERATOR),
+            onPress: ifThenOr(isUserOperator, () => channel.removeOperators([user.userId]), () => channel.addOperators([user.userId]))
+          });
+          menuItems.push({
+            title: ifThenOr(isUserMuted, STRINGS.LABELS.UNMUTE, STRINGS.LABELS.MUTE),
+            onPress: ifThenOr(isUserMuted, () => channel.unmuteUser(user), () => channel.muteUser(user))
+          });
+          menuItems.push({
+            title: STRINGS.LABELS.BAN,
+            style: 'destructive',
+            onPress: () => channel.banUser(user)
+          });
+          openMenu({
+            title: user.nickname || STRINGS.LABELS.USER_NO_NAME,
+            menuItems
+          });
+        }),
+        onPressAvatar: () => show(user)
+      });
+    });
+
+    return /*#__PURE__*/React.createElement(UserListModule.Provider, {
+      headerRight: RETURN_EMPTY_STRING,
+      headerTitle: STRINGS.OPEN_CHANNEL_PARTICIPANTS.HEADER_TITLE
+    }, /*#__PURE__*/React.createElement(UserListModule.Header, {
+      onPressHeaderRight: ASYNC_NOOP,
+      onPressHeaderLeft: onPressHeaderLeft
+    }), /*#__PURE__*/React.createElement(StatusComposition, {
+      loading: loading,
+      LoadingComponent: /*#__PURE__*/React.createElement(UserListModule.StatusLoading, null),
+      error: Boolean(error),
+      ErrorComponent: /*#__PURE__*/React.createElement(UserListModule.StatusError, {
+        onPressRetry: refresh
+      })
+    }, /*#__PURE__*/React.createElement(UserListModule.List, {
+      users: users,
+      renderUser: _renderUser,
+      onLoadNext: next,
+      ListEmptyComponent: /*#__PURE__*/React.createElement(UserListModule.StatusEmpty, null)
+    })));
+  };
+};
+
+export default createOpenChannelParticipantsFragment;
+//# sourceMappingURL=createOpenChannelParticipantsFragment.js.map

package/lib/module/fragments/createOpenChannelParticipantsFragment.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useRef","useChannelHandler","useUserList","useActionMenu","ASYNC_NOOP","ifThenOr","isDifferentChannel","useFreshCallback","useUniqHandlerId","StatusComposition","UserActionBar","UNKNOWN_USER_ID","createUserListModule","useLocalization","useSendbirdChat","useUserProfile","RETURN_EMPTY_STRING","createOpenChannelParticipantsFragment","initModule","UserListModule","channel","onPressHeaderLeft","renderUser","handlerId","refreshSchedule","STRINGS","sdk","currentUser","openMenu","show","users","refresh","loading","next","error","upsertUser","deleteUser","queryCreator","createParticipantListQuery","limit","onUserExited","eventChannel","user","userId","onUserBanned","onOperatorUpdated","current","clearTimeout","setTimeout","onUserMuted","isOpenChannel","isMuted","onUserUnmuted","_renderUser","selectedUsers","setSelectedUsers","isUserMuted","isUserOperator","isOperator","isCurrentUserOperator","profileUrl","LABELS","USER_BAR_OPERATOR","nickname","USER_NO_NAME","USER_BAR_ME_POSTFIX","menuItems","push","title","UNREGISTER_OPERATOR","REGISTER_AS_OPERATOR","onPress","removeOperators","addOperators","UNMUTE","MUTE","unmuteUser","muteUser","BAN","style","banUser","OPEN_CHANNEL_PARTICIPANTS","HEADER_TITLE","Boolean"],"sources":["createOpenChannelParticipantsFragment.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport { useChannelHandler, useUserList } from '@sendbird/uikit-chat-hooks';\nimport type { ActionMenuItem } from '@sendbird/uikit-react-native-foundation';\nimport { useActionMenu } from '@sendbird/uikit-react-native-foundation';\nimport type { SendbirdParticipant } from '@sendbird/uikit-utils';\nimport { ASYNC_NOOP, ifThenOr, isDifferentChannel, useFreshCallback, useUniqHandlerId } from '@sendbird/uikit-utils';\n\nimport StatusComposition from '../components/StatusComposition';\nimport UserActionBar from '../components/UserActionBar';\nimport { UNKNOWN_USER_ID } from '../constants';\nimport type { OpenChannelParticipantsFragment } from '../domain/openChannelUserList/types';\nimport createUserListModule from '../domain/userList/module/createUserListModule';\nimport type { UserListModule } from '../domain/userList/types';\nimport { useLocalization, useSendbirdChat, useUserProfile } from '../hooks/useContext';\n\nconst RETURN_EMPTY_STRING = () => '';\nconst createOpenChannelParticipantsFragment = (\n  initModule?: Partial<UserListModule<SendbirdParticipant>>,\n): OpenChannelParticipantsFragment<SendbirdParticipant> => {\n  const UserListModule = createUserListModule<SendbirdParticipant>(initModule);\n\n  return ({ channel, onPressHeaderLeft, renderUser }) => {\n    const handlerId = useUniqHandlerId('OpenChannelParticipantsFragment');\n\n    const refreshSchedule = useRef<NodeJS.Timeout>();\n    const { STRINGS } = useLocalization();\n    const { sdk, currentUser } = useSendbirdChat();\n    const { openMenu } = useActionMenu();\n    const { show } = useUserProfile();\n\n    const { users, refresh, loading, next, error, upsertUser, deleteUser } = useUserList(sdk, {\n      queryCreator: () => channel.createParticipantListQuery({ limit: 20 }),\n    });\n\n    useChannelHandler(\n      sdk,\n      handlerId,\n      {\n        onUserExited(eventChannel, user) {\n          if (isDifferentChannel(eventChannel, channel)) return;\n          deleteUser(user.userId);\n        },\n        onUserBanned(eventChannel, user) {\n          if (isDifferentChannel(eventChannel, channel)) return;\n          deleteUser(user.userId);\n        },\n        onOperatorUpdated(eventChannel) {\n          if (isDifferentChannel(eventChannel, channel)) return;\n          if (refreshSchedule.current) clearTimeout(refreshSchedule.current);\n          refreshSchedule.current = setTimeout(() => refresh(), 500);\n        },\n        onUserMuted(eventChannel, user) {\n          if (isDifferentChannel(eventChannel, channel) || !eventChannel.isOpenChannel()) return;\n          // @ts-ignore - SDK should migrate User to Participant\n          user.isMuted = true;\n          upsertUser(user);\n        },\n        onUserUnmuted(eventChannel, user) {\n          if (isDifferentChannel(eventChannel, channel) || !eventChannel.isOpenChannel()) return;\n          // @ts-ignore - SDK should migrate User to Participant\n          user.isMuted = false;\n          upsertUser(user);\n        },\n      },\n      'open',\n    );\n\n    const _renderUser: NonNullable<typeof renderUser> = useFreshCallback((user, selectedUsers, setSelectedUsers) => {\n      if (renderUser) return renderUser(user, selectedUsers, setSelectedUsers);\n\n      const isUserMuted = user.isMuted;\n      const isUserOperator = channel.isOperator(user.userId);\n      const isCurrentUserOperator = channel.isOperator(currentUser?.userId ?? UNKNOWN_USER_ID);\n\n      return (\n        <UserActionBar\n          muted={isUserMuted}\n          uri={user.profileUrl}\n          label={ifThenOr(isUserOperator, STRINGS.LABELS.USER_BAR_OPERATOR, '')}\n          name={\n            (user.nickname || STRINGS.LABELS.USER_NO_NAME) +\n            ifThenOr(user.userId === currentUser?.userId, STRINGS.LABELS.USER_BAR_ME_POSTFIX, '')\n          }\n          disabled={user.userId === currentUser?.userId}\n          onPressActionMenu={ifThenOr(isCurrentUserOperator, () => {\n            const menuItems: ActionMenuItem['menuItems'] = [];\n\n            menuItems.push({\n              title: ifThenOr(isUserOperator, STRINGS.LABELS.UNREGISTER_OPERATOR, STRINGS.LABELS.REGISTER_AS_OPERATOR),\n              onPress: ifThenOr(\n                isUserOperator,\n                () => channel.removeOperators([user.userId]),\n                () => channel.addOperators([user.userId]),\n              ),\n            });\n\n            menuItems.push({\n              title: ifThenOr(isUserMuted, STRINGS.LABELS.UNMUTE, STRINGS.LABELS.MUTE),\n              onPress: ifThenOr(\n                isUserMuted,\n                () => channel.unmuteUser(user),\n                () => channel.muteUser(user),\n              ),\n            });\n\n            menuItems.push({\n              title: STRINGS.LABELS.BAN,\n              style: 'destructive',\n              onPress: () => channel.banUser(user),\n            });\n\n            openMenu({ title: user.nickname || STRINGS.LABELS.USER_NO_NAME, menuItems });\n          })}\n          onPressAvatar={() => show(user)}\n        />\n      );\n    });\n\n    return (\n      <UserListModule.Provider\n        headerRight={RETURN_EMPTY_STRING}\n        headerTitle={STRINGS.OPEN_CHANNEL_PARTICIPANTS.HEADER_TITLE}\n      >\n        <UserListModule.Header onPressHeaderRight={ASYNC_NOOP} onPressHeaderLeft={onPressHeaderLeft} />\n        <StatusComposition\n          loading={loading}\n          LoadingComponent={<UserListModule.StatusLoading />}\n          error={Boolean(error)}\n          ErrorComponent={<UserListModule.StatusError onPressRetry={refresh} />}\n        >\n          <UserListModule.List\n            users={users as SendbirdParticipant[]}\n            renderUser={_renderUser}\n            onLoadNext={next}\n            ListEmptyComponent={<UserListModule.StatusEmpty />}\n          />\n        </StatusComposition>\n      </UserListModule.Provider>\n    );\n  };\n};\n\nexport default createOpenChannelParticipantsFragment;\n"],"mappings":"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"}

package/lib/module/fragments/createOpenChannelRegisterOperatorFragment.js

@@ -0,0 +1,96 @@
+import React, { useCallback } from 'react';
+import { TouchableOpacity } from 'react-native';
+import { useUserList } from '@sendbird/uikit-chat-hooks';
+import StatusComposition from '../components/StatusComposition';
+import UserSelectableBar from '../components/UserSelectableBar';
+import createUserListModule from '../domain/userList/module/createUserListModule';
+import { useLocalization, useSendbirdChat } from '../hooks/useContext';
+
+const createOpenChannelRegisterOperatorFragment = initModule => {
+  const UserListModule = createUserListModule(initModule);
+  return _ref => {
+    let {
+      channel,
+      onPressHeaderLeft,
+      sortComparator,
+      renderUser,
+      onPressHeaderRight
+    } = _ref;
+    const {
+      sdk,
+      currentUser
+    } = useSendbirdChat();
+    const {
+      STRINGS
+    } = useLocalization();
+    const {
+      users,
+      refreshing,
+      refresh,
+      next,
+      error,
+      loading
+    } = useUserList(sdk, {
+      queryCreator: () => {
+        return channel.createParticipantListQuery({
+          limit: 20
+        });
+      },
+      sortComparator
+    });
+
+    const _renderUser = useCallback((user, selectedUsers, setSelectedUsers) => {
+      if (renderUser) return renderUser(user, selectedUsers, setSelectedUsers);
+      const userIdx = selectedUsers.findIndex(u => u.userId === user.userId);
+      const isSelected = userIdx > -1;
+      const isOperator = channel.isOperator(user);
+      return /*#__PURE__*/React.createElement(TouchableOpacity, {
+        activeOpacity: 0.7,
+        disabled: isOperator,
+        onPress: () => {
+          setSelectedUsers(_ref2 => {
+            let [...draft] = _ref2;
+            if (isSelected) draft.splice(userIdx, 1);else draft.push(user);
+            return draft;
+          });
+        }
+      }, /*#__PURE__*/React.createElement(UserSelectableBar, {
+        uri: user.profileUrl,
+        name: (user.nickname || STRINGS.LABELS.USER_NO_NAME) + (user.userId === (currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId) ? STRINGS.LABELS.USER_BAR_ME_POSTFIX : ''),
+        selected: isOperator || isSelected,
+        disabled: isOperator
+      }));
+    }, [channel, renderUser]);
+
+    return /*#__PURE__*/React.createElement(UserListModule.Provider, {
+      headerRight: selectedUsers => STRINGS.OPEN_CHANNEL_REGISTER_OPERATOR.HEADER_RIGHT({
+        selectedUsers
+      }),
+      headerTitle: STRINGS.OPEN_CHANNEL_REGISTER_OPERATOR.HEADER_TITLE
+    }, /*#__PURE__*/React.createElement(UserListModule.Header, {
+      shouldActivateHeaderRight: selectedUsers => selectedUsers.length > 0,
+      onPressHeaderLeft: onPressHeaderLeft,
+      onPressHeaderRight: async users => {
+        await channel.addOperators(users.map(it => it.userId));
+        onPressHeaderRight(channel);
+      }
+    }), /*#__PURE__*/React.createElement(StatusComposition, {
+      loading: loading,
+      error: Boolean(error),
+      LoadingComponent: /*#__PURE__*/React.createElement(UserListModule.StatusLoading, null),
+      ErrorComponent: /*#__PURE__*/React.createElement(UserListModule.StatusError, {
+        onPressRetry: () => refresh()
+      })
+    }, /*#__PURE__*/React.createElement(UserListModule.List, {
+      onLoadNext: next,
+      users: users,
+      renderUser: _renderUser,
+      onRefresh: refresh,
+      refreshing: refreshing,
+      ListEmptyComponent: /*#__PURE__*/React.createElement(UserListModule.StatusEmpty, null)
+    })));
+  };
+};
+
+export default createOpenChannelRegisterOperatorFragment;
+//# sourceMappingURL=createOpenChannelRegisterOperatorFragment.js.map

package/lib/module/fragments/createOpenChannelRegisterOperatorFragment.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","TouchableOpacity","useUserList","StatusComposition","UserSelectableBar","createUserListModule","useLocalization","useSendbirdChat","createOpenChannelRegisterOperatorFragment","initModule","UserListModule","channel","onPressHeaderLeft","sortComparator","renderUser","onPressHeaderRight","sdk","currentUser","STRINGS","users","refreshing","refresh","next","error","loading","queryCreator","createParticipantListQuery","limit","_renderUser","user","selectedUsers","setSelectedUsers","userIdx","findIndex","u","userId","isSelected","isOperator","draft","splice","push","profileUrl","nickname","LABELS","USER_NO_NAME","USER_BAR_ME_POSTFIX","OPEN_CHANNEL_REGISTER_OPERATOR","HEADER_RIGHT","HEADER_TITLE","length","addOperators","map","it","Boolean"],"sources":["createOpenChannelRegisterOperatorFragment.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\nimport { TouchableOpacity } from 'react-native';\n\nimport { CustomQueryInterface, useUserList } from '@sendbird/uikit-chat-hooks';\nimport type { SendbirdParticipant } from '@sendbird/uikit-utils';\n\nimport StatusComposition from '../components/StatusComposition';\nimport UserSelectableBar from '../components/UserSelectableBar';\nimport type { OpenChannelRegisterOperatorFragment } from '../domain/openChannelUserList/types';\nimport createUserListModule from '../domain/userList/module/createUserListModule';\nimport type { UserListModule } from '../domain/userList/types';\nimport { useLocalization, useSendbirdChat } from '../hooks/useContext';\n\nconst createOpenChannelRegisterOperatorFragment = (\n  initModule?: Partial<UserListModule<SendbirdParticipant>>,\n): OpenChannelRegisterOperatorFragment<SendbirdParticipant> => {\n  const UserListModule = createUserListModule<SendbirdParticipant>(initModule);\n\n  return ({ channel, onPressHeaderLeft, sortComparator, renderUser, onPressHeaderRight }) => {\n    const { sdk, currentUser } = useSendbirdChat();\n    const { STRINGS } = useLocalization();\n    const { users, refreshing, refresh, next, error, loading } = useUserList(sdk, {\n      queryCreator: () => {\n        return channel.createParticipantListQuery({\n          limit: 20,\n        }) as unknown as CustomQueryInterface<SendbirdParticipant>;\n      },\n      sortComparator,\n    });\n\n    const _renderUser: NonNullable<typeof renderUser> = useCallback(\n      (user, selectedUsers, setSelectedUsers) => {\n        if (renderUser) return renderUser(user, selectedUsers, setSelectedUsers);\n\n        const userIdx = selectedUsers.findIndex((u) => u.userId === user.userId);\n        const isSelected = userIdx > -1;\n        const isOperator = channel.isOperator(user);\n\n        return (\n          <TouchableOpacity\n            activeOpacity={0.7}\n            disabled={isOperator}\n            onPress={() => {\n              setSelectedUsers(([...draft]) => {\n                if (isSelected) draft.splice(userIdx, 1);\n                else draft.push(user);\n                return draft;\n              });\n            }}\n          >\n            <UserSelectableBar\n              uri={user.profileUrl}\n              name={\n                (user.nickname || STRINGS.LABELS.USER_NO_NAME) +\n                (user.userId === currentUser?.userId ? STRINGS.LABELS.USER_BAR_ME_POSTFIX : '')\n              }\n              selected={isOperator || isSelected}\n              disabled={isOperator}\n            />\n          </TouchableOpacity>\n        );\n      },\n      [channel, renderUser],\n    );\n\n    return (\n      <UserListModule.Provider\n        headerRight={(selectedUsers) => STRINGS.OPEN_CHANNEL_REGISTER_OPERATOR.HEADER_RIGHT({ selectedUsers })}\n        headerTitle={STRINGS.OPEN_CHANNEL_REGISTER_OPERATOR.HEADER_TITLE}\n      >\n        <UserListModule.Header\n          shouldActivateHeaderRight={(selectedUsers) => selectedUsers.length > 0}\n          onPressHeaderLeft={onPressHeaderLeft}\n          onPressHeaderRight={async (users) => {\n            await channel.addOperators(users.map((it) => it.userId));\n            onPressHeaderRight(channel);\n          }}\n        />\n        <StatusComposition\n          loading={loading}\n          error={Boolean(error)}\n          LoadingComponent={<UserListModule.StatusLoading />}\n          ErrorComponent={<UserListModule.StatusError onPressRetry={() => refresh()} />}\n        >\n          <UserListModule.List\n            onLoadNext={next}\n            users={users}\n            renderUser={_renderUser}\n            onRefresh={refresh}\n            refreshing={refreshing}\n            ListEmptyComponent={<UserListModule.StatusEmpty />}\n          />\n        </StatusComposition>\n      </UserListModule.Provider>\n    );\n  };\n};\n\nexport default createOpenChannelRegisterOperatorFragment;\n"],"mappings":"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"}

package/lib/module/fragments/createOpenChannelSettingsFragment.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { ScrollView } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { NOOP } from '@sendbird/uikit-utils';
+import { createOpenChannelSettingsModule } from '../domain/openChannelSettings';
+
+const createOpenChannelSettingsFragment = initModule => {
+  const OpenChannelSettingsModule = createOpenChannelSettingsModule(initModule);
+  return _ref => {
+    let {
+      onPressHeaderLeft = NOOP,
+      channel,
+      onPressMenuModeration,
+      onPressMenuParticipants,
+      onPressMenuDeleteChannel,
+      onNavigateToOpenChannel,
+      menuItemsCreator
+    } = _ref;
+    const {
+      colors
+    } = useUIKitTheme();
+    const {
+      left,
+      right
+    } = useSafeAreaInsets();
+    return /*#__PURE__*/React.createElement(OpenChannelSettingsModule.Provider, {
+      channel: channel,
+      onNavigateToOpenChannel: onNavigateToOpenChannel
+    }, /*#__PURE__*/React.createElement(OpenChannelSettingsModule.Header, {
+      onPressHeaderLeft: onPressHeaderLeft
+    }), /*#__PURE__*/React.createElement(ScrollView, {
+      style: {
+        backgroundColor: colors.background
+      },
+      contentContainerStyle: {
+        paddingLeft: left + styles.viewContainer.paddingHorizontal,
+        paddingRight: right + styles.viewContainer.paddingHorizontal
+      }
+    }, /*#__PURE__*/React.createElement(OpenChannelSettingsModule.Info, null), /*#__PURE__*/React.createElement(OpenChannelSettingsModule.Menu, {
+      menuItemsCreator: menuItemsCreator,
+      onPressMenuModeration: onPressMenuModeration,
+      onPressMenuParticipants: onPressMenuParticipants,
+      onPressMenuDeleteChannel: onPressMenuDeleteChannel
+    })));
+  };
+};
+
+const styles = createStyleSheet({
+  viewContainer: {
+    paddingHorizontal: 16
+  }
+});
+export default createOpenChannelSettingsFragment;
+//# sourceMappingURL=createOpenChannelSettingsFragment.js.map

package/lib/module/fragments/createOpenChannelSettingsFragment.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","ScrollView","useSafeAreaInsets","createStyleSheet","useUIKitTheme","NOOP","createOpenChannelSettingsModule","createOpenChannelSettingsFragment","initModule","OpenChannelSettingsModule","onPressHeaderLeft","channel","onPressMenuModeration","onPressMenuParticipants","onPressMenuDeleteChannel","onNavigateToOpenChannel","menuItemsCreator","colors","left","right","backgroundColor","background","paddingLeft","styles","viewContainer","paddingHorizontal","paddingRight"],"sources":["createOpenChannelSettingsFragment.tsx"],"sourcesContent":["import React from 'react';\nimport { ScrollView } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport { createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { NOOP } from '@sendbird/uikit-utils';\n\nimport { createOpenChannelSettingsModule } from '../domain/openChannelSettings';\nimport type { OpenChannelSettingsFragment, OpenChannelSettingsModule } from '../domain/openChannelSettings/types';\n\nconst createOpenChannelSettingsFragment = (\n  initModule?: Partial<OpenChannelSettingsModule>,\n): OpenChannelSettingsFragment => {\n  const OpenChannelSettingsModule = createOpenChannelSettingsModule(initModule);\n\n  return ({\n    onPressHeaderLeft = NOOP,\n    channel,\n    onPressMenuModeration,\n    onPressMenuParticipants,\n    onPressMenuDeleteChannel,\n    onNavigateToOpenChannel,\n    menuItemsCreator,\n  }) => {\n    const { colors } = useUIKitTheme();\n    const { left, right } = useSafeAreaInsets();\n\n    return (\n      <OpenChannelSettingsModule.Provider channel={channel} onNavigateToOpenChannel={onNavigateToOpenChannel}>\n        <OpenChannelSettingsModule.Header onPressHeaderLeft={onPressHeaderLeft} />\n        <ScrollView\n          style={{ backgroundColor: colors.background }}\n          contentContainerStyle={{\n            paddingLeft: left + styles.viewContainer.paddingHorizontal,\n            paddingRight: right + styles.viewContainer.paddingHorizontal,\n          }}\n        >\n          <OpenChannelSettingsModule.Info />\n          <OpenChannelSettingsModule.Menu\n            menuItemsCreator={menuItemsCreator}\n            onPressMenuModeration={onPressMenuModeration}\n            onPressMenuParticipants={onPressMenuParticipants}\n            onPressMenuDeleteChannel={onPressMenuDeleteChannel}\n          />\n        </ScrollView>\n      </OpenChannelSettingsModule.Provider>\n    );\n  };\n};\n\nconst styles = createStyleSheet({\n  viewContainer: {\n    paddingHorizontal: 16,\n  },\n});\n\nexport default createOpenChannelSettingsFragment;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,UAAT,QAA2B,cAA3B;AACA,SAASC,iBAAT,QAAkC,gCAAlC;AAEA,SAASC,gBAAT,EAA2BC,aAA3B,QAAgD,yCAAhD;AACA,SAASC,IAAT,QAAqB,uBAArB;AAEA,SAASC,+BAAT,QAAgD,+BAAhD;;AAGA,MAAMC,iCAAiC,GACrCC,UADwC,IAER;EAChC,MAAMC,yBAAyB,GAAGH,+BAA+B,CAACE,UAAD,CAAjE;EAEA,OAAO,QAQD;IAAA,IARE;MACNE,iBAAiB,GAAGL,IADd;MAENM,OAFM;MAGNC,qBAHM;MAINC,uBAJM;MAKNC,wBALM;MAMNC,uBANM;MAONC;IAPM,CAQF;IACJ,MAAM;MAAEC;IAAF,IAAab,aAAa,EAAhC;IACA,MAAM;MAAEc,IAAF;MAAQC;IAAR,IAAkBjB,iBAAiB,EAAzC;IAEA,oBACE,oBAAC,yBAAD,CAA2B,QAA3B;MAAoC,OAAO,EAAES,OAA7C;MAAsD,uBAAuB,EAAEI;IAA/E,gBACE,oBAAC,yBAAD,CAA2B,MAA3B;MAAkC,iBAAiB,EAAEL;IAArD,EADF,eAEE,oBAAC,UAAD;MACE,KAAK,EAAE;QAAEU,eAAe,EAAEH,MAAM,CAACI;MAA1B,CADT;MAEE,qBAAqB,EAAE;QACrBC,WAAW,EAAEJ,IAAI,GAAGK,MAAM,CAACC,aAAP,CAAqBC,iBADpB;QAErBC,YAAY,EAAEP,KAAK,GAAGI,MAAM,CAACC,aAAP,CAAqBC;MAFtB;IAFzB,gBAOE,oBAAC,yBAAD,CAA2B,IAA3B,OAPF,eAQE,oBAAC,yBAAD,CAA2B,IAA3B;MACE,gBAAgB,EAAET,gBADpB;MAEE,qBAAqB,EAAEJ,qBAFzB;MAGE,uBAAuB,EAAEC,uBAH3B;MAIE,wBAAwB,EAAEC;IAJ5B,EARF,CAFF,CADF;EAoBD,CAhCD;AAiCD,CAtCD;;AAwCA,MAAMS,MAAM,GAAGpB,gBAAgB,CAAC;EAC9BqB,aAAa,EAAE;IACbC,iBAAiB,EAAE;EADN;AADe,CAAD,CAA/B;AAMA,eAAelB,iCAAf"}

package/lib/module/hooks/useKeyboardStatus.js

@@ -2,10 +2,16 @@ import { useEffect, useState } from 'react';
 import { Keyboard, LayoutAnimation, Platform } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { NOOP } from '@sendbird/uikit-utils';
+let isLayoutAnimationConfigured = false;
 
 const configureNextLayoutAnimation = event => {
-  const config = LayoutAnimation.create(event.duration, event.easing);
-  LayoutAnimation.configureNext(config);
+  if (isLayoutAnimationConfigured) return;
+  const config = LayoutAnimation.create(event.duration, event.easing, LayoutAnimation.Properties.scaleY);
+  isLayoutAnimationConfigured = true;
+
+  const onEnd = () => isLayoutAnimationConfigured = false;
+
+  LayoutAnimation.configureNext(config, onEnd, onEnd);
 };
 
 const {
@@ -48,16 +54,13 @@ const useKeyboardStatus = () => {
         height,
         bottomSpace
       });
-    }), Keyboard.addListener(hideEvent, event => {
+    }), Keyboard.addListener(hideEvent, () => {
       const height = 0;
       const bottomSpace = Platform.select({
         default: height
-      });
-      const nextLayoutAnimation = Platform.select({
-        ios: configureNextLayoutAnimation,
-        default: NOOP
-      });
-      nextLayoutAnimation(event);
+      }); // const nextLayoutAnimation = Platform.select({ ios: configureNextLayoutAnimation, default: NOOP });
+      // nextLayoutAnimation(event);
+
       setKeyboardStatus({
         visible: false,
         height,