@amityco/react-native-social-uikit 4.1.1-fdf83f6b.0 → 4.2.0

package/src/chat/features/home/components/ChannelList/ChannelList.tsx

@@ -1,209 +0,0 @@
-// ChannelList — ported from AmityUiKitWeb v4/chat/features/home/components/ChannelList.
-// Renders a live list of channels for the given types via an RN FlatList.
-//
-// RN adaptations from web:
-//   - Web's IntersectionObserver sentinel → FlatList `onEndReached`.
-//   - Web's SwipeToLeft (framer-motion) swipe-to-archive → react-native-gesture-handler
-//     `Swipeable` (renderRightActions + onSwipeableWillOpen → archiveChannel); needs
-//     GestureHandlerRootView at the app root. Web also passes excludeArchives:true so
-//     archived channels drop out of the main list — mirrored here.
-//   - The empty-state illustration (web-only) is replaced by an AmityIcon glyph.
-//   - Navigation is delegated to `onChannelPress(channelId)` from the page.
-//   - Mark-as-read on row tap: web's canonical mark-read happens on conversation
-//     OPEN (message-level `Amity.Message#markRead()` via useChatMessage/useMarkAsRead,
-//     already wired for the RN Chat/GroupChat screens). To clear the list's unread
-//     count immediately on tap, we additionally call
-//     `SubChannelRepository.startMessageReceiptSync(defaultSubChannelId)` here — the
-//     SDK marks all messages in the sub-channel read. Fire-and-forget; failures are
-//     non-fatal (the conversation-open path still marks read).
-
-// 1. React / RN imports
-import { FlatList, View } from 'react-native';
-
-// 2. Third-party imports
-import { Swipeable } from 'react-native-gesture-handler';
-import { SvgXml } from 'react-native-svg';
-import { SubChannelRepository } from '@amityco/ts-sdk-react-native';
-
-// 3. Internal imports (relative)
-import { Typography } from '../../../../../core/design/components/Typography';
-import { Button } from '../../../../../core/design/atoms/Button';
-import { AmityIcon } from '../../../../../core/design/icons';
-import { AmityColorToken } from '../../../../../core/design/tokens/amity-color-tokens';
-import { useAmityTheme } from '../../../../../core/design/theme/AmityThemeProvider';
-import { emptyCommunity2 } from '../../../../../core/assets/icons/emptyCommunity2';
-import { useString } from '../../../../../core/localization';
-import { AmityChatListItem } from '../../../../components/AmityChatListItem';
-import { useChannelsCollection } from '../../../../hooks/collections/useChannelsCollection';
-import { useChannelArchiveQuery } from '../../../../hooks/queries';
-import { useStyles } from './styles';
-
-const SKELETON_ROW_COUNT = 9;
-const ACTION_ICON_SIZE = 28;
-
-// 3. Types
-export type ChannelListProps = {
-  types?: Amity.ChannelType[];
-  /**
-   * When false, the "Push notifications have been disabled by admin" banner is
-   * shown above the list (ported from AmityUIKitIOS). Defaults to true (hidden).
-   */
-  isPushNotificationEnabled?: boolean;
-  /** Called with the pressed channel id + display name + type — the page wires navigation. */
-  onChannelPress?: (
-    channelId: string,
-    displayName?: string,
-    type?: Amity.ChannelType
-  ) => void;
-  /** Called when the empty-state create button is pressed. */
-  onCreatePress?: () => void;
-};
-
-// 4. Named function component
-export function ChannelList({
-  types,
-  isPushNotificationEnabled = true,
-  onChannelPress,
-  onCreatePress,
-}: ChannelListProps) {
-  const { styles } = useStyles();
-  const { channels, loading, hasNextPage, loadMore } = useChannelsCollection({
-    types,
-    excludeArchives: true,
-  });
-  const { archiveChannel } = useChannelArchiveQuery();
-  const archiveLabel = useString('amity_chat_archive');
-
-  const renderArchiveAction = () => (
-    <View style={styles.action}>
-      <View style={styles.actionContent}>
-        <AmityIcon
-          name="archive-r"
-          size={ACTION_ICON_SIZE}
-          tokenColor={AmityColorToken.IconSquareButtonDefaultSecondaryDefault}
-        />
-        <Typography variant="captionBold" style={styles.actionLabel}>
-          {archiveLabel}
-        </Typography>
-      </View>
-    </View>
-  );
-
-  // Mark the tapped channel read (clear its unread count) before navigating.
-  // Uses the channel's default sub-channel; the SDK marks all its messages read.
-  const handleRowPress = (channel: Amity.Channel) => {
-    if (channel.defaultSubChannelId) {
-      SubChannelRepository.startMessageReceiptSync(
-        channel.defaultSubChannelId
-      ).catch(() => {
-        // Non-fatal: unread also clears when the conversation is opened.
-      });
-    }
-    onChannelPress?.(channel.channelId, channel.displayName, channel.type);
-  };
-
-  const isInitialLoading = loading && channels.length === 0;
-
-  if (isInitialLoading) {
-    return (
-      <View style={styles.list}>
-        {Array.from({ length: SKELETON_ROW_COUNT }).map((_, i) => (
-          <AmityChatListItem.Skeleton key={i} />
-        ))}
-      </View>
-    );
-  }
-
-  // iOS AmityChatListComponent renders the push-disabled banner above BOTH the
-  // empty state and the populated list (but not the loading skeleton).
-  return (
-    <View style={styles.root}>
-      {!isPushNotificationEnabled ? <PushDisabledBanner /> : null}
-      {channels.length === 0 ? (
-        <EmptyChannelList onCreatePress={onCreatePress} />
-      ) : (
-        <FlatList
-          style={styles.list}
-          contentContainerStyle={styles.listContent}
-          data={channels}
-          keyExtractor={(channel) => channel.channelId}
-          renderItem={({ item }) => (
-            <Swipeable
-              renderRightActions={renderArchiveAction}
-              onSwipeableWillOpen={() =>
-                archiveChannel({ channelId: item.channelId })
-              }
-            >
-              <View style={styles.row}>
-                <AmityChatListItem
-                  channel={item}
-                  onPress={() => handleRowPress(item)}
-                />
-              </View>
-            </Swipeable>
-          )}
-          onEndReachedThreshold={0.7}
-          onEndReached={() => {
-            if (hasNextPage) loadMore();
-          }}
-          ListFooterComponent={
-            hasNextPage ? <AmityChatListItem.Skeleton /> : null
-          }
-        />
-      )}
-    </View>
-  );
-}
-
-// Push-notifications-disabled banner — ported from AmityUIKitIOS
-// AmityChatListComponent.pushNotificationsBanner: a bell-slash glyph + caption on
-// the subdue-banner surface, shown when push is disabled at the network/admin
-// or chat-module level.
-function PushDisabledBanner() {
-  const { styles } = useStyles();
-  const label = useString('amity_chat_notifications_disabled');
-  return (
-    <View style={styles.pushBanner}>
-      <AmityIcon
-        name="bell-slash-r"
-        size={18}
-        tokenColor={AmityColorToken.IconBannerSubdueDescriptionGeneral}
-      />
-      <Typography variant="caption" style={styles.pushBannerText}>
-        {label}
-      </Typography>
-    </View>
-  );
-}
-
-function EmptyChannelList({ onCreatePress }: { onCreatePress?: () => void }) {
-  const { styles } = useStyles();
-  const { mode } = useAmityTheme();
-  const emptyTitle = useString('amity_chat_home_empty_title');
-  const emptyDescription = useString('amity_chat_home_empty_description');
-  const createNewChatLabel = useString('amity_chat_create_new_chat');
-
-  return (
-    <View style={styles.empty}>
-      {/* Web renders the EmptyCommunity2 160×160 illustration here, not a flat
-          glyph — theme-aware (Light/Dark). */}
-      <SvgXml xml={emptyCommunity2(mode === 'dark')} width={160} height={160} />
-      <View style={styles.emptyContent}>
-        <View style={styles.emptyText}>
-          <Typography variant="titleBold" style={styles.emptyTitle}>
-            {emptyTitle}
-          </Typography>
-          <Typography variant="caption" style={styles.emptySubtitle}>
-            {emptyDescription}
-          </Typography>
-        </View>
-        <Button
-          label={createNewChatLabel}
-          icon="plus-r"
-          style={styles.createButton}
-          onPress={onCreatePress}
-        />
-      </View>
-    </View>
-  );
-}

