@amityco/react-native-social-uikit 4.1.0 → 4.1.1-d7da0c5c.0

package/src/social/features/chat/features/group/banned-members/components/BannedMemberList/BannedMemberList.tsx

@@ -0,0 +1,126 @@
+// BannedMemberList — ported from AmityUiKitWeb
+// v4/chat/features/group/banned-members/components/BannedMemberList.
+//
+// Lists banned members (memberships: ['banned']) reusing the shared MemberItem
+// row. Web rendered MemberItem's generic ActionMenu from a one-item `unban`
+// array; RN fills MemberItem's `trailing` slot with a small Popover + Menu that
+// carries the single unban action (the banned list has no separate curated
+// action component). The unban handler is supplied by useBannedGroupMembers.
+
+// 1. React / RN imports
+import { type ReactElement } from 'react';
+import { FlatList, Pressable, View } from 'react-native';
+
+// 2. Internal imports
+import { MemberItem } from '../../../members/components/MemberItem';
+import { EmptyState } from '../../../../../features/shared/components/EmptyState';
+import { Menu } from '../../../../../../../../core/design/components/Menu';
+import { Popover } from '../../../../../../../../core/design/components/Popover';
+import { AmityIcon } from '../../../../../../../../core/design/icons';
+import { AmityColorToken } from '../../../../../../../../core/design/tokens/amity-color-tokens';
+import { resolveString } from '../../../../../../../../core/localization';
+import { useChannelMembersCollection } from '../../../../../hooks/collections';
+import { useStyles } from './styles';
+
+// Local constants (mirror AmityUiKitWeb v4/chat/constants).
+const LIST_PAGE_LIMIT = 20;
+const LIST_SKELETON_ROW_COUNT = 9;
+
+// 3. Types
+type BannedMemberListProps = {
+  channelId: string;
+  search: string;
+  onUnban: (user: Amity.InternalUser) => void;
+};
+
+// 4. Named function component
+export function BannedMemberList({
+  channelId,
+  search,
+  onUnban,
+}: BannedMemberListProps) {
+  const { styles } = useStyles();
+
+  const { members, isLoadingFirstPage, isLoading, hasMore, loadMore } =
+    useChannelMembersCollection({
+      channelId,
+      search,
+      memberships: ['banned'],
+      limit: LIST_PAGE_LIMIT,
+    });
+
+  if (members.length === 0 && !isLoading && !isLoadingFirstPage) {
+    return <EmptyState variant="no-banned-users" />;
+  }
+
+  const footer: ReactElement | null =
+    isLoadingFirstPage || isLoading ? (
+      <>
+        {Array.from({ length: LIST_SKELETON_ROW_COUNT }).map((_, i) => (
+          <MemberItem.Skeleton key={`skeleton-${i}`} />
+        ))}
+      </>
+    ) : null;
+
+  return (
+    <FlatList
+      style={styles.bannedMemberList}
+      data={members}
+      keyExtractor={(member) => member.userId}
+      renderItem={({ item: member }) => {
+        if (!member.user || !member.userId) return null;
+        const memberUser = member.user;
+        return (
+          <MemberItem
+            user={memberUser}
+            isModerator={false}
+            isCurrentUser={false}
+            trailing={
+              <Popover
+                placement="bottom right"
+                // eslint-disable-next-line react/no-unstable-nested-components -- Popover's trigger is a render-prop, not a component definition.
+                trigger={({ openPopover }) => (
+                  <Pressable
+                    style={styles.actionButton}
+                    onPress={openPopover}
+                    accessibilityRole="button"
+                    accessibilityLabel={`Actions for ${
+                      memberUser.displayName ?? memberUser.userId
+                    }`}
+                  >
+                    <AmityIcon
+                      name="ellipsis-r"
+                      size={24}
+                      tokenColor={AmityColorToken.IconListLeadingDefaultDefault}
+                    />
+                  </Pressable>
+                )}
+              >
+                {({ closePopover }) => (
+                  <View style={styles.menuContainer}>
+                    <Menu variant="chat" container="popover">
+                      <Menu.Item
+                        icon="ban-r"
+                        label={resolveString('amity_chat_member_action_unban')}
+                        typography="body"
+                        onPress={() => {
+                          closePopover();
+                          onUnban(memberUser);
+                        }}
+                      />
+                    </Menu>
+                  </View>
+                )}
+              </Popover>
+            }
+          />
+        );
+      }}
+      onEndReachedThreshold={0.7}
+      onEndReached={() => {
+        if (hasMore && !isLoadingFirstPage && !isLoading) loadMore();
+      }}
+      ListFooterComponent={footer}
+    />
+  );
+}

