@sendbird/uikit-react-native 1.0.1 → 1.0.2

package/lib/module/components/ChannelCover.js

@@ -0,0 +1,46 @@
+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); }
+
+import React from 'react';
+import { Avatar } from '@sendbird/uikit-react-native-foundation';
+import { getMembersExcludeMe, isDefaultCoverImage } from '@sendbird/uikit-utils';
+import { useSendbirdChat } from '../hooks/useContext';
+
+const ChannelCover = _ref => {
+  let {
+    channel,
+    ...avatarProps
+  } = _ref;
+  const {
+    currentUser
+  } = useSendbirdChat(); // channel cover
+
+  if (!isDefaultCoverImage(channel.coverUrl) || !currentUser) {
+    return /*#__PURE__*/React.createElement(Avatar, _extends({
+      uri: channel.coverUrl
+    }, avatarProps));
+  } // no members, use anonymous profile
+
+
+  if (channel.memberCount <= 1) {
+    return /*#__PURE__*/React.createElement(Avatar, avatarProps);
+  } // 1:1, use member profile
+
+
+  if (channel.memberCount === 2) {
+    var _channel$members$filt, _channel$members$filt2;
+
+    const otherUserProfile = (_channel$members$filt = channel.members.filter(m => m.userId !== currentUser.userId)) === null || _channel$members$filt === void 0 ? void 0 : (_channel$members$filt2 = _channel$members$filt[0]) === null || _channel$members$filt2 === void 0 ? void 0 : _channel$members$filt2.profileUrl;
+    return /*#__PURE__*/React.createElement(Avatar, _extends({
+      uri: otherUserProfile
+    }, avatarProps));
+  } // group, use members profile
+
+
+  return /*#__PURE__*/React.createElement(Avatar.Group, avatarProps, getMembersExcludeMe(channel, currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId).map(m => /*#__PURE__*/React.createElement(Avatar, {
+    key: m.userId,
+    uri: m.profileUrl
+  })));
+};
+
+export default ChannelCover;
+//# sourceMappingURL=ChannelCover.js.map

