@sendbird/uikit-react-native-foundation 2.3.0 → 2.4.0

package/src/ui/OpenChannelMessage/Message.file.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+
+import { SendbirdFileMessage, getFileTypeFromMessage } from '@sendbird/uikit-utils';
+
+import Box from '../../components/Box';
+import Icon from '../../components/Icon';
+import PressBox from '../../components/PressBox';
+import Text from '../../components/Text';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import MessageContainer from './MessageContainer';
+import type { OpenChannelMessageProps } from './index';
+
+const iconMapper = { audio: 'file-audio', image: 'photo', video: 'play', file: 'file-document' } as const;
+
+type Props = {};
+const FileMessage = (props: OpenChannelMessageProps<SendbirdFileMessage, Props>) => {
+  const { colors } = useUIKitTheme();
+  const { onPress, onLongPress, ...rest } = props;
+  const type = getFileTypeFromMessage(props.message);
+  const color = colors.ui.openChannelMessage.default;
+
+  return (
+    <MessageContainer {...rest}>
+      <PressBox onPress={onPress} onLongPress={onLongPress}>
+        {({ pressed }) => {
+          return (
+            <Box
+              padding={8}
+              borderRadius={8}
+              flexDirection={'row'}
+              alignItems={'center'}
+              justifyContent={'flex-start'}
+              style={{ backgroundColor: pressed ? color.pressed.bubbleBackground : color.enabled.bubbleBackground }}
+            >
+              <Box
+                padding={4}
+                marginRight={8}
+                borderRadius={8}
+                alignItems={'flex-start'}
+                backgroundColor={colors.background}
+              >
+                <Icon icon={iconMapper[type]} size={32} />
+              </Box>
+              <Text
+                body3
+                numberOfLines={1}
+                ellipsizeMode={'middle'}
+                color={color.enabled.textMsg}
+                style={styles.fileName}
+              >
+                {props.strings?.fileName || props.message.name}
+              </Text>
+            </Box>
+          );
+        }}
+      </PressBox>
+    </MessageContainer>
+  );
+};
+
+const styles = createStyleSheet({
+  fileName: {
+    flexShrink: 1,
+  },
+});
+export default FileMessage;

package/src/ui/OpenChannelMessage/Message.file.video.tsx

@@ -0,0 +1,93 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+import type { SendbirdFileMessage } from '@sendbird/uikit-utils';
+import { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';
+
+import Box from '../../components/Box';
+import Icon from '../../components/Icon';
+import ImageWithPlaceholder from '../../components/ImageWithPlaceholder';
+import PressBox from '../../components/PressBox';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import MessageContainer from './MessageContainer';
+import type { OpenChannelMessageProps } from './index';
+
+type Props = {
+  fetchThumbnailFromVideoSource: (uri: string) => Promise<{ path: string } | null>;
+};
+const VideoFileMessage = (props: OpenChannelMessageProps<SendbirdFileMessage, Props>) => {
+  const { colors, palette } = useUIKitTheme();
+  const { onPress, onLongPress, ...rest } = props;
+  const uri = getAvailableUriFromFileMessage(props.message);
+  const { thumbnail, loading } = useRetry(() => props.fetchThumbnailFromVideoSource(uri));
+
+  return (
+    <MessageContainer {...rest}>
+      <PressBox style={styles.container} activeOpacity={0.8} onPress={onPress} onLongPress={onLongPress}>
+        <Box borderRadius={8} overflow={'hidden'} style={styles.container}>
+          {loading ? (
+            <Box backgroundColor={colors.onBackground04} style={{ width: '100%', height: '100%' }} />
+          ) : (
+            <ImageWithPlaceholder source={{ uri: thumbnail ?? 'invalid-image' }} width={'100%'} height={'100%'} />
+          )}
+
+          {(loading || thumbnail !== null) && (
+            <Box style={styles.iconContainer} alignItems={'center'} justifyContent={'center'}>
+              <Icon
+                icon={'play'}
+                size={28}
+                color={palette.onBackgroundLight02}
+                containerStyle={[styles.playIcon, { backgroundColor: palette.onBackgroundDark01 }]}
+              />
+            </Box>
+          )}
+        </Box>
+      </PressBox>
+    </MessageContainer>
+  );
+};
+const useRetry = (fetch: () => Promise<{ path: string } | null>, retryCount = 5) => {
+  const [state, setState] = useState({ thumbnail: null as null | string, loading: true });
+  const retryCountRef = useRef(0);
+  const retryTimeoutRef = useRef<NodeJS.Timeout>();
+  const fetchThumbnail = useRef(fetch);
+  fetchThumbnail.current = fetch;
+
+  useEffect(() => {
+    if (!state.thumbnail) {
+      const reloadReservation = () => {
+        if (retryCountRef.current < retryCount) {
+          retryTimeoutRef.current = setTimeout(() => {
+            retryCountRef.current++;
+            reloadReservation();
+            fetchThumbnail.current().then((result) => {
+              setState({ loading: false, thumbnail: result?.path ?? null });
+            });
+          }, retryCountRef.current * 5000);
+        }
+      };
+
+      return reloadReservation();
+    } else {
+      return clearTimeout(retryTimeoutRef.current);
+    }
+  }, [state.thumbnail]);
+
+  return state;
+};
+const styles = createStyleSheet({
+  container: {
+    maxWidth: 296,
+    height: 196,
+  },
+  iconContainer: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+  },
+  playIcon: {
+    padding: 10,
+    borderRadius: 50,
+  },
+});
+export default VideoFileMessage;