package/src/social/features/chat/features/group/banned-members/components/BannedMemberList/index.ts

@@ -0,0 +1 @@
+export { BannedMemberList } from './BannedMemberList';

package/src/social/features/chat/features/group/banned-members/components/BannedMemberList/styles.ts

@@ -0,0 +1,20 @@
+// Styles for BannedMemberList — ported from AmityUiKitWeb BannedMemberList.module.css.
+// FlatList fills its parent; the trailing action popover uses the shared menu padding.
+
+import { StyleSheet } from 'react-native';
+
+export const useStyles = () => {
+  const styles = StyleSheet.create({
+    bannedMemberList: {
+      flex: 1,
+    },
+    actionButton: {
+      padding: 4,
+    },
+    menuContainer: {
+      padding: 4,
+    },
+  });
+
+  return { styles };
+};

package/src/social/features/chat/features/group/banned-members/components/Header/Header.tsx

@@ -0,0 +1,17 @@
+// Header — ported from AmityUiKitWeb
+// v4/chat/features/group/banned-members/components/Header. A back + title top bar.
+
+// 2. Internal imports
+import { TopBar } from '../../../../../elements/TopBar';
+import { useString } from '../../../../../../../../core/localization';
+
+// 3. Types
+type HeaderProps = {
+  onBack: () => void;
+};
+
+// 4. Named function component
+export function Header({ onBack }: HeaderProps) {
+  const title = useString('amity_chat_banned_member_list_navbar_title');
+  return <TopBar title={title} leadingType="back" onLeading={onBack} />;
+}

package/src/social/features/chat/features/group/banned-members/components/Header/index.ts

@@ -0,0 +1 @@
+export { Header } from './Header';

package/src/social/features/chat/features/group/banned-members/components/index.ts

@@ -0,0 +1,2 @@
+export { Header } from './Header';
+export { BannedMemberList } from './BannedMemberList';

package/src/social/features/chat/features/group/banned-members/hooks/index.ts

@@ -0,0 +1 @@
+export { useBannedGroupMembers } from './useBannedGroupMembers';

package/src/social/features/chat/features/group/banned-members/hooks/useBannedGroupMembers.ts