package/lib/module/components/ChannelCover.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Avatar","getMembersExcludeMe","isDefaultCoverImage","useSendbirdChat","ChannelCover","channel","avatarProps","currentUser","coverUrl","memberCount","otherUserProfile","members","filter","m","userId","profileUrl","map"],"sources":["ChannelCover.tsx"],"sourcesContent":["import React from 'react';\nimport type { StyleProp, ViewStyle } from 'react-native';\n\nimport { Avatar } from '@sendbird/uikit-react-native-foundation';\nimport { SendbirdGroupChannel, getMembersExcludeMe, isDefaultCoverImage } from '@sendbird/uikit-utils';\n\nimport { useSendbirdChat } from '../hooks/useContext';\n\ntype Props = {\n  channel: SendbirdGroupChannel;\n  size?: number;\n  containerStyle?: StyleProp<ViewStyle>;\n};\n\nconst ChannelCover = ({ channel, ...avatarProps }: Props) => {\n  const { currentUser } = useSendbirdChat();\n\n  // channel cover\n  if (!isDefaultCoverImage(channel.coverUrl) || !currentUser) {\n    return <Avatar uri={channel.coverUrl} {...avatarProps} />;\n  }\n\n  // no members, use anonymous profile\n  if (channel.memberCount <= 1) {\n    return <Avatar {...avatarProps} />;\n  }\n\n  // 1:1, use member profile\n  if (channel.memberCount === 2) {\n    const otherUserProfile = channel.members.filter((m) => m.userId !== currentUser.userId)?.[0]?.profileUrl;\n    return <Avatar uri={otherUserProfile} {...avatarProps} />;\n  }\n\n  // group, use members profile\n  return (\n    <Avatar.Group {...avatarProps}>\n      {getMembersExcludeMe(channel, currentUser?.userId).map((m) => (\n        <Avatar key={m.userId} uri={m.profileUrl} />\n      ))}\n    </Avatar.Group>\n  );\n};\n\nexport default ChannelCover;\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAGA,SAASC,MAAT,QAAuB,yCAAvB;AACA,SAA+BC,mBAA/B,EAAoDC,mBAApD,QAA+E,uBAA/E;AAEA,SAASC,eAAT,QAAgC,qBAAhC;;AAQA,MAAMC,YAAY,GAAG,QAAwC;EAAA,IAAvC;IAAEC,OAAF;IAAW,GAAGC;EAAd,CAAuC;EAC3D,MAAM;IAAEC;EAAF,IAAkBJ,eAAe,EAAvC,CAD2D,CAG3D;;EACA,IAAI,CAACD,mBAAmB,CAACG,OAAO,CAACG,QAAT,CAApB,IAA0C,CAACD,WAA/C,EAA4D;IAC1D,oBAAO,oBAAC,MAAD;MAAQ,GAAG,EAAEF,OAAO,CAACG;IAArB,GAAmCF,WAAnC,EAAP;EACD,CAN0D,CAQ3D;;;EACA,IAAID,OAAO,CAACI,WAAR,IAAuB,CAA3B,EAA8B;IAC5B,oBAAO,oBAAC,MAAD,EAAYH,WAAZ,CAAP;EACD,CAX0D,CAa3D;;;EACA,IAAID,OAAO,CAACI,WAAR,KAAwB,CAA5B,EAA+B;IAAA;;IAC7B,MAAMC,gBAAgB,4BAAGL,OAAO,CAACM,OAAR,CAAgBC,MAAhB,CAAwBC,CAAD,IAAOA,CAAC,CAACC,MAAF,KAAaP,WAAW,CAACO,MAAvD,CAAH,oFAAG,sBAAiE,CAAjE,CAAH,2DAAG,uBAAqEC,UAA9F;IACA,oBAAO,oBAAC,MAAD;MAAQ,GAAG,EAAEL;IAAb,GAAmCJ,WAAnC,EAAP;EACD,CAjB0D,CAmB3D;;;EACA,oBACE,oBAAC,MAAD,CAAQ,KAAR,EAAkBA,WAAlB,EACGL,mBAAmB,CAACI,OAAD,EAAUE,WAAV,aAAUA,WAAV,uBAAUA,WAAW,CAAEO,MAAvB,CAAnB,CAAkDE,GAAlD,CAAuDH,CAAD,iBACrD,oBAAC,MAAD;IAAQ,GAAG,EAAEA,CAAC,CAACC,MAAf;IAAuB,GAAG,EAAED,CAAC,CAACE;EAA9B,EADD,CADH,CADF;AAOD,CA3BD;;AA6BA,eAAeX,YAAf"}

package/lib/module/components/ChatFlatList.js

@@ -0,0 +1,102 @@
+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); }
+
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef } from 'react';
+import { FlatList, Platform } from 'react-native';
+import { useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { isMyMessage } from '@sendbird/uikit-utils';
+let ANDROID_BUG_ALERT_SHOWED = Platform.OS !== 'android';
+const BOTTOM_DETECT_THRESHOLD = 25; // const AUTO_SCROLL_TO_TOP_THRESHOLD = 15;
+
+function hasReachedToBottom(yPos) {
+  let thresholdPx = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  return thresholdPx >= yPos;
+}
+
+// FIXME: Inverted FlatList performance issue on Android {@link https://github.com/facebook/react-native/issues/30034}
+const ChatFlatList = /*#__PURE__*/forwardRef(function CustomFlatList(_ref, ref) {
+  var _props$data;
+
+  let {
+    onTopReached,
+    nextMessages,
+    onBottomReached,
+    onLeaveScrollBottom,
+    onScroll,
+    currentUserId,
+    ...props
+  } = _ref;
+  const {
+    select
+  } = useUIKitTheme();
+  const scrollRef = useRef(null);
+  const yPos = useRef(0);
+  useImperativeHandle(ref, () => ({
+    scrollToBottom: function () {
+      var _scrollRef$current;
+
+      let animated = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+      return (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.scrollToOffset({
+        animated,
+        offset: 0
+      });
+    }
+  }), []);
+  useEffect(() => {
+    const latestMessage = nextMessages[nextMessages.length - 1];
+    if (!latestMessage) return;
+
+    if (hasReachedToBottom(yPos.current)) {
+      onBottomReached();
+    } else if (isMyMessage(latestMessage, currentUserId)) {
+      var _scrollRef$current2;
+
+      (_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 ? void 0 : _scrollRef$current2.scrollToOffset({
+        animated: false,
+        offset: 0
+      });
+    }
+  }, [onBottomReached, nextMessages, currentUserId]);
+
+  const _onScroll = useCallback(event => {
+    const {
+      contentOffset
+    } = event.nativeEvent;
+
+    if (BOTTOM_DETECT_THRESHOLD < yPos.current && contentOffset.y <= BOTTOM_DETECT_THRESHOLD) {
+      onLeaveScrollBottom(false);
+    } else if (BOTTOM_DETECT_THRESHOLD < contentOffset.y && yPos.current <= BOTTOM_DETECT_THRESHOLD) {
+      onLeaveScrollBottom(true);
+    }
+
+    yPos.current = contentOffset.y;
+    onScroll === null || onScroll === void 0 ? void 0 : onScroll(event);
+    if (hasReachedToBottom(yPos.current)) onBottomReached();
+  }, [onScroll, onBottomReached]);
+
+  if (__DEV__ && !ANDROID_BUG_ALERT_SHOWED) {
+    ANDROID_BUG_ALERT_SHOWED = true; // eslint-disable-next-line no-console
+
+    console.warn('UIKit Warning: Inverted FlatList has a performance issue on Android, Maybe this is a bug please refer link\nhttps://github.com/facebook/react-native/issues/30034');
+  }
+
+  return /*#__PURE__*/React.createElement(FlatList, _extends({}, props, {
+    // FIXME: inverted list of ListEmptyComponent is reversed {@link https://github.com/facebook/react-native/issues/21196#issuecomment-836937743}
+    inverted: Boolean((_props$data = props.data) === null || _props$data === void 0 ? void 0 : _props$data.length) // FIXME: maintainVisibleContentPosition is not working on Android {@link https://github.com/facebook/react-native/issues/25239}
+    // maintainVisibleContentPosition={{ minIndexForVisible: 1, autoscrollToTopThreshold: AUTO_SCROLL_TO_TOP_THRESHOLD }}
+    ,
+    ref: scrollRef,
+    bounces: false,
+    keyboardShouldPersistTaps: 'handled',
+    indicatorStyle: select({
+      light: 'black',
+      dark: 'white'
+    }),
+    removeClippedSubviews: true,
+    onEndReachedThreshold: 0.5,
+    onEndReached: onTopReached,
+    scrollEventThrottle: 16,
+    onScroll: _onScroll
+  }));
+});
+export default ChatFlatList;
+//# sourceMappingURL=ChatFlatList.js.map

package/lib/module/components/ChatFlatList.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","FlatList","Platform","useUIKitTheme","isMyMessage","ANDROID_BUG_ALERT_SHOWED","OS","BOTTOM_DETECT_THRESHOLD","hasReachedToBottom","yPos","thresholdPx","ChatFlatList","CustomFlatList","ref","onTopReached","nextMessages","onBottomReached","onLeaveScrollBottom","onScroll","currentUserId","props","select","scrollRef","scrollToBottom","animated","current","scrollToOffset","offset","latestMessage","length","_onScroll","event","contentOffset","nativeEvent","y","__DEV__","console","warn","Boolean","data","light","dark"],"sources":["ChatFlatList.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef } from 'react';\nimport { FlatList, FlatListProps, Platform } from 'react-native';\n\nimport { useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { SendbirdMessage, isMyMessage } from '@sendbird/uikit-utils';\n\nlet ANDROID_BUG_ALERT_SHOWED = Platform.OS !== 'android';\nconst BOTTOM_DETECT_THRESHOLD = 25;\n// const AUTO_SCROLL_TO_TOP_THRESHOLD = 15;\n\nfunction hasReachedToBottom(yPos: number, thresholdPx = 0) {\n  return thresholdPx >= yPos;\n}\n\nexport type ChatFlatListRef = { scrollToBottom: (animated?: boolean) => void };\ntype Props = Omit<FlatListProps<SendbirdMessage>, 'onEndReached'> & {\n  currentUserId?: string;\n  onBottomReached: () => void;\n  onTopReached: () => void;\n  nextMessages: SendbirdMessage[];\n  onLeaveScrollBottom: (value: boolean) => void;\n};\n// FIXME: Inverted FlatList performance issue on Android {@link https://github.com/facebook/react-native/issues/30034}\nconst ChatFlatList = forwardRef<ChatFlatListRef, Props>(function CustomFlatList(\n  { onTopReached, nextMessages, onBottomReached, onLeaveScrollBottom, onScroll, currentUserId, ...props },\n  ref,\n) {\n  const { select } = useUIKitTheme();\n  const scrollRef = useRef<FlatList<SendbirdMessage>>(null);\n  const yPos = useRef(0);\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      scrollToBottom: (animated = true) => scrollRef.current?.scrollToOffset({ animated, offset: 0 }),\n    }),\n    [],\n  );\n\n  useEffect(() => {\n    const latestMessage = nextMessages[nextMessages.length - 1];\n    if (!latestMessage) return;\n\n    if (hasReachedToBottom(yPos.current)) {\n      onBottomReached();\n    } else if (isMyMessage(latestMessage, currentUserId)) {\n      scrollRef.current?.scrollToOffset({ animated: false, offset: 0 });\n    }\n  }, [onBottomReached, nextMessages, currentUserId]);\n\n  const _onScroll = useCallback<NonNullable<Props['onScroll']>>(\n    (event) => {\n      const { contentOffset } = event.nativeEvent;\n      if (BOTTOM_DETECT_THRESHOLD < yPos.current && contentOffset.y <= BOTTOM_DETECT_THRESHOLD) {\n        onLeaveScrollBottom(false);\n      } else if (BOTTOM_DETECT_THRESHOLD < contentOffset.y && yPos.current <= BOTTOM_DETECT_THRESHOLD) {\n        onLeaveScrollBottom(true);\n      }\n\n      yPos.current = contentOffset.y;\n\n      onScroll?.(event);\n      if (hasReachedToBottom(yPos.current)) onBottomReached();\n    },\n    [onScroll, onBottomReached],\n  );\n\n  if (__DEV__ && !ANDROID_BUG_ALERT_SHOWED) {\n    ANDROID_BUG_ALERT_SHOWED = true;\n    // eslint-disable-next-line no-console\n    console.warn(\n      'UIKit Warning: Inverted FlatList has a performance issue on Android, Maybe this is a bug please refer link\\nhttps://github.com/facebook/react-native/issues/30034',\n    );\n  }\n\n  return (\n    <FlatList\n      {...props}\n      // FIXME: inverted list of ListEmptyComponent is reversed {@link https://github.com/facebook/react-native/issues/21196#issuecomment-836937743}\n      inverted={Boolean(props.data?.length)}\n      // FIXME: maintainVisibleContentPosition is not working on Android {@link https://github.com/facebook/react-native/issues/25239}\n      // maintainVisibleContentPosition={{ minIndexForVisible: 1, autoscrollToTopThreshold: AUTO_SCROLL_TO_TOP_THRESHOLD }}\n      ref={scrollRef}\n      bounces={false}\n      keyboardShouldPersistTaps={'handled'}\n      indicatorStyle={select({ light: 'black', dark: 'white' })}\n      removeClippedSubviews\n      onEndReachedThreshold={0.5}\n      onEndReached={onTopReached}\n      scrollEventThrottle={16}\n      onScroll={_onScroll}\n    />\n  );\n});\n\nexport default ChatFlatList;\n"],"mappings":"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"}

package/lib/module/components/MessageRenderer/AdminMessage/index.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+
+const AdminMessage = _ref => {
+  let {
+    message,
+    nextMessage
+  } = _ref;
+  const {
+    colors
+  } = useUIKitTheme();
+  const isNextAdmin = nextMessage === null || nextMessage === void 0 ? void 0 : nextMessage.isAdminMessage();
+  return /*#__PURE__*/React.createElement(View, {
+    style: StyleSheet.flatten([styles.container, isNextAdmin ? styles.nextAdminType : styles.next])
+  }, /*#__PURE__*/React.createElement(Text, {
+    caption2: true,
+    color: colors.onBackground02,
+    style: styles.text
+  }, message.message));
+};
+
+const styles = createStyleSheet({
+  container: {
+    width: 300,
+    alignSelf: 'center',
+    alignItems: 'center'
+  },
+  nextAdminType: {
+    marginBottom: 8
+  },
+  next: {
+    marginBottom: 16
+  },
+  text: {
+    textAlign: 'center'
+  }
+});
+export default AdminMessage;
+//# sourceMappingURL=index.js.map

package/lib/module/components/MessageRenderer/AdminMessage/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","StyleSheet","View","Text","createStyleSheet","useUIKitTheme","AdminMessage","message","nextMessage","colors","isNextAdmin","isAdminMessage","flatten","styles","container","nextAdminType","next","onBackground02","text","width","alignSelf","alignItems","marginBottom","textAlign"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleSheet, View } from 'react-native';\n\nimport { Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport type { SendbirdAdminMessage } from '@sendbird/uikit-utils';\n\nimport type { MessageRendererInterface } from '../index';\n\nexport type AdminMessageProps = MessageRendererInterface<SendbirdAdminMessage>;\nconst AdminMessage = ({ message, nextMessage }: AdminMessageProps) => {\n  const { colors } = useUIKitTheme();\n\n  const isNextAdmin = nextMessage?.isAdminMessage();\n  return (\n    <View style={StyleSheet.flatten([styles.container, isNextAdmin ? styles.nextAdminType : styles.next])}>\n      <Text caption2 color={colors.onBackground02} style={styles.text}>\n        {message.message}\n      </Text>\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    width: 300,\n    alignSelf: 'center',\n    alignItems: 'center',\n  },\n  nextAdminType: {\n    marginBottom: 8,\n  },\n  next: {\n    marginBottom: 16,\n  },\n  text: {\n    textAlign: 'center',\n  },\n});\n\nexport default AdminMessage;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,UAAT,EAAqBC,IAArB,QAAiC,cAAjC;AAEA,SAASC,IAAT,EAAeC,gBAAf,EAAiCC,aAAjC,QAAsD,yCAAtD;;AAMA,MAAMC,YAAY,GAAG,QAAiD;EAAA,IAAhD;IAAEC,OAAF;IAAWC;EAAX,CAAgD;EACpE,MAAM;IAAEC;EAAF,IAAaJ,aAAa,EAAhC;EAEA,MAAMK,WAAW,GAAGF,WAAH,aAAGA,WAAH,uBAAGA,WAAW,CAAEG,cAAb,EAApB;EACA,oBACE,oBAAC,IAAD;IAAM,KAAK,EAAEV,UAAU,CAACW,OAAX,CAAmB,CAACC,MAAM,CAACC,SAAR,EAAmBJ,WAAW,GAAGG,MAAM,CAACE,aAAV,GAA0BF,MAAM,CAACG,IAA/D,CAAnB;EAAb,gBACE,oBAAC,IAAD;IAAM,QAAQ,MAAd;IAAe,KAAK,EAAEP,MAAM,CAACQ,cAA7B;IAA6C,KAAK,EAAEJ,MAAM,CAACK;EAA3D,GACGX,OAAO,CAACA,OADX,CADF,CADF;AAOD,CAXD;;AAaA,MAAMM,MAAM,GAAGT,gBAAgB,CAAC;EAC9BU,SAAS,EAAE;IACTK,KAAK,EAAE,GADE;IAETC,SAAS,EAAE,QAFF;IAGTC,UAAU,EAAE;EAHH,CADmB;EAM9BN,aAAa,EAAE;IACbO,YAAY,EAAE;EADD,CANe;EAS9BN,IAAI,EAAE;IACJM,YAAY,EAAE;EADV,CATwB;EAY9BJ,IAAI,EAAE;IACJK,SAAS,EAAE;EADP;AAZwB,CAAD,CAA/B;AAiBA,eAAejB,YAAf"}

package/lib/module/components/MessageRenderer/FileMessage/BaseFileMessage.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import { View } from 'react-native';
+import { Icon, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { useLocalization } from '../../../hooks/useContext';
+const iconMapper = {
+  audio: 'file-audio',
+  image: 'photo',
+  video: 'play',
+  file: 'file-document'
+};
+
+const BaseFileMessage = _ref => {
+  let {
+    message,
+    variant,
+    pressed,
+    type
+  } = _ref;
+  const {
+    STRINGS
+  } = useLocalization();
+  const {
+    colors
+  } = useUIKitTheme();
+  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.container, {
+      backgroundColor: color.background
+    }]
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: iconMapper[type],
+    size: 24,
+    containerStyle: {
+      backgroundColor: colors.background,
+      padding: 2,
+      borderRadius: 8,
+      marginRight: 8
+    }
+  }), /*#__PURE__*/React.createElement(Text, {
+    body3: true,
+    ellipsizeMode: 'middle',
+    numberOfLines: 1,
+    color: color.textMsg,
+    style: styles.name
+  }, STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_FILE_TITLE(message)));
+};
+
+const styles = createStyleSheet({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 16
+  },
+  name: {
+    flexShrink: 1
+  }
+});
+export default BaseFileMessage;
+//# sourceMappingURL=BaseFileMessage.js.map

