@sendbird/uikit-react-native-foundation 3.1.1 → 3.2.0

package/lib/typescript/src/ui/OpenChannelMessage/Message.user.og.d.ts

@@ -1,5 +1,6 @@
+import React from 'react';
 import type { SendbirdUserMessage } from '@sendbird/uikit-utils';
 import type { OpenChannelMessageProps } from './index';
 type Props = {};
-declare const OpenGraphUserMessage: (props: OpenChannelMessageProps<SendbirdUserMessage, Props>) => JSX.Element;
+declare const OpenGraphUserMessage: (props: OpenChannelMessageProps<SendbirdUserMessage, Props>) => React.JSX.Element;
 export default OpenGraphUserMessage;

package/lib/typescript/src/ui/OpenChannelMessage/MessageContainer.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 import type { SendbirdMessage } from '@sendbird/uikit-utils';
 import type { OpenChannelMessageProps } from './index';
 type Props = {
     pressed?: boolean;
 };
-declare const MessageContainer: ({ children, channel, grouped, pressed, ...props }: OpenChannelMessageProps<SendbirdMessage, Props>) => JSX.Element;
+declare const MessageContainer: ({ children, channel, grouped, pressed, ...props }: OpenChannelMessageProps<SendbirdMessage, Props>) => React.JSX.Element;
 export default MessageContainer;

package/lib/typescript/src/ui/OpenChannelMessage/index.d.ts

@@ -36,7 +36,7 @@ declare const OpenChannelMessage: {
         onLongPress?: (() => void) | undefined;
         onPressAvatar?: (() => void) | undefined;
         onPressURL?: ((url: string) => void) | undefined;
-    }) => JSX.Element;
+    }) => React.JSX.Element;
     OpenGraphUser: (props: {
         channel: SendbirdOpenChannel;
         message: import("@sendbird/chat/message").UserMessage;
@@ -54,7 +54,7 @@ declare const OpenChannelMessage: {
         onLongPress?: (() => void) | undefined;
         onPressAvatar?: (() => void) | undefined;
         onPressURL?: ((url: string) => void) | undefined;
-    }) => JSX.Element;
+    }) => React.JSX.Element;
     File: (props: {
         channel: SendbirdOpenChannel;
         message: import("@sendbird/chat/message").FileMessage;
@@ -72,7 +72,7 @@ declare const OpenChannelMessage: {
         onLongPress?: (() => void) | undefined;
         onPressAvatar?: (() => void) | undefined;
         onPressURL?: ((url: string) => void) | undefined;
-    }) => JSX.Element;
+    }) => React.JSX.Element;
     ImageFile: (props: {
         channel: SendbirdOpenChannel;
         message: import("@sendbird/chat/message").FileMessage;
@@ -90,12 +90,12 @@ declare const OpenChannelMessage: {
         onLongPress?: (() => void) | undefined;
         onPressAvatar?: (() => void) | undefined;
         onPressURL?: ((url: string) => void) | undefined;
-    }) => JSX.Element;
+    }) => React.JSX.Element;
     VideoFile: (props: OpenChannelMessageProps<import("@sendbird/chat/message").FileMessage, {
         fetchThumbnailFromVideoSource: (uri: string) => Promise<{
             path: string;
         } | null>;
-    }>) => JSX.Element;
+    }>) => React.JSX.Element;
     Admin: (props: {
         channel: SendbirdOpenChannel;
         message: import("@sendbird/chat/message").AdminMessage;
@@ -113,7 +113,7 @@ declare const OpenChannelMessage: {
         onLongPress?: (() => void) | undefined;
         onPressAvatar?: (() => void) | undefined;
         onPressURL?: ((url: string) => void) | undefined;
-    }) => JSX.Element;
+    }) => React.JSX.Element;
     Unknown: (props: {
         channel: SendbirdOpenChannel;
         message: SendbirdMessage;
@@ -131,6 +131,6 @@ declare const OpenChannelMessage: {
         onLongPress?: (() => void) | undefined;
         onPressAvatar?: (() => void) | undefined;
         onPressURL?: ((url: string) => void) | undefined;
-    }) => JSX.Element;
+    }) => React.JSX.Element;
 };
 export default OpenChannelMessage;