@@ -0,0 +1,75 @@
+// useBannedGroupMembers — ported from AmityUiKitWeb
+// v4/chat/features/group/banned-members/hooks/useBannedGroupMembers.
+//
+// State + actions for the banned-member list: debounced search, back, and the
+// per-member unban action. Web debounced via react-use and confirmed through the
+// ConfirmProvider; RN uses a setTimeout debounce and the native `Alert.alert`,
+// calls `ChannelRepository.Moderation.unbanMembers` (gated on
+// `useAuth().isConnected`), and surfaces the toast through the
+// `useChatNotifications` stub. `onBack` defaults to `useChatNavigation().pop()`.
+
+import { useEffect, useState } from 'react';
+import { Alert } from 'react-native';
+import { ChannelRepository } from '@amityco/ts-sdk-react-native';
+import { resolveString } from '../../../../../../../core/localization';
+import useAuth from '../../../../../../../core/hooks/useAuth';
+import { useChatNavigation } from '../../../../hooks/useChatNavigation';
+import { useChatNotifications } from '../../../../hooks/useChatNotifications';
+
+const SEARCH_DEBOUNCE_MS = 300;
+
+export type UseBannedGroupMembersParams = {
+  channelId: string;
+  onBack?: () => void;
+};
+
+export function useBannedGroupMembers({
+  channelId,
+  onBack,
+}: UseBannedGroupMembersParams) {
+  const { pop } = useChatNavigation();
+  const { isConnected } = useAuth();
+  const { success } = useChatNotifications();
+
+  const [searchText, setSearchText] = useState('');
+  const [debouncedSearch, setDebouncedSearch] = useState('');
+
+  useEffect(() => {
+    const timer = setTimeout(
+      () => setDebouncedSearch(searchText),
+      SEARCH_DEBOUNCE_MS
+    );
+    return () => clearTimeout(timer);
+  }, [searchText]);
+
+  const handleBack = onBack ?? pop;
+
+  function handleUnban(user: Amity.InternalUser) {
+    Alert.alert(
+      resolveString('amity_chat_unban_confirm_title'),
+      resolveString('amity_chat_unban_confirm_message'),
+      [
+        { text: resolveString('amity_chat_cancel'), style: 'cancel' },
+        {
+          text: resolveString('amity_chat_unban_confirm_label'),
+          onPress: async () => {
+            if (!isConnected) return;
+            await ChannelRepository.Moderation.unbanMembers(channelId, [
+              user.userId,
+            ]);
+            success({ content: resolveString('amity_chat_action_unban_user') });
+          },
+        },
+      ]
+    );
+  }
+
+  return {
+    channelId,
+    searchText,
+    setSearchText,
+    debouncedSearch,
+    handleBack,
+    handleUnban,
+  };
+}

package/src/social/features/chat/features/group/banned-members/index.ts

@@ -0,0 +1 @@
+export { BannedGroupMembers } from './BannedGroupMembers';

package/src/social/features/chat/features/group/banned-members/styles.ts

@@ -0,0 +1,23 @@
+// Styles for BannedGroupMembers — ported from AmityUiKitWeb
+// BannedGroupMembers.module.css. Column filling the page; search bar padding 8/16.
+
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../../../../../core/design/theme/useToken';
+import { AmityColorToken } from '../../../../../../core/design/tokens/amity-color-tokens';
+
+export const useStyles = () => {
+  const token = useToken();
+
+  const styles = StyleSheet.create({
+    bannedGroupMembers: {
+      flex: 1,
+      backgroundColor: token(AmityColorToken.SurfacePageBackgroundDefault),
+    },
+    searchBar: {
+      paddingVertical: 8,
+      paddingHorizontal: 16,
+    },
+  });
+
+  return { styles, token };
+};

package/src/social/features/chat/features/group/chat/GroupChat.tsx