package/lib/module/components/MessageRenderer/FileMessage/BaseFileMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","Icon","Text","createStyleSheet","useUIKitTheme","useLocalization","iconMapper","audio","image","video","file","BaseFileMessage","message","variant","pressed","type","STRINGS","colors","color","ui","styles","container","backgroundColor","background","padding","borderRadius","marginRight","textMsg","name","GROUP_CHANNEL","MESSAGE_BUBBLE_FILE_TITLE","flexDirection","alignItems","justifyContent","paddingHorizontal","paddingVertical","flexShrink"],"sources":["BaseFileMessage.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport { Icon, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\n\nimport { useLocalization } from '../../../hooks/useContext';\nimport type { FileMessageProps } from './index';\n\nconst iconMapper = { audio: 'file-audio', image: 'photo', video: 'play', file: 'file-document' } as const;\n\ntype Props = FileMessageProps & {\n  type: 'image' | 'audio' | 'video' | 'file';\n};\nconst BaseFileMessage = ({ message, variant, pressed, type }: Props) => {\n  const { STRINGS } = useLocalization();\n  const { colors } = useUIKitTheme();\n  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];\n  return (\n    <View style={[styles.container, { backgroundColor: color.background }]}>\n      <Icon\n        icon={iconMapper[type]}\n        size={24}\n        containerStyle={{ backgroundColor: colors.background, padding: 2, borderRadius: 8, marginRight: 8 }}\n      />\n      <Text body3 ellipsizeMode={'middle'} numberOfLines={1} color={color.textMsg} style={styles.name}>\n        {STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_FILE_TITLE(message)}\n      </Text>\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n    paddingHorizontal: 12,\n    paddingVertical: 6,\n    borderRadius: 16,\n  },\n  name: {\n    flexShrink: 1,\n  },\n});\n\nexport default BaseFileMessage;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,SAASC,IAAT,EAAeC,IAAf,EAAqBC,gBAArB,EAAuCC,aAAvC,QAA4D,yCAA5D;AAEA,SAASC,eAAT,QAAgC,2BAAhC;AAGA,MAAMC,UAAU,GAAG;EAAEC,KAAK,EAAE,YAAT;EAAuBC,KAAK,EAAE,OAA9B;EAAuCC,KAAK,EAAE,MAA9C;EAAsDC,IAAI,EAAE;AAA5D,CAAnB;;AAKA,MAAMC,eAAe,GAAG,QAAgD;EAAA,IAA/C;IAAEC,OAAF;IAAWC,OAAX;IAAoBC,OAApB;IAA6BC;EAA7B,CAA+C;EACtE,MAAM;IAAEC;EAAF,IAAcX,eAAe,EAAnC;EACA,MAAM;IAAEY;EAAF,IAAab,aAAa,EAAhC;EACA,MAAMc,KAAK,GAAGD,MAAM,CAACE,EAAP,CAAUP,OAAV,CAAkBC,OAAlB,EAA2BC,OAAO,GAAG,SAAH,GAAe,SAAjD,CAAd;EACA,oBACE,oBAAC,IAAD;IAAM,KAAK,EAAE,CAACM,MAAM,CAACC,SAAR,EAAmB;MAAEC,eAAe,EAAEJ,KAAK,CAACK;IAAzB,CAAnB;EAAb,gBACE,oBAAC,IAAD;IACE,IAAI,EAAEjB,UAAU,CAACS,IAAD,CADlB;IAEE,IAAI,EAAE,EAFR;IAGE,cAAc,EAAE;MAAEO,eAAe,EAAEL,MAAM,CAACM,UAA1B;MAAsCC,OAAO,EAAE,CAA/C;MAAkDC,YAAY,EAAE,CAAhE;MAAmEC,WAAW,EAAE;IAAhF;EAHlB,EADF,eAME,oBAAC,IAAD;IAAM,KAAK,MAAX;IAAY,aAAa,EAAE,QAA3B;IAAqC,aAAa,EAAE,CAApD;IAAuD,KAAK,EAAER,KAAK,CAACS,OAApE;IAA6E,KAAK,EAAEP,MAAM,CAACQ;EAA3F,GACGZ,OAAO,CAACa,aAAR,CAAsBC,yBAAtB,CAAgDlB,OAAhD,CADH,CANF,CADF;AAYD,CAhBD;;AAkBA,MAAMQ,MAAM,GAAGjB,gBAAgB,CAAC;EAC9BkB,SAAS,EAAE;IACTU,aAAa,EAAE,KADN;IAETC,UAAU,EAAE,QAFH;IAGTC,cAAc,EAAE,QAHP;IAITC,iBAAiB,EAAE,EAJV;IAKTC,eAAe,EAAE,CALR;IAMTV,YAAY,EAAE;EANL,CADmB;EAS9BG,IAAI,EAAE;IACJQ,UAAU,EAAE;EADR;AATwB,CAAD,CAA/B;AAcA,eAAezB,eAAf"}