package/src/chat/features/home/components/ChannelList/index.ts

@@ -1,2 +0,0 @@
-export { ChannelList } from './ChannelList';
-export type { ChannelListProps } from './ChannelList';

package/src/chat/features/home/components/ChannelList/styles.ts

@@ -1,102 +0,0 @@
-// Styles for ChannelList — ported from AmityUiKitWeb ChannelList.module.css.
-// Empty-state geometry mirrors the web CSS (rem → px ×16); colours resolve
-// through design tokens (no hardcoded hex).
-
-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({
-    // Wraps the push-disabled banner + the list/empty content (banner pinned on top).
-    root: {
-      flex: 1,
-    },
-    // iOS pushNotificationsBanner: HStack (icon + caption), full width, padding
-    // 12/16, subdue-banner surface. iOS spacing 2 → 4 (RN AmityIcon has no image
-    // insets, so a slightly larger gap matches the iOS look).
-    pushBanner: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'center',
-      gap: 4,
-      paddingVertical: 12,
-      paddingHorizontal: 16,
-      backgroundColor: token(AmityColorToken.SurfaceBannerSubdueGeneral),
-    },
-    pushBannerText: {
-      color: token(AmityColorToken.TextBannerSubdueTextDescriptionGeneral),
-    },
-    list: {
-      flex: 1,
-      backgroundColor: token(AmityColorToken.SurfaceListDefaultDefault),
-    },
-    listContent: {
-      flexGrow: 1,
-    },
-    // Swipe-to-archive visuals (web SwipeToLeft.module.css):
-    // row over the action layer; action bg/icon/label via squarebutton tokens;
-    // action content 5rem→80 wide, gap 0.25rem→4, padding 1rem/0.5rem→16/8.
-    row: {
-      backgroundColor: token(AmityColorToken.SurfacePageBackgroundDefault),
-    },
-    action: {
-      justifyContent: 'center',
-      alignItems: 'flex-end',
-      backgroundColor: token(
-        AmityColorToken.SurfaceSquareButtonDefaultSecondaryDefault
-      ),
-    },
-    actionContent: {
-      width: 80,
-      flexDirection: 'column',
-      alignItems: 'center',
-      justifyContent: 'center',
-      gap: 4,
-      paddingVertical: 16,
-      paddingHorizontal: 8,
-    },
-    actionLabel: {
-      color: token(AmityColorToken.TextSquareButtonDefaultSecondaryDefault),
-    },
-    // web channelList__empty: column, centered, gap 0.25rem, padding 1rem.
-    empty: {
-      flexGrow: 1,
-      flexDirection: 'column',
-      alignItems: 'center',
-      justifyContent: 'center',
-      gap: 4,
-      padding: 16,
-      backgroundColor: token(AmityColorToken.SurfacePageBackgroundDefault),
-    },
-    // web channelList__emptyContent: gap 1rem, full width.
-    emptyContent: {
-      flexDirection: 'column',
-      alignItems: 'center',
-      gap: 16,
-      width: '100%',
-    },
-    emptyText: {
-      flexDirection: 'column',
-      alignItems: 'center',
-    },
-    emptyTitle: {
-      textAlign: 'center',
-      color: token(AmityColorToken.TextEmptyStateTitleDefault),
-    },
-    emptySubtitle: {
-      textAlign: 'center',
-      color: token(AmityColorToken.TextEmptyStateDescriptionDefault),
-    },
-    // Web's Button.Main here is auto-width (inline-flex), centered by the
-    // emptyContent's align-items:center — NOT full-width. RN's Button defaults to
-    // alignSelf:flex-start, so centre it explicitly (compact, not full-screen).
-    createButton: {
-      alignSelf: 'center',
-    },
-  });
-
-  return { styles, token };
-};