package/src/ui/OpenChannelMessage/Message.unknown.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import type { SendbirdMessage } from '@sendbird/uikit-utils';
+
+import PressBox from '../../components/PressBox';
+import Text from '../../components/Text';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import MessageContainer from './MessageContainer';
+import type { OpenChannelMessageProps } from './index';
+
+const UnknownMessage = (props: OpenChannelMessageProps<SendbirdMessage>) => {
+  const { colors } = useUIKitTheme();
+  const { onPress, onLongPress, ...rest } = props;
+  const color = colors.ui.openChannelMessage.default;
+  return (
+    <PressBox onPress={onPress} onLongPress={onLongPress}>
+      {({ pressed }) => (
+        <MessageContainer pressed={pressed} {...rest}>
+          <Text body3 color={color.enabled.textMsg}>
+            {props.strings?.unknownTitle ?? '(Unknown message type)'}
+          </Text>
+          <Text body3 color={color.enabled.textMsgPostfix}>
+            {props.strings?.unknownDescription ?? 'Cannot read this message.'}
+          </Text>
+        </MessageContainer>
+      )}
+    </PressBox>
+  );
+};
+
+export default UnknownMessage;

package/src/ui/OpenChannelMessage/Message.user.og.tsx

@@ -0,0 +1,120 @@
+import React from 'react';
+
+import type { SendbirdUserMessage } from '@sendbird/uikit-utils';
+import { urlRegexRough } from '@sendbird/uikit-utils';
+
+import Box from '../../components/Box';
+import ImageWithPlaceholder from '../../components/ImageWithPlaceholder';
+import PressBox from '../../components/PressBox';
+import RegexText from '../../components/RegexText';
+import Text from '../../components/Text';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import MessageContainer from './MessageContainer';
+import type { OpenChannelMessageProps } from './index';
+
+type Props = {};
+const OpenGraphUserMessage = (props: OpenChannelMessageProps<SendbirdUserMessage, Props>) => {
+  const { colors } = useUIKitTheme();
+  const { onPress, onLongPress, onPressURL, ...rest } = props;
+  const color = colors.ui.openChannelMessage.default;
+
+  return (
+    <Box>
+      <PressBox onPress={onPress} onLongPress={onLongPress}>
+        {({ pressed }) => (
+          <MessageContainer pressed={pressed} {...rest}>
+            <Text body3 color={color.enabled.textMsg}>
+              <RegexText
+                body3
+                color={color.enabled.textMsg}
+                patterns={[
+                  {
+                    regex: urlRegexRough,
+                    replacer({ match, parentProps, keyPrefix, index }) {
+                      return (
+                        <Text
+                          {...parentProps}
+                          key={`${keyPrefix}-${index}`}
+                          onPress={onPressURL}
+                          onLongPress={onLongPress}
+                          color={colors.primary}
+                          style={parentProps?.style}
+                        >
+                          {match}
+                        </Text>
+                      );
+                    },
+                  },
+                ]}
+              >
+                {props.message.message}
+              </RegexText>
+              {Boolean(props.message.updatedAt) && (
+                <Text body3 color={color.enabled.textMsgPostfix}>
+                  {props.strings?.edited ?? ' (edited)'}
+                </Text>
+              )}
+            </Text>
+          </MessageContainer>
+        )}
+      </PressBox>
+      {props.message.ogMetaData && (
+        <MessageContainer {...rest} grouped>
+          <PressBox style={styles.ogContainer} onPress={onPressURL} onLongPress={onLongPress}>
+            {({ pressed }) =>
+              props.message.ogMetaData && (
+                <Box
+                  padding={8}
+                  borderRadius={8}
+                  style={styles.ogContainer}
+                  backgroundColor={pressed ? color.pressed.bubbleBackground : color.enabled.bubbleBackground}
+                >
+                  <Text numberOfLines={1} caption2 color={colors.onBackground02} style={styles.ogUrl}>
+                    {props.message.ogMetaData.url}
+                  </Text>
+
+                  <Text numberOfLines={2} body2 color={colors.primary} style={styles.ogTitle}>
+                    {props.message.ogMetaData.title}
+                  </Text>
+
+                  {Boolean(props.message.ogMetaData.description) && (
+                    <Text numberOfLines={2} caption2 color={colors.onBackground01}>
+                      {props.message.ogMetaData.description}
+                    </Text>
+                  )}
+
+                  {Boolean(props.message.ogMetaData.defaultImage) && (
+                    <ImageWithPlaceholder
+                      style={styles.ogImage}
+                      source={{ uri: props.message.ogMetaData.defaultImage.url }}
+                    />
+                  )}
+                </Box>
+              )
+            }
+          </PressBox>
+        </MessageContainer>
+      )}
+    </Box>
+  );
+};
+
+const styles = createStyleSheet({
+  ogContainer: {
+    maxWidth: 296,
+  },
+  ogUrl: {
+    marginBottom: 4,
+  },
+  ogTitle: {
+    marginBottom: 8,
+  },
+  ogImage: {
+    width: '100%',
+    height: 156,
+    marginTop: 12,
+  },
+});
+
+export default OpenGraphUserMessage;