package/lib/module/components/MessageRenderer/FileMessage/ImageFileMessage.js

@@ -0,0 +1,47 @@
+import React, { useState } from 'react';
+import { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';
+
+const ImageFileMessage = _ref => {
+  let {
+    message
+  } = _ref;
+  const {
+    colors
+  } = useUIKitTheme();
+  const [imageNotFound, setImageNotFound] = useState(false);
+  const fileUrl = getAvailableUriFromFileMessage(message);
+  const style = [styles.image, {
+    backgroundColor: colors.onBackground04
+  }];
+
+  if (imageNotFound) {
+    return /*#__PURE__*/React.createElement(Icon, {
+      containerStyle: style,
+      icon: 'thumbnail-none',
+      size: 48,
+      color: colors.onBackground02
+    });
+  }
+
+  return /*#__PURE__*/React.createElement(Image, {
+    source: {
+      uri: fileUrl
+    },
+    style: style,
+    resizeMode: 'cover',
+    resizeMethod: 'resize',
+    onError: () => setImageNotFound(true)
+  });
+};
+
+const styles = createStyleSheet({
+  image: {
+    width: 240,
+    maxWidth: 240,
+    height: 160,
+    borderRadius: 16
+  }
+});
+export default ImageFileMessage;
+//# sourceMappingURL=ImageFileMessage.js.map

package/lib/module/components/MessageRenderer/FileMessage/ImageFileMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","Icon","Image","createStyleSheet","useUIKitTheme","getAvailableUriFromFileMessage","ImageFileMessage","message","colors","imageNotFound","setImageNotFound","fileUrl","style","styles","image","backgroundColor","onBackground04","onBackground02","uri","width","maxWidth","height","borderRadius"],"sources":["ImageFileMessage.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';\n\nimport type { FileMessageProps } from './index';\n\nconst ImageFileMessage = ({ message }: FileMessageProps) => {\n  const { colors } = useUIKitTheme();\n  const [imageNotFound, setImageNotFound] = useState(false);\n\n  const fileUrl = getAvailableUriFromFileMessage(message);\n  const style = [styles.image, { backgroundColor: colors.onBackground04 }];\n\n  if (imageNotFound) {\n    return <Icon containerStyle={style} icon={'thumbnail-none'} size={48} color={colors.onBackground02} />;\n  }\n\n  return (\n    <Image\n      source={{ uri: fileUrl }}\n      style={style}\n      resizeMode={'cover'}\n      resizeMethod={'resize'}\n      onError={() => setImageNotFound(true)}\n    />\n  );\n};\n\nconst styles = createStyleSheet({\n  image: {\n    width: 240,\n    maxWidth: 240,\n    height: 160,\n    borderRadius: 16,\n  },\n});\n\nexport default ImageFileMessage;\n"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,QAAhB,QAAgC,OAAhC;AAEA,SAASC,IAAT,EAAeC,KAAf,EAAsBC,gBAAtB,EAAwCC,aAAxC,QAA6D,yCAA7D;AACA,SAASC,8BAAT,QAA+C,uBAA/C;;AAIA,MAAMC,gBAAgB,GAAG,QAAmC;EAAA,IAAlC;IAAEC;EAAF,CAAkC;EAC1D,MAAM;IAAEC;EAAF,IAAaJ,aAAa,EAAhC;EACA,MAAM,CAACK,aAAD,EAAgBC,gBAAhB,IAAoCV,QAAQ,CAAC,KAAD,CAAlD;EAEA,MAAMW,OAAO,GAAGN,8BAA8B,CAACE,OAAD,CAA9C;EACA,MAAMK,KAAK,GAAG,CAACC,MAAM,CAACC,KAAR,EAAe;IAAEC,eAAe,EAAEP,MAAM,CAACQ;EAA1B,CAAf,CAAd;;EAEA,IAAIP,aAAJ,EAAmB;IACjB,oBAAO,oBAAC,IAAD;MAAM,cAAc,EAAEG,KAAtB;MAA6B,IAAI,EAAE,gBAAnC;MAAqD,IAAI,EAAE,EAA3D;MAA+D,KAAK,EAAEJ,MAAM,CAACS;IAA7E,EAAP;EACD;;EAED,oBACE,oBAAC,KAAD;IACE,MAAM,EAAE;MAAEC,GAAG,EAAEP;IAAP,CADV;IAEE,KAAK,EAAEC,KAFT;IAGE,UAAU,EAAE,OAHd;IAIE,YAAY,EAAE,QAJhB;IAKE,OAAO,EAAE,MAAMF,gBAAgB,CAAC,IAAD;EALjC,EADF;AASD,CApBD;;AAsBA,MAAMG,MAAM,GAAGV,gBAAgB,CAAC;EAC9BW,KAAK,EAAE;IACLK,KAAK,EAAE,GADF;IAELC,QAAQ,EAAE,GAFL;IAGLC,MAAM,EAAE,GAHH;IAILC,YAAY,EAAE;EAJT;AADuB,CAAD,CAA/B;AASA,eAAehB,gBAAf"}

package/lib/module/components/MessageRenderer/FileMessage/index.js

@@ -0,0 +1,17 @@
+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); }
+
+import React from 'react';
+import { getFileExtension, getFileType } from '@sendbird/uikit-utils';
+import BaseFileMessage from './BaseFileMessage';
+import ImageFileMessage from './ImageFileMessage';
+
+const FileMessage = props => {
+  const fileType = getFileType(props.message.type || getFileExtension(props.message.name));
+  if (fileType === 'image') return /*#__PURE__*/React.createElement(ImageFileMessage, props);
+  return /*#__PURE__*/React.createElement(BaseFileMessage, _extends({}, props, {
+    type: fileType
+  }));
+};
+
+export default /*#__PURE__*/React.memo(FileMessage);
+//# sourceMappingURL=index.js.map

