@sendbird/uikit-react-native-foundation 2.5.0 → 3.0.0-rc.1

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

@@ -0,0 +1,106 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { StyleSheet } from 'react-native';
+
+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 { GroupChannelMessageProps } from './index';
+
+type Props = GroupChannelMessageProps<
+  SendbirdFileMessage,
+  {
+    fetchThumbnailFromVideoSource: (uri: string) => Promise<{ path: string } | null>;
+  }
+>;
+
+const VideoFileMessage = (props: Props) => {
+  const { onPress, onLongPress, variant = 'incoming' } = props;
+
+  const { colors, palette, select } = useUIKitTheme();
+  const uri = getAvailableUriFromFileMessage(props.message);
+  const { thumbnail, loading } = useRetry(() => props.fetchThumbnailFromVideoSource(uri));
+
+  return (
+    <MessageContainer {...props}>
+      <Box style={styles.container} backgroundColor={colors.ui.groupChannelMessage[variant].enabled.background}>
+        <PressBox activeOpacity={0.8} onPress={onPress} onLongPress={onLongPress} style={styles.image}>
+          {loading ? (
+            <Box
+              style={StyleSheet.absoluteFill}
+              backgroundColor={select({ dark: palette.background400, light: palette.background100 })}
+            />
+          ) : (
+            <ImageWithPlaceholder source={{ uri: thumbnail ?? 'invalid-image' }} style={StyleSheet.absoluteFill} />
+          )}
+
+          {(loading || thumbnail !== null) && (
+            <Box style={StyleSheet.absoluteFill} alignItems={'center'} justifyContent={'center'}>
+              <Icon
+                icon={'play'}
+                size={28}
+                color={palette.onBackgroundLight02}
+                containerStyle={[styles.playIcon, { backgroundColor: palette.onBackgroundDark01 }]}
+              />
+            </Box>
+          )}
+        </PressBox>
+        {props.children}
+      </Box>
+    </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: {
+    borderRadius: 16,
+    overflow: 'hidden',
+  },
+  image: {
+    maxWidth: 240,
+    width: 240,
+    height: 160,
+    borderRadius: 16,
+    overflow: 'hidden',
+  },
+  playIcon: {
+    padding: 10,
+    borderRadius: 50,
+  },
+});
+export default VideoFileMessage;

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

@@ -0,0 +1,47 @@
+import React from 'react';
+
+import type { SendbirdMessage } from '@sendbird/uikit-utils';
+
+import Box from '../../components/Box';
+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 { GroupChannelMessageProps } from './index';
+
+const UnknownMessage = (props: GroupChannelMessageProps<SendbirdMessage>) => {
+  const { variant = 'incoming' } = props;
+
+  const { colors } = useUIKitTheme();
+  const color = colors.ui.groupChannelMessage['incoming'];
+  const titleColor = variant === 'incoming' ? colors.onBackground01 : colors.onBackgroundReverse01;
+  const descColor = variant === 'incoming' ? colors.onBackground02 : colors.onBackgroundReverse02;
+
+  return (
+    <MessageContainer {...props}>
+      <PressBox onPress={props.onPress} onLongPress={props.onLongPress}>
+        {({ pressed }) => (
+          <Box style={styles.bubble} backgroundColor={pressed ? color.pressed.background : color.enabled.background}>
+            <Text body3 color={titleColor}>
+              {props.strings?.unknownTitle ?? '(Unknown message type)'}
+            </Text>
+            <Text body3 color={descColor}>
+              {props.strings?.unknownDescription ?? 'Cannot read this message.'}
+            </Text>
+          </Box>
+        )}
+      </PressBox>
+    </MessageContainer>
+  );
+};
+
+const styles = createStyleSheet({
+  bubble: {
+    paddingVertical: 6,
+    paddingHorizontal: 12,
+    borderRadius: 16,
+  },
+});
+
+export default UnknownMessage;

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