package/src/ui/OpenChannelMessage/Message.user.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+
+import type { SendbirdUserMessage } from '@sendbird/uikit-utils';
+import { urlRegexStrict } from '@sendbird/uikit-utils';
+
+import PressBox from '../../components/PressBox';
+import RegexText from '../../components/RegexText';
+import Text from '../../components/Text';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import MessageContainer from './MessageContainer';
+import type { OpenChannelMessageProps } from './index';
+
+type Props = {};
+const UserMessage = (props: OpenChannelMessageProps<SendbirdUserMessage, Props>) => {
+  const { colors } = useUIKitTheme();
+  const { onPress, onLongPress, onPressURL, ...rest } = props;
+  const color = colors.ui.openChannelMessage.default;
+
+  return (
+    <PressBox onPress={onPress} onLongPress={onLongPress}>
+      {({ pressed }) => (
+        <MessageContainer pressed={pressed} {...rest}>
+          <Text body3 color={color.enabled.textMsg}>
+            <RegexText
+              body3
+              color={color.enabled.textMsg}
+              patterns={[
+                {
+                  regex: urlRegexStrict,
+                  replacer({ match, parentProps, keyPrefix, index }) {
+                    return (
+                      <Text
+                        {...parentProps}
+                        key={`${keyPrefix}-${index}`}
+                        onPress={onPressURL}
+                        onLongPress={onLongPress}
+                        color={colors.primary}
+                        style={parentProps?.style}
+                      >
+                        {match}
+                      </Text>
+                    );
+                  },
+                },
+              ]}
+            >
+              {props.message.message}
+            </RegexText>
+            {Boolean(props.message.updatedAt) && (
+              <Text body3 color={color.enabled.textMsgPostfix}>
+                {props.strings?.edited ?? ' (edited)'}
+              </Text>
+            )}
+          </Text>
+        </MessageContainer>
+      )}
+    </PressBox>
+  );
+};
+
+export default UserMessage;