package/lib/module/components/MessageRenderer/FileMessage/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","getFileExtension","getFileType","BaseFileMessage","ImageFileMessage","FileMessage","props","fileType","message","type","name","memo"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SendbirdFileMessage, getFileExtension, getFileType } from '@sendbird/uikit-utils';\n\nimport type { MessageRendererInterface } from '../index';\nimport BaseFileMessage from './BaseFileMessage';\nimport ImageFileMessage from './ImageFileMessage';\n\nexport type FileMessageProps = MessageRendererInterface<SendbirdFileMessage>;\nconst FileMessage = (props: FileMessageProps) => {\n  const fileType = getFileType(props.message.type || getFileExtension(props.message.name));\n\n  if (fileType === 'image') return <ImageFileMessage {...props} />;\n  return <BaseFileMessage {...props} type={fileType} />;\n};\n\nexport default React.memo(FileMessage);\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAA8BC,gBAA9B,EAAgDC,WAAhD,QAAmE,uBAAnE;AAGA,OAAOC,eAAP,MAA4B,mBAA5B;AACA,OAAOC,gBAAP,MAA6B,oBAA7B;;AAGA,MAAMC,WAAW,GAAIC,KAAD,IAA6B;EAC/C,MAAMC,QAAQ,GAAGL,WAAW,CAACI,KAAK,CAACE,OAAN,CAAcC,IAAd,IAAsBR,gBAAgB,CAACK,KAAK,CAACE,OAAN,CAAcE,IAAf,CAAvC,CAA5B;EAEA,IAAIH,QAAQ,KAAK,OAAjB,EAA0B,oBAAO,oBAAC,gBAAD,EAAsBD,KAAtB,CAAP;EAC1B,oBAAO,oBAAC,eAAD,eAAqBA,KAArB;IAA4B,IAAI,EAAEC;EAAlC,GAAP;AACD,CALD;;AAOA,4BAAeP,KAAK,CAACW,IAAN,CAAWN,WAAX,CAAf"}

