@sendbird/uikit-react-native-foundation 3.7.6 → 3.8.0

package/lib/module/ui/GroupChannelMessage/MessageOpenGraph.js

@@ -5,13 +5,12 @@ import PressBox from '../../components/PressBox';
 import Text from '../../components/Text';
 import createStyleSheet from '../../styles/createStyleSheet';
 import useUIKitTheme from '../../theme/useUIKitTheme';
-const MessageOpenGraph = _ref => {
-  let {
-    onPressURL,
-    onLongPress,
-    ogMetaData,
-    variant
-  } = _ref;
+const MessageOpenGraph = ({
+  onPressURL,
+  onLongPress,
+  ogMetaData,
+  variant
+}) => {
   const {
     palette,
     select,
@@ -22,39 +21,36 @@ const MessageOpenGraph = _ref => {
     activeOpacity: 0.85,
     onPress: () => typeof (ogMetaData === null || ogMetaData === void 0 ? void 0 : ogMetaData.url) === 'string' && (onPressURL === null || onPressURL === void 0 ? void 0 : onPressURL(ogMetaData.url)),
     onLongPress: onLongPress
-  }, _ref2 => {
-    let {
-      pressed
-    } = _ref2;
-    return /*#__PURE__*/React.createElement(Box, {
-      backgroundColor: pressed ? color.pressed.background : color.enabled.background
-    }, !!ogMetaData.defaultImage && /*#__PURE__*/React.createElement(ImageWithPlaceholder, {
-      style: styles.ogImage,
-      source: {
-        uri: ogMetaData.defaultImage.url
-      }
-    }), /*#__PURE__*/React.createElement(Box, {
-      style: styles.ogContainer,
-      backgroundColor: select({
-        dark: palette.background400,
-        light: palette.background100
-      })
-    }, /*#__PURE__*/React.createElement(Text, {
-      numberOfLines: 3,
-      body2: true,
-      color: colors.onBackground01,
-      style: styles.ogTitle
-    }, ogMetaData.title), !!ogMetaData.description && /*#__PURE__*/React.createElement(Text, {
-      numberOfLines: 1,
-      caption2: true,
-      color: colors.onBackground01,
-      style: styles.ogDesc
-    }, ogMetaData.description), /*#__PURE__*/React.createElement(Text, {
-      numberOfLines: 1,
-      caption2: true,
-      color: colors.onBackground02
-    }, ogMetaData.url)));
-  });
+  }, ({
+    pressed
+  }) => /*#__PURE__*/React.createElement(Box, {
+    backgroundColor: pressed ? color.pressed.background : color.enabled.background
+  }, !!ogMetaData.defaultImage && /*#__PURE__*/React.createElement(ImageWithPlaceholder, {
+    style: styles.ogImage,
+    source: {
+      uri: ogMetaData.defaultImage.url
+    }
+  }), /*#__PURE__*/React.createElement(Box, {
+    style: styles.ogContainer,
+    backgroundColor: select({
+      dark: palette.background400,
+      light: palette.background100
+    })
+  }, /*#__PURE__*/React.createElement(Text, {
+    numberOfLines: 3,
+    body2: true,
+    color: colors.onBackground01,
+    style: styles.ogTitle
+  }, ogMetaData.title), !!ogMetaData.description && /*#__PURE__*/React.createElement(Text, {
+    numberOfLines: 1,
+    caption2: true,
+    color: colors.onBackground01,
+    style: styles.ogDesc
+  }, ogMetaData.description), /*#__PURE__*/React.createElement(Text, {
+    numberOfLines: 1,
+    caption2: true,
+    color: colors.onBackground02
+  }, ogMetaData.url))));
 };
 const styles = createStyleSheet({
   ogContainer: {

package/lib/module/ui/GroupChannelMessage/MessageOpenGraph.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Box","ImageWithPlaceholder","PressBox","Text","createStyleSheet","useUIKitTheme","MessageOpenGraph","_ref","onPressURL","onLongPress","ogMetaData","variant","palette","select","colors","color","ui","groupChannelMessage","createElement","activeOpacity","onPress","url","_ref2","pressed","backgroundColor","background","enabled","defaultImage","style","styles","ogImage","source","uri","ogContainer","dark","background400","light","background100","numberOfLines","body2","onBackground01","ogTitle","title","description","caption2","ogDesc","onBackground02","overflow","paddingHorizontal","paddingTop","paddingBottom","maxWidth","width","height","ogUrl","marginBottom","lineHeight"],"sources":["MessageOpenGraph.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { SendbirdUserMessage } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport ImageWithPlaceholder from '../../components/ImageWithPlaceholder';\nimport PressBox from '../../components/PressBox';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\n\nconst MessageOpenGraph = ({\n  onPressURL,\n  onLongPress,\n  ogMetaData,\n  variant,\n}: {\n  ogMetaData: NonNullable<SendbirdUserMessage['ogMetaData']>;\n  variant: 'outgoing' | 'incoming';\n  onPressURL?: (url: string) => void;\n  onLongPress?: () => void;\n}) => {\n  const { palette, select, colors } = useUIKitTheme();\n  const color = colors.ui.groupChannelMessage[variant];\n\n  return (\n    <PressBox\n      activeOpacity={0.85}\n      onPress={() => typeof ogMetaData?.url === 'string' && onPressURL?.(ogMetaData.url)}\n      onLongPress={onLongPress}\n    >\n      {({ pressed }) => (\n        <Box backgroundColor={pressed ? color.pressed.background : color.enabled.background}>\n          {!!ogMetaData.defaultImage && (\n            <ImageWithPlaceholder style={styles.ogImage} source={{ uri: ogMetaData.defaultImage.url }} />\n          )}\n\n          <Box\n            style={styles.ogContainer}\n            backgroundColor={select({ dark: palette.background400, light: palette.background100 })}\n          >\n            <Text numberOfLines={3} body2 color={colors.onBackground01} style={styles.ogTitle}>\n              {ogMetaData.title}\n            </Text>\n            {!!ogMetaData.description && (\n              <Text numberOfLines={1} caption2 color={colors.onBackground01} style={styles.ogDesc}>\n                {ogMetaData.description}\n              </Text>\n            )}\n            <Text numberOfLines={1} caption2 color={colors.onBackground02}>\n              {ogMetaData.url}\n            </Text>\n          </Box>\n        </Box>\n      )}\n    </PressBox>\n  );\n};\n\nconst styles = createStyleSheet({\n  ogContainer: {\n    overflow: 'hidden',\n    paddingHorizontal: 12,\n    paddingTop: 8,\n    paddingBottom: 12,\n  },\n  ogImage: {\n    maxWidth: 240,\n    width: 240,\n    height: 136,\n  },\n  ogUrl: {\n    marginBottom: 4,\n  },\n  ogTitle: {\n    marginBottom: 4,\n  },\n  ogDesc: {\n    lineHeight: 14,\n    marginBottom: 8,\n  },\n});\n\nexport default MessageOpenGraph;\n"],"mappings":"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"}
+{"version":3,"names":["React","Box","ImageWithPlaceholder","PressBox","Text","createStyleSheet","useUIKitTheme","MessageOpenGraph","onPressURL","onLongPress","ogMetaData","variant","palette","select","colors","color","ui","groupChannelMessage","createElement","activeOpacity","onPress","url","pressed","backgroundColor","background","enabled","defaultImage","style","styles","ogImage","source","uri","ogContainer","dark","background400","light","background100","numberOfLines","body2","onBackground01","ogTitle","title","description","caption2","ogDesc","onBackground02","overflow","paddingHorizontal","paddingTop","paddingBottom","maxWidth","width","height","ogUrl","marginBottom","lineHeight"],"sources":["MessageOpenGraph.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { SendbirdUserMessage } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport ImageWithPlaceholder from '../../components/ImageWithPlaceholder';\nimport PressBox from '../../components/PressBox';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\n\nconst MessageOpenGraph = ({\n  onPressURL,\n  onLongPress,\n  ogMetaData,\n  variant,\n}: {\n  ogMetaData: NonNullable<SendbirdUserMessage['ogMetaData']>;\n  variant: 'outgoing' | 'incoming';\n  onPressURL?: (url: string) => void;\n  onLongPress?: () => void;\n}) => {\n  const { palette, select, colors } = useUIKitTheme();\n  const color = colors.ui.groupChannelMessage[variant];\n\n  return (\n    <PressBox\n      activeOpacity={0.85}\n      onPress={() => typeof ogMetaData?.url === 'string' && onPressURL?.(ogMetaData.url)}\n      onLongPress={onLongPress}\n    >\n      {({ pressed }) => (\n        <Box backgroundColor={pressed ? color.pressed.background : color.enabled.background}>\n          {!!ogMetaData.defaultImage && (\n            <ImageWithPlaceholder style={styles.ogImage} source={{ uri: ogMetaData.defaultImage.url }} />\n          )}\n\n          <Box\n            style={styles.ogContainer}\n            backgroundColor={select({ dark: palette.background400, light: palette.background100 })}\n          >\n            <Text numberOfLines={3} body2 color={colors.onBackground01} style={styles.ogTitle}>\n              {ogMetaData.title}\n            </Text>\n            {!!ogMetaData.description && (\n              <Text numberOfLines={1} caption2 color={colors.onBackground01} style={styles.ogDesc}>\n                {ogMetaData.description}\n              </Text>\n            )}\n            <Text numberOfLines={1} caption2 color={colors.onBackground02}>\n              {ogMetaData.url}\n            </Text>\n          </Box>\n        </Box>\n      )}\n    </PressBox>\n  );\n};\n\nconst styles = createStyleSheet({\n  ogContainer: {\n    overflow: 'hidden',\n    paddingHorizontal: 12,\n    paddingTop: 8,\n    paddingBottom: 12,\n  },\n  ogImage: {\n    maxWidth: 240,\n    width: 240,\n    height: 136,\n  },\n  ogUrl: {\n    marginBottom: 4,\n  },\n  ogTitle: {\n    marginBottom: 4,\n  },\n  ogDesc: {\n    lineHeight: 14,\n    marginBottom: 8,\n  },\n});\n\nexport default MessageOpenGraph;\n"],"mappings":"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","ignoreList":[]}

package/lib/module/ui/GroupChannelMessage/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["AdminMessage","FileMessage","ImageFileMessage","VideoFileMessage","VoiceFileMessage","UnknownMessage","UserMessage","OpenGraphUser","GroupChannelMessage","User","File","ImageFile","VideoFile","VoiceFile","Admin","Unknown"],"sources":["index.ts"],"sourcesContent":["import type React from 'react';\n\nimport type { SendbirdGroupChannel, SendbirdMessage, SendbirdUser } from '@sendbird/uikit-utils';\n\nimport AdminMessage from './Message.admin';\nimport FileMessage from './Message.file';\nimport ImageFileMessage from './Message.file.image';\nimport VideoFileMessage from './Message.file.video';\nimport VoiceFileMessage from './Message.file.voice';\nimport type { VoiceFileMessageState } from './Message.file.voice';\nimport UnknownMessage from './Message.unknown';\nimport UserMessage from './Message.user';\nimport OpenGraphUser from './Message.user.og';\n\nexport type GroupChannelMessageProps<T extends SendbirdMessage, AdditionalProps = unknown> = {\n  channel: SendbirdGroupChannel;\n  message: T;\n  variant?: 'outgoing' | 'incoming';\n  strings?: {\n    senderName?: string;\n    sentDate?: string;\n    edited?: string;\n    fileName?: string;\n    unknownTitle?: string;\n    unknownDescription?: string;\n  };\n\n  children?: React.ReactNode;\n  sendingStatus?: React.ReactNode;\n  parentMessage?: React.ReactNode;\n  replyInfo?: React.ReactNode;\n\n  groupedWithPrev: boolean;\n  groupedWithNext: boolean;\n  onPress?: () => void;\n  onLongPress?: () => void;\n  onPressAvatar?: () => void;\n  onPressURL?: (url: string) => void;\n  onPressMentionedUser?: (mentionedUser?: SendbirdUser) => void;\n  onToggleVoiceMessage?: (\n    state: VoiceFileMessageState,\n    setState: React.Dispatch<React.SetStateAction<VoiceFileMessageState>>,\n  ) => Promise<void>;\n} & AdditionalProps;\n\nconst GroupChannelMessage = {\n  User: UserMessage,\n  OpenGraphUser: OpenGraphUser,\n  File: FileMessage,\n  ImageFile: ImageFileMessage,\n  VideoFile: VideoFileMessage,\n  VoiceFile: VoiceFileMessage,\n  Admin: AdminMessage,\n  Unknown: UnknownMessage,\n};\n\nexport default GroupChannelMessage;\n"],"mappings":"AAIA,OAAOA,YAAY,MAAM,iBAAiB;AAC1C,OAAOC,WAAW,MAAM,gBAAgB;AACxC,OAAOC,gBAAgB,MAAM,sBAAsB;AACnD,OAAOC,gBAAgB,MAAM,sBAAsB;AACnD,OAAOC,gBAAgB,MAAM,sBAAsB;AAEnD,OAAOC,cAAc,MAAM,mBAAmB;AAC9C,OAAOC,WAAW,MAAM,gBAAgB;AACxC,OAAOC,aAAa,MAAM,mBAAmB;AAiC7C,MAAMC,mBAAmB,GAAG;EAC1BC,IAAI,EAAEH,WAAW;EACjBC,aAAa,EAAEA,aAAa;EAC5BG,IAAI,EAAET,WAAW;EACjBU,SAAS,EAAET,gBAAgB;EAC3BU,SAAS,EAAET,gBAAgB;EAC3BU,SAAS,EAAET,gBAAgB;EAC3BU,KAAK,EAAEd,YAAY;EACnBe,OAAO,EAAEV;AACX,CAAC;AAED,eAAeG,mBAAmB"}
+{"version":3,"names":["AdminMessage","FileMessage","ImageFileMessage","VideoFileMessage","VoiceFileMessage","UnknownMessage","UserMessage","OpenGraphUser","GroupChannelMessage","User","File","ImageFile","VideoFile","VoiceFile","Admin","Unknown"],"sources":["index.ts"],"sourcesContent":["import type React from 'react';\n\nimport type { SendbirdGroupChannel, SendbirdMessage, SendbirdUser } from '@sendbird/uikit-utils';\n\nimport AdminMessage from './Message.admin';\nimport FileMessage from './Message.file';\nimport ImageFileMessage from './Message.file.image';\nimport VideoFileMessage from './Message.file.video';\nimport VoiceFileMessage from './Message.file.voice';\nimport type { VoiceFileMessageState } from './Message.file.voice';\nimport UnknownMessage from './Message.unknown';\nimport UserMessage from './Message.user';\nimport OpenGraphUser from './Message.user.og';\n\nexport type GroupChannelMessageProps<T extends SendbirdMessage, AdditionalProps = unknown> = {\n  channel: SendbirdGroupChannel;\n  message: T;\n  variant?: 'outgoing' | 'incoming';\n  strings?: {\n    senderName?: string;\n    sentDate?: string;\n    edited?: string;\n    fileName?: string;\n    unknownTitle?: string;\n    unknownDescription?: string;\n  };\n\n  children?: React.ReactNode;\n  sendingStatus?: React.ReactNode;\n  parentMessage?: React.ReactNode;\n  replyInfo?: React.ReactNode;\n\n  groupedWithPrev: boolean;\n  groupedWithNext: boolean;\n  onPress?: () => void;\n  onLongPress?: () => void;\n  onPressAvatar?: () => void;\n  onPressURL?: (url: string) => void;\n  onPressMentionedUser?: (mentionedUser?: SendbirdUser) => void;\n  onToggleVoiceMessage?: (\n    state: VoiceFileMessageState,\n    setState: React.Dispatch<React.SetStateAction<VoiceFileMessageState>>,\n  ) => Promise<void>;\n} & AdditionalProps;\n\nconst GroupChannelMessage = {\n  User: UserMessage,\n  OpenGraphUser: OpenGraphUser,\n  File: FileMessage,\n  ImageFile: ImageFileMessage,\n  VideoFile: VideoFileMessage,\n  VoiceFile: VoiceFileMessage,\n  Admin: AdminMessage,\n  Unknown: UnknownMessage,\n};\n\nexport default GroupChannelMessage;\n"],"mappings":"AAIA,OAAOA,YAAY,MAAM,iBAAiB;AAC1C,OAAOC,WAAW,MAAM,gBAAgB;AACxC,OAAOC,gBAAgB,MAAM,sBAAsB;AACnD,OAAOC,gBAAgB,MAAM,sBAAsB;AACnD,OAAOC,gBAAgB,MAAM,sBAAsB;AAEnD,OAAOC,cAAc,MAAM,mBAAmB;AAC9C,OAAOC,WAAW,MAAM,gBAAgB;AACxC,OAAOC,aAAa,MAAM,mBAAmB;AAiC7C,MAAMC,mBAAmB,GAAG;EAC1BC,IAAI,EAAEH,WAAW;EACjBC,aAAa,EAAEA,aAAa;EAC5BG,IAAI,EAAET,WAAW;EACjBU,SAAS,EAAET,gBAAgB;EAC3BU,SAAS,EAAET,gBAAgB;EAC3BU,SAAS,EAAET,gBAAgB;EAC3BU,KAAK,EAAEd,YAAY;EACnBe,OAAO,EAAEV;AACX,CAAC;AAED,eAAeG,mBAAmB","ignoreList":[]}

package/lib/module/ui/GroupChannelPreview/index.js

@@ -1,39 +1,38 @@
 import React from 'react';
-import { View } from 'react-native';
 import { conditionChaining } from '@sendbird/uikit-utils';
+import Box from '../../components/Box';
 import Icon from '../../components/Icon';
 import Image from '../../components/Image';
 import Text from '../../components/Text';
 import createStyleSheet from '../../styles/createStyleSheet';
 import useUIKitTheme from '../../theme/useUIKitTheme';
 import Badge from '../Badge';
-const GroupChannelPreview = _ref => {
-  let {
-    customCover,
-    coverUrl,
-    memberCount,
-    badgeCount,
-    maxBadgeCount,
-    body,
-    bodyIcon,
-    title,
-    titleCaption,
-    titleCaptionLeft,
-    frozen,
-    notificationOff,
-    broadcast,
-    mentioned,
-    mentionTrigger = '@'
-  } = _ref;
+const GroupChannelPreview = ({
+  customCover,
+  coverUrl,
+  memberCount,
+  badgeCount,
+  maxBadgeCount,
+  body,
+  bodyIcon,
+  title,
+  titleCaption,
+  titleCaptionLeft,
+  frozen,
+  notificationOff,
+  broadcast,
+  mentioned,
+  mentionTrigger = '@'
+}) => {
   const {
     colors
   } = useUIKitTheme();
   const color = colors.ui.groupChannelPreview;
-  return /*#__PURE__*/React.createElement(View, {
+  return /*#__PURE__*/React.createElement(Box, {
     style: [styles.container, {
       backgroundColor: color.default.none.background
     }]
-  }, /*#__PURE__*/React.createElement(View, {
+  }, /*#__PURE__*/React.createElement(Box, {
     style: styles.coverContainer
   }, conditionChaining([Boolean(customCover)], [customCover, /*#__PURE__*/React.createElement(Image, {
     resizeMode: 'cover',
@@ -43,11 +42,11 @@ const GroupChannelPreview = _ref => {
     source: {
       uri: coverUrl
     }
-  })])), /*#__PURE__*/React.createElement(View, {
+  })])), /*#__PURE__*/React.createElement(Box, {
     style: styles.rightSection
-  }, /*#__PURE__*/React.createElement(View, {
+  }, /*#__PURE__*/React.createElement(Box, {
     style: styles.rightTopSection
-  }, /*#__PURE__*/React.createElement(View, {
+  }, /*#__PURE__*/React.createElement(Box, {
     style: styles.channelInfoContainer
   }, broadcast && /*#__PURE__*/React.createElement(Icon, {
     size: 16,
@@ -72,17 +71,17 @@ const GroupChannelPreview = _ref => {
     size: 16,
     icon: 'notifications-off-filled',
     color: colors.onBackground03
-  })), /*#__PURE__*/React.createElement(View, {
+  })), /*#__PURE__*/React.createElement(Box, {
     style: styles.titleCaptionContainer
   }, titleCaptionLeft, /*#__PURE__*/React.createElement(Text, {
     caption2: true,
     color: color.default.none.textTitleCaption,
     style: styles.titleCaptionText
-  }, titleCaption))), /*#__PURE__*/React.createElement(View, {
+  }, titleCaption))), /*#__PURE__*/React.createElement(Box, {
     style: styles.rightBottomSection
-  }, /*#__PURE__*/React.createElement(View, {
+  }, /*#__PURE__*/React.createElement(Box, {
     style: styles.body
-  }, /*#__PURE__*/React.createElement(View, {
+  }, /*#__PURE__*/React.createElement(Box, {
     style: styles.bodyWrapper
   }, bodyIcon && /*#__PURE__*/React.createElement(Icon, {
     size: 18,
@@ -91,13 +90,15 @@ const GroupChannelPreview = _ref => {
     containerStyle: [styles.bodyIcon, {
       backgroundColor: colors.ui.groupChannelPreview.default.none.bodyIconBackground
     }]
-  }), /*#__PURE__*/React.createElement(Text, {
+  }), /*#__PURE__*/React.createElement(Box, {
+    flex: 1,
+    alignItems: 'flex-start'
+  }, /*#__PURE__*/React.createElement(Text, {
     body3: true,
     numberOfLines: 1,
     ellipsizeMode: bodyIcon ? 'middle' : 'tail',
-    style: styles.bodyText,
     color: color.default.none.textBody
-  }, body))), /*#__PURE__*/React.createElement(View, {
+  }, body)))), /*#__PURE__*/React.createElement(Box, {
     style: styles.unreadContainer
   }, mentioned && /*#__PURE__*/React.createElement(Text, {
     h2: true,
@@ -110,16 +111,13 @@ const GroupChannelPreview = _ref => {
     color: color.default.none.separator
   })));
 };
-const Separator = _ref2 => {
-  let {
-    color
-  } = _ref2;
-  return /*#__PURE__*/React.createElement(View, {
-    style: [styles.separator, {
-      backgroundColor: color
-    }]
-  });
-};
+const Separator = ({
+  color
+}) => /*#__PURE__*/React.createElement(Box, {
+  style: [styles.separator, {
+    backgroundColor: color
+  }]
+});
 const styles = createStyleSheet({
   container: {
     height: 76,
@@ -129,8 +127,8 @@ const styles = createStyleSheet({
     justifyContent: 'center'
   },
   coverContainer: {
-    marginLeft: 16,
-    marginRight: 16
+    marginStart: 16,
+    marginEnd: 16
   },
   channelCover: {
     width: 56,
@@ -140,7 +138,7 @@ const styles = createStyleSheet({
   rightSection: {
     flex: 1,
     paddingTop: 10,
-    paddingRight: 16
+    paddingEnd: 16
   },
   rightTopSection: {
     flexDirection: 'row',
@@ -148,28 +146,28 @@ const styles = createStyleSheet({
   },
   channelInfoContainer: {
     flex: 1,
-    marginRight: 4,
+    marginEnd: 4,
     alignItems: 'center',
     flexDirection: 'row'
   },
   channelInfoBroadcast: {
-    marginRight: 4
+    marginEnd: 4
   },
   channelInfoTitle: {
     flexShrink: 1,
-    marginRight: 4
+    marginEnd: 4
   },
   channelInfoMemberCount: {
     paddingTop: 2,
-    marginRight: 4
+    marginEnd: 4
   },
   channelInfoFrozen: {
-    marginRight: 4
+    marginEnd: 4
   },
   titleCaptionContainer: {
     alignItems: 'flex-start',
     flexDirection: 'row',
-    marginLeft: 4
+    marginStart: 4
   },
   titleCaptionText: {
     marginTop: 2
@@ -180,7 +178,7 @@ const styles = createStyleSheet({
     flexDirection: 'row'
   },
   body: {
-    marginRight: 4,
+    marginEnd: 4,
     flex: 1,
     flexDirection: 'row',
     alignItems: 'flex-start'
@@ -189,26 +187,23 @@ const styles = createStyleSheet({
     flexDirection: 'row',
     alignItems: 'center'
   },
-  bodyText: {
-    flex: 1
-  },
   bodyIcon: {
     borderRadius: 8,
     width: 26,
     height: 26,
-    marginRight: 4
+    marginEnd: 4
   },
   unreadContainer: {
     flexDirection: 'row',
     alignItems: 'flex-start'
   },
   unreadMention: {
-    marginRight: 4
+    marginEnd: 4
   },
   separator: {
     position: 'absolute',
-    left: 0,
-    right: -16,
+    start: 0,
+    end: -16,
     bottom: 0,
     height: 1
   }

package/lib/module/ui/GroupChannelPreview/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","conditionChaining","Icon","Image","Text","createStyleSheet","useUIKitTheme","Badge","GroupChannelPreview","_ref","customCover","coverUrl","memberCount","badgeCount","maxBadgeCount","body","bodyIcon","title","titleCaption","titleCaptionLeft","frozen","notificationOff","broadcast","mentioned","mentionTrigger","colors","color","ui","groupChannelPreview","createElement","style","styles","container","backgroundColor","default","none","background","coverContainer","Boolean","resizeMode","channelCover","coverBackground","source","uri","rightSection","rightTopSection","channelInfoContainer","size","icon","secondary","containerStyle","channelInfoBroadcast","numberOfLines","subtitle1","channelInfoTitle","textTitle","caption1","channelInfoMemberCount","primary","channelInfoFrozen","onBackground03","titleCaptionContainer","caption2","textTitleCaption","titleCaptionText","rightBottomSection","bodyWrapper","bodyIconBackground","body3","ellipsizeMode","bodyText","textBody","unreadContainer","h2","badge","unreadMention","count","maxCount","Separator","separator","_ref2","height","width","flexDirection","alignItems","justifyContent","marginLeft","marginRight","borderRadius","flex","paddingTop","paddingRight","marginBottom","flexShrink","marginTop","position","left","right","bottom"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport { conditionChaining } from '@sendbird/uikit-utils';\n\nimport Icon from '../../components/Icon';\nimport Image from '../../components/Image';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Badge from '../Badge';\n\ntype Props = {\n  customCover?: React.ReactNode;\n  coverUrl: string;\n\n  title: string;\n\n  titleCaption: string;\n  titleCaptionLeft?: React.ReactNode;\n\n  bodyIcon?: keyof typeof Icon.Assets;\n  body: string;\n\n  memberCount?: number;\n  badgeCount: number;\n  maxBadgeCount?: number;\n\n  frozen?: boolean;\n  notificationOff?: boolean;\n  broadcast?: boolean;\n  mentioned?: boolean;\n  mentionTrigger?: string;\n};\n\nconst GroupChannelPreview = ({\n  customCover,\n  coverUrl,\n  memberCount,\n  badgeCount,\n  maxBadgeCount,\n  body,\n  bodyIcon,\n  title,\n  titleCaption,\n  titleCaptionLeft,\n  frozen,\n  notificationOff,\n  broadcast,\n  mentioned,\n  mentionTrigger = '@',\n}: Props) => {\n  const { colors } = useUIKitTheme();\n  const color = colors.ui.groupChannelPreview;\n\n  return (\n    <View style={[styles.container, { backgroundColor: color.default.none.background }]}>\n      <View style={styles.coverContainer}>\n        {conditionChaining(\n          [Boolean(customCover)],\n          [\n            customCover,\n            <Image\n              resizeMode={'cover'}\n              style={[styles.channelCover, { backgroundColor: color.default.none.coverBackground }]}\n              source={{ uri: coverUrl }}\n            />,\n          ],\n        )}\n      </View>\n      <View style={styles.rightSection}>\n        <View style={styles.rightTopSection}>\n          <View style={styles.channelInfoContainer}>\n            {broadcast && (\n              <Icon\n                size={16}\n                icon={'broadcast'}\n                color={colors.secondary}\n                containerStyle={styles.channelInfoBroadcast}\n              />\n            )}\n            <Text numberOfLines={1} subtitle1 style={styles.channelInfoTitle} color={color.default.none.textTitle}>\n              {title}\n            </Text>\n            {Boolean(memberCount) && (\n              <Text caption1 style={styles.channelInfoMemberCount} color={color.default.none.memberCount}>\n                {memberCount}\n              </Text>\n            )}\n            {frozen && (\n              <Icon size={16} icon={'freeze'} color={colors.primary} containerStyle={styles.channelInfoFrozen} />\n            )}\n            {notificationOff && <Icon size={16} icon={'notifications-off-filled'} color={colors.onBackground03} />}\n          </View>\n          <View style={styles.titleCaptionContainer}>\n            {titleCaptionLeft}\n            <Text caption2 color={color.default.none.textTitleCaption} style={styles.titleCaptionText}>\n              {titleCaption}\n            </Text>\n          </View>\n        </View>\n\n        <View style={styles.rightBottomSection}>\n          <View style={styles.body}>\n            <View style={styles.bodyWrapper}>\n              {bodyIcon && (\n                <Icon\n                  size={18}\n                  icon={bodyIcon}\n                  color={color.default.none.bodyIcon}\n                  containerStyle={[\n                    styles.bodyIcon,\n                    { backgroundColor: colors.ui.groupChannelPreview.default.none.bodyIconBackground },\n                  ]}\n                />\n              )}\n              <Text\n                body3\n                numberOfLines={1}\n                ellipsizeMode={bodyIcon ? 'middle' : 'tail'}\n                style={styles.bodyText}\n                color={color.default.none.textBody}\n              >\n                {body}\n              </Text>\n            </View>\n          </View>\n          <View style={styles.unreadContainer}>\n            {mentioned && (\n              <Text h2 color={colors.ui.badge.default.none.background} style={styles.unreadMention}>\n                {mentionTrigger}\n              </Text>\n            )}\n            {badgeCount > 0 && <Badge count={badgeCount} maxCount={maxBadgeCount} />}\n          </View>\n        </View>\n        <Separator color={color.default.none.separator} />\n      </View>\n    </View>\n  );\n};\n\ntype SeparatorProps = { color: string };\nconst Separator = ({ color }: SeparatorProps) => <View style={[styles.separator, { backgroundColor: color }]} />;\n\nconst styles = createStyleSheet({\n  container: {\n    height: 76,\n    width: '100%',\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  coverContainer: {\n    marginLeft: 16,\n    marginRight: 16,\n  },\n  channelCover: {\n    width: 56,\n    height: 56,\n    borderRadius: 28,\n  },\n  rightSection: {\n    flex: 1,\n    paddingTop: 10,\n    paddingRight: 16,\n  },\n  rightTopSection: {\n    flexDirection: 'row',\n    marginBottom: 4,\n  },\n  channelInfoContainer: {\n    flex: 1,\n    marginRight: 4,\n    alignItems: 'center',\n    flexDirection: 'row',\n  },\n  channelInfoBroadcast: {\n    marginRight: 4,\n  },\n  channelInfoTitle: {\n    flexShrink: 1,\n    marginRight: 4,\n  },\n  channelInfoMemberCount: {\n    paddingTop: 2,\n    marginRight: 4,\n  },\n  channelInfoFrozen: {\n    marginRight: 4,\n  },\n  titleCaptionContainer: {\n    alignItems: 'flex-start',\n    flexDirection: 'row',\n    marginLeft: 4,\n  },\n  titleCaptionText: {\n    marginTop: 2,\n  },\n  rightBottomSection: {\n    flex: 1,\n    height: '100%',\n    flexDirection: 'row',\n  },\n  body: {\n    marginRight: 4,\n    flex: 1,\n    flexDirection: 'row',\n    alignItems: 'flex-start',\n  },\n  bodyWrapper: {\n    flexDirection: 'row',\n    alignItems: 'center',\n  },\n  bodyText: {\n    flex: 1,\n  },\n  bodyIcon: {\n    borderRadius: 8,\n    width: 26,\n    height: 26,\n    marginRight: 4,\n  },\n  unreadContainer: {\n    flexDirection: 'row',\n    alignItems: 'flex-start',\n  },\n  unreadMention: {\n    marginRight: 4,\n  },\n  separator: {\n    position: 'absolute',\n    left: 0,\n    right: -16,\n    bottom: 0,\n    height: 1,\n  },\n});\n\nexport default GroupChannelPreview;\n"],"mappings":"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"}
+{"version":3,"names":["React","conditionChaining","Box","Icon","Image","Text","createStyleSheet","useUIKitTheme","Badge","GroupChannelPreview","customCover","coverUrl","memberCount","badgeCount","maxBadgeCount","body","bodyIcon","title","titleCaption","titleCaptionLeft","frozen","notificationOff","broadcast","mentioned","mentionTrigger","colors","color","ui","groupChannelPreview","createElement","style","styles","container","backgroundColor","default","none","background","coverContainer","Boolean","resizeMode","channelCover","coverBackground","source","uri","rightSection","rightTopSection","channelInfoContainer","size","icon","secondary","containerStyle","channelInfoBroadcast","numberOfLines","subtitle1","channelInfoTitle","textTitle","caption1","channelInfoMemberCount","primary","channelInfoFrozen","onBackground03","titleCaptionContainer","caption2","textTitleCaption","titleCaptionText","rightBottomSection","bodyWrapper","bodyIconBackground","flex","alignItems","body3","ellipsizeMode","textBody","unreadContainer","h2","badge","unreadMention","count","maxCount","Separator","separator","height","width","flexDirection","justifyContent","marginStart","marginEnd","borderRadius","paddingTop","paddingEnd","marginBottom","flexShrink","marginTop","position","start","end","bottom"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { conditionChaining } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport Icon from '../../components/Icon';\nimport Image from '../../components/Image';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Badge from '../Badge';\n\ntype Props = {\n  customCover?: React.ReactNode;\n  coverUrl: string;\n\n  title: string;\n\n  titleCaption: string;\n  titleCaptionLeft?: React.ReactNode;\n\n  bodyIcon?: keyof typeof Icon.Assets;\n  body: string;\n\n  memberCount?: number;\n  badgeCount: number;\n  maxBadgeCount?: number;\n\n  frozen?: boolean;\n  notificationOff?: boolean;\n  broadcast?: boolean;\n  mentioned?: boolean;\n  mentionTrigger?: string;\n};\n\nconst GroupChannelPreview = ({\n  customCover,\n  coverUrl,\n  memberCount,\n  badgeCount,\n  maxBadgeCount,\n  body,\n  bodyIcon,\n  title,\n  titleCaption,\n  titleCaptionLeft,\n  frozen,\n  notificationOff,\n  broadcast,\n  mentioned,\n  mentionTrigger = '@',\n}: Props) => {\n  const { colors } = useUIKitTheme();\n  const color = colors.ui.groupChannelPreview;\n\n  return (\n    <Box style={[styles.container, { backgroundColor: color.default.none.background }]}>\n      <Box style={styles.coverContainer}>\n        {conditionChaining(\n          [Boolean(customCover)],\n          [\n            customCover,\n            <Image\n              resizeMode={'cover'}\n              style={[styles.channelCover, { backgroundColor: color.default.none.coverBackground }]}\n              source={{ uri: coverUrl }}\n            />,\n          ],\n        )}\n      </Box>\n      <Box style={styles.rightSection}>\n        <Box style={styles.rightTopSection}>\n          <Box style={styles.channelInfoContainer}>\n            {broadcast && (\n              <Icon\n                size={16}\n                icon={'broadcast'}\n                color={colors.secondary}\n                containerStyle={styles.channelInfoBroadcast}\n              />\n            )}\n            <Text numberOfLines={1} subtitle1 style={styles.channelInfoTitle} color={color.default.none.textTitle}>\n              {title}\n            </Text>\n            {Boolean(memberCount) && (\n              <Text caption1 style={styles.channelInfoMemberCount} color={color.default.none.memberCount}>\n                {memberCount}\n              </Text>\n            )}\n            {frozen && (\n              <Icon size={16} icon={'freeze'} color={colors.primary} containerStyle={styles.channelInfoFrozen} />\n            )}\n            {notificationOff && <Icon size={16} icon={'notifications-off-filled'} color={colors.onBackground03} />}\n          </Box>\n          <Box style={styles.titleCaptionContainer}>\n            {titleCaptionLeft}\n            <Text caption2 color={color.default.none.textTitleCaption} style={styles.titleCaptionText}>\n              {titleCaption}\n            </Text>\n          </Box>\n        </Box>\n\n        <Box style={styles.rightBottomSection}>\n          <Box style={styles.body}>\n            <Box style={styles.bodyWrapper}>\n              {bodyIcon && (\n                <Icon\n                  size={18}\n                  icon={bodyIcon}\n                  color={color.default.none.bodyIcon}\n                  containerStyle={[\n                    styles.bodyIcon,\n                    { backgroundColor: colors.ui.groupChannelPreview.default.none.bodyIconBackground },\n                  ]}\n                />\n              )}\n              <Box flex={1} alignItems={'flex-start'}>\n                <Text\n                  body3\n                  numberOfLines={1}\n                  ellipsizeMode={bodyIcon ? 'middle' : 'tail'}\n                  color={color.default.none.textBody}\n                >\n                  {body}\n                </Text>\n              </Box>\n            </Box>\n          </Box>\n          <Box style={styles.unreadContainer}>\n            {mentioned && (\n              <Text h2 color={colors.ui.badge.default.none.background} style={styles.unreadMention}>\n                {mentionTrigger}\n              </Text>\n            )}\n            {badgeCount > 0 && <Badge count={badgeCount} maxCount={maxBadgeCount} />}\n          </Box>\n        </Box>\n        <Separator color={color.default.none.separator} />\n      </Box>\n    </Box>\n  );\n};\n\ntype SeparatorProps = { color: string };\nconst Separator = ({ color }: SeparatorProps) => <Box style={[styles.separator, { backgroundColor: color }]} />;\n\nconst styles = createStyleSheet({\n  container: {\n    height: 76,\n    width: '100%',\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  coverContainer: {\n    marginStart: 16,\n    marginEnd: 16,\n  },\n  channelCover: {\n    width: 56,\n    height: 56,\n    borderRadius: 28,\n  },\n  rightSection: {\n    flex: 1,\n    paddingTop: 10,\n    paddingEnd: 16,\n  },\n  rightTopSection: {\n    flexDirection: 'row',\n    marginBottom: 4,\n  },\n  channelInfoContainer: {\n    flex: 1,\n    marginEnd: 4,\n    alignItems: 'center',\n    flexDirection: 'row',\n  },\n  channelInfoBroadcast: {\n    marginEnd: 4,\n  },\n  channelInfoTitle: {\n    flexShrink: 1,\n    marginEnd: 4,\n  },\n  channelInfoMemberCount: {\n    paddingTop: 2,\n    marginEnd: 4,\n  },\n  channelInfoFrozen: {\n    marginEnd: 4,\n  },\n  titleCaptionContainer: {\n    alignItems: 'flex-start',\n    flexDirection: 'row',\n    marginStart: 4,\n  },\n  titleCaptionText: {\n    marginTop: 2,\n  },\n  rightBottomSection: {\n    flex: 1,\n    height: '100%',\n    flexDirection: 'row',\n  },\n  body: {\n    marginEnd: 4,\n    flex: 1,\n    flexDirection: 'row',\n    alignItems: 'flex-start',\n  },\n  bodyWrapper: {\n    flexDirection: 'row',\n    alignItems: 'center',\n  },\n  bodyIcon: {\n    borderRadius: 8,\n    width: 26,\n    height: 26,\n    marginEnd: 4,\n  },\n  unreadContainer: {\n    flexDirection: 'row',\n    alignItems: 'flex-start',\n  },\n  unreadMention: {\n    marginEnd: 4,\n  },\n  separator: {\n    position: 'absolute',\n    start: 0,\n    end: -16,\n    bottom: 0,\n    height: 1,\n  },\n});\n\nexport default GroupChannelPreview;\n"],"mappings":"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","ignoreList":[]}

package/lib/module/ui/Header/index.js

@@ -1,8 +1,7 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React from 'react';
 import { TouchableOpacity, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { conditionChaining } from '@sendbird/uikit-utils';
+import { conditionChaining, useSafeAreaPadding } from '@sendbird/uikit-utils';
 import Text from '../../components/Text';
 import createStyleSheet from '../../styles/createStyleSheet';
 import useHeaderStyle from '../../styles/useHeaderStyle';
@@ -12,19 +11,18 @@ const AlignMapper = {
   center: 'center',
   right: 'flex-end'
 };
-const Header = _ref => {
-  let {
-    children,
-    titleAlign,
-    title = null,
-    left = null,
-    right = null,
-    onPressLeft,
-    onPressRight,
-    clearTitleMargin = false,
-    clearStatusBarTopInset = false,
-    statusBarTopInsetAs = 'padding'
-  } = _ref;
+const Header = ({
+  children,
+  titleAlign,
+  title = null,
+  left = null,
+  right = null,
+  onPressLeft,
+  onPressRight,
+  clearTitleMargin = false,
+  clearStatusBarTopInset = false,
+  statusBarTopInsetAs = 'padding'
+}) => {
   const {
     topInset,
     defaultTitleAlign,
@@ -33,10 +31,7 @@ const Header = _ref => {
   const {
     colors
   } = useUIKitTheme();
-  const {
-    left: paddingLeft,
-    right: paddingRight
-  } = useSafeAreaInsets();
+  const safeArea = useSafeAreaPadding(['left', 'right']);
   const actualTitleAlign = titleAlign ?? defaultTitleAlign;
   const actualTopInset = clearStatusBarTopInset ? 0 : topInset;
   if (!title && !left && !right) {
@@ -50,8 +45,8 @@ const Header = _ref => {
   return /*#__PURE__*/React.createElement(View, {
     style: [styles.container, {
       [statusBarTopInsetAs === 'padding' ? 'paddingTop' : 'marginTop']: actualTopInset,
-      paddingLeft: paddingLeft + styles.container.paddingHorizontal,
-      paddingRight: paddingRight + styles.container.paddingHorizontal,
+      paddingStart: safeArea.paddingStart + styles.container.paddingHorizontal,
+      paddingEnd: safeArea.paddingEnd + styles.container.paddingHorizontal,
       backgroundColor: colors.ui.header.nav.none.background,
       borderBottomColor: colors.ui.header.nav.none.borderBottom
     }]
@@ -75,12 +70,11 @@ const Header = _ref => {
     onPressRight: onPressRight
   })), children);
 };
-const LeftSide = _ref2 => {
-  let {
-    titleAlign,
-    onPressLeft,
-    left
-  } = _ref2;
+const LeftSide = ({
+  titleAlign,
+  onPressLeft,
+  left
+}) => {
   if (titleAlign === 'center') {
     return /*#__PURE__*/React.createElement(View, {
       style: styles.left
@@ -95,12 +89,11 @@ const LeftSide = _ref2 => {
     onPress: onPressLeft
   }, left));
 };
-const RightSide = _ref3 => {
-  let {
-    titleAlign,
-    onPressRight,
-    right
-  } = _ref3;
+const RightSide = ({
+  titleAlign,
+  onPressRight,
+  right
+}) => {
   if (titleAlign === 'center') {
     return /*#__PURE__*/React.createElement(View, {
       style: styles.right
@@ -115,24 +108,22 @@ const RightSide = _ref3 => {
     onPress: onPressRight
   }, right));
 };
-const HeaderTitle = _ref4 => {
-  let {
-    children,
-    style,
-    ...props
-  } = _ref4;
+const HeaderTitle = ({
+  children,
+  style,
+  ...props
+}) => {
   return /*#__PURE__*/React.createElement(Text, _extends({}, props, {
     h1: true,
     numberOfLines: 1,
     style: style
   }), children);
 };
-const HeaderSubtitle = _ref5 => {
-  let {
-    children,
-    style,
-    ...props
-  } = _ref5;
+const HeaderSubtitle = ({
+  children,
+  style,
+  ...props
+}) => {
   const {
     colors
   } = useUIKitTheme();
@@ -144,14 +135,13 @@ const HeaderSubtitle = _ref5 => {
     style: style
   }), children);
 };
-const HeaderButton = _ref6 => {
-  let {
-    children,
-    disabled,
-    onPress,
-    color,
-    ...props
-  } = _ref6;
+const HeaderButton = ({
+  children,
+  disabled,
+  onPress,
+  color,
+  ...props
+}) => {
   return /*#__PURE__*/React.createElement(TouchableOpacity, _extends({
     style: styles.button
   }, props, {