package/src/ui/OpenChannelMessage/MessageContainer.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+
+import { SendingStatus } from '@sendbird/chat/message';
+import type { SendbirdMessage } from '@sendbird/uikit-utils';
+import { getMessageTimeFormat } from '@sendbird/uikit-utils';
+
+import Box from '../../components/Box';
+import Icon from '../../components/Icon';
+import PressBox from '../../components/PressBox';
+import Text from '../../components/Text';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import Avatar from '../Avatar';
+import LoadingSpinner from '../LoadingSpinner';
+import type { OpenChannelMessageProps } from './index';
+
+type Props = {
+  pressed?: boolean;
+};
+
+const MessageContainer = ({
+  children,
+  channel,
+  grouped,
+  pressed,
+  ...props
+}: OpenChannelMessageProps<SendbirdMessage, Props>) => {
+  const { colors } = useUIKitTheme();
+  const color = colors.ui.openChannelMessage.default;
+
+  const renderSendingStatus = () => {
+    if (!('sendingStatus' in props.message)) return null;
+
+    switch (props.message.sendingStatus) {
+      case SendingStatus.PENDING: {
+        return (
+          <SendingStatusContainer>
+            <LoadingSpinner color={colors.primary} size={16} />
+          </SendingStatusContainer>
+        );
+      }
+      case SendingStatus.FAILED: {
+        return (
+          <SendingStatusContainer>
+            <Icon icon={'error'} color={colors.error} size={16} />
+          </SendingStatusContainer>
+        );
+      }
+      default: {
+        return null;
+      }
+    }
+  };
+
+  return (
+    <Box
+      flexDirection={'row'}
+      paddingVertical={grouped ? 5 : 6}
+      paddingLeft={12}
+      paddingRight={12}
+      backgroundColor={pressed ? color.pressed.background : color.enabled.background}
+    >
+      <Box marginRight={12}>
+        {!grouped && 'sender' in props.message ? (
+          <PressBox onPress={props.onPressAvatar}>
+            <Avatar size={styles.avatar.width} uri={props.message.sender.profileUrl} />
+          </PressBox>
+        ) : (
+          <Box style={styles.avatar} />
+        )}
+      </Box>
+      <Box flexShrink={1} flex={1} flexDirection={'column'} alignItems={'flex-start'}>
+        {!grouped && 'sender' in props.message && (
+          <Box flexDirection={'row'} alignItems={'center'} marginBottom={2}>
+            <Box marginRight={4} flexShrink={1}>
+              <Text
+                caption1
+                ellipsizeMode={'middle'}
+                numberOfLines={1}
+                color={
+                  channel.isOperator(props.message.sender.userId)
+                    ? color.enabled.textOperator
+                    : color.enabled.textSenderName
+                }
+              >
+                {props.strings?.senderName ?? props.message.sender.nickname}
+              </Text>
+            </Box>
+            <Box>
+              <Text caption4 color={color.enabled.textTime}>
+                {props.strings?.sentDate ?? getMessageTimeFormat(new Date(props.message.createdAt))}
+              </Text>
+            </Box>
+          </Box>
+        )}
+        <Box style={styles.message}>{children}</Box>
+
+        {renderSendingStatus()}
+      </Box>
+    </Box>
+  );
+};
+
+const SendingStatusContainer = ({ children }: { children: React.ReactElement }) => {
+  return (
+    <Box flexDirection={'row'}>
+      <Box marginTop={2}>{children}</Box>
+    </Box>
+  );
+};
+
+const styles = createStyleSheet({
+  avatar: {
+    width: 28,
+  },
+  message: {
+    width: '100%',
+  },
+});
+
+export default MessageContainer;

package/src/ui/OpenChannelMessage/index.ts