@@ -0,0 +1,62 @@
+import React from 'react';
+
+import type { SendbirdUserMessage } from '@sendbird/uikit-utils';
+
+import Box from '../../components/Box';
+import PressBox from '../../components/PressBox';
+import type { RegexTextPattern } from '../../components/RegexText';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import MessageBubbleWithText from './MessageBubbleWithText';
+import MessageContainer from './MessageContainer';
+import MessageOpenGraph from './MessageOpenGraph';
+import type { GroupChannelMessageProps } from './index';
+
+type Props = GroupChannelMessageProps<
+  SendbirdUserMessage,
+  {
+    regexTextPatterns?: RegexTextPattern[];
+    renderRegexTextChildren?: (message: SendbirdUserMessage) => string;
+  }
+>;
+
+const OpenGraphUserMessage = (props: Props) => {
+  const { variant = 'incoming' } = props;
+
+  const { palette, select, colors } = useUIKitTheme();
+  const color = colors.ui.groupChannelMessage[variant];
+  const containerBackgroundColor = select({ dark: palette.background400, light: palette.background100 });
+
+  return (
+    <MessageContainer {...props}>
+      <PressBox onPress={props.onPress} onLongPress={props.onLongPress}>
+        {({ pressed }) => (
+          <Box backgroundColor={containerBackgroundColor} style={styles.container}>
+            <MessageBubbleWithText
+              backgroundColor={pressed ? color.pressed.background : color.enabled.background}
+              {...props}
+            />
+            {props.message.ogMetaData && (
+              <MessageOpenGraph
+                variant={variant}
+                ogMetaData={props.message.ogMetaData}
+                onLongPress={props.onLongPress}
+                onPressURL={props.onPressURL}
+              />
+            )}
+            {props.children}
+          </Box>
+        )}
+      </PressBox>
+    </MessageContainer>
+  );
+};
+
+const styles = createStyleSheet({
+  container: {
+    borderRadius: 16,
+    overflow: 'hidden',
+  },
+});
+
+export default OpenGraphUserMessage;

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

@@ -0,0 +1,49 @@
+import React from 'react';
+
+import type { SendbirdUserMessage } from '@sendbird/uikit-utils';
+
+import Box from '../../components/Box';
+import PressBox from '../../components/PressBox';
+import type { RegexTextPattern } from '../../components/RegexText';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import MessageBubbleWithText from './MessageBubbleWithText';
+import MessageContainer from './MessageContainer';
+import type { GroupChannelMessageProps } from './index';
+
+type Props = GroupChannelMessageProps<
+  SendbirdUserMessage,
+  {
+    regexTextPatterns?: RegexTextPattern[];
+    renderRegexTextChildren?: (message: SendbirdUserMessage) => string;
+  }
+>;
+
+const UserMessage = (props: Props) => {
+  const { variant = 'incoming' } = props;
+
+  const { colors } = useUIKitTheme();
+  const color = colors.ui.groupChannelMessage[variant];
+
+  return (
+    <MessageContainer {...props}>
+      <PressBox onPress={props.onPress} onLongPress={props.onLongPress}>
+        {({ pressed }) => (
+          <Box backgroundColor={pressed ? color.pressed.background : color.enabled.background} style={styles.container}>
+            <MessageBubbleWithText {...props} />
+            {props.children}
+          </Box>
+        )}
+      </PressBox>
+    </MessageContainer>
+  );
+};
+
+const styles = createStyleSheet({
+  container: {
+    overflow: 'hidden',
+    borderRadius: 16,
+  },
+});
+
+export default UserMessage;

