@sendbird/uikit-react-native-foundation 3.5.4 → 3.7.0

package/src/styles/createStyleSheet.ts

@@ -1,40 +1,51 @@
 import { ImageStyle, StyleSheet, TextStyle, ViewStyle } from 'react-native';
+import { AnimatableNumericValue, DimensionValue } from 'react-native/Libraries/StyleSheet/StyleSheetTypes';
 
 import { DEFAULT_SCALE_FACTOR } from './createScaleFactor';
 
 type Styles = ViewStyle | TextStyle | ImageStyle;
 type StylePreprocessor<T extends Styles = Styles> = { [key in keyof T]: (val: NonNullable<T[key]>) => typeof val };
 
-const SCALE_FACTOR_WITH_STR = (val: string | number) => (typeof val === 'string' ? val : DEFAULT_SCALE_FACTOR(val));
+const SCALE_FACTOR_WITH_DIMENSION_VALUE = (
+  val: NonNullable<DimensionValue | undefined>,
+): NonNullable<DimensionValue | undefined> => {
+  return typeof val === 'number' ? DEFAULT_SCALE_FACTOR(val) : val;
+};
+
+const DEFAULT_SCALE_FACTOR_WITH_NUMERIC_VALUE = (
+  val: NonNullable<AnimatableNumericValue | undefined>,
+): NonNullable<AnimatableNumericValue | undefined> => {
+  return typeof val === 'number' ? DEFAULT_SCALE_FACTOR(val) : val;
+};
 
 const preProcessor: Partial<StylePreprocessor> = {
   'fontSize': DEFAULT_SCALE_FACTOR,
   'lineHeight': DEFAULT_SCALE_FACTOR,
-  'borderRadius': DEFAULT_SCALE_FACTOR,
-  'minWidth': SCALE_FACTOR_WITH_STR,
-  'maxWidth': SCALE_FACTOR_WITH_STR,
-  'minHeight': SCALE_FACTOR_WITH_STR,
-  'maxHeight': SCALE_FACTOR_WITH_STR,
-  'height': SCALE_FACTOR_WITH_STR,
-  'width': SCALE_FACTOR_WITH_STR,
-  'padding': SCALE_FACTOR_WITH_STR,
-  'paddingVertical': SCALE_FACTOR_WITH_STR,
-  'paddingHorizontal': SCALE_FACTOR_WITH_STR,
-  'paddingTop': SCALE_FACTOR_WITH_STR,
-  'paddingBottom': SCALE_FACTOR_WITH_STR,
-  'paddingLeft': SCALE_FACTOR_WITH_STR,
-  'paddingRight': SCALE_FACTOR_WITH_STR,
-  'margin': SCALE_FACTOR_WITH_STR,
-  'marginVertical': SCALE_FACTOR_WITH_STR,
-  'marginHorizontal': SCALE_FACTOR_WITH_STR,
-  'marginTop': SCALE_FACTOR_WITH_STR,
-  'marginBottom': SCALE_FACTOR_WITH_STR,
-  'marginLeft': SCALE_FACTOR_WITH_STR,
-  'marginRight': SCALE_FACTOR_WITH_STR,
-  'left': SCALE_FACTOR_WITH_STR,
-  'right': SCALE_FACTOR_WITH_STR,
-  'top': SCALE_FACTOR_WITH_STR,
-  'bottom': SCALE_FACTOR_WITH_STR,
+  'borderRadius': DEFAULT_SCALE_FACTOR_WITH_NUMERIC_VALUE,
+  'minWidth': SCALE_FACTOR_WITH_DIMENSION_VALUE,
+  'maxWidth': SCALE_FACTOR_WITH_DIMENSION_VALUE,
+  'minHeight': SCALE_FACTOR_WITH_DIMENSION_VALUE,
+  'maxHeight': SCALE_FACTOR_WITH_DIMENSION_VALUE,
+  'height': SCALE_FACTOR_WITH_DIMENSION_VALUE,
+  'width': SCALE_FACTOR_WITH_DIMENSION_VALUE,
+  'padding': SCALE_FACTOR_WITH_DIMENSION_VALUE,
+  'paddingVertical': SCALE_FACTOR_WITH_DIMENSION_VALUE,
+  'paddingHorizontal': SCALE_FACTOR_WITH_DIMENSION_VALUE,
+  'paddingTop': SCALE_FACTOR_WITH_DIMENSION_VALUE,
+  'paddingBottom': SCALE_FACTOR_WITH_DIMENSION_VALUE,
+  'paddingLeft': SCALE_FACTOR_WITH_DIMENSION_VALUE,
+  'paddingRight': SCALE_FACTOR_WITH_DIMENSION_VALUE,
+  'margin': SCALE_FACTOR_WITH_DIMENSION_VALUE,
+  'marginVertical': SCALE_FACTOR_WITH_DIMENSION_VALUE,
+  'marginHorizontal': SCALE_FACTOR_WITH_DIMENSION_VALUE,
+  'marginTop': SCALE_FACTOR_WITH_DIMENSION_VALUE,
+  'marginBottom': SCALE_FACTOR_WITH_DIMENSION_VALUE,
+  'marginLeft': SCALE_FACTOR_WITH_DIMENSION_VALUE,
+  'marginRight': SCALE_FACTOR_WITH_DIMENSION_VALUE,
+  'left': SCALE_FACTOR_WITH_DIMENSION_VALUE,
+  'right': SCALE_FACTOR_WITH_DIMENSION_VALUE,
+  'top': SCALE_FACTOR_WITH_DIMENSION_VALUE,
+  'bottom': SCALE_FACTOR_WITH_DIMENSION_VALUE,
 };
 
 const preProcessorKeys = Object.keys(preProcessor);
