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

package/src/theme/LightUIKitTheme.ts

@@ -3,41 +3,6 @@ import createTheme from './createTheme';
 const LightUIKitTheme = createTheme({
   colorScheme: 'light',
   colors: (palette) => {
-    const groupChannelMessage = {
-      incoming: {
-        enabled: {
-          textMsg: palette.onBackgroundLight01,
-          textEdited: palette.onBackgroundLight02,
-          textTime: palette.onBackgroundLight03,
-          textSenderName: palette.onBackgroundLight02,
-          background: palette.background100,
-        },
-        pressed: {
-          textMsg: palette.onBackgroundLight01,
-          textEdited: palette.onBackgroundLight02,
-          textTime: palette.onBackgroundLight03,
-          textSenderName: palette.onBackgroundLight02,
-          background: palette.primary100,
-        },
-      },
-      outgoing: {
-        enabled: {
-          textMsg: palette.onBackgroundDark01,
-          textEdited: palette.onBackgroundDark02,
-          textTime: palette.onBackgroundLight03,
-          textSenderName: palette.transparent,
-          background: palette.primary300,
-        },
-        pressed: {
-          textMsg: palette.onBackgroundDark01,
-          textEdited: palette.onBackgroundDark02,
-          textTime: palette.onBackgroundLight03,
-          textSenderName: palette.transparent,
-          background: palette.primary400,
-        },
-      },
-    };
-
     return {
       primary: palette.primary300,
       secondary: palette.secondary300,
@@ -149,7 +114,6 @@ const LightUIKitTheme = createTheme({
             },
           },
         },
-        message: groupChannelMessage,
         dateSeparator: {
           default: {
             none: {
@@ -158,7 +122,60 @@ const LightUIKitTheme = createTheme({
             },
           },
         },
-        groupChannelMessage,
+        groupChannelMessage: {
+          incoming: {
+            enabled: {
+              textMsg: palette.onBackgroundLight01,
+              textEdited: palette.onBackgroundLight02,
+              textTime: palette.onBackgroundLight03,
+              textSenderName: palette.onBackgroundLight02,
+              background: palette.background100,
+              textVoicePlaytime: palette.onBackgroundLight01,
+              voiceSpinner: palette.primary300,
+              voiceProgressTrack: palette.background100,
+              voiceActionIcon: palette.primary300,
+              voiceActionIconBackground: palette.background50,
+            },
+            pressed: {
+              textMsg: palette.onBackgroundLight01,
+              textEdited: palette.onBackgroundLight02,
+              textTime: palette.onBackgroundLight03,
+              textSenderName: palette.onBackgroundLight02,
+              background: palette.primary100,
+              textVoicePlaytime: palette.onBackgroundLight01,
+              voiceSpinner: palette.primary300,
+              voiceProgressTrack: palette.background100,
+              voiceActionIcon: palette.primary300,
+              voiceActionIconBackground: palette.background50,
+            },
+          },
+          outgoing: {
+            enabled: {
+              textMsg: palette.onBackgroundDark01,
+              textEdited: palette.onBackgroundDark02,
+              textTime: palette.onBackgroundLight03,
+              textSenderName: palette.transparent,
+              background: palette.primary300,
+              textVoicePlaytime: palette.onBackgroundDark01,
+              voiceSpinner: palette.primary200,
+              voiceProgressTrack: palette.primary300,
+              voiceActionIcon: palette.primary300,
+              voiceActionIconBackground: palette.background50,
+            },
+            pressed: {
+              textMsg: palette.onBackgroundDark01,
+              textEdited: palette.onBackgroundDark02,
+              textTime: palette.onBackgroundLight03,
+              textSenderName: palette.transparent,
+              background: palette.primary400,
+              textVoicePlaytime: palette.onBackgroundDark01,
+              voiceSpinner: palette.primary200,
+              voiceProgressTrack: palette.primary300,
+              voiceActionIcon: palette.primary300,
+              voiceActionIconBackground: palette.background50,
+            },
+          },
+        },
         groupChannelPreview: {
           default: {
             none: {
@@ -243,6 +260,32 @@ const LightUIKitTheme = createTheme({
             },
           },
         },
+        voiceMessageInput: {
+          default: {
+            active: {
+              textCancel: palette.primary300,
+              textTime: palette.onBackgroundDark01,
+              background: palette.background50,
+              actionIcon: palette.onBackgroundLight01,
+              actionIconBackground: palette.background100,
+              sendIcon: palette.onBackgroundDark01,
+              sendIconBackground: palette.primary300,
+              progressTrack: palette.primary300,
+              recording: palette.error300,
+            },
+            inactive: {
+              textCancel: palette.primary300,
+              textTime: palette.onBackgroundLight03,
+              background: palette.background50,
+              actionIcon: palette.onBackgroundLight01,
+              actionIconBackground: palette.background100,
+              sendIcon: palette.onBackgroundLight04,
+              sendIconBackground: palette.background100,
+              progressTrack: palette.background100,
+              recording: palette.error300,
+            },
+          },
+        },
       },
     };
   },

package/src/types.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import type { ReactElement, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import type { TextStyle } from 'react-native';
 
 export interface UIKitTypography {
@@ -43,7 +43,8 @@ export type Component =
   | 'ProfileCard'
   | 'Reaction'
   | 'OpenChannelMessage'
-  | 'OpenChannelPreview';
+  | 'OpenChannelPreview'
+  | 'VoiceMessageInput';
 
 export type GetColorTree<
   Tree extends {
@@ -74,6 +75,7 @@ export type ComponentColorTree = GetColorTree<{
     Reaction: 'default' | 'rounded';
     OpenChannelMessage: 'default';
     OpenChannelPreview: 'default';
+    VoiceMessageInput: 'default';
   };
   State: {
     Header: 'none';
@@ -89,6 +91,7 @@ export type ComponentColorTree = GetColorTree<{
     Reaction: 'enabled' | 'selected';
     OpenChannelMessage: 'enabled' | 'pressed';
     OpenChannelPreview: 'none';
+    VoiceMessageInput: 'active' | 'inactive';
   };
   ColorPart: {
     Header: 'background' | 'borderBottom';
@@ -98,7 +101,17 @@ export type ComponentColorTree = GetColorTree<{
     Badge: 'text' | 'background';
     Placeholder: 'content' | 'highlight';
     DateSeparator: 'text' | 'background';
-    GroupChannelMessage: 'textMsg' | 'textEdited' | 'textSenderName' | 'textTime' | 'background';
+    GroupChannelMessage:
+      | 'textMsg'
+      | 'textEdited'
+      | 'textSenderName'
+      | 'textTime'
+      | 'textVoicePlaytime'
+      | 'background'
+      | 'voiceSpinner'
+      | 'voiceProgressTrack'
+      | 'voiceActionIcon'
+      | 'voiceActionIconBackground';
     GroupChannelPreview:
       | 'textTitle'
       | 'textTitleCaption'
@@ -128,6 +141,16 @@ export type ComponentColorTree = GetColorTree<{
       | 'background'
       | 'coverBackground'
       | 'separator';
+    VoiceMessageInput:
+      | 'textCancel'
+      | 'textTime'
+      | 'background'
+      | 'actionIcon'
+      | 'actionIconBackground'
+      | 'sendIcon'
+      | 'sendIconBackground'
+      | 'progressTrack'
+      | 'recording';
   };
 }>;
 export type ComponentColors<T extends Component> = {
@@ -175,14 +198,15 @@ export interface UIKitColors {
     reaction: ComponentColors<'Reaction'>;
     openChannelMessage: ComponentColors<'OpenChannelMessage'>;
     openChannelPreview: ComponentColors<'OpenChannelPreview'>;
+    voiceMessageInput: ComponentColors<'VoiceMessageInput'>;
   };
 }
 
-export type HeaderElement = string | ReactElement | null;
+export type HeaderElement = ReactNode;
 export type HeaderPartProps = {
-  title?: HeaderElement;
-  right?: HeaderElement;
-  left?: HeaderElement;
+  title?: ReactNode;
+  right?: ReactNode;
+  left?: ReactNode;
   onPressLeft?: (...params: any[]) => any;
   onPressRight?: (...params: any[]) => any;
 };

package/src/ui/Avatar/index.tsx

@@ -10,10 +10,6 @@ import useUIKitTheme from '../../theme/useUIKitTheme';
 import AvatarGroup from './AvatarGroup';
 import AvatarIcon from './AvatarIcon';
 
-type SubComponents = {
-  Group: typeof AvatarGroup;
-  Icon: typeof AvatarIcon;
-};
 type Props = {
   uri?: string;
   size?: number;
@@ -21,13 +17,8 @@ type Props = {
   muted?: boolean;
   containerStyle?: StyleProp<ViewStyle>;
 };
-const Avatar: ((props: Props) => JSX.Element) & SubComponents = ({
-  uri,
-  square,
-  muted = false,
-  size = 56,
-  containerStyle,
-}) => {
+
+const Avatar = ({ uri, square, muted = false, size = 56, containerStyle }: Props) => {
   const { colors, palette } = useUIKitTheme();
   const [loadFailure, setLoadFailure] = useState(false);
 
@@ -74,6 +65,7 @@ const styles = createStyleSheet({
   },
 });
 
-Avatar.Group = AvatarGroup;
-Avatar.Icon = AvatarIcon;
-export default Avatar;
+export default Object.assign(Avatar, {
+  Group: AvatarGroup,
+  Icon: AvatarIcon,
+});

package/src/ui/BottomSheet/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { TouchableOpacity, useWindowDimensions } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
@@ -17,7 +17,7 @@ export type BottomSheetItem = {
     disabled?: boolean;
     onPress: () => void;
   }[];
-  HeaderComponent?: (props: HeaderProps) => JSX.Element;
+  HeaderComponent?: (props: HeaderProps) => ReactNode;
 };
 type Props = {
   visible: boolean;

package/src/ui/Dialog/DialogSheet.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { StyleProp, View, ViewStyle } from 'react-native';
 
 import Icon from '../../components/Icon';
@@ -9,7 +9,7 @@ import useUIKitTheme from '../../theme/useUIKitTheme';
 type Props = React.PropsWithChildren<{
   style?: StyleProp<ViewStyle>;
 }>;
-const DialogSheet: ((props: Props) => JSX.Element) & { Item: typeof SheetItem } = ({ style, children }) => {
+const DialogSheet: ((props: Props) => ReactNode) & { Item: typeof SheetItem } = ({ style, children }) => {
   const { colors } = useUIKitTheme();
   return (
     <View style={[styles.container, { backgroundColor: colors.ui.dialog.default.none.background }, style]}>

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

@@ -0,0 +1,123 @@
+import React, { useEffect, useState } from 'react';
+
+import type { SendbirdFileMessage } from '@sendbird/uikit-utils';
+import { millsToMSS } from '@sendbird/uikit-utils';
+
+import Box from '../../components/Box';
+import Icon from '../../components/Icon';
+import PressBox from '../../components/PressBox';
+import ProgressBar from '../../components/ProgressBar';
+import Text from '../../components/Text';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import LoadingSpinner from '../LoadingSpinner';
+import MessageContainer from './MessageContainer';
+import type { GroupChannelMessageProps } from './index';
+
+export type VoiceFileMessageState = {
+  status: 'preparing' | 'playing' | 'paused';
+  currentTime: number;
+  duration: number;
+};
+
+type Props = GroupChannelMessageProps<
+  SendbirdFileMessage,
+  {
+    durationMetaArrayKey?: string;
+    onUnmount: () => void;
+  }
+>;
+const VoiceFileMessage = (props: Props) => {
+  const {
+    onLongPress,
+    variant = 'incoming',
+    onToggleVoiceMessage,
+    message,
+    durationMetaArrayKey = 'KEY_VOICE_MESSAGE_DURATION',
+    onUnmount,
+  } = props;
+
+  const { colors } = useUIKitTheme();
+
+  const [state, setState] = useState<VoiceFileMessageState>(() => {
+    const meta = message.metaArrays.find((it) => it.key === durationMetaArrayKey);
+    const value = meta?.value?.[0];
+    const initialDuration = value ? parseInt(value, 10) : 0;
+    return {
+      status: 'paused',
+      currentTime: 0,
+      duration: initialDuration,
+    };
+  });
+
+  useEffect(() => {
+    return () => {
+      onUnmount();
+    };
+  }, []);
+
+  const uiColors = colors.ui.groupChannelMessage[variant];
+  const remainingTime = state.duration - state.currentTime;
+
+  return (
+    <MessageContainer {...props}>
+      <Box style={styles.container} backgroundColor={uiColors.enabled.background}>
+        <PressBox onPress={() => onToggleVoiceMessage?.(state, setState)} onLongPress={onLongPress}>
+          <ProgressBar
+            current={state.currentTime}
+            total={state.duration}
+            style={{ minWidth: 136, height: 44 }}
+            trackColor={uiColors.enabled.voiceProgressTrack}
+            overlay={
+              <Box
+                flex={1}
+                flexDirection={'row'}
+                alignItems={'center'}
+                justifyContent={'space-between'}
+                paddingHorizontal={12}
+              >
+                {state.status === 'preparing' ? (
+                  <LoadingSpinner size={24} color={uiColors.enabled.voiceSpinner} />
+                ) : (
+                  <Icon
+                    size={16}
+                    containerStyle={{
+                      backgroundColor: uiColors.enabled.voiceActionIconBackground,
+                      padding: 6,
+                      borderRadius: 16,
+                    }}
+                    icon={state.status === 'paused' ? 'play' : 'pause'}
+                  />
+                )}
+                <Text
+                  body3
+                  style={{ lineHeight: undefined, marginLeft: 6, opacity: 0.88 }}
+                  color={uiColors.enabled.textVoicePlaytime}
+                >
+                  {millsToMSS(state.currentTime === 0 ? state.duration : remainingTime)}
+                </Text>
+              </Box>
+            }
+          />
+        </PressBox>
+        {props.children}
+      </Box>
+    </MessageContainer>
+  );
+};
+
+const styles = createStyleSheet({
+  container: {
+    borderRadius: 16,
+    overflow: 'hidden',
+  },
+  image: {
+    maxWidth: 240,
+    width: 240,
+    height: 160,
+    borderRadius: 16,
+    overflow: 'hidden',
+  },
+});
+
+export default VoiceFileMessage;

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

@@ -14,7 +14,7 @@ const UnknownMessage = (props: GroupChannelMessageProps<SendbirdMessage>) => {
   const { variant = 'incoming' } = props;
 
   const { colors } = useUIKitTheme();
-  const color = colors.ui.groupChannelMessage['incoming'];
+  const color = colors.ui.groupChannelMessage[variant];
   const titleColor = variant === 'incoming' ? colors.onBackground01 : colors.onBackgroundReverse01;
   const descColor = variant === 'incoming' ? colors.onBackground02 : colors.onBackgroundReverse02;
 

package/src/ui/GroupChannelMessage/index.ts

@@ -6,6 +6,8 @@ import AdminMessage from './Message.admin';
 import FileMessage from './Message.file';
 import ImageFileMessage from './Message.file.image';
 import VideoFileMessage from './Message.file.video';
+import VoiceFileMessage from './Message.file.voice';
+import type { VoiceFileMessageState } from './Message.file.voice';
 import UnknownMessage from './Message.unknown';
 import UserMessage from './Message.user';
 import OpenGraphUser from './Message.user.og';
@@ -34,6 +36,10 @@ export type GroupChannelMessageProps<T extends SendbirdMessage, AdditionalProps
   onPressAvatar?: () => void;
   onPressURL?: (url: string) => void;
   onPressMentionedUser?: (mentionedUser?: SendbirdUser) => void;
+  onToggleVoiceMessage?: (
+    state: VoiceFileMessageState,
+    setState: React.Dispatch<React.SetStateAction<VoiceFileMessageState>>,
+  ) => Promise<void>;
 } & AdditionalProps;
 
 const GroupChannelMessage = {
@@ -42,6 +48,7 @@ const GroupChannelMessage = {
   File: FileMessage,
   ImageFile: ImageFileMessage,
   VideoFile: VideoFileMessage,
+  VoiceFile: VoiceFileMessage,
   Admin: AdminMessage,
   Unknown: UnknownMessage,
 };

package/src/ui/GroupChannelPreview/index.tsx

@@ -11,13 +11,13 @@ import useUIKitTheme from '../../theme/useUIKitTheme';
 import Badge from '../Badge';
 
 type Props = {
-  customCover?: React.ReactElement;
+  customCover?: React.ReactNode;
   coverUrl: string;
 
   title: string;
 
   titleCaption: string;
-  titleCaptionLeft?: React.ReactElement;
+  titleCaptionLeft?: React.ReactNode;
 
   bodyIcon?: keyof typeof Icon.Assets;
   body: string;

package/src/ui/Header/index.tsx

@@ -5,12 +5,11 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { conditionChaining } from '@sendbird/uikit-utils';
 
 import Text, { TextProps } from '../../components/Text';
-import type { BaseHeaderProps } from '../../index';
+import type { BaseHeaderProps, HeaderElement } from '../../index';
 import createStyleSheet from '../../styles/createStyleSheet';
 import useHeaderStyle from '../../styles/useHeaderStyle';
 import useUIKitTheme from '../../theme/useUIKitTheme';
 
-type HeaderElement = string | React.ReactElement | null;
 export type HeaderProps = BaseHeaderProps<
   {
     title?: HeaderElement;
@@ -27,11 +26,7 @@ export type HeaderProps = BaseHeaderProps<
 >;
 
 const AlignMapper = { left: 'flex-start', center: 'center', right: 'flex-end' } as const;
-const Header: ((props: HeaderProps) => JSX.Element) & {
-  Button: typeof HeaderButton;
-  Title: typeof HeaderTitle;
-  Subtitle: typeof HeaderSubtitle;
-} = ({
+const Header = ({
   children,
   titleAlign,
   title = null,
@@ -42,7 +37,7 @@ const Header: ((props: HeaderProps) => JSX.Element) & {
   clearTitleMargin = false,
   clearStatusBarTopInset = false,
   statusBarTopInsetAs = 'padding',
-}) => {
+}: HeaderProps) => {
   const { topInset, defaultTitleAlign, defaultHeight } = useHeaderStyle();
 
   const { colors } = useUIKitTheme();
@@ -184,7 +179,8 @@ const styles = createStyleSheet({
   },
 });
 
-Header.Button = HeaderButton;
-Header.Title = HeaderTitle;
-Header.Subtitle = HeaderSubtitle;
-export default Header;
+export default Object.assign(Header, {
+  Button: HeaderButton,
+  Title: HeaderTitle,
+  Subtitle: HeaderSubtitle,
+});

package/src/ui/OpenChannelMessage/MessageContainer.tsx

@@ -101,7 +101,7 @@ const MessageContainer = ({
   );
 };
 
-const SendingStatusContainer = ({ children }: { children: React.ReactElement }) => {
+const SendingStatusContainer = ({ children }: { children: React.ReactNode }) => {
   return (
     <Box flexDirection={'row'}>
       <Box marginTop={2}>{children}</Box>

package/src/ui/OpenChannelPreview/index.tsx

@@ -10,7 +10,7 @@ import createStyleSheet from '../../styles/createStyleSheet';
 import useUIKitTheme from '../../theme/useUIKitTheme';
 
 type Props = {
-  customCover?: React.ReactElement;
+  customCover?: React.ReactNode;
   coverUrl: string;
   title: string;
   participantsCount?: number;

package/src/ui/ProfileCard/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { StyleProp, View, ViewStyle } from 'react-native';
 
 import Divider from '../../components/Divider';
@@ -11,7 +11,7 @@ type Props = {
   uri: string;
   username: string;
 
-  button?: JSX.Element;
+  button?: ReactNode;
 
   bodyLabel: string;
   body: string;