@sendbird/uikit-react-native-foundation 2.1.0 → 2.3.0

package/src/assets/icon/index.ts

@@ -44,6 +44,8 @@ const IconAssets = {
   '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'),
   'refresh': require('./icon-refresh.png'),
   'remove': require('./icon-remove.png'),
   'reply-filled': require('./icon-reply-filled.png'),

package/src/components/Modal/index.tsx

@@ -19,8 +19,9 @@ import createStyleSheet from '../../styles/createStyleSheet';
 import useHeaderStyle from '../../styles/useHeaderStyle';
 import useUIKitTheme from '../../theme/useUIKitTheme';
 
+type ModalAnimationType = 'slide' | 'slide-no-gesture' | 'fade';
 type Props = {
-  type?: 'slide' | 'fade';
+  type?: ModalAnimationType;
   onClose: () => void;
   backgroundStyle?: StyleProp<ViewStyle>;
   disableBackgroundClose?: boolean;
@@ -117,12 +118,12 @@ const isHideGesture = (distanceY: number, velocityY: number) => {
   return distanceY > 125 || (distanceY > 0 && velocityY > 0.1);
 };
 const useModalPanResponder = (
-  type: 'slide' | 'fade',
+  type: ModalAnimationType,
   translateY: Animated.Value,
   show: () => void,
   hide: () => void,
 ) => {
-  if (type === 'fade') return { panHandlers: {} };
+  if (type === 'fade' || type === 'slide-no-gesture') return { panHandlers: {} };
   return React.useRef(
     PanResponder.create({
       onMoveShouldSetPanResponderCapture: (_, { dy }) => dy > 8,
@@ -137,15 +138,15 @@ const useModalPanResponder = (
   ).current;
 };
 
-const useModalAnimation = (type: 'slide' | 'fade') => {
-  const initialY = type === 'slide' ? Dimensions.get('window').height : 0;
+const useModalAnimation = (type: ModalAnimationType) => {
+  const initialY = type === 'fade' ? 0 : Dimensions.get('window').height;
   const baseAnimBackground = useRef(new Animated.Value(0)).current;
   const baseAnimContent = useRef(new Animated.Value(initialY)).current;
 
   const content = {
     opacity: baseAnimBackground.interpolate({
       inputRange: [0, 1],
-      outputRange: [type === 'slide' ? 1 : 0, 1],
+      outputRange: [type === 'fade' ? 0 : 1, 1],
     }),
     translateY: baseAnimContent,
   };

package/src/components/RegexText/index.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+import { replaceWithRegex } from '@sendbird/uikit-utils';
+
+import Text, { TextProps } from '../Text';
+
+interface Pattern {
+  regex: RegExp;
+  replacer(params: {
+    match: string;
+    groups: string[];
+    index: number;
+    keyPrefix: string;
+    parentProps?: TextProps;
+  }): string | JSX.Element;
+}
+
+type Props = { patterns: Pattern[] } & TextProps;
+
+const RegexText = ({ children, patterns, ...props }: Props) => {
+  if (patterns.length === 0 || typeof children !== 'string') return <>{children}</>;
+
+  const matchedTexts: Array<string | JSX.Element> = [children];
+
+  patterns.forEach(({ regex, replacer }, patterIndex) => {
+    const matchedTextsTemp = matchedTexts.concat();
+    let offset = 0;
+    matchedTextsTemp.forEach((text, index) => {
+      if (typeof text === 'string' && text) {
+        const children = replaceWithRegex(
+          text,
+          regex,
+          (params) => replacer({ ...params, parentProps: props, keyPrefix: index + params.keyPrefix }),
+          String(patterIndex),
+        );
+
+        if (children.length > 1) {
+          matchedTexts.splice(index + offset, 1, ...children);
+          offset += children.length - 1;
+        }
+      }
+    });
+  });
+
+  return <Text {...props}>{matchedTexts}</Text>;
+};
+
+export default RegexText;

package/src/components/URLParsedText/index.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import { Linking } from 'react-native';
 
 import { Logger, replaceUrlAsComponents } from '@sendbird/uikit-utils';
@@ -19,30 +19,28 @@ type Props = TextProps & {
   strict?: boolean;
 };
 const URLParsedText = ({ children, onPressUrl = openUrl, strict, ...props }: Props) => {
-  const parsedChildren = useMemo((): React.ReactNode => {
-    return React.Children.map(React.Children.toArray(children), (child) => {
-      if (typeof child === 'string') {
-        return replaceUrlAsComponents(
-          child,
-          (url) => {
-            return (
-              <Text
-                {...props}
-                suppressHighlighting
-                onPress={() => onPressUrl?.(url, url.startsWith('http'))}
-                style={[props.style, styles.url]}
-              >
-                {url}
-              </Text>
-            );
-          },
-          strict,
-        );
-      }
+  const parsedChildren = React.Children.map(React.Children.toArray(children), (child) => {
+    if (typeof child === 'string') {
+      return replaceUrlAsComponents(
+        child,
+        (url) => {
+          return (
+            <Text
+              {...props}
+              suppressHighlighting
+              onPress={() => onPressUrl?.(url, url.startsWith('http'))}
+              style={[props.style, styles.url]}
+            >
+              {url}
+            </Text>
+          );
+        },
+        strict,
+      );
+    }
 
-      return child;
-    });
-  }, [children]);
+    return child;
+  });
 
   return <Text {...props}>{parsedChildren}</Text>;
 };

package/src/index.ts

@@ -6,6 +6,7 @@ export { default as Divider } from './components/Divider';
 export { default as Icon } from './components/Icon';
 export { default as Image } from './components/Image';
 export { default as Modal } from './components/Modal';
+export { default as RegexText } from './components/RegexText';
 export { default as Switch } from './components/Switch';
 export { default as Text } from './components/Text';
 export { default as TextInput } from './components/TextInput';

package/src/styles/createStyleSheet.ts

@@ -12,7 +12,9 @@ const preProcessor: Partial<StylePreprocessor> = {
   '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,

package/src/theme/DarkUIKitTheme.ts

@@ -179,6 +179,28 @@ const DarkUIKitTheme = createTheme({
           },
         },
       },
+      reaction: {
+        default: {
+          enabled: {
+            background: palette.transparent,
+            highlight: palette.onBackgroundDark03,
+          },
+          selected: {
+            background: palette.primary500,
+            highlight: palette.primary200,
+          },
+        },
+        rounded: {
+          enabled: {
+            background: palette.background400,
+            highlight: palette.transparent,
+          },
+          selected: {
+            background: palette.primary500,
+            highlight: palette.transparent,
+          },
+        },
+      },
     },
   }),
 });

package/src/theme/LightUIKitTheme.ts

@@ -179,6 +179,28 @@ const LightUIKitTheme = createTheme({
           },
         },
       },
