@sendbird/uikit-react-native-foundation 3.1.2 → 3.3.0

package/src/ui/Avatar/AvatarStack.tsx

@@ -0,0 +1,103 @@
+import React, { ReactElement } from 'react';
+import { StyleProp, View, ViewStyle } from 'react-native';
+
+import Text from '../../components/Text';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+
+const DEFAULT_MAX = 3;
+const DEFAULT_BORDER_WIDTH = 2;
+const DEFAULT_AVATAR_GAP = -4;
+const DEFAULT_AVATAR_SIZE = 26;
+const DEFAULT_REMAINS_MAX = 99;
+
+type Props = React.PropsWithChildren<{
+  size?: number;
+  containerStyle?: StyleProp<ViewStyle>;
+  maxAvatar?: number;
+  avatarGap?: number;
+  styles?: {
+    borderWidth?: number;
+    borderColor?: string;
+    remainsTextColor?: string;
+    remainsBackgroundColor?: string;
+  };
+}>;
+
+const AvatarStack = ({
+  children,
+  containerStyle,
+  styles,
+  maxAvatar = DEFAULT_MAX,
+  size = DEFAULT_AVATAR_SIZE,
+  avatarGap = DEFAULT_AVATAR_GAP,
+}: Props) => {
+  const { colors, palette, select } = useUIKitTheme();
+  const defaultStyles = {
+    borderWidth: DEFAULT_BORDER_WIDTH,
+    borderColor: colors.background,
+    remainsTextColor: colors.onBackground02,
+    remainsBackgroundColor: select({ light: palette.background100, dark: palette.background600 }),
+  };
+  const avatarStyles = { ...defaultStyles, ...styles };
+
+  const childrenArray = React.Children.toArray(children).filter((it) => React.isValidElement(it));
+  const remains = childrenArray.length - maxAvatar;
+  const shouldRenderRemains = remains > 0;
+
+  const actualSize = size + avatarStyles.borderWidth * 2;
+  const actualGap = avatarGap - avatarStyles.borderWidth;
+
+  const renderAvatars = () => {
+    return childrenArray.slice(0, maxAvatar).map((child, index) =>
+      React.cloneElement(child as ReactElement, {
+        size: actualSize,
+        containerStyle: {
+          left: actualGap * index,
+          borderWidth: avatarStyles.borderWidth,
+          borderColor: avatarStyles.borderColor,
+        },
+      }),
+    );
+  };
+
+  const renderRemainsCount = () => {
+    if (!shouldRenderRemains) return null;
+    return (
+      <View
+        style={[
+          avatarStyles,
+          {
+            left: actualGap * maxAvatar,
+            width: actualSize,
+            height: actualSize,
+            borderRadius: actualSize / 2,
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: avatarStyles.remainsBackgroundColor,
+          },
+        ]}
+      >
+        <Text style={{ color: avatarStyles.remainsTextColor, fontSize: 8 }} caption4>
+          {`+${Math.min(remains, DEFAULT_REMAINS_MAX)}`}
+        </Text>
+      </View>
+    );
+  };
+
+  const calculateWidth = () => {
+    const widthEach = actualSize + actualGap;
+    const avatarCountOffset = shouldRenderRemains ? 1 : 0;
+    const avatarCount = shouldRenderRemains ? maxAvatar : childrenArray.length;
+    const count = avatarCount + avatarCountOffset;
+    return widthEach * count + avatarStyles.borderWidth;
+  };
+
+  return (
+    <View style={[containerStyle, { left: -avatarStyles.borderWidth, flexDirection: 'row', width: calculateWidth() }]}>
+      {renderAvatars()}
+      {renderRemainsCount()}
+    </View>
+  );
+};
+
+export default AvatarStack;

package/src/ui/Avatar/index.tsx

@@ -9,11 +9,8 @@ import createStyleSheet from '../../styles/createStyleSheet';
 import useUIKitTheme from '../../theme/useUIKitTheme';
 import AvatarGroup from './AvatarGroup';
 import AvatarIcon from './AvatarIcon';
+import AvatarStack from './AvatarStack';
 
