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

package/src/chat/features/shared/components/MessageReactorListSheet/MessageReactorListSheet.tsx

@@ -1,330 +0,0 @@
-// MessageReactorListSheet — RN port of AmityUiKitWeb
-// v4/chat/features/shared/components/MessageReactorListSheet/MessageReactorListSheet.tsx.
-// The reactor list shown in a bottom sheet: an underlined tab per distinct
-// reaction (plus an "All" tab), each listing who reacted. This renders the sheet
-// CONTENT only — the orchestrator mounts it inside the repo's @devvie bottom
-// sheet with the same `messageId` + `onClose` contract web's useBubbleMenu uses.
-//
-// RN adaptations from web:
-//   - Live message via MessageRepository.getMessage (web useMessageObject).
-//   - Reactor pagination via useReactorsCollection (web useReactionsCollection);
-//     IntersectionObserver → FlatList onEndReached.
-//   - The RN Tab atom's underlined variant renders a string label only and can't
-//     host web's icon+count node label, so the tab bar is rendered inline reusing
-//     the SoT underlined-tab tokens/geometry.
-
-// 1. React / RN imports
-import { useEffect, useMemo, useState, type ReactNode } from 'react';
-import { FlatList, Pressable, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import {
-  FileRepository,
-  MessageRepository,
-} from '@amityco/ts-sdk-react-native';
-
-// 2. Internal imports
-import { Typography } from '../../../../../core/design/components/Typography';
-import { Skeleton } from '../../../../../core/design/components/Skeleton';
-import { Avatar } from '../../../../../core/design/atoms/Avatar';
-import { useString } from '../../../../../core/localization';
-import { abbreviateCount } from '../../../../../core/utils/abbreviateCount';
-import { useCurrentUserId } from '../../../../hooks/useCurrentUserId';
-import { useMessageReactions } from '../../hooks/useMessageReactions';
-import { useReactorsCollection } from '../../hooks/useReactorsCollection';
-import { ReactionGlyph, SmilePlus } from '../../utils/reactionIcons';
-import { useStyles } from './styles';
-
-// 3. Types
-type MessageReactorListSheetProps = {
-  messageId: string;
-  onClose: () => void;
-  /**
-   * The tapped message, if available. Seeds `currentMessage` so totalCount /
-   * reactionsCount are correct on first render — the sheet mounts from the global
-   * bottom sheet where the getMessage live-object can lag, which would otherwise
-   * show the empty state despite reactions existing. getMessage still keeps it live.
-   */
-  initialMessage?: Amity.Message | null;
-  /**
-   * The height (px) the global bottom sheet was opened with. The @devvie sheet
-   * wraps our content in an AUTO-height inner View (only the outer Animated.View
-   * carries the sheet height), so a `flex:1` child collapses to 0 and the
-   * FlatList never shows. We give the content an EXPLICIT height instead —
-   * sheetHeight minus the drag-handle and bottom safe-area the sheet reserves —
-   * so the FlatList has a bounded parent to fill and scroll within.
-   */
-  sheetHeight?: number;
-};
-
-const ALL_TAB = 'all' as const;
-
-// @devvie reserves this above the content for its drag handle
-// (DEFAULT_HANDLE_BAR_DEFAULT_HEIGHT: paddingTop 10 + height 5 + paddingBottom 10).
-const DRAG_HANDLE_HEIGHT = 25;
-
-// 4. Named function component
-export function MessageReactorListSheet({
-  messageId,
-  onClose,
-  initialMessage = null,
-  sheetHeight,
-}: MessageReactorListSheetProps) {
-  const { styles } = useStyles();
-  const insets = useSafeAreaInsets();
-  // The content area the @devvie sheet actually gives our children.
-  const contentHeight = sheetHeight
-    ? sheetHeight - DRAG_HANDLE_HEIGHT - insets.bottom
-    : undefined;
-  const currentUserId = useCurrentUserId();
-  const { removeReaction } = useMessageReactions();
-  const allTabLabel = useString('amity_chat_tab_all');
-
-  // Live message (web useMessageObject), seeded from the tapped message.
-  const [currentMessage, setCurrentMessage] = useState<Amity.Message | null>(
-    initialMessage
-  );
-  useEffect(() => {
-    const unsubscribe = MessageRepository.getMessage(messageId, (result) => {
-      // Only overwrite once real data arrives — a loading callback with no data
-      // must not wipe the seeded initialMessage (which keeps totalCount correct).
-      if (result.data) setCurrentMessage(result.data);
-    });
-    return () => unsubscribe();
-  }, [messageId]);
-
-  const isMessageDeleted = !!currentMessage?.isDeleted;
-  const reactionMap =
-    (currentMessage?.reactions as Record<string, number> | undefined) ?? {};
-  const totalCount = isMessageDeleted ? 0 : currentMessage?.reactionsCount ?? 0;
-
-  const distinctNames = useMemo(() => {
-    if (isMessageDeleted) return [];
-    return Object.entries(reactionMap)
-      .filter(([, count]) => count > 0)
-      .sort((a, b) => (a[1] === b[1] ? a[0].localeCompare(b[0]) : b[1] - a[1]))
-      .map(([name]) => name);
-  }, [currentMessage?.reactions, isMessageDeleted]);
-
-  const [activeTab, setActiveTab] = useState<string>(
-    distinctNames.length > 1 ? ALL_TAB : distinctNames[0] ?? ALL_TAB
-  );
-
-  useEffect(() => {
-    if (activeTab === ALL_TAB) return;
-    if (distinctNames.includes(activeTab)) return;
-    setActiveTab(
-      distinctNames.length > 1 ? ALL_TAB : distinctNames[0] ?? ALL_TAB
-    );
-  }, [activeTab, distinctNames]);
-
-  const { reactors, isLoading, isLoadingFirstPage, hasMore, loadMore } =
-    useReactorsCollection({
-      referenceType: 'message',
-      referenceId: messageId,
-      limit: 25,
-      ...(activeTab !== ALL_TAB ? { reactionName: activeTab } : {}),
-    });
-
-  const myReactor = useMemo(() => {
-    if (!currentUserId) return null;
-    return reactors.find((r) => r.userId === currentUserId) ?? null;
-  }, [reactors, currentUserId]);
-
-  const others = useMemo(
-    () => (myReactor ? reactors.filter((r) => r !== myReactor) : reactors),
-    [reactors, myReactor]
-  );
-
-  async function handleOwnRowPress() {
-    if (!myReactor || !currentMessage) return;
-    onClose();
-    await removeReaction({
-      message: currentMessage,
-      reactionName: myReactor.reactionName,
-    });
-  }
-
-  const rows = useMemo(() => {
-    const list: { reactor: Amity.Reactor; isOwn: boolean }[] = [];
-    if (myReactor) list.push({ reactor: myReactor, isOwn: true });
-    for (const r of others) list.push({ reactor: r, isOwn: false });
-    return list;
-  }, [myReactor, others]);
-
-  // Tab items (web `tabs()`).
-  const tabItems: { value: string; icon?: ReactNode; text: string }[] = [];
-  const showAllTab = distinctNames.length === 0 || distinctNames.length > 1;
-  if (showAllTab) {
-    tabItems.push({
-      value: ALL_TAB,
-      text: `${allTabLabel} ${abbreviateCount(totalCount)}`,
-    });
-  }
-  for (const name of distinctNames) {
-    tabItems.push({
-      value: name,
-      icon: <ReactionGlyph name={name} size={20} />,
-      text: `${abbreviateCount(reactionMap[name] ?? 0)}`,
-    });
-  }
-
-  return (
-    <View
-      style={[
-        styles.container,
-        contentHeight ? { height: contentHeight } : styles.containerFill,
-      ]}
-    >
-      <View style={styles.tabList}>
-        {tabItems.map((t) => {
-          const active = activeTab === t.value;
-          return (
-            <Pressable
-              key={t.value}
-              style={styles.tab}
-              onPress={() => setActiveTab(t.value)}
-              accessibilityRole="tab"
-              accessibilityState={{ selected: active }}
-            >
-              <View style={styles.tabLabel}>
-                {t.icon}
-                <Typography
-                  style={[
-                    styles.tabLabelText,
-                    active
-                      ? styles.tabLabelTextActive
-                      : styles.tabLabelTextDefault,
-                  ]}
-                >
-                  {t.text}
-                </Typography>
-              </View>
-              <View
-                style={[
-                  styles.tabIndicator,
-                  active && styles.tabIndicatorActive,
-                ]}
-              />
-            </Pressable>
-          );
-        })}
-      </View>
-
-      {totalCount === 0 ? (
-        <EmptyState />
-      ) : (
-        <FlatList
-          style={styles.flatList}
-          data={rows}
-          keyExtractor={(item, index) =>
-            `${item.reactor.userId ?? 'unknown'}-${index}`
-          }
-          renderItem={({ item }) => (
-            <ReactorRow
-              reactor={item.reactor}
-              isOwn={item.isOwn}
-              onPress={item.isOwn ? handleOwnRowPress : undefined}
-            />
-          )}
-          onEndReachedThreshold={0.4}
-          onEndReached={() => {
-            if (hasMore && !isLoading && !isLoadingFirstPage) loadMore();
-          }}
-          ListFooterComponent={
-            isLoadingFirstPage || isLoading ? <SkeletonRows count={3} /> : null
-          }
-          contentContainerStyle={styles.list}
-        />
-      )}
-    </View>
-  );
-}
-
-// --- Reactor row -------------------------------------------------------------
-type ReactorRowProps = {
-  reactor: Amity.Reactor;
-  isOwn?: boolean;
-  onPress?: () => void;
-};
-
-function ReactorRow({ reactor, isOwn = false, onPress }: ReactorRowProps) {
-  const { styles } = useStyles();
-  const tapToRemoveLabel = useString(
-    'amity_common_button_tap_to_remove_reaction'
-  );
-  const displayName = reactor.user?.displayName ?? reactor.user?.userId ?? '';
-  const avatarFileUrl = (
-    reactor.user?.avatar as { fileUrl?: string } | undefined
-  )?.fileUrl;
-  const imageUrl = avatarFileUrl
-    ? FileRepository.fileUrlWithSize(avatarFileUrl, 'small')
-    : undefined;
-
-  return (
-    <Pressable
-      style={styles.row}
-      onPress={onPress}
-      accessibilityRole="button"
-      accessibilityLabel={isOwn ? tapToRemoveLabel : displayName}
-    >
-      {reactor.user && (
-        <Avatar
-          variant={imageUrl ? 'image' : 'text'}
-          shape="rounded"
-          size={32}
-          imageUrl={imageUrl}
-          initials={displayName.trim().charAt(0).toUpperCase() || '?'}
-        />
-      )}
-      <View style={styles.rowText}>
-        <Typography variant="bodyBold" style={styles.rowTitle}>
-          {reactor.user?.displayName ?? ''}
-        </Typography>
-        {isOwn ? (
-          <Typography variant="caption" style={styles.rowCaption}>
-            {tapToRemoveLabel}
-          </Typography>
-        ) : null}
-      </View>
-      <ReactionGlyph name={reactor.reactionName} size={24} />
-    </Pressable>
-  );
-}
-
-// --- Empty state -------------------------------------------------------------
-function EmptyState() {
-  const { styles, emptyStateIconColor } = useStyles();
-  const title = useString('amity_common_button_no_reactions_yet');
-  const description = useString(
-    'amity_common_label_be_first_to_react',
-    'message'
-  );
-  return (
-    <View style={styles.emptyState}>
-      <SmilePlus size={48} color={emptyStateIconColor} />
-      <View style={styles.emptyStateText}>
-        <Typography variant="titleBold" style={styles.emptyStateTitle}>
-          {title}
-        </Typography>
-        <Typography variant="caption" style={styles.emptyStateDescription}>
-          {description}
-        </Typography>
-      </View>
-    </View>
-  );
-}
-
-// --- Skeleton rows -----------------------------------------------------------
-function SkeletonRows({ count }: { count: number }) {
-  const { styles } = useStyles();
-  return (
-    <>
-      {Array.from({ length: count }).map((_, i) => (
-        <View key={i} style={styles.skeletonRow}>
-          <Skeleton circle width={40} height={40} />
-          <Skeleton width={140} height={10} borderRadius={12} />
-        </View>
-      ))}
-    </>
-  );
-}

package/src/chat/features/shared/components/MessageReactorListSheet/index.tsx

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

package/src/chat/features/shared/components/MessageReactorListSheet/styles.ts

@@ -1,150 +0,0 @@
-// Styles for MessageReactorListSheet — ported from AmityUiKitWeb
-// v4/chat/features/shared/components/MessageReactorListSheet/MessageReactorListSheet.module.css.
-// The web drawer-specific bits (margin 0 -1rem, 90vh min/max-height, desktop
-// 30rem width, vaul drag) are omitted: in RN the @devvie/bottom-sheet host owns
-// height/width/drag, so this renders as flex content inside it. Tab-bar visuals
-// reuse the SoT underlined-tab tokens/geometry (the RN Tab atom can't host an
-// icon+count node label, so the bar is rendered inline — see component note).
-
-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({
-    // .messageReactorListSheet
-    // NOTE: no `flex: 1` here. The @devvie sheet wraps our content in an
-    // AUTO-height inner View, so there is no free space for a flex child to grow
-    // into — and in RN `flex: 1` means `flexBasis: 0`, which would then collapse
-    // the container to height 0 (tabs overflow-paint, list vanishes). The
-    // component instead sets an EXPLICIT `height` (contentHeight) from the sheet
-    // height; `containerFill` is only a fallback when that height is unknown.
-    container: {
-      backgroundColor: token(AmityColorToken.SurfacePageBackgroundDefault),
-    },
-    containerFill: {
-      flex: 1,
-    },
-    // Once the container has a definite height, the FlatList CAN flex to fill the
-    // space below the fixed-height tab bar (there is now free space to grow into).
-    flatList: {
-      flex: 1,
-    },
-    // .messageReactorListSheet__tabList (underlined: row, gap 20, padding 0 per web sheet)
-    tabList: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      gap: 20,
-      paddingHorizontal: 16,
-    },
-    // one underlined tab (SoT geometry: height 56, paddingTop 16, gap 14, indicator 2)
-    tab: {
-      flexDirection: 'column',
-      alignItems: 'center',
-      gap: 14,
-      height: 56,
-      paddingTop: 16,
-      backgroundColor: 'transparent',
-    },
-    // .messageReactorListSheet__tabLabel
-    tabLabel: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'center',
-      gap: 8,
-    },
-    tabLabelText: {
-      fontSize: 17,
-      lineHeight: 24,
-    },
-    // underlined-tab label colours/weights (SoT Text/Tab/Underlined tokens)
-    tabLabelTextActive: {
-      fontWeight: '600',
-      color: token(AmityColorToken.TextTabUnderlinedActive),
-    },
-    tabLabelTextDefault: {
-      fontWeight: '400',
-      color: token(AmityColorToken.TextTabUnderlinedDefault),
-    },
-    tabIndicator: {
-      width: '100%',
-      height: 2,
-      backgroundColor: 'transparent',
-    },
-    tabIndicatorActive: {
-      backgroundColor: token(AmityColorToken.LineTabUnderlinedActive),
-    },
-    // .messageReactorListSheet__list
-    list: {
-      flex: 1,
-      paddingTop: 8,
-      paddingBottom: 48,
-    },
-    // .messageReactorListSheet__row
-    row: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      gap: 12,
-      width: '100%',
-      height: 56,
-      paddingVertical: 8,
-      paddingHorizontal: 16,
-      backgroundColor: 'transparent',
-    },
-    // .messageReactorListSheet__rowText
-    rowText: {
-      flex: 1,
-      flexDirection: 'column',
-      alignItems: 'flex-start',
-      minWidth: 0,
-    },
-    // .messageReactorListSheet__rowTitle
-    rowTitle: {
-      color: token(AmityColorToken.TextListHeaderDefaultDefault),
-    },
-    // .messageReactorListSheet__rowCaption
-    rowCaption: {
-      color: token(AmityColorToken.TextListTextDescriptionDefaultDefault),
-    },
-    // .messageReactorListSheet__emptyState
-    emptyState: {
-      flexDirection: 'column',
-      alignItems: 'center',
-      justifyContent: 'center',
-      gap: 16,
-      paddingTop: 48,
-      paddingHorizontal: 24,
-      paddingBottom: 24,
-      width: '100%',
-    },
-    // .messageReactorListSheet__emptyStateText
-    emptyStateText: {
-      flexDirection: 'column',
-      alignItems: 'center',
-    },
-    // .messageReactorListSheet__emptyStateTitle
-    emptyStateTitle: {
-      color: token(AmityColorToken.TextEmptyStateTitleDefault),
-    },
-    // .messageReactorListSheet__emptyStateDescription
-    emptyStateDescription: {
-      color: token(AmityColorToken.TextEmptyStateDescriptionDefault),
-    },
-    // skeleton row line (web Skeleton.Line 8.75rem × 0.625rem, radius 0.75rem)
-    skeletonRow: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      gap: 12,
-      height: 56,
-      paddingVertical: 8,
-      paddingHorizontal: 16,
-    },
-  });
-
-  // Empty-state SmilePlus glyph colour — web `--asc-color-icon-emptystate-icon-default`.
-  const emptyStateIconColor = token(AmityColorToken.IconEmptyStateIconDefault);
-
-  return { styles, emptyStateIconColor };
-};