+      reaction: {
+        default: {
+          enabled: {
+            background: palette.transparent,
+            highlight: palette.onBackgroundLight03,
+          },
+          selected: {
+            background: palette.primary100,
+            highlight: palette.primary300,
+          },
+        },
+        rounded: {
+          enabled: {
+            background: palette.background100,
+            highlight: palette.transparent,
+          },
+          selected: {
+            background: palette.primary100,
+            highlight: palette.transparent,
+          },
+        },
+      },
     },
   }),
 });

package/src/types.ts

@@ -40,7 +40,8 @@ export type Component =
   | 'Message'
   | 'DateSeparator'
   | 'GroupChannelPreview'
-  | 'ProfileCard';
+  | 'ProfileCard'
+  | 'Reaction';
 
 export type GetColorTree<
   Tree extends {
@@ -68,6 +69,7 @@ export type ComponentColorTree = GetColorTree<{
     DateSeparator: 'default';
     GroupChannelPreview: 'default';
     ProfileCard: 'default';
+    Reaction: 'default' | 'rounded';
   };
   State: {
     Header: 'none';
@@ -80,6 +82,7 @@ export type ComponentColorTree = GetColorTree<{
     DateSeparator: 'none';
     GroupChannelPreview: 'none';
     ProfileCard: 'none';
+    Reaction: 'enabled' | 'selected';
   };
   ColorPart: {
     Header: 'background' | 'borderBottom';
@@ -101,6 +104,7 @@ export type ComponentColorTree = GetColorTree<{
       | 'bodyIconBackground'
       | 'separator';
     ProfileCard: 'textUsername' | 'textBodyLabel' | 'textBody' | 'background';
+    Reaction: 'background' | 'highlight';
   };
 }>;
 export type ComponentColors<T extends Component> = {
@@ -145,6 +149,7 @@ export interface UIKitColors {
     dateSeparator: ComponentColors<'DateSeparator'>;
     groupChannelPreview: ComponentColors<'GroupChannelPreview'>;
     profileCard: ComponentColors<'ProfileCard'>;
+    reaction: ComponentColors<'Reaction'>;
   };
 }
 

package/src/ui/Avatar/AvatarGroup.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { ReactElement } from 'react';
 import { StyleProp, View, ViewStyle } from 'react-native';
 
 const MAX = 4;
@@ -27,13 +27,13 @@ const AvatarGroup = ({ children, containerStyle, size = 56 }: Props) => {
     );
   }
 
-  const avatars = useMemo(() => {
+  const renderAvatars = () => {
     return (
       React.Children.map(children, (child, index) => {
         if (index + 1 > MAX) return child;
         if (!React.isValidElement(child)) return child;
 
-        if (childAmount === 1) return React.cloneElement(child, { size, containerStyle });
+        if (childAmount === 1) return React.cloneElement(child as ReactElement, { size, containerStyle });
 
         const top = getTopPoint(index, childAmount) * size;
         const left = getLeftPoint(index) * size;
@@ -44,16 +44,20 @@ const AvatarGroup = ({ children, containerStyle, size = 56 }: Props) => {
 
         return (
           <View style={{ overflow: 'hidden', position: 'absolute', top, left, width, height }}>
-            {React.cloneElement(child, { size, square: true, containerStyle: { left: innerLeft, top: innerTop } })}
+            {React.cloneElement(child as ReactElement, {
+              size,
+              square: true,
+              containerStyle: { left: innerLeft, top: innerTop },
+            })}
           </View>
         );
       })?.slice(0, 4) ?? []
     );
-  }, [children]);
+  };
 
   return (
     <View style={[containerStyle, { overflow: 'hidden', width: size, height: size, borderRadius: size }]}>
-      {avatars}
+      {renderAvatars()}
     </View>
   );
 };

package/src/ui/Badge/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Platform, StyleProp, View, ViewStyle } from 'react-native';
 