@@ -0,0 +1,150 @@
+// GroupChat — the group conversation container, ported from AmityUiKitWeb
+// group/chat/GroupChat. Same shared thread infra as the 1-1 Chat (MessageList,
+// composer, viewers, action menu, see-more), driven by useGroupChat. Adds a group
+// Header (→ settings) and a banned empty-state branch.
+
+import { Dimensions, KeyboardAvoidingView, Platform, View } from 'react-native';
+
+import { useBottomSheet } from '../../../../../../core/stores/slices/bottomSheetSlice';
+import { AmityMessageComposer } from '../../../components/AmityMessageComposer';
+import { ImageViewer } from '../../shared/components/ImageViewer';
+import { VideoPlayer } from '../../shared/components/VideoPlayer';
+import { MessageFullTextScreen } from '../../shared/components/MessageFullTextScreen';
+import { ContentReportReason } from '../../shared/components/ContentReportReason';
+import { MessageReactorListSheet } from '../../shared/components/MessageReactorListSheet';
+import { MutedBanner } from '../../shared/components/MutedBanner';
+import { MessageList } from '../../conversation/components/MessageList';
+import { Header } from './components/Header';
+import { BannedEmptyState } from './components/BannedEmptyState';
+import { useGroupChat } from './hooks/useGroupChat';
+import { useStyles } from './styles';
+
+export type GroupChatProps = {
+  channelId?: string;
+  isJustCreated?: boolean;
+  onBack: () => void;
+};
+
+export function GroupChat({
+  channelId,
+  isJustCreated,
+  onBack,
+}: GroupChatProps) {
+  const { styles } = useStyles();
+  const c = useGroupChat({ channelId, isJustCreated });
+  // Reactor-list sheet — RN MOBILE ADAPTATION: push the reactor list into the
+  // repo's global @devvie bottom sheet so it slides up as a sheet with a backdrop
+  // + drag/tap-to-close (BUG #15).
+  const { openBottomSheet, closeBottomSheet } = useBottomSheet();
+
+  function openReactorList(message: Amity.Message) {
+    // Tall drawer — web presents this list in a ~90vh drawer. The sheet content
+    // needs an explicit height (see MessageReactorListSheet: @devvie's inner
+    // wrapper is auto-height, so a flex child collapses), so pass it down too.
+    const reactorSheetHeight = Math.round(
+      Dimensions.get('window').height * 0.7
+    );
+    openBottomSheet({
+      height: reactorSheetHeight,
+      content: (
+        <MessageReactorListSheet
+          messageId={message.messageId}
+          initialMessage={message}
+          onClose={closeBottomSheet}
+          sheetHeight={reactorSheetHeight}
+        />
+      ),
+    });
+  }
+
+  if (c.isBanned) {
+    return (
+      <View style={styles.container}>
+        <Header
+          variant="banned"
+          channel={c.channel}
+          channelDisplayName={c.channelDisplayName}
+          onBack={onBack}
+          onOpenSettings={c.handleOpenSettings}
+        />
+        <BannedEmptyState />
+      </View>
+    );
+  }
+
+  return (
+    <KeyboardAvoidingView
+      style={styles.container}
+      behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+    >
+      <Header
+        channel={c.channel}
+        channelDisplayName={c.channelDisplayName}
+        onBack={onBack}
+        onOpenSettings={c.handleOpenSettings}
+      />
+      <View style={{ flex: 1 }}>
+        <MessageList
+          items={c.items}
+          currentUserId={c.currentUserId}
+          isGroupChat
+          hasMore={c.hasMore}
+          onLoadMore={c.loadMore}
+          atBottom={c.atBottom}
+          onAtBottomChange={c.setAtBottom}
+          newMessage={c.newMessage}
+          onClearNewMessage={c.clearNewMessage}
+          onOpenImage={c.openImageViewer}
+          onOpenVideo={c.openVideoPlayer}
+          onOpenFailedSheet={c.openFailedSheet}
+          onOpenBubbleMenu={c.openBubbleMenu}
+          onOpenReactorList={(m) => openReactorList(m)}
+          isLoading={c.isLoading}
+          isLoadingFirstPage={c.isLoadingFirstPage}
+          onSeeMore={c.openSeeMore}
+          pendingUploads={c.composer.pendingUploads}
+          // PDT-4155 (web PR 1818): only group channels have moderators, so web
+          // threads isModerator from useGroupChat and the 1:1 Chat does not.
+          viewerIsModerator={c.isModerator}
+          bubbleHandlers={{
+            onEdit: c.handleBubbleEdit,
+            onReply: c.handleBubbleReply,
+            onDelete: c.handleBubbleDelete,
+            onCopy: c.handleBubbleCopy,
+            onSave: c.handleBubbleSave,
+            onReport: c.handleBubbleReport,
+          }}
+        />
+      </View>
+
+      {c.showMutedBanner ? (
+        <MutedBanner variant={c.mutedVariant} />
+      ) : (
+        <AmityMessageComposer
+          composer={c.composer}
+          onOpenSeeMore={c.openSeeMore}
+          onOpenImage={c.openImageViewer}
+          onOpenVideo={c.openVideoPlayer}
+        />
+      )}
+
+      {c.imageViewerProps ? <ImageViewer {...c.imageViewerProps} /> : null}
+      {c.videoPlayerProps ? <VideoPlayer {...c.videoPlayerProps} /> : null}
+      {c.seeMore ? (
+        <MessageFullTextScreen
+          visible
+          text={c.seeMore.text}
+          title={c.seeMore.title}
+          onClose={c.closeSeeMore}
+        />
+      ) : null}
+      {c.reportMessage ? (
+        <ContentReportReason
+          visible
+          message={c.reportMessage}
+          onClose={c.closeReport}
+        />
+      ) : null}
+    </KeyboardAvoidingView>
+  );
+}