package/src/chat/features/home/components/Header/Header.tsx

@@ -1,38 +0,0 @@
-// Header — ported from AmityUiKitWeb v4/chat/features/home/components/Header.
-// The web header hosts a title, the offline indicator, then a right-aligned actions
-// group (SearchButton / CreateChatMenu / ChatHomeMenu), in that order. The chat-list
-// header is the ONLY place web surfaces WaitingForNetwork.
-
-// 1. React / RN imports
-import { View } from 'react-native';
-
-// 2. Internal imports (relative)
-import { Typography } from '../../../../../core/design/components/Typography';
-import { useString } from '../../../../../core/localization';
-import { WaitingForNetwork } from '../../../../elements/WaitingForNetwork';
-import { SearchButton } from '../../elements/SearchButton';
-import { CreateChatMenu } from '../../elements/CreateChatMenu';
-import { ChatHomeMenu } from '../../elements/ChatHomeMenu';
-import { useStyles } from './styles';
-
-// 3. Named function component
-export function Header() {
-  const { styles } = useStyles();
-  const title = useString('amity_chat_home_title');
-
-  return (
-    <View style={styles.header}>
-      <Typography variant="headline" style={styles.title} numberOfLines={1}>
-        {title}
-      </Typography>
-      <View style={styles.networkSlot}>
-        <WaitingForNetwork />
-      </View>
-      <View style={styles.actions}>
-        <SearchButton />
-        <CreateChatMenu enabledChannelTypes={['conversation', 'community']} />
-        <ChatHomeMenu />
-      </View>
-    </View>
-  );
-}