package/lib/module/components/MessageRenderer/MessageContainer.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { View } from 'react-native';
+import { createStyleSheet } from '@sendbird/uikit-react-native-foundation';
+
+const MessageContainer = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.container
+  }, children);
+};
+
+const styles = createStyleSheet({
+  container: {
+    flexDirection: 'column',
+    paddingHorizontal: 16
+  }
+});
+export default MessageContainer;
+//# sourceMappingURL=MessageContainer.js.map

package/lib/module/components/MessageRenderer/MessageContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","createStyleSheet","MessageContainer","children","styles","container","flexDirection","paddingHorizontal"],"sources":["MessageContainer.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport { createStyleSheet } from '@sendbird/uikit-react-native-foundation';\n\nconst MessageContainer = ({ children }: React.PropsWithChildren) => {\n  return <View style={styles.container}>{children}</View>;\n};\n\nconst styles = createStyleSheet({\n  container: {\n    flexDirection: 'column',\n    paddingHorizontal: 16,\n  },\n});\n\nexport default MessageContainer;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,SAASC,gBAAT,QAAiC,yCAAjC;;AAEA,MAAMC,gBAAgB,GAAG,QAA2C;EAAA,IAA1C;IAAEC;EAAF,CAA0C;EAClE,oBAAO,oBAAC,IAAD;IAAM,KAAK,EAAEC,MAAM,CAACC;EAApB,GAAgCF,QAAhC,CAAP;AACD,CAFD;;AAIA,MAAMC,MAAM,GAAGH,gBAAgB,CAAC;EAC9BI,SAAS,EAAE;IACTC,aAAa,EAAE,QADN;IAETC,iBAAiB,EAAE;EAFV;AADmB,CAAD,CAA/B;AAOA,eAAeL,gBAAf"}

package/lib/module/components/MessageRenderer/MessageDateSeparator.js

@@ -0,0 +1,44 @@
+import isSameDay from 'date-fns/isSameDay';
+import React from 'react';
+import { View } from 'react-native';
+import { Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { useLocalization } from '../../hooks/useContext';
+
+const MessageDateSeparator = _ref => {
+  let {
+    message,
+    prevMessage
+  } = _ref;
+  const {
+    STRINGS
+  } = useLocalization();
+  const {
+    colors
+  } = useUIKitTheme();
+  const sameDay = isSameDay(message.createdAt, (prevMessage === null || prevMessage === void 0 ? void 0 : prevMessage.createdAt) ?? 0);
+  if (sameDay) return null;
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.container
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles.view, {
+      backgroundColor: colors.ui.dateSeparator.default.none.background
+    }]
+  }, /*#__PURE__*/React.createElement(Text, {
+    caption1: true,
+    color: colors.ui.dateSeparator.default.none.text
+  }, STRINGS.GROUP_CHANNEL.LIST_DATE_SEPARATOR(new Date(message.createdAt)))));
+};
+
+const styles = createStyleSheet({
+  container: {
+    alignItems: 'center',
+    marginVertical: 16
+  },
+  view: {
+    borderRadius: 10,
+    paddingVertical: 4,
+    paddingHorizontal: 10
+  }
+});
+export default MessageDateSeparator;
+//# sourceMappingURL=MessageDateSeparator.js.map