-import { truncatedBadgeCount } from '@sendbird/uikit-utils';
+import { truncatedCount } from '@sendbird/uikit-utils';
 
 import Text from '../../components/Text';
 import createStyleSheet from '../../styles/createStyleSheet';
@@ -29,7 +29,7 @@ const Badge = ({ count, maxCount, badgeColor, textColor, style, size = 'default'
       ]}
     >
       <Text caption1 color={textColor ?? colors.ui.badge.default.none.text}>
-        {truncatedBadgeCount(count, maxCount)}
+        {truncatedCount(count, maxCount)}
       </Text>
     </View>
   );

package/src/ui/BottomSheet/index.tsx

@@ -7,6 +7,7 @@ import Modal from '../../components/Modal';
 import useHeaderStyle from '../../styles/useHeaderStyle';
 import DialogSheet from '../Dialog/DialogSheet';
 
+type HeaderProps = { onClose: () => Promise<void> };
 export type BottomSheetItem = {
   sheetItems: {
     icon?: keyof typeof Icon.Assets;
@@ -15,6 +16,7 @@ export type BottomSheetItem = {
     titleColor?: string;
     onPress: () => void;
   }[];
+  HeaderComponent?: (props: HeaderProps) => JSX.Element;
 };
 type Props = {
   visible: boolean;
@@ -22,7 +24,7 @@ type Props = {
   onError?: (error: unknown) => void;
   onDismiss?: () => void;
 } & BottomSheetItem;
-const BottomSheet = ({ onDismiss, onHide, visible, sheetItems }: Props) => {
+const BottomSheet = ({ onDismiss, onHide, visible, sheetItems, HeaderComponent }: Props) => {
   const { statusBarTranslucent } = useHeaderStyle();
   const { width } = useWindowDimensions();
   const { bottom, left, right } = useSafeAreaInsets();
@@ -36,6 +38,7 @@ const BottomSheet = ({ onDismiss, onHide, visible, sheetItems }: Props) => {
       backgroundStyle={{ alignItems: 'center', justifyContent: 'flex-end' }}
     >
       <DialogSheet style={{ width, paddingBottom: bottom }}>
+        {HeaderComponent && <HeaderComponent onClose={onHide} />}
         {sheetItems.map(({ onPress, ...props }, idx) => (
           <TouchableOpacity
             activeOpacity={0.75}

package/src/ui/Dialog/index.tsx

@@ -154,6 +154,7 @@ export const DialogProvider = ({ defaultLabels, children }: Props) => {
                 onDismiss={consumeQueue}
                 visible={visibleState.current}
                 sheetItems={workingDialogJob.current.props.sheetItems}
+                HeaderComponent={workingDialogJob.current.props.HeaderComponent}
               />
             )}
           </BottomSheetContext.Provider>

package/src/ui/GroupChannelPreview/index.tsx

@@ -29,6 +29,8 @@ type Props = {
   frozen?: boolean;
   notificationOff?: boolean;
   broadcast?: boolean;
+  mentioned?: boolean;
+  mentionTrigger?: string;
 };
 
 const GroupChannelPreview = ({
@@ -45,6 +47,8 @@ const GroupChannelPreview = ({
   frozen,
   notificationOff,
   broadcast,
+  mentioned,
+  mentionTrigger = '@',
 }: Props) => {
   const { colors } = useUIKitTheme();
   const color = colors.ui.groupChannelPreview;
@@ -115,7 +119,14 @@ const GroupChannelPreview = ({
               </Text>
             </View>
           </View>
-          <View>{badgeCount > 0 && <Badge count={badgeCount} maxCount={maxBadgeCount} />}</View>
+          <View style={styles.unreadContainer}>
+            {mentioned && (
+              <Text h2 color={colors.ui.badge.default.none.background} style={styles.unreadMention}>
+                {mentionTrigger}
+              </Text>
+            )}
+            {badgeCount > 0 && <Badge count={badgeCount} maxCount={maxBadgeCount} />}
+          </View>
         </View>
         <Separator color={color.default.none.separator} />
       </View>
@@ -204,12 +215,12 @@ const styles = createStyleSheet({
     height: 26,
     marginRight: 4,
   },
-  unreadBadge: {
-    minWidth: 20,
-    minHeight: 20,
-    borderRadius: 99,
-    alignItems: 'center',
-    justifyContent: 'center',
+  unreadContainer: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+  },
+  unreadMention: {
+    marginRight: 4,
   },
   separator: {
     position: 'absolute',