package/lib/typescript/src/ui/OpenChannelPreview/index.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
 type Props = {
-    customCover?: React.ReactElement;
+    customCover?: React.ReactNode;
     coverUrl: string;
     title: string;
     participantsCount?: number;
     frozen?: boolean;
 };
-declare const OpenChannelPreview: ({ customCover, coverUrl, participantsCount, title, frozen }: Props) => JSX.Element;
+declare const OpenChannelPreview: ({ customCover, coverUrl, participantsCount, title, frozen }: Props) => React.JSX.Element;
 export default OpenChannelPreview;

package/lib/typescript/src/ui/OutlinedButton/index.d.ts

@@ -1,8 +1,9 @@
+import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 type OutlinedButtonProps = {
     children: string;
     containerStyle?: StyleProp<ViewStyle>;
     onPress?: () => void;
 };
-declare const OutlinedButton: ({ children, onPress, containerStyle }: OutlinedButtonProps) => JSX.Element;
+declare const OutlinedButton: ({ children, onPress, containerStyle }: OutlinedButtonProps) => React.JSX.Element;
 export default OutlinedButton;

package/lib/typescript/src/ui/Placeholder/index.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import Icon from '../../components/Icon';
 type Props = {
     loading?: boolean;
@@ -6,5 +7,5 @@ type Props = {
     errorRetryLabel?: string;
     onPressRetry?: () => void;
 };
-declare const Placeholder: ({ icon, loading, message, errorRetryLabel, onPressRetry }: Props) => JSX.Element;
+declare const Placeholder: ({ icon, loading, message, errorRetryLabel, onPressRetry }: Props) => React.JSX.Element;
 export default Placeholder;

package/lib/typescript/src/ui/ProfileCard/index.d.ts

@@ -1,11 +1,12 @@
+import React, { ReactNode } from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 type Props = {
     uri: string;
     username: string;
-    button?: JSX.Element;
+    button?: ReactNode;
     bodyLabel: string;
     body: string;
     containerStyle?: StyleProp<ViewStyle>;
 };
-declare const ProfileCard: ({ uri, username, bodyLabel, body, button, containerStyle }: Props) => JSX.Element;
+declare const ProfileCard: ({ uri, username, bodyLabel, body, button, containerStyle }: Props) => React.JSX.Element;
 export default ProfileCard;

package/lib/typescript/src/ui/Prompt/index.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 export type PromptItem = {
     title: string;
     placeholder?: string;
@@ -13,5 +14,5 @@ type Props = {
     onDismiss?: () => void;
     autoFocus?: boolean;
 } & PromptItem;
-declare const Prompt: ({ onDismiss, visible, onHide, autoFocus, title, defaultValue, placeholder, onSubmit, onCancel, submitLabel, cancelLabel, }: Props) => JSX.Element;
+declare const Prompt: ({ onDismiss, visible, onHide, autoFocus, title, defaultValue, placeholder, onSubmit, onCancel, submitLabel, cancelLabel, }: Props) => React.JSX.Element;
 export default Prompt;

package/lib/typescript/src/ui/Toast/index.d.ts

@@ -10,9 +10,9 @@ type Props = React.PropsWithChildren<{
     type: ToastType;
     children: string;
 }>;
-declare const Toast: ({ visible, type, children, top, bottom }: Props) => JSX.Element;
+declare const Toast: ({ visible, type, children, top, bottom }: Props) => React.JSX.Element;
 export declare const ToastProvider: ({ children, dismissTimeout, }: React.PropsWithChildren<{
     dismissTimeout?: number | undefined;
-}>) => JSX.Element;
+}>) => React.JSX.Element;
 export declare const useToast: () => Context;
 export default Toast;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendbird/uikit-react-native-foundation",
