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

package/src/theme/LightUIKitTheme.ts

@@ -2,207 +2,249 @@ import createTheme from './createTheme';
 
 const LightUIKitTheme = createTheme({
   colorScheme: 'light',
-  colors: (palette) => ({
-    primary: palette.primary300,
-    secondary: palette.secondary300,
-    error: palette.error300,
-    background: palette.background50,
-    text: palette.onBackgroundLight01,
-    onBackground01: palette.onBackgroundLight01,
-    onBackground02: palette.onBackgroundLight02,
-    onBackground03: palette.onBackgroundLight03,
-    onBackground04: palette.onBackgroundLight04,
-    onBackgroundReverse01: palette.onBackgroundDark01,
-    onBackgroundReverse02: palette.onBackgroundDark02,
-    onBackgroundReverse03: palette.onBackgroundDark03,
-    onBackgroundReverse04: palette.onBackgroundDark04,
-    ui: {
-      header: {
-        nav: {
-          none: {
-            background: palette.background50,
-            borderBottom: palette.onBackgroundLight04,
-          },
+  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,
         },
       },
-      button: {
-        contained: {
-          enabled: {
-            background: palette.primary300,
-            content: palette.onBackgroundDark01,
-          },
-          pressed: {
-            background: palette.primary400,
-            content: palette.onBackgroundDark01,
-          },
-          disabled: {
-            background: palette.background100,
-            content: palette.onBackgroundLight04,
-          },
+      outgoing: {
+        enabled: {
+          textMsg: palette.onBackgroundDark01,
+          textEdited: palette.onBackgroundDark02,
+          textTime: palette.onBackgroundLight03,
+          textSenderName: palette.transparent,
+          background: palette.primary300,
         },
-        text: {
-          enabled: {
-            background: palette.transparent,
-            content: palette.primary300,
-          },
-          pressed: {
-            background: palette.transparent,
-            content: palette.primary300,
-          },
-          disabled: {
-            background: palette.transparent,
-            content: palette.onBackgroundLight04,
-          },
+        pressed: {
+          textMsg: palette.onBackgroundDark01,
+          textEdited: palette.onBackgroundDark02,
+          textTime: palette.onBackgroundLight03,
+          textSenderName: palette.transparent,
+          background: palette.primary400,
         },
       },
-      dialog: {
-        default: {
-          none: {
-            background: palette.background50,
-            text: palette.onBackgroundLight01,
-            message: palette.onBackgroundLight02,
-            highlight: palette.primary300,
-            destructive: palette.error300,
+    };
+
+    return {
+      primary: palette.primary300,
+      secondary: palette.secondary300,
+      error: palette.error300,
+      background: palette.background50,
+      text: palette.onBackgroundLight01,
+      onBackground01: palette.onBackgroundLight01,
+      onBackground02: palette.onBackgroundLight02,
+      onBackground03: palette.onBackgroundLight03,
+      onBackground04: palette.onBackgroundLight04,
+      onBackgroundReverse01: palette.onBackgroundDark01,
+      onBackgroundReverse02: palette.onBackgroundDark02,
+      onBackgroundReverse03: palette.onBackgroundDark03,
+      onBackgroundReverse04: palette.onBackgroundDark04,
+      ui: {
+        header: {
+          nav: {
+            none: {
+              background: palette.background50,
+              borderBottom: palette.onBackgroundLight04,
+            },
           },
         },
-      },
-      input: {
-        default: {
-          active: {
-            text: palette.onBackgroundLight01,
-            placeholder: palette.onBackgroundLight03,
-            background: palette.background100,
-            highlight: palette.primary300,
-          },
-          disabled: {
-            text: palette.onBackgroundLight04,
-            placeholder: palette.onBackgroundLight04,
-            background: palette.background100,
-            highlight: palette.onBackgroundLight04,
+        button: {
+          contained: {
+            enabled: {
+              background: palette.primary300,
+              content: palette.onBackgroundDark01,
+            },
+            pressed: {
+              background: palette.primary400,
+              content: palette.onBackgroundDark01,
+            },
+            disabled: {
+              background: palette.background100,
+              content: palette.onBackgroundLight04,
+            },
+          },
+          text: {
+            enabled: {
+              background: palette.transparent,
+              content: palette.primary300,
+            },
+            pressed: {
+              background: palette.transparent,
+              content: palette.primary300,
+            },
+            disabled: {
+              background: palette.transparent,
+              content: palette.onBackgroundLight04,
+            },
           },
         },
-        underline: {
-          active: {
-            text: palette.onBackgroundLight01,
-            placeholder: palette.onBackgroundLight03,
-            background: palette.transparent,
-            highlight: palette.primary300,
-          },
-          disabled: {
-            text: palette.onBackgroundLight04,
-            placeholder: palette.onBackgroundLight04,
-            background: palette.transparent,
-            highlight: palette.onBackgroundLight04,
+        dialog: {
+          default: {
+            none: {
+              background: palette.background50,
+              text: palette.onBackgroundLight01,
+              message: palette.onBackgroundLight02,
+              highlight: palette.primary300,
+              destructive: palette.error300,
+            },
           },
         },
-      },
-      badge: {
-        default: {
-          none: {
-            text: palette.background50,
-            background: palette.primary300,
+        input: {
+          default: {
+            active: {
+              text: palette.onBackgroundLight01,
+              placeholder: palette.onBackgroundLight03,
+              background: palette.background100,
+              highlight: palette.primary300,
+            },
+            disabled: {
+              text: palette.onBackgroundLight04,
+              placeholder: palette.onBackgroundLight04,
+              background: palette.background100,
+              highlight: palette.onBackgroundLight04,
+            },
+          },
+          underline: {
+            active: {
+              text: palette.onBackgroundLight01,
+              placeholder: palette.onBackgroundLight03,
+              background: palette.transparent,
+              highlight: palette.primary300,
+            },
+            disabled: {
+              text: palette.onBackgroundLight04,
+              placeholder: palette.onBackgroundLight04,
+              background: palette.transparent,
+              highlight: palette.onBackgroundLight04,
+            },
           },
         },
-      },
-      placeholder: {
-        default: {
-          none: {
-            content: palette.onBackgroundLight03,
-            highlight: palette.primary300,
+        badge: {
+          default: {
+            none: {
+              text: palette.background50,
+              background: palette.primary300,
+            },
           },
         },
-      },
-      message: {
-        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,
+        placeholder: {
+          default: {
+            none: {
+              content: palette.onBackgroundLight03,
+              highlight: palette.primary300,
+            },
           },
         },
-        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,
+        message: groupChannelMessage,
+        dateSeparator: {
+          default: {
+            none: {
+              text: palette.onBackgroundDark01,
+              background: palette.overlay02,
+            },
           },
         },
-      },
-      dateSeparator: {
-        default: {
-          none: {
-            text: palette.onBackgroundDark01,
-            background: palette.overlay02,
+        groupChannelMessage,
+        groupChannelPreview: {
+          default: {
+            none: {
+              textTitle: palette.onBackgroundLight01,
+              textTitleCaption: palette.onBackgroundLight03,
+              textBody: palette.onBackgroundLight03,
+              bodyIcon: palette.onBackgroundLight02,
+              memberCount: palette.onBackgroundLight02,
+              background: palette.background50,
+              coverBackground: palette.onBackgroundLight04,
+              bodyIconBackground: palette.background100,
+              separator: palette.onBackgroundLight04,
+            },
           },
         },
-      },
-      groupChannelPreview: {
-        default: {
-          none: {
-            textTitle: palette.onBackgroundLight01,
-            textTitleCaption: palette.onBackgroundLight03,
-            textBody: palette.onBackgroundLight03,
-            bodyIcon: palette.onBackgroundLight02,
-            memberCount: palette.onBackgroundLight02,
-            background: palette.background50,
-            coverBackground: palette.onBackgroundLight04,
-            bodyIconBackground: palette.background100,
-            separator: palette.onBackgroundLight04,
+        profileCard: {
+          default: {
+            none: {
+              textUsername: palette.onBackgroundLight01,
+              textBodyLabel: palette.onBackgroundLight02,
+              textBody: palette.onBackgroundLight01,
+              background: palette.background50,
+            },
           },
         },
-      },
-      profileCard: {
-        default: {
-          none: {
-            textUsername: palette.onBackgroundLight01,
-            textBodyLabel: palette.onBackgroundLight02,
-            textBody: palette.onBackgroundLight01,
-            background: palette.background50,
+        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,
+            },
           },
         },
-      },
-      reaction: {
-        default: {
-          enabled: {
-            background: palette.transparent,
-            highlight: palette.onBackgroundLight03,
-          },
-          selected: {
-            background: palette.primary100,
-            highlight: palette.primary300,
+        openChannelMessage: {
+          default: {
+            enabled: {
+              background: palette.transparent,
+              bubbleBackground: palette.background100,
+              adminBackground: palette.background100,
+              textMsg: palette.onBackgroundLight01,
+              textMsgPostfix: palette.onBackgroundLight02,
+              textSenderName: palette.onBackgroundLight02,
+              textTime: palette.onBackgroundLight03,
+              textOperator: palette.secondary300,
+            },
+            pressed: {
+              background: palette.background100,
+              bubbleBackground: palette.background300,
+              adminBackground: palette.background100,
+              textMsg: palette.onBackgroundLight01,
+              textMsgPostfix: palette.onBackgroundLight02,
+              textSenderName: palette.onBackgroundLight02,
+              textTime: palette.onBackgroundLight03,
+              textOperator: palette.secondary300,
+            },
           },
         },
-        rounded: {
-          enabled: {
-            background: palette.background100,
-            highlight: palette.transparent,
-          },
-          selected: {
-            background: palette.primary100,
-            highlight: palette.transparent,
+        openChannelPreview: {
+          default: {
+            none: {
+              textTitle: palette.onBackgroundLight01,
+              textParticipants: palette.onBackgroundLight02,
+              frozenIcon: palette.primary300,
+              participantsIcon: palette.onBackgroundLight02,
+              background: palette.background50,
+              coverBackground: palette.background300,
+              separator: palette.onBackgroundLight04,
+            },
           },
         },
       },
-    },
-  }),
+    };
+  },
 });
 
 export default LightUIKitTheme;

package/src/types.ts

@@ -37,11 +37,14 @@ export type Component =
   | 'Input'
   | 'Badge'
   | 'Placeholder'
-  | 'Message'
   | 'DateSeparator'
+  | 'GroupChannelMessage'
   | 'GroupChannelPreview'
   | 'ProfileCard'
-  | 'Reaction';
+  | 'Reaction'
+  | 'OpenChannelMessage'
+  | 'OpenChannelPreview'
+  | 'Message';
 
 export type GetColorTree<
   Tree extends {
@@ -65,11 +68,15 @@ export type ComponentColorTree = GetColorTree<{
     Input: 'default' | 'underline';
     Badge: 'default';
     Placeholder: 'default';
-    Message: 'incoming' | 'outgoing';
     DateSeparator: 'default';
+    GroupChannelMessage: 'incoming' | 'outgoing';
     GroupChannelPreview: 'default';
     ProfileCard: 'default';
     Reaction: 'default' | 'rounded';
+    OpenChannelMessage: 'default';
+    OpenChannelPreview: 'default';
+    /** @deprecated **/
+    Message: 'incoming' | 'outgoing';
   };
   State: {
     Header: 'none';
@@ -78,11 +85,15 @@ export type ComponentColorTree = GetColorTree<{
     Input: 'active' | 'disabled';
     Badge: 'none';
     Placeholder: 'none';
-    Message: 'enabled' | 'pressed';
     DateSeparator: 'none';
+    GroupChannelMessage: 'enabled' | 'pressed';
     GroupChannelPreview: 'none';
     ProfileCard: 'none';
     Reaction: 'enabled' | 'selected';
+    OpenChannelMessage: 'enabled' | 'pressed';
+    OpenChannelPreview: 'none';
+    /** @deprecated **/
+    Message: 'enabled' | 'pressed';
   };
   ColorPart: {
     Header: 'background' | 'borderBottom';
@@ -91,8 +102,8 @@ export type ComponentColorTree = GetColorTree<{
     Input: 'text' | 'placeholder' | 'background' | 'highlight';
     Badge: 'text' | 'background';
     Placeholder: 'content' | 'highlight';
-    Message: 'textMsg' | 'textEdited' | 'textSenderName' | 'textTime' | 'background';
     DateSeparator: 'text' | 'background';
+    GroupChannelMessage: 'textMsg' | 'textEdited' | 'textSenderName' | 'textTime' | 'background';
     GroupChannelPreview:
       | 'textTitle'
       | 'textTitleCaption'
@@ -105,6 +116,26 @@ export type ComponentColorTree = GetColorTree<{
       | 'separator';
     ProfileCard: 'textUsername' | 'textBodyLabel' | 'textBody' | 'background';
     Reaction: 'background' | 'highlight';
+    OpenChannelMessage:
+      | 'textMsg'
+      | 'textMsgPostfix'
+      | 'textSenderName'
+      | 'textTime'
+      | 'textOperator'
+      | 'background'
+      | 'bubbleBackground'
+      | 'adminBackground';
+    OpenChannelPreview:
+      | 'textTitle'
+      | 'textParticipants'
+      | 'frozenIcon'
+      | 'participantsIcon'
+      | 'background'
+      | 'coverBackground'
+      | 'separator';
+
+    /** @deprecated **/
+    Message: 'textMsg' | 'textEdited' | 'textSenderName' | 'textTime' | 'background';
   };
 }>;
 export type ComponentColors<T extends Component> = {
@@ -145,11 +176,15 @@ export interface UIKitColors {
     input: ComponentColors<'Input'>;
     badge: ComponentColors<'Badge'>;
     placeholder: ComponentColors<'Placeholder'>;
-    message: ComponentColors<'Message'>;
     dateSeparator: ComponentColors<'DateSeparator'>;
+    groupChannelMessage: ComponentColors<'GroupChannelMessage'>;
     groupChannelPreview: ComponentColors<'GroupChannelPreview'>;
     profileCard: ComponentColors<'ProfileCard'>;
     reaction: ComponentColors<'Reaction'>;
+    openChannelMessage: ComponentColors<'OpenChannelMessage'>;
+    openChannelPreview: ComponentColors<'OpenChannelPreview'>;
+    /** @deprecated Please use `colors.ui.groupChannelMessage` **/
+    message: ComponentColors<'Message'>;
   };
 }
 

package/src/ui/Header/index.tsx

@@ -21,6 +21,7 @@ export type HeaderProps = BaseHeaderProps<
   },
   {
     clearTitleMargin?: boolean;
+    clearStatusBarTopInset?: boolean;
     statusBarTopInsetAs?: 'padding' | 'margin';
   }
 >;
@@ -39,6 +40,7 @@ const Header: ((props: HeaderProps) => JSX.Element) & {
   onPressLeft,
   onPressRight,
   clearTitleMargin = false,
+  clearStatusBarTopInset = false,
   statusBarTopInsetAs = 'padding',
 }) => {
   const { topInset, defaultTitleAlign, defaultHeight } = useHeaderStyle();
@@ -47,10 +49,13 @@ const Header: ((props: HeaderProps) => JSX.Element) & {
   const { left: paddingLeft, right: paddingRight } = useSafeAreaInsets();
 
   const actualTitleAlign = titleAlign ?? defaultTitleAlign;
+  const actualTopInset = clearStatusBarTopInset ? 0 : topInset;
 
   if (!title && !left && !right) {
     return (
-      <View style={{ paddingTop: topInset, backgroundColor: colors.ui.header.nav.none.background }}>{children}</View>
+      <View style={{ paddingTop: actualTopInset, backgroundColor: colors.ui.header.nav.none.background }}>
+        {children}
+      </View>
     );
   }
 
@@ -59,7 +64,7 @@ const Header: ((props: HeaderProps) => JSX.Element) & {
       style={[
         styles.container,
         {
-          [statusBarTopInsetAs === 'padding' ? 'paddingTop' : 'marginTop']: topInset,
+          [statusBarTopInsetAs === 'padding' ? 'paddingTop' : 'marginTop']: actualTopInset,
           paddingLeft: paddingLeft + styles.container.paddingHorizontal,
           paddingRight: paddingRight + styles.container.paddingHorizontal,
           backgroundColor: colors.ui.header.nav.none.background,

package/src/ui/OpenChannelMessage/Message.admin.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import type { SendbirdAdminMessage } from '@sendbird/uikit-utils';
+
+import Box from '../../components/Box';
+import Text from '../../components/Text';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import type { OpenChannelMessageProps } from './index';
+
+const AdminMessage = (props: OpenChannelMessageProps<SendbirdAdminMessage>) => {
+  const { colors } = useUIKitTheme();
+  const color = colors.ui.openChannelMessage.default;
+  return (
+    <Box marginVertical={8} paddingHorizontal={12} backgroundColor={colors.background}>
+      <Box borderRadius={8} paddingHorizontal={16} paddingVertical={14} backgroundColor={color.enabled.adminBackground}>
+        <Text caption2 color={colors.onBackground02}>
+          {props.message.message}
+        </Text>
+      </Box>
+    </Box>
+  );
+};
+
+export default AdminMessage;

package/src/ui/OpenChannelMessage/Message.file.image.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import type { SendbirdFileMessage } from '@sendbird/uikit-utils';
+import { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';
+
+import Box from '../../components/Box';
+import ImageWithPlaceholder from '../../components/ImageWithPlaceholder';
+import PressBox from '../../components/PressBox';
+import createStyleSheet from '../../styles/createStyleSheet';
+import MessageContainer from './MessageContainer';
+import type { OpenChannelMessageProps } from './index';
+
+const ImageFileMessage = (props: OpenChannelMessageProps<SendbirdFileMessage>) => {
+  const { onPress, onLongPress, ...rest } = props;
+  const uri = getAvailableUriFromFileMessage(props.message);
+  return (
+    <MessageContainer {...rest}>
+      <Box borderRadius={8} overflow={'hidden'} style={styles.container}>
+        <PressBox style={styles.container} activeOpacity={0.8} onPress={onPress} onLongPress={onLongPress}>
+          <ImageWithPlaceholder source={{ uri }} width={'100%'} height={'100%'} />
+        </PressBox>
+      </Box>
+    </MessageContainer>
+  );
+};
+
+const styles = createStyleSheet({
+  container: {
+    maxWidth: 296,
+    height: 196,
+  },
+});
+
+export default ImageFileMessage;