@@ -0,0 +1,42 @@
+import type React from 'react';
+
+import type { SendbirdMessage, SendbirdOpenChannel } from '@sendbird/uikit-utils';
+
+import AdminMessage from './Message.admin';
+import FileMessage from './Message.file';
+import ImageFileMessage from './Message.file.image';
+import VideoFileMessage from './Message.file.video';
+import UnknownMessage from './Message.unknown';
+import UserMessage from './Message.user';
+import OpenGraphUserMessage from './Message.user.og';
+
+export type OpenChannelMessageProps<T extends SendbirdMessage, AdditionalProps = unknown> = {
+  channel: SendbirdOpenChannel;
+  message: T;
+  strings?: {
+    senderName?: string;
+    sentDate?: string;
+    edited?: string;
+    fileName?: string;
+    unknownTitle?: string;
+    unknownDescription?: string;
+  };
+  children?: React.ReactNode;
+  grouped?: boolean;
+  onPress?: () => void;
+  onLongPress?: () => void;
+  onPressAvatar?: () => void;
+  onPressURL?: () => void;
+} & AdditionalProps;
+
+const OpenChannelMessage = {
+  User: UserMessage,
+  OpenGraphUser: OpenGraphUserMessage,
+  File: FileMessage,
+  ImageFile: ImageFileMessage,
+  VideoFile: VideoFileMessage,
+  Admin: AdminMessage,
+  Unknown: UnknownMessage,
+};
+
+export default OpenChannelMessage;

package/src/ui/OpenChannelPreview/index.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+
+import { conditionChaining, truncatedCount } from '@sendbird/uikit-utils';
+
+import Box from '../../components/Box';
+import Icon from '../../components/Icon';
+import Image from '../../components/Image';
+import Text from '../../components/Text';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+
+type Props = {
+  customCover?: React.ReactElement;
+  coverUrl: string;
+  title: string;
+  participantsCount?: number;
+  frozen?: boolean;
+};
+const OpenChannelPreview = ({ customCover, coverUrl, participantsCount = 0, title, frozen }: Props) => {
+  const { colors } = useUIKitTheme();
+  const color = colors.ui.openChannelPreview.default.none;
+
+  return (
+    <Box
+      backgroundColor={color.background}
+      width={'100%'}
+      height={62}
+      flexDirection={'row'}
+      alignItems={'center'}
+      paddingHorizontal={16}
+    >
+      <Box
+        width={styles.channelCover.width}
+        height={styles.channelCover.height}
+        borderRadius={styles.channelCover.width}
+        overflow={'hidden'}
+        marginRight={16}
+      >
+        {conditionChaining(
+          [Boolean(customCover)],
+          [
+            customCover,
+            <Image
+              resizeMode={'cover'}
+              style={[styles.channelCover, { backgroundColor: color.coverBackground }]}
+              source={{ uri: coverUrl }}
+            />,
+          ],
+        )}
+      </Box>
+      <Box flex={1} height={'100%'} justifyContent={'center'}>
+        <Box flexDirection={'row'} flexShrink={1} marginBottom={4} alignItems={'center'}>
+          <Text subtitle1 style={styles.channelInfoTitle} numberOfLines={1} color={color.textTitle}>
+            {title}
+          </Text>
+          {frozen && <Icon size={16} icon={'freeze'} color={color.frozenIcon} containerStyle={styles.marginLeft} />}
+        </Box>
+        <Box flexDirection={'row'} flexShrink={1} alignItems={'center'} justifyContent={'flex-start'}>
+          <Box flexDirection={'row'} alignItems={'center'}>
+            <Icon size={16} icon={'members'} color={color.participantsIcon} containerStyle={styles.marginRight} />
+            <Text caption2 color={color.textParticipants}>
+              {truncatedCount(participantsCount, 999)}
+            </Text>
+          </Box>
+        </Box>
+        <Separator color={color.separator} />
+      </Box>
+    </Box>
+  );
+};
+
+const Separator = ({ color }: { color: string }) => <Box style={[styles.separator, { backgroundColor: color }]} />;
+
+const styles = createStyleSheet({
+  channelCover: {
+    width: 32,
+    height: 32,
+  },
+  channelInfoTitle: {
+    flexShrink: 1,
+  },
+  marginRight: {
+    marginRight: 4,
+  },
+  marginLeft: {
+    marginLeft: 4,
+  },
+  separator: {
+    position: 'absolute',
+    left: 0,
+    right: -16,
+    bottom: 0,
+    height: 1,
+  },
+});
+
+export default OpenChannelPreview;