package/src/chat/features/home/components/Header/index.ts

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

package/src/chat/features/home/components/Header/styles.ts

@@ -1,50 +0,0 @@
-// Styles for Header — ported from AmityUiKitWeb Header.module.css.
-// Geometry mirrors the web CSS (padding 0.75rem 1rem, gap 0.5rem → px ×16);
-// colours resolve through 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: 12,
-      paddingHorizontal: 16,
-      backgroundColor: token(AmityColorToken.SurfaceListDefaultDefault),
-    },
-    // Web gives the title and the actions `flex: 1 0 0` each and lets the offline
-    // indicator between them take its natural width — fine on a desktop header.
-    // On a phone the two halves claim everything and the indicator (flexShrink: 0)
-    // overflowed under the action buttons, so RN sizes both sides to their content
-    // and gives the middle slot the slack instead.
-    title: {
-      flexShrink: 1,
-      minWidth: 0,
-      color: token(AmityColorToken.TextListHeaderDefaultDefault),
-    },
-    /** Centres WaitingForNetwork between the title and the actions. */
-    networkSlot: {
-      flex: 1,
-      minWidth: 0,
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'center',
-    },
-    // web header__actions: justify-content flex-end, gap 0.75rem→12
-    actions: {
-      flexShrink: 0,
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'flex-end',
-      gap: 12,
-    },
-  });
-
-  return { styles };
-};

package/src/chat/features/home/components/NotificationsDisabledBanner/NotificationsDisabledBanner.tsx

@@ -1,36 +0,0 @@
-// NotificationsDisabledBanner — ported from AmityUiKitWeb
-// v4/chat/features/home/components/NotificationsDisabledBanner.
-// A subdued status banner shown when chat push notifications are disabled.
-// (On web this is currently gated off; ChatHome does not mount it for M1.)
-
-// 1. React / RN imports
-import { View } from 'react-native';
-
-// 2. Internal imports (relative)
-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, ICON_SIZE } from './styles';
-
-// 3. Named function component
-export function NotificationsDisabledBanner() {
-  const { styles, token } = useStyles();
-  const text = useString('amity_chat_notifications_disabled');
-
-  return (
-    <View style={styles.banner} accessibilityRole="alert">
-      <AmityIcon
-        name="bell-slash-r"
-        size={ICON_SIZE}
-        // Web uses icon-banner-subdue-description-general; SoT (717) lacks the Subdue
-        // icon variant → color-identical GreyBG variant (same alias {Secondary/400}/
-        // {Secondary/500}). Web slug allowlisted in check-fidelity.
-        color={token(AmityColorToken.IconBannerSubdueDescriptionGeneral)}
-      />
-      <Typography variant="caption" style={styles.text}>
-        {text}
-      </Typography>
-    </View>
-  );
-}

package/src/chat/features/home/components/NotificationsDisabledBanner/index.ts

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

package/src/chat/features/home/components/NotificationsDisabledBanner/styles.ts

@@ -1,35 +0,0 @@
-// Styles for NotificationsDisabledBanner — ported from AmityUiKitWeb
-// NotificationsDisabledBanner.module.css. Geometry mirrors the web CSS
-// (padding 0.75rem 1rem, gap 0.25rem, icon 1.125rem → px ×16); colours resolve
-// through 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 ICON_SIZE = 18; // web 1.125rem
-
-export const useStyles = () => {
-  const token = useToken();
-
-  const styles = StyleSheet.create({
-    banner: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'center',
-      gap: 4,
-      paddingVertical: 12,
-      paddingHorizontal: 16,
-      backgroundColor: token(AmityColorToken.SurfaceBannerSubdueGeneral),
-    },
-    text: {
-      textAlign: 'center',
-      // Web uses text-banner-subdue-textdescription-general; the cleverden SoT (717)
-      // doesn't ship the Subdue text variant, so use the color-identical GreyBG variant
-      // (same alias chain → same hex). Web slug allowlisted in check-fidelity.
-      color: token(AmityColorToken.TextBannerSubdueTextDescriptionGeneral),
-    },
-  });
-
-  return { styles, token };
-};