package/src/social/features/chat/features/group/chat/components/BannedEmptyState/BannedEmptyState.tsx

@@ -0,0 +1,34 @@
+// BannedEmptyState — ported from AmityUiKitWeb group/chat/components/BannedEmptyState.
+// Shown in place of the thread when the viewer is banned from the group.
+
+import { View } from 'react-native';
+
+import { Typography } from '../../../../../../../../core/design/components/Typography';
+import { AmityIcon } from '../../../../../../../../core/design/icons';
+import { AmityColorToken } from '../../../../../../../../core/design/tokens/amity-color-tokens';
+import { useString } from '../../../../../../../../core/localization';
+import { useStyles } from './styles';
+
+export function BannedEmptyState() {
+  const { styles, token } = useStyles();
+  const title = useString('amity_chat_error_banned_chat_title');
+  const subtitle = useString('amity_chat_error_banned_chat_sub_title');
+
+  return (
+    <View style={styles.container}>
+      <AmityIcon
+        name="comment-exclamation-l"
+        size={64}
+        color={token(AmityColorToken.IconEmptyStateIconDefault)}
+      />
+      <View style={styles.text}>
+        <Typography variant="titleBold" style={styles.title}>
+          {title}
+        </Typography>
+        <Typography variant="caption" style={styles.subtitle}>
+          {subtitle}
+        </Typography>
+      </View>
+    </View>
+  );
+}

package/src/social/features/chat/features/group/chat/components/BannedEmptyState/index.ts

@@ -0,0 +1 @@
+export { BannedEmptyState } from './BannedEmptyState';

package/src/social/features/chat/features/group/chat/components/BannedEmptyState/styles.ts

@@ -0,0 +1,27 @@
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../../../../../../../core/design/theme/useToken';
+import { AmityColorToken } from '../../../../../../../../core/design/tokens/amity-color-tokens';
+
+export const useStyles = () => {
+  const token = useToken();
+  const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: 16,
+      padding: 24,
+      backgroundColor: token(AmityColorToken.SurfacePageBackgroundDefault),
+    },
+    text: { alignItems: 'center', maxWidth: 252 },
+    title: {
+      color: token(AmityColorToken.TextEmptyStateTitleDefault),
+      textAlign: 'center',
+    },
+    subtitle: {
+      color: token(AmityColorToken.TextEmptyStateDescriptionDefault),
+      textAlign: 'center',
+    },
+  });
+  return { styles, token };
+};

package/src/social/features/chat/features/group/chat/components/Header/Header.tsx

