@sendbird/uikit-react-native-foundation 3.2.0 → 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,6 +9,7 @@ import createStyleSheet from '../../styles/createStyleSheet';
 import useUIKitTheme from '../../theme/useUIKitTheme';
 import AvatarGroup from './AvatarGroup';
 import AvatarIcon from './AvatarIcon';
+import AvatarStack from './AvatarStack';
 
 type Props = {
   uri?: string;
@@ -68,4 +69,5 @@ const styles = createStyleSheet({
 export default Object.assign(Avatar, {
   Group: AvatarGroup,
   Icon: AvatarIcon,
+  Stack: AvatarStack,
 });

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;