package/src/ui/GroupChannelMessage/MessageBubbleWithText.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+
+import { SendbirdUserMessage, urlRegexStrict } from '@sendbird/uikit-utils';
+
+import Box from '../../components/Box';
+import RegexText, { RegexTextPattern } from '../../components/RegexText';
+import Text from '../../components/Text';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import type { GroupChannelMessageProps } from './index';
+
+type Props = GroupChannelMessageProps<
+  SendbirdUserMessage,
+  {
+    backgroundColor?: string;
+    regexTextPatterns?: RegexTextPattern[];
+    renderRegexTextChildren?: (message: SendbirdUserMessage) => string;
+  }
+>;
+
+const MessageBubbleWithText = ({
+  backgroundColor,
+  message,
+  onPressURL,
+  onLongPress,
+  strings,
+  variant = 'incoming',
+  regexTextPatterns = [],
+  renderRegexTextChildren = (msg) => msg.message,
+}: Props) => {
+  const { colors } = useUIKitTheme();
+  const color = colors.ui.groupChannelMessage[variant];
+  return (
+    <Box backgroundColor={backgroundColor} style={styles.bubble}>
+      <Text body3 color={color.enabled.textMsg} suppressHighlighting>
+        <RegexText
+          body3
+          color={color.enabled.textMsg}
+          patterns={[
+            ...regexTextPatterns,
+            {
+              regex: urlRegexStrict,
+              replacer({ match, parentProps, keyPrefix, index }) {
+                return (
+                  <Text
+                    {...parentProps}
+                    key={`${keyPrefix}-${index}`}
+                    onPress={() => onPressURL?.(match)}
+                    onLongPress={onLongPress}
+                    style={[parentProps?.style, styles.urlText]}
+                  >
+                    {match}
+                  </Text>
+                );
+              },
+            },
+          ]}
+        >
+          {renderRegexTextChildren(message)}
+        </RegexText>
+        {Boolean(message.updatedAt) && (
+          <Text body3 color={color.enabled.textEdited}>
+            {strings?.edited ?? ' (edited)'}
+          </Text>
+        )}
+      </Text>
+    </Box>
+  );
+};
+
+const styles = createStyleSheet({
+  bubble: {
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+  },
+  urlText: {
+    textDecorationLine: 'underline',
+  },
+});
+export default MessageBubbleWithText;