package/src/chat/features/home/components/index.ts

@@ -1,3 +0,0 @@
-export * from './ChannelList';
-export * from './Header';
-export * from './NotificationsDisabledBanner';

package/src/chat/features/home/elements/ChatHomeMenu/ChatHomeMenu.tsx

@@ -1,89 +0,0 @@
-// ChatHomeMenu — the "⋯" chat-home overflow menu, ported from AmityUiKitWeb
-// v4/chat/features/home/elements/ChatHomeMenu.
-//
-// Behaviour (mirrors web): a filled ellipsis icon button opens a Popover with a
-// single "Archived" Menu.Item that navigates to the archived-chats page.
-//
-// RN adaptations from web:
-//   - Web `Button.Icon` (EllipsisV, filled/secondary, size 32) → a Pressable +
-//     AmityIcon on a filled surface (same pattern as CreateChatMenu).
-//   - Web `useChatNavigation().push({ type: ChatPageTypes.ArchivedChatPage })` →
-//     React Navigation. The `AmityArchivedChatPage` route lives in the
-//     orchestrator-owned RouteParamList, so the nav prop is typed `any` (as in
-//     AmityChatHomePage) to avoid coupling this file to the param list.
-//   - Web `forceShowPopUp` is a web-only positioning flag with no RN equivalent.
-
-// 1. React / RN imports
-import { Pressable } from 'react-native';
-
-// 2. Third-party imports
-import { useNavigation } from '@react-navigation/native';
-import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
-
-// 3. Internal imports (relative)
-import { Popover } from '../../../../../core/design/components/Popover';
-import { Menu } from '../../../../../core/design/components/Menu';
-import { AmityIcon } from '../../../../../core/design/icons';
-import { AmityColorToken } from '../../../../../core/design/tokens/amity-color-tokens';
-import { useString } from '../../../../../core/localization';
-import { useStyles } from './styles';
-
-// The filled "⋯" trigger button (module-scope so it is not re-created per render).
-type MenuButtonProps = {
-  accessibilityLabel: string;
-  isOpen?: boolean;
-  onPress?: () => void;
-};
-
-function MenuButton({ accessibilityLabel, isOpen, onPress }: MenuButtonProps) {
-  const { styles } = useStyles();
-  return (
-    <Pressable
-      style={styles.iconButton}
-      accessibilityRole="button"
-      accessibilityLabel={accessibilityLabel}
-      accessibilityState={{ expanded: isOpen }}
-      onPress={onPress}
-    >
-      <AmityIcon
-        name="ellipsis-v-r"
-        size={24}
-        tokenColor={AmityColorToken.IconIconButtonFilledSecondaryDefault}
-      />
-    </Pressable>
-  );
-}
-
-// 4. Named function component
-export function ChatHomeMenu() {
-  const navigation = useNavigation<NativeStackNavigationProp<any>>();
-  const archivedLabel = useString('amity_chat_archived');
-
-  return (
-    <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, isOpen }) => (
-        <MenuButton
-          accessibilityLabel="Chat menu"
-          isOpen={isOpen}
-          onPress={openPopover}
-        />
-      )}
-    >
-      {({ closePopover }) => (
-        <Menu container="popover">
-          <Menu.Item
-            icon="archive-r"
-            label={archivedLabel}
-            typography="body"
-            onPress={() => {
-              closePopover();
-              navigation.navigate('AmityArchivedChatPage');
-            }}
-          />
-        </Menu>
-      )}
-    </Popover>
-  );
-}

package/src/chat/features/home/elements/ChatHomeMenu/index.ts

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

package/src/chat/features/home/elements/ChatHomeMenu/styles.ts

@@ -1,26 +0,0 @@
-// Styles for ChatHomeMenu — the filled "⋯" icon button.
-// Web: Button.Icon styleType="filled" hierarchy="secondary" size 32 (EllipsisV).
-// Colours via design tokens (no hardcoded hex).
-
-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({
-    iconButton: {
-      width: 32,
-      height: 32,
-      borderRadius: 16,
-      alignItems: 'center',
-      justifyContent: 'center',
-      backgroundColor: token(
-        AmityColorToken.SurfaceIconButtonFilledSecondaryEnabled
-      ),
-    },
-  });
-
-  return { styles, token };
-};