-  "version": "3.1.1",
+  "version": "3.2.0",
   "description": "A foundational UI kit for building chat-enabled React Native apps.",
   "keywords": [
     "sendbird",
@@ -29,6 +29,7 @@
     "build": "bob build",
     "clean": "del lib",
     "publish:next": "npm publish --tag next",
+    "publish:local": "yalc publish",
     "generate-icons": "node src/assets/bundle-icons.js"
   },
   "repository": {
@@ -47,7 +48,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@sendbird/uikit-utils": "3.1.1"
+    "@sendbird/uikit-utils": "3.2.0"
   },
   "devDependencies": {
     "@types/react": "*",
@@ -57,7 +58,7 @@
     "react-native-builder-bob": "^0.18.0",
     "react-native-fast-image": "^8.5.11",
     "react-native-safe-area-context": "^3.3.2",
-    "typescript": "4.9.4"
+    "typescript": "5.2.2"
   },
   "peerDependencies": {
     "react": ">=17.0.2",
@@ -84,10 +85,5 @@
       ]
     ]
   },
-  "typedoc": {
-    "entryPoint": "./src/index.ts",
-    "readmeFile": "./README.md",
-    "displayName": "@sendbird/uikit-react-native-foundation"
-  },
-  "gitHead": "cc1e2d626a4a3278e80d523b4c63fd3719c82441"
+  "gitHead": "dd029581f658a7970b14932df21d45a265694893"
 }

package/src/assets/icon/index.ts