package/lib/module/components/MessageRenderer/MessageDateSeparator.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["isSameDay","React","View","Text","createStyleSheet","useUIKitTheme","useLocalization","MessageDateSeparator","message","prevMessage","STRINGS","colors","sameDay","createdAt","styles","container","view","backgroundColor","ui","dateSeparator","default","none","background","text","GROUP_CHANNEL","LIST_DATE_SEPARATOR","Date","alignItems","marginVertical","borderRadius","paddingVertical","paddingHorizontal"],"sources":["MessageDateSeparator.tsx"],"sourcesContent":["import isSameDay from 'date-fns/isSameDay';\nimport React from 'react';\nimport { View } from 'react-native';\n\nimport { Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport type { SendbirdMessage } from '@sendbird/uikit-utils';\n\nimport { useLocalization } from '../../hooks/useContext';\n\ntype Props = {\n  message: SendbirdMessage;\n  prevMessage?: SendbirdMessage;\n};\n\nconst MessageDateSeparator = ({ message, prevMessage }: Props) => {\n  const { STRINGS } = useLocalization();\n  const { colors } = useUIKitTheme();\n  const sameDay = isSameDay(message.createdAt, prevMessage?.createdAt ?? 0);\n  if (sameDay) return null;\n  return (\n    <View style={styles.container}>\n      <View style={[styles.view, { backgroundColor: colors.ui.dateSeparator.default.none.background }]}>\n        <Text caption1 color={colors.ui.dateSeparator.default.none.text}>\n          {STRINGS.GROUP_CHANNEL.LIST_DATE_SEPARATOR(new Date(message.createdAt))}\n        </Text>\n      </View>\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    alignItems: 'center',\n    marginVertical: 16,\n  },\n  view: {\n    borderRadius: 10,\n    paddingVertical: 4,\n    paddingHorizontal: 10,\n  },\n});\n\nexport default MessageDateSeparator;\n"],"mappings":"AAAA,OAAOA,SAAP,MAAsB,oBAAtB;AACA,OAAOC,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,SAASC,IAAT,EAAeC,gBAAf,EAAiCC,aAAjC,QAAsD,yCAAtD;AAGA,SAASC,eAAT,QAAgC,wBAAhC;;AAOA,MAAMC,oBAAoB,GAAG,QAAqC;EAAA,IAApC;IAAEC,OAAF;IAAWC;EAAX,CAAoC;EAChE,MAAM;IAAEC;EAAF,IAAcJ,eAAe,EAAnC;EACA,MAAM;IAAEK;EAAF,IAAaN,aAAa,EAAhC;EACA,MAAMO,OAAO,GAAGZ,SAAS,CAACQ,OAAO,CAACK,SAAT,EAAoB,CAAAJ,WAAW,SAAX,IAAAA,WAAW,WAAX,YAAAA,WAAW,CAAEI,SAAb,KAA0B,CAA9C,CAAzB;EACA,IAAID,OAAJ,EAAa,OAAO,IAAP;EACb,oBACE,oBAAC,IAAD;IAAM,KAAK,EAAEE,MAAM,CAACC;EAApB,gBACE,oBAAC,IAAD;IAAM,KAAK,EAAE,CAACD,MAAM,CAACE,IAAR,EAAc;MAAEC,eAAe,EAAEN,MAAM,CAACO,EAAP,CAAUC,aAAV,CAAwBC,OAAxB,CAAgCC,IAAhC,CAAqCC;IAAxD,CAAd;EAAb,gBACE,oBAAC,IAAD;IAAM,QAAQ,MAAd;IAAe,KAAK,EAAEX,MAAM,CAACO,EAAP,CAAUC,aAAV,CAAwBC,OAAxB,CAAgCC,IAAhC,CAAqCE;EAA3D,GACGb,OAAO,CAACc,aAAR,CAAsBC,mBAAtB,CAA0C,IAAIC,IAAJ,CAASlB,OAAO,CAACK,SAAjB,CAA1C,CADH,CADF,CADF,CADF;AASD,CAdD;;AAgBA,MAAMC,MAAM,GAAGV,gBAAgB,CAAC;EAC9BW,SAAS,EAAE;IACTY,UAAU,EAAE,QADH;IAETC,cAAc,EAAE;EAFP,CADmB;EAK9BZ,IAAI,EAAE;IACJa,YAAY,EAAE,EADV;IAEJC,eAAe,EAAE,CAFb;IAGJC,iBAAiB,EAAE;EAHf;AALwB,CAAD,CAA/B;AAYA,eAAexB,oBAAf"}

package/lib/module/components/MessageRenderer/MessageIncomingAvatar.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { View } from 'react-native';
+import { Avatar, createStyleSheet } from '@sendbird/uikit-react-native-foundation';
+
+const MessageIncomingAvatar = _ref => {
+  var _message$sender;
+
+  let {
+    message,
+    grouping
+  } = _ref;
+  if (grouping) return /*#__PURE__*/React.createElement(View, {
+    style: styles.avatar
+  });
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.avatar
+  }, (message.isFileMessage() || message.isUserMessage()) && /*#__PURE__*/React.createElement(Avatar, {
+    size: 26,
+    uri: (_message$sender = message.sender) === null || _message$sender === void 0 ? void 0 : _message$sender.profileUrl
+  }));
+};
+
+const styles = createStyleSheet({
+  avatar: {
+    width: 26,
+    marginRight: 12
+  }
+});
+export default MessageIncomingAvatar;
+//# sourceMappingURL=MessageIncomingAvatar.js.map