@@ -0,0 +1,92 @@
+// Header — group conversation top bar, ported from AmityUiKitWeb
+// group/chat/components/Header. Back button + a tappable identity (group avatar +
+// name) that opens group settings. Banned variant shows the banned label and is not
+// tappable. While the device is offline, the default (non-banned) identity shows a
+// "waiting for network" subtitle (spinner + caption) under the name.
+
+import { Pressable, View } from 'react-native';
+
+import useFile from '../../../../../../../../core/hooks/useFile';
+import { Button } from '../../../../../../../../core/design/atoms/Button';
+import { Typography } from '../../../../../../../../core/design/components/Typography';
+import { Loader } from '../../../../../../../../core/design/atoms/Loader';
+import { useString } from '../../../../../../../../core/localization';
+import { Avatar } from '../../../../../elements/Avatar';
+import { useNetworkOnline } from '../../../../../hooks';
+import { useStyles } from './styles';
+
+type HeaderProps = {
+  channel?: Amity.Channel;
+  channelDisplayName?: string;
+  variant?: 'default' | 'banned';
+  onBack: () => void;
+  onOpenSettings: () => void;
+};
+
+export function Header({
+  channel,
+  channelDisplayName,
+  variant = 'default',
+  onBack,
+  onOpenSettings,
+}: HeaderProps) {
+  const { styles } = useStyles();
+  const { online } = useNetworkOnline();
+  const avatarUrl = useFile({
+    fileId:
+      (channel as { avatarFileId?: string } | undefined)?.avatarFileId ?? '',
+  });
+  const bannedTitle = useString('amity_chat_error_banned_chat_navbar_title');
+  const waitingForNetwork = useString('amity_chat_waiting_for_network');
+  const isBanned = variant === 'banned';
+  const title = isBanned ? bannedTitle : channelDisplayName ?? '';
+
+  const identity = (
+    <View style={styles.identity}>
+      <View style={styles.avatar}>
+        <Avatar.GroupChat
+          avatarUrl={avatarUrl}
+          variant={isBanned ? 'banned' : 'default'}
+        />
+      </View>
+      <View style={styles.title}>
+        <Typography variant="titleBold" style={styles.name} numberOfLines={1}>
+          {title}
+        </Typography>
+        {!isBanned && !online ? (
+          <View style={styles.subtitle}>
+            <Loader.Spinner size="sm" />
+            <Typography variant="caption" style={styles.subtitleText}>
+              {waitingForNetwork}
+            </Typography>
+          </View>
+        ) : null}
+      </View>
+    </View>
+  );
+
+  return (
+    <View style={styles.header}>
+      <Button.Icon
+        icon="chevron-left"
+        styleType="ghost"
+        hierarchy="secondary"
+        size={32}
+        onPress={onBack}
+        accessibilityLabel="Back"
+      />
+      {isBanned ? (
+        identity
+      ) : (
+        <Pressable
+          style={styles.identityButton}
+          onPress={onOpenSettings}
+          accessibilityRole="button"
+          accessibilityLabel="Open group settings"
+        >
+          {identity}
+        </Pressable>
+      )}
+    </View>
+  );
+}

package/src/social/features/chat/features/group/chat/components/Header/index.ts

@@ -0,0 +1 @@
+export { Header } from './Header';

package/src/social/features/chat/features/group/chat/components/Header/styles.ts

@@ -0,0 +1,53 @@
+// Geometry from web group/chat Header.module.css: gap 0.5rem→8, padding
+// 0.625rem 1rem→10/16, avatar 2.5rem→40, name 1.0625rem/1.5rem→17/24 weight 600
+// letterSpacing -0.0256rem→-0.4. Colours via design tokens.
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../../../../../../../core/design/theme/useToken';
+import { AmityColorToken } from '../../../../../../../../core/design/tokens/amity-color-tokens';
+
+export const useStyles = () => {
+  const token = useToken();
+  const styles = StyleSheet.create({
+    header: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 8,
+      paddingVertical: 10,
+      paddingHorizontal: 16,
+      backgroundColor: token(AmityColorToken.SurfaceListDefaultDefault),
+      borderBottomWidth: 1,
+      borderBottomColor: token(AmityColorToken.LineDividerPostDefault),
+    },
+    identityButton: { flex: 1, minWidth: 0 },
+    identity: {
+      flex: 1,
+      minWidth: 0,
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 12,
+    },
+    avatar: { width: 40, height: 40, flexShrink: 0 },
+    title: {
+      flex: 1,
+      minWidth: 0,
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+    },
+    name: {
+      fontSize: 17,
+      lineHeight: 24,
+      fontWeight: '600',
+      letterSpacing: -0.4,
+      color: token(AmityColorToken.TextListHeaderDefaultDefault),
+    },
+    subtitle: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 4,
+    },
+    subtitleText: {
+      color: token(AmityColorToken.TextListTextDescriptionDefaultDefault),
+    },
+  });
+  return { styles, token };
+};

package/src/social/features/chat/features/group/chat/components/index.ts

@@ -0,0 +1,2 @@
+export * from './Header';
+export * from './BannedEmptyState';

package/src/social/features/chat/features/group/chat/hooks/index.ts

@@ -0,0 +1 @@
+export { useGroupChat } from './useGroupChat';