@@ -4,6 +4,10 @@ const IconAssets = {
   'add': require('./icon-add.png'),
   'archive': require('./icon-archive.png'),
   'arrow-left': require('./icon-arrow-left.png'),
+  'audio-off-filled': require('./icon-audio-off-filled.png'),
+  'audio-off': require('./icon-audio-off.png'),
+  'audio-on-filled': require('./icon-audio-on-filled.png'),
+  'audio-on': require('./icon-audio-on.png'),
   'ban': require('./icon-ban.png'),
   'broadcast': require('./icon-broadcast.png'),
   'camera': require('./icon-camera.png'),
@@ -40,12 +44,14 @@ const IconAssets = {
   'notifications-off-filled': require('./icon-notifications-off-filled.png'),
   'notifications': require('./icon-notifications.png'),
   'operator': require('./icon-operator.png'),
+  'pause': require('./icon-pause.png'),
   'photo': require('./icon-photo.png'),
   'play': require('./icon-play.png'),
   'plus': require('./icon-plus.png'),
   'question': require('./icon-question.png'),
   'radio-off': require('./icon-radio-off.png'),
   'radio-on': require('./icon-radio-on.png'),
+  'recording': require('./icon-recording.png'),
   'refresh': require('./icon-refresh.png'),
   'remove': require('./icon-remove.png'),
   'reply-filled': require('./icon-reply-filled.png'),
@@ -54,6 +60,7 @@ const IconAssets = {
   'send': require('./icon-send.png'),
   'settings-filled': require('./icon-settings-filled.png'),
   'spinner': require('./icon-spinner.png'),
+  'stop': require('./icon-stop.png'),
   'streaming': require('./icon-streaming.png'),
   'supergroup': require('./icon-supergroup.png'),
   'theme': require('./icon-theme.png'),

package/src/components/Box/index.tsx

@@ -45,7 +45,7 @@ const Box = ({ style, children, ...props }: BoxProps) => {
   const boxStyle = useBoxStyle(props);
 
   return (
-    <View style={[boxStyle, style]} {...props}>
+    <View {...props} style={[boxStyle, style]}>
       {children}
     </View>
   );

package/src/components/Icon/index.tsx

@@ -17,10 +17,8 @@ type Props = {
   style?: StyleProp<ImageStyle>;
   containerStyle?: StyleProp<ViewStyle>;
 };
-const Icon: ((props: Props) => JSX.Element) & {
-  Assets: typeof IconAssets;
-  File: typeof FileIcon;
-} = ({ icon, color, size = 24, containerStyle, style }) => {
+
+const Icon = ({ icon, color, size = 24, containerStyle, style }: Props) => {
   const sizeStyle = sizeStyles[size as SizeFactor] ?? { width: size, height: size };
   const { colors } = useUIKitTheme();
   return (
@@ -68,6 +66,7 @@ const sizeStyles = createStyleSheet({
   },
 });
 
-Icon.Assets = IconAssets;
-Icon.File = FileIcon;
-export default Icon;
+export default Object.assign(Icon, {
+  Assets: IconAssets,
+  File: FileIcon,
+});

package/src/components/Image/FastImageInternal.tsx

@@ -1,9 +1,10 @@
+import type { ReactNode } from 'react';
 import type { FastImageProps } from 'react-native-fast-image';
 
-let FastImageInternal: (props: FastImageProps) => JSX.Element | null = () => null;
+let FastImageInternal: (props: FastImageProps) => ReactNode | null = () => null;
 
 try {
-  FastImageInternal = require('react-native-fast-image') as (props: FastImageProps) => JSX.Element;
+  FastImageInternal = require('react-native-fast-image') as (props: FastImageProps) => ReactNode;
 } catch {}
 
 export default FastImageInternal;

package/src/components/Image/index.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import type { ImageProps as NativeImageProps } from 'react-native';
 import { NativeModules } from 'react-native';
 
@@ -7,7 +8,7 @@ export interface SendbirdImageProps extends Omit<NativeImageProps, 'onLoad' | 'o
   tintColor?: string;
 }
 
-export type SendbirdImageComponent = (props: SendbirdImageProps) => JSX.Element;
+export type SendbirdImageComponent = (props: SendbirdImageProps) => ReactNode;
 
 function getImageModule(): SendbirdImageComponent {
   const hasFastImage = Boolean(NativeModules.FastImageView);

package/src/components/Modal/index.tsx

@@ -86,7 +86,7 @@ const Modal = ({
       <KeyboardAvoidingView
         // NOTE: This is trick for Android.
         //  When orientation is changed on Android, the offset that to avoid soft-keyboard is not updated normally.
-        key={`${width}-${height}`}
+        key={Platform.OS === 'android' && enableKeyboardAvoid ? `${width}-${height}` : undefined}
         enabled={enableKeyboardAvoid}
         style={styles.background}
         behavior={Platform.select({ ios: 'padding', default: 'height' })}

package/src/components/PressBox/index.tsx

@@ -10,6 +10,7 @@ type PressBoxStateParams = {
 };
 
 type Props = {
+  disabled?: boolean;
   onPress?: (event: GestureResponderEvent) => void;
   onLongPress?: (event: GestureResponderEvent) => void;
   delayLongPress?: number;

package/src/components/ProgressBar/index.tsx

@@ -0,0 +1,72 @@
+import React, { ReactNode, useEffect, useRef } from 'react';
+import { Animated, Easing, StyleSheet, ViewStyle } from 'react-native';
+
+import { NOOP } from '@sendbird/uikit-utils';
+
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import Box from '../Box';
+
+type Props = {
+  current: number;
+  total: number;
+  trackColor?: string;
+  barColor?: string;
+  overlay?: ReactNode | undefined;
+  style?: ViewStyle;
+};
+const ProgressBar = ({ current = 100, total = 100, trackColor, barColor, overlay, style }: Props) => {
+  const { colors } = useUIKitTheme();
+
+  const uiColors = {
+    track: trackColor ?? colors.primary,
+    bar: barColor ?? colors.onBackground01,
+  };
+
+  const progress = useRef(new Animated.Value(0)).current;
+  const percent = current / total;
+  const stopped = percent === 0;
+
+  useEffect(() => {
+    if (!Number.isNaN(percent)) {
+      const animation = Animated.timing(progress, {
+        toValue: stopped ? 0 : percent,
+        duration: stopped ? 0 : 100,
+        useNativeDriver: false,
+        easing: Easing.linear,
+      });
+
+      animation.start();
+      return () => animation.stop();
+    }
+
+    return NOOP;
+  }, [percent]);
+
+  return (
+    <Box
+      height={36}
+      flexDirection={'row'}
+      backgroundColor={uiColors.track}
+      alignItems={'center'}
+      overflow={'hidden'}
+      style={style}
+    >
+      <Animated.View
+        style={{
+          position: 'absolute',
+          width: progress.interpolate({
+            inputRange: [0, 1],
+            outputRange: ['0%', '100%'],
+            extrapolate: 'clamp',
+          }),
+          height: '100%',
+          opacity: 0.38,
+          backgroundColor: uiColors.bar,
+        }}
+      />
+      <Box style={StyleSheet.absoluteFill}>{overlay}</Box>
+    </Box>
+  );
+};
+
+export default ProgressBar;

package/src/components/RegexText/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 
 import { replaceWithRegex } from '@sendbird/uikit-utils';
 
@@ -12,7 +12,7 @@ export interface RegexTextPattern {
     index: number;
     keyPrefix: string;
     parentProps?: TextProps;
-  }): string | JSX.Element;
+  }): string | ReactNode;
 }
 
 type Props = { patterns: RegexTextPattern[] } & TextProps;
@@ -20,7 +20,7 @@ type Props = { patterns: RegexTextPattern[] } & TextProps;
 const RegexText = ({ children, patterns, ...props }: Props) => {
   if (patterns.length === 0 || typeof children !== 'string') return <>{children}</>;
 
-  const matchedTexts: Array<string | JSX.Element> = [children];
+  const matchedTexts: Array<string | ReactNode> = [children];
 
   patterns.forEach(({ regex, replacer }, patterIndex) => {
     const matchedTextsTemp = matchedTexts.concat();

package/src/index.ts

@@ -9,6 +9,7 @@ export { default as Image } from './components/Image';
 export { default as ImageWithPlaceholder } from './components/ImageWithPlaceholder';
 export { default as Modal } from './components/Modal';
 export { default as PressBox } from './components/PressBox';
+export { default as ProgressBar } from './components/ProgressBar';
 export { default as RegexText } from './components/RegexText';
 export type { RegexTextPattern } from './components/RegexText';
 export { default as Switch } from './components/Switch';

package/src/styles/HeaderStyleContext.tsx

@@ -6,7 +6,7 @@ import type { HeaderProps } from '../ui/Header';
 import getDefaultHeaderHeight from './getDefaultHeaderHeight';
 
 export type HeaderStyleContextType = {
-  HeaderComponent: (props: HeaderProps) => React.ReactElement | null;
+  HeaderComponent: (props: HeaderProps) => React.ReactNode | null;
   defaultTitleAlign: 'left' | 'center';
   statusBarTranslucent: boolean;
   topInset: number;

package/src/styles/createScaleFactor.ts

@@ -10,9 +10,9 @@ const createScaleFactor = (deviceWidth = DESIGNED_DEVICE_WIDTH) => {
   return (dp: number) => PixelRatio.roundToNearestPixel(dp * rangedRatio);
 };
 
-createScaleFactor.updateScaleFactor = (scaleFactor: (dp: number) => number) => {
-  DEFAULT_SCALE_FACTOR = scaleFactor;
-};
-
 export let DEFAULT_SCALE_FACTOR = createScaleFactor();
-export default createScaleFactor;
+export default Object.assign(createScaleFactor, {
+  updateScaleFactor: (scaleFactor: (dp: number) => number) => {
+    DEFAULT_SCALE_FACTOR = scaleFactor;
+  },
+});

package/src/theme/DarkUIKitTheme.ts

@@ -3,41 +3,6 @@ import createTheme from './createTheme';
 const DarkUIKitTheme = createTheme({
   colorScheme: 'dark',
   colors: (palette) => {
-    const groupChannelMessage = {
-      incoming: {
-        enabled: {
-          textMsg: palette.onBackgroundDark01,
-          textEdited: palette.onBackgroundDark02,
-          textTime: palette.onBackgroundDark03,
-          textSenderName: palette.onBackgroundDark02,
-          background: palette.background400,
-        },
-        pressed: {
-          textMsg: palette.onBackgroundDark01,
-          textEdited: palette.onBackgroundDark02,
-          textTime: palette.onBackgroundDark03,
-          textSenderName: palette.onBackgroundDark02,
-          background: palette.primary500,
-        },
-      },
-      outgoing: {
-        enabled: {
-          textMsg: palette.onBackgroundLight01,
-          textEdited: palette.onBackgroundLight02,
-          textTime: palette.onBackgroundDark03,
-          textSenderName: palette.transparent,
-          background: palette.primary200,
-        },
-        pressed: {
-          textMsg: palette.onBackgroundLight01,
-          textEdited: palette.onBackgroundLight02,
-          textTime: palette.onBackgroundDark03,
-          textSenderName: palette.transparent,
-          background: palette.primary300,
-        },
-      },
-    };
-
     return {
       primary: palette.primary200,
       secondary: palette.secondary200,
@@ -149,7 +114,6 @@ const DarkUIKitTheme = createTheme({
             },
           },
         },
-        message: groupChannelMessage,
         dateSeparator: {
           default: {
             none: {
@@ -158,7 +122,60 @@ const DarkUIKitTheme = createTheme({
             },
           },
         },
-        groupChannelMessage,
+        groupChannelMessage: {
+          incoming: {
+            enabled: {
+              textMsg: palette.onBackgroundDark01,
+              textEdited: palette.onBackgroundDark02,
+              textTime: palette.onBackgroundDark03,
+              textSenderName: palette.onBackgroundDark02,
+              background: palette.background400,
+              textVoicePlaytime: palette.onBackgroundDark01,
+              voiceSpinner: palette.primary200,
+              voiceProgressTrack: palette.background400,
+              voiceActionIcon: palette.primary200,
+              voiceActionIconBackground: palette.background700,
+            },
+            pressed: {
+              textMsg: palette.onBackgroundDark01,
+              textEdited: palette.onBackgroundDark02,
+              textTime: palette.onBackgroundDark03,
+              textSenderName: palette.onBackgroundDark02,
+              background: palette.primary500,
+              textVoicePlaytime: palette.onBackgroundDark01,
+              voiceSpinner: palette.primary200,
+              voiceProgressTrack: palette.background400,
+              voiceActionIcon: palette.primary200,
+              voiceActionIconBackground: palette.background700,
+            },
+          },
+          outgoing: {
+            enabled: {
+              textMsg: palette.onBackgroundLight01,
+              textEdited: palette.onBackgroundLight02,
+              textTime: palette.onBackgroundDark03,
+              textSenderName: palette.transparent,
+              background: palette.primary200,
+              textVoicePlaytime: palette.onBackgroundLight01,
+              voiceSpinner: palette.primary300,
+              voiceProgressTrack: palette.primary200,
+              voiceActionIcon: palette.primary200,
+              voiceActionIconBackground: palette.background700,
+            },
+            pressed: {
+              textMsg: palette.onBackgroundLight01,
+              textEdited: palette.onBackgroundLight02,
+              textTime: palette.onBackgroundDark03,
+              textSenderName: palette.transparent,
+              background: palette.primary300,
+              textVoicePlaytime: palette.onBackgroundLight01,
+              voiceSpinner: palette.primary300,
+              voiceProgressTrack: palette.primary200,
+              voiceActionIcon: palette.primary200,
+              voiceActionIconBackground: palette.background700,
+            },
+          },
+        },
         groupChannelPreview: {
           default: {
             none: {
@@ -243,6 +260,32 @@ const DarkUIKitTheme = createTheme({
             },
           },
         },
+        voiceMessageInput: {
+          default: {
+            active: {
+              textCancel: palette.primary200,
+              textTime: palette.onBackgroundLight01,
+              background: palette.background600,
+              actionIcon: palette.onBackgroundDark01,
+              actionIconBackground: palette.background500,
+              sendIcon: palette.onBackgroundLight01,
+              sendIconBackground: palette.primary200,
+              progressTrack: palette.primary200,
+              recording: palette.error300,
+            },
+            inactive: {
+              textCancel: palette.primary200,
+              textTime: palette.onBackgroundDark03,
+              background: palette.background600,
+              actionIcon: palette.onBackgroundDark01,
+              actionIconBackground: palette.background500,
+              sendIcon: palette.onBackgroundDark04,
+              sendIconBackground: palette.background500,
+              progressTrack: palette.background400,
+              recording: palette.error200,
+            },
+          },
+        },
       },
     };
   },