package/src/ui/GroupChannelMessage/MessageContainer.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import { Pressable } from 'react-native';
+
+import type { SendbirdMessage } from '@sendbird/uikit-utils';
+import { getMessageTimeFormat } from '@sendbird/uikit-utils';
+
+import Box from '../../components/Box';
+import Text from '../../components/Text';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import Avatar from '../Avatar';
+import type { GroupChannelMessageProps } from './index';
+
+type Props = GroupChannelMessageProps<SendbirdMessage>;
+
+const MessageContainer = (props: Props) => {
+  if (props.variant === 'incoming') {
+    return <MessageContainer.Incoming {...props} />;
+  } else {
+    return <MessageContainer.Outgoing {...props} />;
+  }
+};
+
+MessageContainer.Incoming = function MessageContainerIncoming({
+  children,
+  groupedWithNext,
+  groupedWithPrev,
+  message,
+  onPressAvatar,
+  strings,
+}: Props) {
+  const { colors } = useUIKitTheme();
+  const color = colors.ui.groupChannelMessage.incoming;
+
+  return (
+    <Box flexDirection={'row'} justifyContent={'flex-start'} alignItems={'flex-end'}>
+      <Box width={26} marginRight={12}>
+        {(message.isFileMessage() || message.isUserMessage()) && !groupedWithNext && (
+          <Pressable onPress={onPressAvatar}>
+            <Avatar size={26} uri={message.sender?.profileUrl} />
+          </Pressable>
+        )}
+      </Box>
+      <Box flexShrink={1}>
+        {!groupedWithPrev && (
+          <Box marginLeft={12} marginBottom={4}>
+            {(message.isFileMessage() || message.isUserMessage()) && (
+              <Text caption1 color={color.enabled.textSenderName} numberOfLines={1}>
+                {strings?.senderName ?? message.sender.nickname}
+              </Text>
+            )}
+          </Box>
+        )}
+
+        <Box flexDirection={'row'} alignItems={'flex-end'}>
+          <Box style={styles.bubble}>{children}</Box>
+          {!groupedWithNext && (
+            <Box marginLeft={4}>
+              <Text caption4 color={color.enabled.textTime}>
+                {strings?.sentDate ?? getMessageTimeFormat(new Date(message.createdAt))}
+              </Text>
+            </Box>
+          )}
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+MessageContainer.Outgoing = function MessageContainerOutgoing({
+  children,
+  message,
+  groupedWithNext,
+  strings,
+  sendingStatus,
+}: Props) {
+  const { colors } = useUIKitTheme();
+  const color = colors.ui.groupChannelMessage.outgoing;
+
+  return (
+    <Box flexDirection={'row'} justifyContent={'flex-end'} alignItems={'flex-end'}>
+      <Box flexDirection={'row'} alignItems={'flex-end'} justifyContent={'center'}>
+        {sendingStatus && <Box marginRight={4}>{sendingStatus}</Box>}
+
+        {!groupedWithNext && (
+          <Box marginRight={4}>
+            <Text caption4 color={color.enabled.textTime}>
+              {strings?.sentDate ?? getMessageTimeFormat(new Date(message.createdAt))}
+            </Text>
+          </Box>
+        )}
+      </Box>
+      <Box style={styles.bubble}>{children}</Box>
+    </Box>
+  );
+};
+
+const styles = createStyleSheet({
+  bubble: {
+    maxWidth: 240,
+    overflow: 'hidden',
+    flexShrink: 1,
+  },
+});
+
+export default MessageContainer;

package/src/ui/GroupChannelMessage/MessageOpenGraph.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+
+import type { SendbirdUserMessage } from '@sendbird/uikit-utils';
+
+import Box from '../../components/Box';
+import ImageWithPlaceholder from '../../components/ImageWithPlaceholder';
+import PressBox from '../../components/PressBox';
+import Text from '../../components/Text';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+
+const MessageOpenGraph = ({
+  onPressURL,
+  onLongPress,
+  ogMetaData,
+  variant,
+}: {
+  ogMetaData: Required<SendbirdUserMessage>['ogMetaData'];
+  variant: 'outgoing' | 'incoming';
+  onPressURL?: (url: string) => void;
+  onLongPress?: () => void;
+}) => {
+  const { palette, select, colors } = useUIKitTheme();
+  const color = colors.ui.groupChannelMessage[variant];
+
+  return (
+    <PressBox
+      activeOpacity={0.85}
+      onPress={() => typeof ogMetaData?.url === 'string' && onPressURL?.(ogMetaData.url)}
+      onLongPress={onLongPress}
+    >
+      {({ pressed }) => (
+        <Box backgroundColor={pressed ? color.pressed.background : color.enabled.background}>
+          {Boolean(ogMetaData.defaultImage) && (
+            <ImageWithPlaceholder style={styles.ogImage} source={{ uri: ogMetaData.defaultImage.url }} />
+          )}
+
+          <Box
+            style={styles.ogContainer}
+            backgroundColor={select({ dark: palette.background400, light: palette.background100 })}
+          >
+            <Text numberOfLines={3} body2 color={colors.onBackground01} style={styles.ogTitle}>
+              {ogMetaData.title}
+            </Text>
+            {Boolean(ogMetaData.description) && (
+              <Text numberOfLines={1} caption2 color={colors.onBackground01} style={styles.ogDesc}>
+                {ogMetaData.description}
+              </Text>
+            )}
+            <Text numberOfLines={1} caption2 color={colors.onBackground02}>
+              {ogMetaData.url}
+            </Text>
+          </Box>
+        </Box>
+      )}
+    </PressBox>
+  );
+};
+
+const styles = createStyleSheet({
+  ogContainer: {
+    overflow: 'hidden',
+    paddingHorizontal: 12,
+    paddingTop: 8,
+    paddingBottom: 12,
+  },
+  ogImage: {
+    maxWidth: 240,
+    width: 240,
+    height: 136,
+  },
+  ogUrl: {
+    marginBottom: 4,
+  },
+  ogTitle: {
+    marginBottom: 4,
+  },
+  ogDesc: {
+    lineHeight: 14,
+    marginBottom: 8,
+  },
+});
+
+export default MessageOpenGraph;

package/src/ui/GroupChannelMessage/index.ts

@@ -0,0 +1,48 @@
+import type React from 'react';
+
+import type { SendbirdGroupChannel, SendbirdMessage, SendbirdUser } 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 OpenGraphUser from './Message.user.og';
+
+export type GroupChannelMessageProps<T extends SendbirdMessage, AdditionalProps = unknown> = {
+  channel: SendbirdGroupChannel;
+  message: T;
+  variant?: 'outgoing' | 'incoming';
+  strings?: {
+    senderName?: string;
+    sentDate?: string;
+    edited?: string;
+    fileName?: string;
+    unknownTitle?: string;
+    unknownDescription?: string;
+  };
+
+  children?: React.ReactNode;
+  sendingStatus?: React.ReactNode;
+
+  groupedWithPrev: boolean;
+  groupedWithNext: boolean;
+  onPress?: () => void;
+  onLongPress?: () => void;
+  onPressAvatar?: () => void;
+  onPressURL?: (url: string) => void;
+  onPressMentionedUser?: (mentionedUser?: SendbirdUser) => void;
+} & AdditionalProps;
+
+const GroupChannelMessage = {
+  User: UserMessage,
+  OpenGraphUser: OpenGraphUser,
+  File: FileMessage,
+  ImageFile: ImageFileMessage,
+  VideoFile: VideoFileMessage,
+  Admin: AdminMessage,
+  Unknown: UnknownMessage,
+};
+
+export default GroupChannelMessage;

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

@@ -36,7 +36,7 @@ const OpenGraphUserMessage = (props: OpenChannelMessageProps<SendbirdUserMessage
                         <Text
                           {...parentProps}
                           key={`${keyPrefix}-${index}`}
-                          onPress={onPressURL}
+                          onPress={() => onPressURL?.(match)}
                           onLongPress={onLongPress}
                           color={colors.primary}
                           style={parentProps?.style}
@@ -61,7 +61,11 @@ const OpenGraphUserMessage = (props: OpenChannelMessageProps<SendbirdUserMessage
       </PressBox>
       {props.message.ogMetaData && (
         <MessageContainer {...rest} grouped>
-          <PressBox style={styles.ogContainer} onPress={onPressURL} onLongPress={onLongPress}>
+          <PressBox
+            style={styles.ogContainer}
+            onPress={() => props.message.ogMetaData?.url && onPressURL?.(props.message.ogMetaData.url)}
+            onLongPress={onLongPress}
+          >
             {({ pressed }) =>
               props.message.ogMetaData && (
                 <Box

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

@@ -32,7 +32,7 @@ const UserMessage = (props: OpenChannelMessageProps<SendbirdUserMessage, Props>)
                       <Text
                         {...parentProps}
                         key={`${keyPrefix}-${index}`}
-                        onPress={onPressURL}
+                        onPress={() => onPressURL?.(match)}
                         onLongPress={onLongPress}
                         color={colors.primary}
                         style={parentProps?.style}

package/src/ui/OpenChannelMessage/index.ts

@@ -26,7 +26,7 @@ export type OpenChannelMessageProps<T extends SendbirdMessage, AdditionalProps =
   onPress?: () => void;
   onLongPress?: () => void;
   onPressAvatar?: () => void;
-  onPressURL?: () => void;
+  onPressURL?: (url: string) => void;
 } & AdditionalProps;
 
 const OpenChannelMessage = {

package/lib/commonjs/components/URLParsedText/index.js

@@ -1,46 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _reactNative = require("react-native");
-var _uikitUtils = require("@sendbird/uikit-utils");
-var _createStyleSheet = _interopRequireDefault(require("../../styles/createStyleSheet"));
-var _Text = _interopRequireDefault(require("../Text"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-const openUrl = (url, httpProtocol) => {
-  const targetUrl = httpProtocol ? url : 'https://' + url;
-  _reactNative.Linking.openURL(targetUrl).catch(err => _uikitUtils.Logger.warn('[URLParsedText]', 'Cannot open url', err));
-};
-const URLParsedText = _ref => {
-  let {
-    children,
-    onPressUrl = openUrl,
-    strict,
-    ...props
-  } = _ref;
-  const parsedChildren = _react.default.Children.map(_react.default.Children.toArray(children), child => {
-    if (typeof child === 'string') {
-      return (0, _uikitUtils.replaceUrlAsComponents)(child, url => {
-        return /*#__PURE__*/_react.default.createElement(_Text.default, _extends({}, props, {
-          suppressHighlighting: true,
-          onPress: () => onPressUrl === null || onPressUrl === void 0 ? void 0 : onPressUrl(url, url.startsWith('http')),
-          style: [props.style, styles.url]
-        }), url);
-      }, strict);
-    }
-    return child;
-  });
-  return /*#__PURE__*/_react.default.createElement(_Text.default, props, parsedChildren);
-};
-const styles = (0, _createStyleSheet.default)({
-  url: {
-    textDecorationLine: 'underline'
-  }
-});
-var _default = URLParsedText;
-exports.default = _default;
-//# sourceMappingURL=index.js.map