-type SubComponents = {
-  Group: typeof AvatarGroup;
-  Icon: typeof AvatarIcon;
-};
 type Props = {
   uri?: string;
   size?: number;
@@ -21,13 +18,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 +66,8 @@ const styles = createStyleSheet({
   },
 });
 
-Avatar.Group = AvatarGroup;
-Avatar.Icon = AvatarIcon;
-export default Avatar;
+export default Object.assign(Avatar, {
+  Group: AvatarGroup,
+  Icon: AvatarIcon,
+  Stack: AvatarStack,
+});

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;

package/src/ui/TypingIndicatorBubble/index.tsx

@@ -0,0 +1,120 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, Easing, StyleProp, ViewStyle } from 'react-native';
+
+import type { SendbirdUser } from '@sendbird/uikit-utils';
+
+import Box from '../../components/Box';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import Avatar from '../Avatar';
+
+type Props = {
+  typingUsers: SendbirdUser[];
+  containerStyle?: StyleProp<ViewStyle>;
+  maxAvatar?: number;
+};
+
+const TypingIndicatorBubble = ({ typingUsers, containerStyle, maxAvatar }: Props) => {
+  const { select, palette, colors } = useUIKitTheme();
+
+  if (typingUsers.length === 0) return null;
+
+  return (
+    <Box flexDirection={'row'} justifyContent={'flex-start'} alignItems={'center'} style={containerStyle}>
+      <Avatar.Stack
+        size={26}
+        maxAvatar={maxAvatar}
+        styles={{
+          remainsTextColor: colors.onBackground02,
+          remainsBackgroundColor: select({ light: palette.background100, dark: palette.background400 }),
+        }}
+        containerStyle={{ marginRight: 12 }}
+      >
+        {typingUsers.map((user, index) => (
+          <Avatar key={index} uri={user.profileUrl} />
+        ))}
+      </Avatar.Stack>
+      <TypingDots
+        dotColor={select({ light: palette.background100, dark: palette.background400 })}
+        backgroundColor={colors.onBackground02}
+      />
+    </Box>
+  );
+};
+
+type TypingDotsProps = {
+  dotColor: string;
+  backgroundColor: string;
+};
+const TypingDots = ({ dotColor, backgroundColor }: TypingDotsProps) => {
+  const animation = useRef(new Animated.Value(0)).current;
+  const dots = matrix.map(([timeline, scale, opacity]) => [
+    animation.interpolate({ inputRange: timeline, outputRange: scale, extrapolate: 'clamp' }),
+    animation.interpolate({ inputRange: timeline, outputRange: opacity, extrapolate: 'clamp' }),
+  ]);
+
+  useEffect(() => {
+    const animated = Animated.loop(
+      Animated.timing(animation, { toValue: 1.4, duration: 1400, easing: Easing.linear, useNativeDriver: true }),
+    );
+    animated.start();
+    return () => animated.reset();
+  }, []);
+
+  return (
+    <Box
+      flexDirection={'row'}
+      alignItems={'center'}
+      justifyContent={'center'}
+      borderRadius={16}
+      paddingHorizontal={12}
+      height={34}
+      backgroundColor={dotColor}
+    >
+      {dots.map(([scale, opacity], index) => {
+        return (
+          <Animated.View
+            key={index}
+            style={[
+              styles.dot,
+              {
+                marginRight: index === dots.length - 1 ? 0 : 6,
+                opacity: opacity,
+                transform: [{ scale: scale }],
+                backgroundColor: backgroundColor,
+              },
+            ]}
+          />
+        );
+      })}
+    </Box>
+  );
+};
+
+const matrix = [
+  [
+    [0.4, 0.7, 1.0],
+    [1.0, 1.2, 1.0],
+    [0.12, 0.38, 0.12],
+  ],
+  [
+    [0.6, 0.9, 1.2],
+    [1.0, 1.2, 1.0],
+    [0.12, 0.38, 0.12],
+  ],
+  [
+    [0.8, 1.1, 1.4],
+    [1.0, 1.2, 1.0],
+    [0.12, 0.38, 0.12],
+  ],
+];
+
+const styles = createStyleSheet({
+  dot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+  },
+});
+
+export default TypingIndicatorBubble;