package/lib/module/components/MessageRenderer/MessageIncomingAvatar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","Avatar","createStyleSheet","MessageIncomingAvatar","message","grouping","styles","avatar","isFileMessage","isUserMessage","sender","profileUrl","width","marginRight"],"sources":["MessageIncomingAvatar.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport { Avatar, createStyleSheet } from '@sendbird/uikit-react-native-foundation';\nimport type { SendbirdMessage } from '@sendbird/uikit-utils';\n\ntype Props = {\n  message: SendbirdMessage;\n  grouping: boolean;\n};\nconst MessageIncomingAvatar = ({ message, grouping }: Props) => {\n  if (grouping) return <View style={styles.avatar} />;\n  return (\n    <View style={styles.avatar}>\n      {(message.isFileMessage() || message.isUserMessage()) && <Avatar size={26} uri={message.sender?.profileUrl} />}\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  avatar: {\n    width: 26,\n    marginRight: 12,\n  },\n});\n\nexport default MessageIncomingAvatar;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,SAASC,MAAT,EAAiBC,gBAAjB,QAAyC,yCAAzC;;AAOA,MAAMC,qBAAqB,GAAG,QAAkC;EAAA;;EAAA,IAAjC;IAAEC,OAAF;IAAWC;EAAX,CAAiC;EAC9D,IAAIA,QAAJ,EAAc,oBAAO,oBAAC,IAAD;IAAM,KAAK,EAAEC,MAAM,CAACC;EAApB,EAAP;EACd,oBACE,oBAAC,IAAD;IAAM,KAAK,EAAED,MAAM,CAACC;EAApB,GACG,CAACH,OAAO,CAACI,aAAR,MAA2BJ,OAAO,CAACK,aAAR,EAA5B,kBAAwD,oBAAC,MAAD;IAAQ,IAAI,EAAE,EAAd;IAAkB,GAAG,qBAAEL,OAAO,CAACM,MAAV,oDAAE,gBAAgBC;EAAvC,EAD3D,CADF;AAKD,CAPD;;AASA,MAAML,MAAM,GAAGJ,gBAAgB,CAAC;EAC9BK,MAAM,EAAE;IACNK,KAAK,EAAE,EADD;IAENC,WAAW,EAAE;EAFP;AADsB,CAAD,CAA/B;AAOA,eAAeV,qBAAf"}

package/lib/module/components/MessageRenderer/MessageIncomingSenderName.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { View } from 'react-native';
+import { Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { useLocalization } from '../../hooks/useContext';
+
+const MessageIncomingSenderName = _ref => {
+  var _message$sender;
+
+  let {
+    message,
+    grouping
+  } = _ref;
+  const {
+    colors
+  } = useUIKitTheme();
+  const {
+    STRINGS
+  } = useLocalization();
+  if (grouping) return null;
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.sender
+  }, (message.isFileMessage() || message.isUserMessage()) && /*#__PURE__*/React.createElement(Text, {
+    caption1: true,
+    color: colors.ui.message.incoming.enabled.textSenderName
+  }, ((_message$sender = message.sender) === null || _message$sender === void 0 ? void 0 : _message$sender.nickname) || STRINGS.LABELS.USER_NO_NAME));
+};
+
+const styles = createStyleSheet({
+  sender: {
+    marginLeft: 12,
+    marginBottom: 4
+  }
+});
+export default MessageIncomingSenderName;
+//# sourceMappingURL=MessageIncomingSenderName.js.map

package/lib/module/components/MessageRenderer/MessageIncomingSenderName.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","Text","createStyleSheet","useUIKitTheme","useLocalization","MessageIncomingSenderName","message","grouping","colors","STRINGS","styles","sender","isFileMessage","isUserMessage","ui","incoming","enabled","textSenderName","nickname","LABELS","USER_NO_NAME","marginLeft","marginBottom"],"sources":["MessageIncomingSenderName.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport { Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport type { SendbirdMessage } from '@sendbird/uikit-utils';\n\nimport { useLocalization } from '../../hooks/useContext';\n\ntype Props = {\n  message: SendbirdMessage;\n  grouping: boolean;\n};\nconst MessageIncomingSenderName = ({ message, grouping }: Props) => {\n  const { colors } = useUIKitTheme();\n  const { STRINGS } = useLocalization();\n  if (grouping) return null;\n\n  return (\n    <View style={styles.sender}>\n      {(message.isFileMessage() || message.isUserMessage()) && (\n        <Text caption1 color={colors.ui.message.incoming.enabled.textSenderName}>\n          {message.sender?.nickname || STRINGS.LABELS.USER_NO_NAME}\n        </Text>\n      )}\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  sender: {\n    marginLeft: 12,\n    marginBottom: 4,\n  },\n});\n\nexport default MessageIncomingSenderName;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,SAASC,IAAT,EAAeC,gBAAf,EAAiCC,aAAjC,QAAsD,yCAAtD;AAGA,SAASC,eAAT,QAAgC,wBAAhC;;AAMA,MAAMC,yBAAyB,GAAG,QAAkC;EAAA;;EAAA,IAAjC;IAAEC,OAAF;IAAWC;EAAX,CAAiC;EAClE,MAAM;IAAEC;EAAF,IAAaL,aAAa,EAAhC;EACA,MAAM;IAAEM;EAAF,IAAcL,eAAe,EAAnC;EACA,IAAIG,QAAJ,EAAc,OAAO,IAAP;EAEd,oBACE,oBAAC,IAAD;IAAM,KAAK,EAAEG,MAAM,CAACC;EAApB,GACG,CAACL,OAAO,CAACM,aAAR,MAA2BN,OAAO,CAACO,aAAR,EAA5B,kBACC,oBAAC,IAAD;IAAM,QAAQ,MAAd;IAAe,KAAK,EAAEL,MAAM,CAACM,EAAP,CAAUR,OAAV,CAAkBS,QAAlB,CAA2BC,OAA3B,CAAmCC;EAAzD,GACG,oBAAAX,OAAO,CAACK,MAAR,oEAAgBO,QAAhB,KAA4BT,OAAO,CAACU,MAAR,CAAeC,YAD9C,CAFJ,CADF;AASD,CAdD;;AAgBA,MAAMV,MAAM,GAAGR,gBAAgB,CAAC;EAC9BS,MAAM,EAAE;IACNU,UAAU,EAAE,EADN;IAENC,YAAY,EAAE;EAFR;AADsB,CAAD,CAA/B;AAOA,eAAejB,yBAAf"}