package/src/chat/features/shared/components/MessageReplyBand/MessageReplyBand.tsx

@@ -1,175 +0,0 @@
-// MessageReplyBand — ported from AmityUiKitWeb features/shared/components/
-// MessageReplyBand. The "Replying to X" band shown above the composer while
-// composing a reply. Tapping the band opens the parent (see-more / image /
-// video); the trailing close button cancels the reply. Web tracked live
-// deletion via useMessageObject; RN has no such hook, so deletion is read from
-// replyTo.isDeleted (the wiring layer supplies a fresh message).
-
-// 1. React / RN imports
-import { Image, Pressable, View } from 'react-native';
-
-// 2. Internal imports
-import { Typography } from '../../../../../core/design/components/Typography';
-import { AmityIcon } from '../../../../../core/design/icons';
-import { AmityColorToken } from '../../../../../core/design/tokens/amity-color-tokens';
-import useFile from '../../../../../core/hooks/useFile';
-import { ImageSizeState } from '../../../../../core/enums';
-import { useString } from '../../../../../core/localization';
-import { useStyles } from './styles';
-
-// 3. Types
-type MessageReplyBandProps = {
-  replyTo: Amity.Message;
-  currentUserId?: string | null;
-  onCancel: () => void;
-  onOpenSeeMore: (text: string, title?: string) => void;
-  onOpenImage: (url: string, message: Amity.Message) => void;
-  onOpenVideo: (message: Amity.Message) => void;
-};
-
-type MessageData = {
-  text?: string;
-  fileId?: string;
-  thumbnailFileId?: string;
-};
-
-// 4. Named function component
-export function MessageReplyBand({
-  replyTo,
-  currentUserId,
-  onCancel,
-  onOpenSeeMore,
-  onOpenImage,
-  onOpenVideo,
-}: MessageReplyBandProps) {
-  const { styles } = useStyles();
-  const yourselfLabel = useString('amity_chat_message_replying_yourself');
-  const unknownUserLabel = useString('amity_chat_unknown_user');
-  const repliedMessageTitle = useString('amity_chat_message_replied_message');
-  const replyingToLabel = useString('amity_chat_replying_to');
-
-  const isParentDeleted = !!replyTo.isDeleted;
-  const isToYourself = replyTo.creatorId === currentUserId;
-  const creatorName = (
-    replyTo as unknown as { creator?: { displayName?: string } }
-  ).creator?.displayName;
-  const replyName = isToYourself
-    ? yourselfLabel
-    : creatorName ?? unknownUserLabel;
-
-  function handleBandPress() {
-    if (isParentDeleted) return;
-    const data = replyTo.data as MessageData | undefined;
-    if (replyTo.dataType === 'text') {
-      onOpenSeeMore((data?.text ?? '').toString(), repliedMessageTitle);
-      return;
-    }
-    if (replyTo.dataType === 'image') {
-      onOpenImage('', replyTo);
-      return;
-    }
-    if (replyTo.dataType === 'video') {
-      onOpenVideo(replyTo);
-    }
-  }
-
-  return (
-    <Pressable
-      style={styles.band}
-      onPress={handleBandPress}
-      disabled={isParentDeleted}
-      accessibilityRole="button"
-      accessibilityLabel={repliedMessageTitle}
-    >
-      <View style={styles.textCol}>
-        <Typography
-          variant="captionBold"
-          style={styles.title}
-          numberOfLines={1}
-        >
-          {replyingToLabel} {replyName}
-        </Typography>
-        <ReplyBandBody replyTo={replyTo} isParentDeleted={isParentDeleted} />
-      </View>
-      {!isParentDeleted ? <ReplyBandThumb replyTo={replyTo} /> : null}
-      <Pressable
-        style={styles.close}
-        onPress={onCancel}
-        accessibilityRole="button"
-        accessibilityLabel="Cancel reply"
-      >
-        <AmityIcon
-          name="cross-r"
-          size={16}
-          tokenColor={AmityColorToken.IconIconButtonGhostSecondaryDefault}
-        />
-      </Pressable>
-    </Pressable>
-  );
-}
-
-function ReplyBandBody({
-  replyTo,
-  isParentDeleted,
-}: {
-  replyTo: Amity.Message;
-  isParentDeleted: boolean;
-}) {
-  const { styles } = useStyles();
-  const unavailableLabel = useString('amity_chat_message_unavailable');
-  const photoLabel = useString('amity_chat_reply_photo_label');
-  const videoLabel = useString('amity_chat_reply_video_label');
-
-  let body: string | null = null;
-  if (isParentDeleted) {
-    body = unavailableLabel;
-  } else if (replyTo.dataType === 'text') {
-    body = ((replyTo.data as MessageData | undefined)?.text ?? '').toString();
-  } else if (replyTo.dataType === 'image') {
-    body = photoLabel;
-  } else if (replyTo.dataType === 'video') {
-    body = videoLabel;
-  } else if (replyTo.dataType === 'custom') {
-    body = JSON.stringify(replyTo.data ?? {});
-  }
-
-  if (body == null) return null;
-  return (
-    <Typography variant="caption" style={styles.body} numberOfLines={1}>
-      {body}
-    </Typography>
-  );
-}
-
-function ReplyBandThumb({ replyTo }: { replyTo: Amity.Message }) {
-  const { styles } = useStyles();
-  const data = replyTo.data as MessageData | undefined;
-  const isVideo = replyTo.dataType === 'video';
-  const thumbFileId = isVideo
-    ? data?.thumbnailFileId ?? ''
-    : replyTo.dataType === 'image'
-    ? data?.fileId ?? ''
-    : '';
-  const url = useFile({ fileId: thumbFileId, imageSize: ImageSizeState.small });
-
-  if (!url || (!isVideo && replyTo.dataType !== 'image')) return null;
-
-  return (
-    <View style={styles.thumbWrap}>
-      <Image source={{ uri: url }} style={styles.thumbImg} resizeMode="cover" />
-      {isVideo ? (
-        <View style={styles.playChip}>
-          <View style={styles.playChipInner}>
-            <AmityIcon
-              name="circle-play-s"
-              size={16}
-              tokenColor={
-                AmityColorToken.IconIconButtonTransparentPrimaryDefault
-              }
-            />
-          </View>
-        </View>
-      ) : null}
-    </View>
-  );
-}

package/src/chat/features/shared/components/MessageReplyBand/index.ts

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