@@ -46,7 +57,10 @@ const preProcessorLen = preProcessorKeys.length;
  * @param styles
  * @returns StyleSheet
  * */
-const createStyleSheet = <T extends StyleSheet.NamedStyles<T>>(styles: T | StyleSheet.NamedStyles<T>): T => {
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const createStyleSheet = <T extends StyleSheet.NamedStyles<T> | StyleSheet.NamedStyles<any>>(
+  styles: T & StyleSheet.NamedStyles<any>,
+): T => {
   Object.values(styles).forEach((style) => {
     // @ts-ignore
     const styleKeys = Object.keys(style);
@@ -61,5 +75,6 @@ const createStyleSheet = <T extends StyleSheet.NamedStyles<T>>(styles: T | Style
 
   return StyleSheet.create<T>(styles);
 };
+/* eslint-enable @typescript-eslint/no-explicit-any */
 
 export default createStyleSheet;

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

@@ -25,6 +25,9 @@ type Props = GroupChannelMessageProps<
   {
     durationMetaArrayKey?: string;
     onUnmount: () => void;
+    initialCurrentTime?: number;
+    onSubscribeStatus?: (channelUrl: string, messageId: number, subscriber: (currentTime: number) => void) => void;
+    onUnsubscribeStatus?: (channelUrl: string, messageId: number, subscriber: (currentTime: number) => void) => void;
   }
 >;
 const VoiceFileMessage = (props: Props) => {
@@ -35,6 +38,9 @@ const VoiceFileMessage = (props: Props) => {
     message,
     durationMetaArrayKey = 'KEY_VOICE_MESSAGE_DURATION',
     onUnmount,
+    initialCurrentTime,
+    onSubscribeStatus,
+    onUnsubscribeStatus,
   } = props;
 
   const { colors } = useUIKitTheme();
@@ -45,7 +51,7 @@ const VoiceFileMessage = (props: Props) => {
     const initialDuration = value ? parseInt(value, 10) : 0;
     return {
       status: 'paused',
-      currentTime: 0,
+      currentTime: initialCurrentTime || 0,
       duration: initialDuration,
     };
   });
@@ -56,6 +62,16 @@ const VoiceFileMessage = (props: Props) => {
     };
   }, []);
 
+  useEffect(() => {
+    const updateCurrentTime = (currentTime: number) => {
+      setState((prev) => ({ ...prev, currentTime }));
+    };
+    onSubscribeStatus?.(props.channel.url, props.message.messageId, updateCurrentTime);
+    return () => {
+      onUnsubscribeStatus?.(props.channel.url, props.message.messageId, updateCurrentTime);
+    };
+  }, []);
+
   const uiColors = colors.ui.groupChannelMessage[variant];
   const remainingTime = state.duration - state.currentTime;
 

package/src/ui/GroupChannelMessage/MessageContainer.tsx

@@ -23,6 +23,7 @@ const MessageContainer = (props: Props) => {
 
 MessageContainer.Incoming = function MessageContainerIncoming({
   children,
+  replyInfo,
   groupedWithNext,
   groupedWithPrev,
   message,
@@ -34,43 +35,49 @@ MessageContainer.Incoming = function MessageContainerIncoming({
   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}>
-        {parentMessage}
-        {!groupedWithPrev && !message.parentMessage && (
-          <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 flexDirection={'column'} justifyContent={'flex-start'} alignItems={'flex-start'}>
+      <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}>
+          {parentMessage}
+          {!groupedWithPrev && !parentMessage && (
+            <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>
+      <Box flexDirection={'row'} marginTop={4}>
+        <Box width={26} marginRight={12} justifyContent={'flex-start'} />
+        {replyInfo}
+      </Box>
     </Box>
   );
 };
 
 MessageContainer.Outgoing = function MessageContainerOutgoing({
   children,
+  replyInfo,
   message,
   groupedWithNext,
   strings,
@@ -96,6 +103,9 @@ MessageContainer.Outgoing = function MessageContainerOutgoing({
         </Box>
         <Box style={styles.bubble}>{children}</Box>
       </Box>
+      <Box flexDirection={'row'} justifyContent={'flex-end'} marginTop={4}>
+        {replyInfo}
+      </Box>
     </Box>
   );
 };

package/src/ui/GroupChannelMessage/index.ts

@@ -28,6 +28,7 @@ export type GroupChannelMessageProps<T extends SendbirdMessage, AdditionalProps
   children?: React.ReactNode;
   sendingStatus?: React.ReactNode;
   parentMessage?: React.ReactNode;
+  replyInfo?: React.ReactNode;
 
   groupedWithPrev: boolean;
   groupedWithNext: boolean;