@sendbird/uikit-react-native 3.5.4 → 3.7.0

package/lib/module/components/ThreadParentMessageRenderer/ThreadParentMessage.file.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Box, Icon, PressBox, Text, createStyleSheet } from '@sendbird/uikit-react-native-foundation';
+import { useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { getFileExtension, getFileType, truncate } from '@sendbird/uikit-utils';
+import { useLocalization } from './../../hooks/useContext';
+const ThreadParentMessageFile = props => {
+  const fileMessage = props.parentMessage;
+  if (!fileMessage) return null;
+  const {
+    STRINGS
+  } = useLocalization();
+  const {
+    select,
+    colors,
+    palette
+  } = useUIKitTheme();
+  const fileType = getFileType(fileMessage.type || getFileExtension(fileMessage.name));
+  const fileName = STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_FILE_TITLE(fileMessage) ?? fileMessage.name;
+  return /*#__PURE__*/React.createElement(Box, {
+    style: styles.fileBubbleContainer,
+    backgroundColor: select({
+      light: palette.background100,
+      dark: palette.background400
+    })
+  }, /*#__PURE__*/React.createElement(PressBox, {
+    onPress: props.onPress,
+    onLongPress: props.onLongPress
+  }, /*#__PURE__*/React.createElement(Box, {
+    style: styles.iconBackground
+  }, /*#__PURE__*/React.createElement(Icon.File, {
+    fileType: fileType,
+    size: 24,
+    containerStyle: {
+      backgroundColor: palette.background50,
+      borderRadius: 8
+    }
+  }), /*#__PURE__*/React.createElement(Text, {
+    body3: true,
+    numberOfLines: 1,
+    color: colors.onBackground01,
+    style: styles.name
+  }, truncate(fileName, {
+    mode: 'mid',
+    maxLen: 30
+  })))));
+};
+const styles = createStyleSheet({
+  fileBubbleContainer: {
+    alignSelf: 'flex-start',
+    overflow: 'hidden',
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderRadius: 16,
+    paddingHorizontal: 12,
+    paddingVertical: 8
+  },
+  iconBackground: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  name: {
+    flexShrink: 1,
+    marginLeft: 8
+  }
+});
+export default ThreadParentMessageFile;
+//# sourceMappingURL=ThreadParentMessage.file.js.map

package/lib/module/components/ThreadParentMessageRenderer/ThreadParentMessage.file.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Box","Icon","PressBox","Text","createStyleSheet","useUIKitTheme","getFileExtension","getFileType","truncate","useLocalization","ThreadParentMessageFile","props","fileMessage","parentMessage","STRINGS","select","colors","palette","fileType","type","name","fileName","GROUP_CHANNEL","MESSAGE_BUBBLE_FILE_TITLE","createElement","style","styles","fileBubbleContainer","backgroundColor","light","background100","dark","background400","onPress","onLongPress","iconBackground","File","size","containerStyle","background50","borderRadius","body3","numberOfLines","color","onBackground01","mode","maxLen","alignSelf","overflow","flexDirection","alignItems","paddingHorizontal","paddingVertical","flexShrink","marginLeft"],"sources":["ThreadParentMessage.file.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Box, Icon, PressBox, Text, createStyleSheet } from '@sendbird/uikit-react-native-foundation';\nimport { useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { SendbirdFileMessage, getFileExtension, getFileType, truncate } from '@sendbird/uikit-utils';\n\nimport { useLocalization } from './../../hooks/useContext';\nimport { ThreadParentMessageRendererProps } from './index';\n\nconst ThreadParentMessageFile = (props: ThreadParentMessageRendererProps) => {\n  const fileMessage: SendbirdFileMessage = props.parentMessage as SendbirdFileMessage;\n  if (!fileMessage) return null;\n\n  const { STRINGS } = useLocalization();\n  const { select, colors, palette } = useUIKitTheme();\n\n  const fileType = getFileType(fileMessage.type || getFileExtension(fileMessage.name));\n  const fileName = STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_FILE_TITLE(fileMessage) ?? fileMessage.name;\n\n  return (\n    <Box\n      style={styles.fileBubbleContainer}\n      backgroundColor={select({ light: palette.background100, dark: palette.background400 })}\n    >\n      <PressBox onPress={props.onPress} onLongPress={props.onLongPress}>\n        <Box style={styles.iconBackground}>\n          <Icon.File\n            fileType={fileType}\n            size={24}\n            containerStyle={{ backgroundColor: palette.background50, borderRadius: 8 }}\n          />\n          <Text body3 numberOfLines={1} color={colors.onBackground01} style={styles.name}>\n            {truncate(fileName, { mode: 'mid', maxLen: 30 })}\n          </Text>\n        </Box>\n      </PressBox>\n    </Box>\n  );\n};\n\nconst styles = createStyleSheet({\n  fileBubbleContainer: {\n    alignSelf: 'flex-start',\n    overflow: 'hidden',\n    flexDirection: 'row',\n    alignItems: 'center',\n    borderRadius: 16,\n    paddingHorizontal: 12,\n    paddingVertical: 8,\n  },\n  iconBackground: {\n    flexDirection: 'row',\n    alignItems: 'center',\n  },\n  name: {\n    flexShrink: 1,\n    marginLeft: 8,\n  },\n});\n\nexport default ThreadParentMessageFile;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,GAAG,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,gBAAgB,QAAQ,yCAAyC;AACrG,SAASC,aAAa,QAAQ,yCAAyC;AACvE,SAA8BC,gBAAgB,EAAEC,WAAW,EAAEC,QAAQ,QAAQ,uBAAuB;AAEpG,SAASC,eAAe,QAAQ,0BAA0B;AAG1D,MAAMC,uBAAuB,GAAIC,KAAuC,IAAK;EAC3E,MAAMC,WAAgC,GAAGD,KAAK,CAACE,aAAoC;EACnF,IAAI,CAACD,WAAW,EAAE,OAAO,IAAI;EAE7B,MAAM;IAAEE;EAAQ,CAAC,GAAGL,eAAe,EAAE;EACrC,MAAM;IAAEM,MAAM;IAAEC,MAAM;IAAEC;EAAQ,CAAC,GAAGZ,aAAa,EAAE;EAEnD,MAAMa,QAAQ,GAAGX,WAAW,CAACK,WAAW,CAACO,IAAI,IAAIb,gBAAgB,CAACM,WAAW,CAACQ,IAAI,CAAC,CAAC;EACpF,MAAMC,QAAQ,GAAGP,OAAO,CAACQ,aAAa,CAACC,yBAAyB,CAACX,WAAW,CAAC,IAAIA,WAAW,CAACQ,IAAI;EAEjG,oBACErB,KAAA,CAAAyB,aAAA,CAACxB,GAAG;IACFyB,KAAK,EAAEC,MAAM,CAACC,mBAAoB;IAClCC,eAAe,EAAEb,MAAM,CAAC;MAAEc,KAAK,EAAEZ,OAAO,CAACa,aAAa;MAAEC,IAAI,EAAEd,OAAO,CAACe;IAAc,CAAC;EAAE,gBAEvFjC,KAAA,CAAAyB,aAAA,CAACtB,QAAQ;IAAC+B,OAAO,EAAEtB,KAAK,CAACsB,OAAQ;IAACC,WAAW,EAAEvB,KAAK,CAACuB;EAAY,gBAC/DnC,KAAA,CAAAyB,aAAA,CAACxB,GAAG;IAACyB,KAAK,EAAEC,MAAM,CAACS;EAAe,gBAChCpC,KAAA,CAAAyB,aAAA,CAACvB,IAAI,CAACmC,IAAI;IACRlB,QAAQ,EAAEA,QAAS;IACnBmB,IAAI,EAAE,EAAG;IACTC,cAAc,EAAE;MAAEV,eAAe,EAAEX,OAAO,CAACsB,YAAY;MAAEC,YAAY,EAAE;IAAE;EAAE,EAC3E,eACFzC,KAAA,CAAAyB,aAAA,CAACrB,IAAI;IAACsC,KAAK;IAACC,aAAa,EAAE,CAAE;IAACC,KAAK,EAAE3B,MAAM,CAAC4B,cAAe;IAACnB,KAAK,EAAEC,MAAM,CAACN;EAAK,GAC5EZ,QAAQ,CAACa,QAAQ,EAAE;IAAEwB,IAAI,EAAE,KAAK;IAAEC,MAAM,EAAE;EAAG,CAAC,CAAC,CAC3C,CACH,CACG,CACP;AAEV,CAAC;AAED,MAAMpB,MAAM,GAAGtB,gBAAgB,CAAC;EAC9BuB,mBAAmB,EAAE;IACnBoB,SAAS,EAAE,YAAY;IACvBC,QAAQ,EAAE,QAAQ;IAClBC,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBV,YAAY,EAAE,EAAE;IAChBW,iBAAiB,EAAE,EAAE;IACrBC,eAAe,EAAE;EACnB,CAAC;EACDjB,cAAc,EAAE;IACdc,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE;EACd,CAAC;EACD9B,IAAI,EAAE;IACJiC,UAAU,EAAE,CAAC;IACbC,UAAU,EAAE;EACd;AACF,CAAC,CAAC;AAEF,eAAe5C,uBAAuB"}

package/lib/module/components/ThreadParentMessageRenderer/ThreadParentMessage.file.video.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Box, PressBox, VideoThumbnail, createStyleSheet } from '@sendbird/uikit-react-native-foundation';
+import { getThumbnailUriFromFileMessage } from '@sendbird/uikit-utils';
+const ThreadParentMessageFileVideo = props => {
+  const fileMessage = props.parentMessage;
+  if (!fileMessage) return null;
+  const uri = getThumbnailUriFromFileMessage(fileMessage);
+  return /*#__PURE__*/React.createElement(Box, {
+    style: styles.container
+  }, /*#__PURE__*/React.createElement(PressBox, {
+    activeOpacity: 0.8,
+    onPress: props.onPress,
+    onLongPress: props.onLongPress
+  }, /*#__PURE__*/React.createElement(VideoThumbnail, {
+    style: styles.image,
+    source: uri,
+    fetchThumbnailFromVideoSource: props.fetchThumbnailFromVideoSource
+  })));
+};
+const styles = createStyleSheet({
+  container: {
+    borderRadius: 16,
+    overflow: 'hidden'
+  },
+  image: {
+    maxWidth: 240,
+    width: 240,
+    height: 160,
+    borderRadius: 16,
+    overflow: 'hidden'
+  }
+});
+export default ThreadParentMessageFileVideo;
+//# sourceMappingURL=ThreadParentMessage.file.video.js.map

package/lib/module/components/ThreadParentMessageRenderer/ThreadParentMessage.file.video.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Box","PressBox","VideoThumbnail","createStyleSheet","getThumbnailUriFromFileMessage","ThreadParentMessageFileVideo","props","fileMessage","parentMessage","uri","createElement","style","styles","container","activeOpacity","onPress","onLongPress","image","source","fetchThumbnailFromVideoSource","borderRadius","overflow","maxWidth","width","height"],"sources":["ThreadParentMessage.file.video.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Box, PressBox, VideoThumbnail, createStyleSheet } from '@sendbird/uikit-react-native-foundation';\nimport { SendbirdFileMessage, getThumbnailUriFromFileMessage } from '@sendbird/uikit-utils';\n\nimport { ThreadParentMessageRendererProps } from './index';\n\ntype Props = ThreadParentMessageRendererProps<{\n  fetchThumbnailFromVideoSource: (uri: string) => Promise<{ path: string } | null>;\n}>;\n\nconst ThreadParentMessageFileVideo = (props: Props) => {\n  const fileMessage: SendbirdFileMessage = props.parentMessage as SendbirdFileMessage;\n  if (!fileMessage) return null;\n\n  const uri = getThumbnailUriFromFileMessage(fileMessage);\n\n  return (\n    <Box style={styles.container}>\n      <PressBox activeOpacity={0.8} onPress={props.onPress} onLongPress={props.onLongPress}>\n        <VideoThumbnail\n          style={styles.image}\n          source={uri}\n          fetchThumbnailFromVideoSource={props.fetchThumbnailFromVideoSource}\n        />\n      </PressBox>\n    </Box>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    borderRadius: 16,\n    overflow: 'hidden',\n  },\n  image: {\n    maxWidth: 240,\n    width: 240,\n    height: 160,\n    borderRadius: 16,\n    overflow: 'hidden',\n  },\n});\n\nexport default ThreadParentMessageFileVideo;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,GAAG,EAAEC,QAAQ,EAAEC,cAAc,EAAEC,gBAAgB,QAAQ,yCAAyC;AACzG,SAA8BC,8BAA8B,QAAQ,uBAAuB;AAQ3F,MAAMC,4BAA4B,GAAIC,KAAY,IAAK;EACrD,MAAMC,WAAgC,GAAGD,KAAK,CAACE,aAAoC;EACnF,IAAI,CAACD,WAAW,EAAE,OAAO,IAAI;EAE7B,MAAME,GAAG,GAAGL,8BAA8B,CAACG,WAAW,CAAC;EAEvD,oBACER,KAAA,CAAAW,aAAA,CAACV,GAAG;IAACW,KAAK,EAAEC,MAAM,CAACC;EAAU,gBAC3Bd,KAAA,CAAAW,aAAA,CAACT,QAAQ;IAACa,aAAa,EAAE,GAAI;IAACC,OAAO,EAAET,KAAK,CAACS,OAAQ;IAACC,WAAW,EAAEV,KAAK,CAACU;EAAY,gBACnFjB,KAAA,CAAAW,aAAA,CAACR,cAAc;IACbS,KAAK,EAAEC,MAAM,CAACK,KAAM;IACpBC,MAAM,EAAET,GAAI;IACZU,6BAA6B,EAAEb,KAAK,CAACa;EAA8B,EACnE,CACO,CACP;AAEV,CAAC;AAED,MAAMP,MAAM,GAAGT,gBAAgB,CAAC;EAC9BU,SAAS,EAAE;IACTO,YAAY,EAAE,EAAE;IAChBC,QAAQ,EAAE;EACZ,CAAC;EACDJ,KAAK,EAAE;IACLK,QAAQ,EAAE,GAAG;IACbC,KAAK,EAAE,GAAG;IACVC,MAAM,EAAE,GAAG;IACXJ,YAAY,EAAE,EAAE;IAChBC,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC;AAEF,eAAehB,4BAA4B"}

package/lib/module/components/ThreadParentMessageRenderer/ThreadParentMessage.file.voice.js

@@ -0,0 +1,87 @@
+import React, { useEffect, useState } from 'react';
+import { Box, Icon, PressBox, Text, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { LoadingSpinner, ProgressBar } from '@sendbird/uikit-react-native-foundation';
+import { createStyleSheet } from '@sendbird/uikit-react-native-foundation';
+import { millsToMSS } from '@sendbird/uikit-utils';
+const ThreadParentMessageFileVoice = props => {
+  const {
+    onLongPress,
+    onToggleVoiceMessage,
+    parentMessage,
+    durationMetaArrayKey = 'KEY_VOICE_MESSAGE_DURATION',
+    onUnmount
+  } = props;
+  const fileMessage = parentMessage;
+  if (!fileMessage) return null;
+  const {
+    colors
+  } = useUIKitTheme();
+  const [state, setState] = useState(() => {
+    var _meta$value;
+    const meta = fileMessage.metaArrays.find(it => it.key === durationMetaArrayKey);
+    const value = meta === null || meta === void 0 ? void 0 : (_meta$value = meta.value) === null || _meta$value === void 0 ? void 0 : _meta$value[0];
+    const initialDuration = value ? parseInt(value, 10) : 0;
+    return {
+      status: 'paused',
+      currentTime: 0,
+      duration: initialDuration
+    };
+  });
+  useEffect(() => {
+    return () => {
+      onUnmount();
+    };
+  }, []);
+  const uiColors = colors.ui.groupChannelMessage['incoming'];
+  const remainingTime = state.duration - state.currentTime;
+  return /*#__PURE__*/React.createElement(Box, {
+    style: styles.container,
+    backgroundColor: uiColors.enabled.background
+  }, /*#__PURE__*/React.createElement(PressBox, {
+    onPress: () => onToggleVoiceMessage === null || onToggleVoiceMessage === void 0 ? void 0 : onToggleVoiceMessage(state, setState),
+    onLongPress: onLongPress
+  }, /*#__PURE__*/React.createElement(ProgressBar, {
+    current: state.currentTime,
+    total: state.duration,
+    style: {
+      minWidth: 136,
+      height: 44
+    },
+    trackColor: uiColors.enabled.voiceProgressTrack,
+    overlay: /*#__PURE__*/React.createElement(Box, {
+      flex: 1,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingHorizontal: 12
+    }, state.status === 'preparing' ? /*#__PURE__*/React.createElement(LoadingSpinner, {
+      size: 24,
+      color: uiColors.enabled.voiceSpinner
+    }) : /*#__PURE__*/React.createElement(Icon, {
+      size: 16,
+      containerStyle: {
+        backgroundColor: uiColors.enabled.voiceActionIconBackground,
+        padding: 6,
+        borderRadius: 16
+      },
+      icon: state.status === 'paused' ? 'play' : 'pause'
+    }), /*#__PURE__*/React.createElement(Text, {
+      body3: true,
+      style: {
+        lineHeight: undefined,
+        marginLeft: 6,
+        opacity: 0.88
+      },
+      color: uiColors.enabled.textVoicePlaytime
+    }, millsToMSS(state.currentTime === 0 ? state.duration : remainingTime)))
+  })));
+};
+const styles = createStyleSheet({
+  container: {
+    borderRadius: 16,
+    overflow: 'hidden',
+    maxWidth: 136
+  }
+});
+export default ThreadParentMessageFileVoice;
+//# sourceMappingURL=ThreadParentMessage.file.voice.js.map

package/lib/module/components/ThreadParentMessageRenderer/ThreadParentMessage.file.voice.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useState","Box","Icon","PressBox","Text","useUIKitTheme","LoadingSpinner","ProgressBar","createStyleSheet","millsToMSS","ThreadParentMessageFileVoice","props","onLongPress","onToggleVoiceMessage","parentMessage","durationMetaArrayKey","onUnmount","fileMessage","colors","state","setState","_meta$value","meta","metaArrays","find","it","key","value","initialDuration","parseInt","status","currentTime","duration","uiColors","ui","groupChannelMessage","remainingTime","createElement","style","styles","container","backgroundColor","enabled","background","onPress","current","total","minWidth","height","trackColor","voiceProgressTrack","overlay","flex","flexDirection","alignItems","justifyContent","paddingHorizontal","size","color","voiceSpinner","containerStyle","voiceActionIconBackground","padding","borderRadius","icon","body3","lineHeight","undefined","marginLeft","opacity","textVoicePlaytime","overflow","maxWidth"],"sources":["ThreadParentMessage.file.voice.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport { Box, Icon, PressBox, Text, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { LoadingSpinner, ProgressBar } from '@sendbird/uikit-react-native-foundation';\nimport { createStyleSheet } from '@sendbird/uikit-react-native-foundation';\nimport { SendbirdFileMessage, millsToMSS } from '@sendbird/uikit-utils';\n\nimport { ThreadParentMessageRendererProps } from './index';\n\nexport type VoiceFileMessageState = {\n  status: 'preparing' | 'playing' | 'paused';\n  currentTime: number;\n  duration: number;\n};\n\ntype Props = ThreadParentMessageRendererProps<{\n  durationMetaArrayKey?: string;\n  onUnmount: () => void;\n}>;\n\nconst ThreadParentMessageFileVoice = (props: Props) => {\n  const {\n    onLongPress,\n    onToggleVoiceMessage,\n    parentMessage,\n    durationMetaArrayKey = 'KEY_VOICE_MESSAGE_DURATION',\n    onUnmount,\n  } = props;\n\n  const fileMessage: SendbirdFileMessage = parentMessage as SendbirdFileMessage;\n  if (!fileMessage) return null;\n\n  const { colors } = useUIKitTheme();\n\n  const [state, setState] = useState<VoiceFileMessageState>(() => {\n    const meta = fileMessage.metaArrays.find((it) => it.key === durationMetaArrayKey);\n    const value = meta?.value?.[0];\n    const initialDuration = value ? parseInt(value, 10) : 0;\n    return {\n      status: 'paused',\n      currentTime: 0,\n      duration: initialDuration,\n    };\n  });\n\n  useEffect(() => {\n    return () => {\n      onUnmount();\n    };\n  }, []);\n\n  const uiColors = colors.ui.groupChannelMessage['incoming'];\n  const remainingTime = state.duration - state.currentTime;\n\n  return (\n    <Box style={styles.container} backgroundColor={uiColors.enabled.background}>\n      <PressBox onPress={() => onToggleVoiceMessage?.(state, setState)} onLongPress={onLongPress}>\n        <ProgressBar\n          current={state.currentTime}\n          total={state.duration}\n          style={{ minWidth: 136, height: 44 }}\n          trackColor={uiColors.enabled.voiceProgressTrack}\n          overlay={\n            <Box\n              flex={1}\n              flexDirection={'row'}\n              alignItems={'center'}\n              justifyContent={'space-between'}\n              paddingHorizontal={12}\n            >\n              {state.status === 'preparing' ? (\n                <LoadingSpinner size={24} color={uiColors.enabled.voiceSpinner} />\n              ) : (\n                <Icon\n                  size={16}\n                  containerStyle={{\n                    backgroundColor: uiColors.enabled.voiceActionIconBackground,\n                    padding: 6,\n                    borderRadius: 16,\n                  }}\n                  icon={state.status === 'paused' ? 'play' : 'pause'}\n                />\n              )}\n              <Text\n                body3\n                style={{ lineHeight: undefined, marginLeft: 6, opacity: 0.88 }}\n                color={uiColors.enabled.textVoicePlaytime}\n              >\n                {millsToMSS(state.currentTime === 0 ? state.duration : remainingTime)}\n              </Text>\n            </Box>\n          }\n        />\n      </PressBox>\n    </Box>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    borderRadius: 16,\n    overflow: 'hidden',\n    maxWidth: 136,\n  },\n});\n\nexport default ThreadParentMessageFileVoice;\n"],"mappings":"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"}

package/lib/module/components/ThreadParentMessageRenderer/ThreadParentMessage.user.js

@@ -0,0 +1,54 @@
+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 { Text, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { RegexText, createStyleSheet } from '@sendbird/uikit-react-native-foundation';
+import { urlRegexStrict } from '@sendbird/uikit-utils';
+const ThreadParentMessageUser = props => {
+  var _props$renderRegexTex;
+  const userMessage = props.parentMessage;
+  if (!userMessage) return null;
+  const {
+    colors
+  } = useUIKitTheme();
+  return /*#__PURE__*/React.createElement(Text, {
+    body3: true,
+    color: colors.onBackground01,
+    suppressHighlighting: true
+  }, /*#__PURE__*/React.createElement(RegexText, {
+    body3: true,
+    color: colors.onBackground01,
+    patterns: [...(props.regexTextPatterns ?? []), {
+      regex: urlRegexStrict,
+      replacer(_ref) {
+        let {
+          match,
+          parentProps,
+          keyPrefix,
+          index
+        } = _ref;
+        return /*#__PURE__*/React.createElement(Text, _extends({}, parentProps, {
+          key: `${keyPrefix}-${index}`,
+          onPress: () => {
+            var _props$onPressURL;
+            return (_props$onPressURL = props.onPressURL) === null || _props$onPressURL === void 0 ? void 0 : _props$onPressURL.call(props, match);
+          },
+          style: [parentProps === null || parentProps === void 0 ? void 0 : parentProps.style, styles.urlText]
+        }), match);
+      }
+    }]
+  }, (_props$renderRegexTex = props.renderRegexTextChildren) === null || _props$renderRegexTex === void 0 ? void 0 : _props$renderRegexTex.call(props, userMessage)), Boolean(userMessage.updatedAt) && /*#__PURE__*/React.createElement(Text, {
+    body3: true,
+    color: colors.onBackground02
+  }, ' (edited)'));
+};
+const styles = createStyleSheet({
+  bubble: {
+    paddingHorizontal: 12,
+    paddingVertical: 6
+  },
+  urlText: {
+    textDecorationLine: 'underline'
+  }
+});
+export default ThreadParentMessageUser;
+//# sourceMappingURL=ThreadParentMessage.user.js.map

package/lib/module/components/ThreadParentMessageRenderer/ThreadParentMessage.user.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Text","useUIKitTheme","RegexText","createStyleSheet","urlRegexStrict","ThreadParentMessageUser","props","_props$renderRegexTex","userMessage","parentMessage","colors","createElement","body3","color","onBackground01","suppressHighlighting","patterns","regexTextPatterns","regex","replacer","_ref","match","parentProps","keyPrefix","index","_extends","key","onPress","_props$onPressURL","onPressURL","call","style","styles","urlText","renderRegexTextChildren","Boolean","updatedAt","onBackground02","bubble","paddingHorizontal","paddingVertical","textDecorationLine"],"sources":["ThreadParentMessage.user.tsx"],"sourcesContent":["import React from 'react';\n\nimport { type RegexTextPattern, Text, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { RegexText, createStyleSheet } from '@sendbird/uikit-react-native-foundation';\nimport { SendbirdUserMessage, urlRegexStrict } from '@sendbird/uikit-utils';\n\nimport { ThreadParentMessageRendererProps } from './index';\n\ntype Props = ThreadParentMessageRendererProps<{\n  regexTextPatterns?: RegexTextPattern[];\n  renderRegexTextChildren?: (message: SendbirdUserMessage) => string;\n}>;\n\nconst ThreadParentMessageUser = (props: Props) => {\n  const userMessage: SendbirdUserMessage = props.parentMessage as SendbirdUserMessage;\n  if (!userMessage) return null;\n\n  const { colors } = useUIKitTheme();\n\n  return (\n    <Text body3 color={colors.onBackground01} suppressHighlighting>\n      <RegexText\n        body3\n        color={colors.onBackground01}\n        patterns={[\n          ...(props.regexTextPatterns ?? []),\n          {\n            regex: urlRegexStrict,\n            replacer({ match, parentProps, keyPrefix, index }) {\n              return (\n                <Text\n                  {...parentProps}\n                  key={`${keyPrefix}-${index}`}\n                  onPress={() => props.onPressURL?.(match)}\n                  style={[parentProps?.style, styles.urlText]}\n                >\n                  {match}\n                </Text>\n              );\n            },\n          },\n        ]}\n      >\n        {props.renderRegexTextChildren?.(userMessage)}\n      </RegexText>\n      {Boolean(userMessage.updatedAt) && (\n        <Text body3 color={colors.onBackground02}>\n          {' (edited)'}\n        </Text>\n      )}\n    </Text>\n  );\n};\n\nconst styles = createStyleSheet({\n  bubble: {\n    paddingHorizontal: 12,\n    paddingVertical: 6,\n  },\n  urlText: {\n    textDecorationLine: 'underline',\n  },\n});\n\nexport default ThreadParentMessageUser;\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAAgCC,IAAI,EAAEC,aAAa,QAAQ,yCAAyC;AACpG,SAASC,SAAS,EAAEC,gBAAgB,QAAQ,yCAAyC;AACrF,SAA8BC,cAAc,QAAQ,uBAAuB;AAS3E,MAAMC,uBAAuB,GAAIC,KAAY,IAAK;EAAA,IAAAC,qBAAA;EAChD,MAAMC,WAAgC,GAAGF,KAAK,CAACG,aAAoC;EACnF,IAAI,CAACD,WAAW,EAAE,OAAO,IAAI;EAE7B,MAAM;IAAEE;EAAO,CAAC,GAAGT,aAAa,EAAE;EAElC,oBACEF,KAAA,CAAAY,aAAA,CAACX,IAAI;IAACY,KAAK;IAACC,KAAK,EAAEH,MAAM,CAACI,cAAe;IAACC,oBAAoB;EAAA,gBAC5DhB,KAAA,CAAAY,aAAA,CAACT,SAAS;IACRU,KAAK;IACLC,KAAK,EAAEH,MAAM,CAACI,cAAe;IAC7BE,QAAQ,EAAE,CACR,IAAIV,KAAK,CAACW,iBAAiB,IAAI,EAAE,CAAC,EAClC;MACEC,KAAK,EAAEd,cAAc;MACrBe,QAAQA,CAAAC,IAAA,EAA2C;QAAA,IAA1C;UAAEC,KAAK;UAAEC,WAAW;UAAEC,SAAS;UAAEC;QAAM,CAAC,GAAAJ,IAAA;QAC/C,oBACErB,KAAA,CAAAY,aAAA,CAACX,IAAI,EAAAyB,QAAA,KACCH,WAAW;UACfI,GAAG,EAAG,GAAEH,SAAU,IAAGC,KAAM,EAAE;UAC7BG,OAAO,EAAEA,CAAA;YAAA,IAAAC,iBAAA;YAAA,QAAAA,iBAAA,GAAMtB,KAAK,CAACuB,UAAU,cAAAD,iBAAA,uBAAhBA,iBAAA,CAAAE,IAAA,CAAAxB,KAAK,EAAce,KAAK,CAAC;UAAA,CAAC;UACzCU,KAAK,EAAE,CAACT,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAES,KAAK,EAAEC,MAAM,CAACC,OAAO;QAAE,IAE3CZ,KAAK,CACD;MAEX;IACF,CAAC;EACD,IAAAd,qBAAA,GAEDD,KAAK,CAAC4B,uBAAuB,cAAA3B,qBAAA,uBAA7BA,qBAAA,CAAAuB,IAAA,CAAAxB,KAAK,EAA2BE,WAAW,CAAC,CACnC,EACX2B,OAAO,CAAC3B,WAAW,CAAC4B,SAAS,CAAC,iBAC7BrC,KAAA,CAAAY,aAAA,CAACX,IAAI;IAACY,KAAK;IAACC,KAAK,EAAEH,MAAM,CAAC2B;EAAe,GACtC,WAAW,CAEf,CACI;AAEX,CAAC;AAED,MAAML,MAAM,GAAG7B,gBAAgB,CAAC;EAC9BmC,MAAM,EAAE;IACNC,iBAAiB,EAAE,EAAE;IACrBC,eAAe,EAAE;EACnB,CAAC;EACDP,OAAO,EAAE;IACPQ,kBAAkB,EAAE;EACtB;AACF,CAAC,CAAC;AAEF,eAAepC,uBAAuB"}

package/lib/module/components/ThreadParentMessageRenderer/ThreadParentMessage.user.og.js

@@ -0,0 +1,119 @@
+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 { Box, ImageWithPlaceholder, PressBox, RegexText, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { urlRegexStrict, useFreshCallback } from '@sendbird/uikit-utils';
+import { useSendbirdChat } from './../../hooks/useContext';
+const ThreadParentMessageUserOg = props => {
+  var _props$renderRegexTex;
+  const userMessage = props.parentMessage;
+  if (!userMessage) return null;
+  const {
+    sbOptions
+  } = useSendbirdChat();
+  const {
+    select,
+    colors,
+    palette
+  } = useUIKitTheme();
+  const enableOgtag = sbOptions.uikitWithAppInfo.groupChannel.channel.enableOgtag;
+  const onPressMessage = userMessage => useFreshCallback(() => {
+    var _userMessage$ogMetaDa, _props$onPressURL;
+    typeof ((_userMessage$ogMetaDa = userMessage.ogMetaData) === null || _userMessage$ogMetaDa === void 0 ? void 0 : _userMessage$ogMetaDa.url) === 'string' && ((_props$onPressURL = props.onPressURL) === null || _props$onPressURL === void 0 ? void 0 : _props$onPressURL.call(props, userMessage.ogMetaData.url));
+  });
+  return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(PressBox, {
+    activeOpacity: 0.85,
+    onPress: onPressMessage(userMessage)
+  }, /*#__PURE__*/React.createElement(Text, {
+    body3: true,
+    color: colors.onBackground01,
+    suppressHighlighting: true
+  }, /*#__PURE__*/React.createElement(RegexText, {
+    body3: true,
+    color: colors.onBackground01,
+    patterns: [...(props.regexTextPatterns ?? []), {
+      regex: urlRegexStrict,
+      replacer(_ref) {
+        let {
+          match,
+          parentProps,
+          keyPrefix,
+          index
+        } = _ref;
+        return /*#__PURE__*/React.createElement(Text, _extends({}, parentProps, {
+          key: `${keyPrefix}-${index}`,
+          onPress: () => {
+            var _props$onPressURL2;
+            return (_props$onPressURL2 = props.onPressURL) === null || _props$onPressURL2 === void 0 ? void 0 : _props$onPressURL2.call(props, match);
+          },
+          style: [parentProps === null || parentProps === void 0 ? void 0 : parentProps.style, styles.urlText]
+        }), match);
+      }
+    }]
+  }, (_props$renderRegexTex = props.renderRegexTextChildren) === null || _props$renderRegexTex === void 0 ? void 0 : _props$renderRegexTex.call(props, userMessage)), Boolean(userMessage.updatedAt) && /*#__PURE__*/React.createElement(Text, {
+    body3: true,
+    color: colors.onBackground02
+  }, ' (edited)'))), userMessage.ogMetaData && enableOgtag && /*#__PURE__*/React.createElement(PressBox, {
+    onPress: onPressMessage(userMessage),
+    style: styles.container
+  }, /*#__PURE__*/React.createElement(Box, null, !!userMessage.ogMetaData.defaultImage && /*#__PURE__*/React.createElement(ImageWithPlaceholder, {
+    style: styles.ogImage,
+    source: {
+      uri: userMessage.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
+  }, userMessage.ogMetaData.title), !!userMessage.ogMetaData.description && /*#__PURE__*/React.createElement(Text, {
+    numberOfLines: 1,
+    caption2: true,
+    color: colors.onBackground01,
+    style: styles.ogDesc
+  }, userMessage.ogMetaData.description), /*#__PURE__*/React.createElement(Text, {
+    numberOfLines: 1,
+    caption2: true,
+    color: colors.onBackground02
+  }, userMessage.ogMetaData.url)))));
+};
+const styles = createStyleSheet({
+  container: {
+    borderRadius: 16,
+    overflow: 'hidden'
+  },
+  ogContainer: {
+    paddingHorizontal: 12,
+    paddingTop: 8,
+    paddingBottom: 12,
+    maxWidth: 240,
+    borderBottomLeftRadius: 16,
+    borderBottomRightRadius: 16
+  },
+  ogImage: {
+    width: 240,
+    height: 136,
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16
+  },
+  ogUrl: {
+    marginBottom: 4
+  },
+  ogTitle: {
+    marginBottom: 4
+  },
+  ogDesc: {
+    lineHeight: 14,
+    marginBottom: 8
+  },
+  urlText: {
+    textDecorationLine: 'underline'
+  }
+});
+export default ThreadParentMessageUserOg;
+//# sourceMappingURL=ThreadParentMessage.user.og.js.map

package/lib/module/components/ThreadParentMessageRenderer/ThreadParentMessage.user.og.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Box","ImageWithPlaceholder","PressBox","RegexText","Text","createStyleSheet","useUIKitTheme","urlRegexStrict","useFreshCallback","useSendbirdChat","ThreadParentMessageUserOg","props","_props$renderRegexTex","userMessage","parentMessage","sbOptions","select","colors","palette","enableOgtag","uikitWithAppInfo","groupChannel","channel","onPressMessage","_userMessage$ogMetaDa","_props$onPressURL","ogMetaData","url","onPressURL","call","createElement","activeOpacity","onPress","body3","color","onBackground01","suppressHighlighting","patterns","regexTextPatterns","regex","replacer","_ref","match","parentProps","keyPrefix","index","_extends","key","_props$onPressURL2","style","styles","urlText","renderRegexTextChildren","Boolean","updatedAt","onBackground02","container","defaultImage","ogImage","source","uri","ogContainer","backgroundColor","dark","background400","light","background100","numberOfLines","body2","ogTitle","title","description","caption2","ogDesc","borderRadius","overflow","paddingHorizontal","paddingTop","paddingBottom","maxWidth","borderBottomLeftRadius","borderBottomRightRadius","width","height","borderTopLeftRadius","borderTopRightRadius","ogUrl","marginBottom","lineHeight","textDecorationLine"],"sources":["ThreadParentMessage.user.og.tsx"],"sourcesContent":["import React from 'react';\n\nimport {\n  Box,\n  ImageWithPlaceholder,\n  PressBox,\n  RegexText,\n  type RegexTextPattern,\n  Text,\n  createStyleSheet,\n  useUIKitTheme,\n} from '@sendbird/uikit-react-native-foundation';\nimport { SendbirdUserMessage, urlRegexStrict, useFreshCallback } from '@sendbird/uikit-utils';\n\nimport { useSendbirdChat } from './../../hooks/useContext';\nimport { ThreadParentMessageRendererProps } from './index';\n\ntype Props = ThreadParentMessageRendererProps<{\n  regexTextPatterns?: RegexTextPattern[];\n  renderRegexTextChildren?: (message: SendbirdUserMessage) => string;\n}>;\n\nconst ThreadParentMessageUserOg = (props: Props) => {\n  const userMessage: SendbirdUserMessage = props.parentMessage as SendbirdUserMessage;\n  if (!userMessage) return null;\n\n  const { sbOptions } = useSendbirdChat();\n  const { select, colors, palette } = useUIKitTheme();\n  const enableOgtag = sbOptions.uikitWithAppInfo.groupChannel.channel.enableOgtag;\n  const onPressMessage = (userMessage: SendbirdUserMessage) =>\n    useFreshCallback(() => {\n      typeof userMessage.ogMetaData?.url === 'string' && props.onPressURL?.(userMessage.ogMetaData.url);\n    });\n\n  return (\n    <Box>\n      <PressBox activeOpacity={0.85} onPress={onPressMessage(userMessage)}>\n        <Text body3 color={colors.onBackground01} suppressHighlighting>\n          <RegexText\n            body3\n            color={colors.onBackground01}\n            patterns={[\n              ...(props.regexTextPatterns ?? []),\n              {\n                regex: urlRegexStrict,\n                replacer({ match, parentProps, keyPrefix, index }) {\n                  return (\n                    <Text\n                      {...parentProps}\n                      key={`${keyPrefix}-${index}`}\n                      onPress={() => props.onPressURL?.(match)}\n                      style={[parentProps?.style, styles.urlText]}\n                    >\n                      {match}\n                    </Text>\n                  );\n                },\n              },\n            ]}\n          >\n            {props.renderRegexTextChildren?.(userMessage)}\n          </RegexText>\n          {Boolean(userMessage.updatedAt) && (\n            <Text body3 color={colors.onBackground02}>\n              {' (edited)'}\n            </Text>\n          )}\n        </Text>\n      </PressBox>\n      {userMessage.ogMetaData && enableOgtag && (\n        <PressBox onPress={onPressMessage(userMessage)} style={styles.container}>\n          <Box>\n            {!!userMessage.ogMetaData.defaultImage && (\n              <ImageWithPlaceholder style={styles.ogImage} source={{ uri: userMessage.ogMetaData.defaultImage.url }} />\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                {userMessage.ogMetaData.title}\n              </Text>\n              {!!userMessage.ogMetaData.description && (\n                <Text numberOfLines={1} caption2 color={colors.onBackground01} style={styles.ogDesc}>\n                  {userMessage.ogMetaData.description}\n                </Text>\n              )}\n              <Text numberOfLines={1} caption2 color={colors.onBackground02}>\n                {userMessage.ogMetaData.url}\n              </Text>\n            </Box>\n          </Box>\n        </PressBox>\n      )}\n    </Box>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    borderRadius: 16,\n    overflow: 'hidden',\n  },\n  ogContainer: {\n    paddingHorizontal: 12,\n    paddingTop: 8,\n    paddingBottom: 12,\n    maxWidth: 240,\n    borderBottomLeftRadius: 16,\n    borderBottomRightRadius: 16,\n  },\n  ogImage: {\n    width: 240,\n    height: 136,\n    borderTopLeftRadius: 16,\n    borderTopRightRadius: 16,\n  },\n  ogUrl: {\n    marginBottom: 4,\n  },\n  ogTitle: {\n    marginBottom: 4,\n  },\n  ogDesc: {\n    lineHeight: 14,\n    marginBottom: 8,\n  },\n  urlText: {\n    textDecorationLine: 'underline',\n  },\n});\n\nexport default ThreadParentMessageUserOg;\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SACEC,GAAG,EACHC,oBAAoB,EACpBC,QAAQ,EACRC,SAAS,EAETC,IAAI,EACJC,gBAAgB,EAChBC,aAAa,QACR,yCAAyC;AAChD,SAA8BC,cAAc,EAAEC,gBAAgB,QAAQ,uBAAuB;AAE7F,SAASC,eAAe,QAAQ,0BAA0B;AAQ1D,MAAMC,yBAAyB,GAAIC,KAAY,IAAK;EAAA,IAAAC,qBAAA;EAClD,MAAMC,WAAgC,GAAGF,KAAK,CAACG,aAAoC;EACnF,IAAI,CAACD,WAAW,EAAE,OAAO,IAAI;EAE7B,MAAM;IAAEE;EAAU,CAAC,GAAGN,eAAe,EAAE;EACvC,MAAM;IAAEO,MAAM;IAAEC,MAAM;IAAEC;EAAQ,CAAC,GAAGZ,aAAa,EAAE;EACnD,MAAMa,WAAW,GAAGJ,SAAS,CAACK,gBAAgB,CAACC,YAAY,CAACC,OAAO,CAACH,WAAW;EAC/E,MAAMI,cAAc,GAAIV,WAAgC,IACtDL,gBAAgB,CAAC,MAAM;IAAA,IAAAgB,qBAAA,EAAAC,iBAAA;IACrB,SAAAD,qBAAA,GAAOX,WAAW,CAACa,UAAU,cAAAF,qBAAA,uBAAtBA,qBAAA,CAAwBG,GAAG,MAAK,QAAQ,MAAAF,iBAAA,GAAId,KAAK,CAACiB,UAAU,cAAAH,iBAAA,uBAAhBA,iBAAA,CAAAI,IAAA,CAAAlB,KAAK,EAAcE,WAAW,CAACa,UAAU,CAACC,GAAG,CAAC;EACnG,CAAC,CAAC;EAEJ,oBACE5B,KAAA,CAAA+B,aAAA,CAAC9B,GAAG,qBACFD,KAAA,CAAA+B,aAAA,CAAC5B,QAAQ;IAAC6B,aAAa,EAAE,IAAK;IAACC,OAAO,EAAET,cAAc,CAACV,WAAW;EAAE,gBAClEd,KAAA,CAAA+B,aAAA,CAAC1B,IAAI;IAAC6B,KAAK;IAACC,KAAK,EAAEjB,MAAM,CAACkB,cAAe;IAACC,oBAAoB;EAAA,gBAC5DrC,KAAA,CAAA+B,aAAA,CAAC3B,SAAS;IACR8B,KAAK;IACLC,KAAK,EAAEjB,MAAM,CAACkB,cAAe;IAC7BE,QAAQ,EAAE,CACR,IAAI1B,KAAK,CAAC2B,iBAAiB,IAAI,EAAE,CAAC,EAClC;MACEC,KAAK,EAAEhC,cAAc;MACrBiC,QAAQA,CAAAC,IAAA,EAA2C;QAAA,IAA1C;UAAEC,KAAK;UAAEC,WAAW;UAAEC,SAAS;UAAEC;QAAM,CAAC,GAAAJ,IAAA;QAC/C,oBACE1C,KAAA,CAAA+B,aAAA,CAAC1B,IAAI,EAAA0C,QAAA,KACCH,WAAW;UACfI,GAAG,EAAG,GAAEH,SAAU,IAAGC,KAAM,EAAE;UAC7Bb,OAAO,EAAEA,CAAA;YAAA,IAAAgB,kBAAA;YAAA,QAAAA,kBAAA,GAAMrC,KAAK,CAACiB,UAAU,cAAAoB,kBAAA,uBAAhBA,kBAAA,CAAAnB,IAAA,CAAAlB,KAAK,EAAc+B,KAAK,CAAC;UAAA,CAAC;UACzCO,KAAK,EAAE,CAACN,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAEM,KAAK,EAAEC,MAAM,CAACC,OAAO;QAAE,IAE3CT,KAAK,CACD;MAEX;IACF,CAAC;EACD,IAAA9B,qBAAA,GAEDD,KAAK,CAACyC,uBAAuB,cAAAxC,qBAAA,uBAA7BA,qBAAA,CAAAiB,IAAA,CAAAlB,KAAK,EAA2BE,WAAW,CAAC,CACnC,EACXwC,OAAO,CAACxC,WAAW,CAACyC,SAAS,CAAC,iBAC7BvD,KAAA,CAAA+B,aAAA,CAAC1B,IAAI;IAAC6B,KAAK;IAACC,KAAK,EAAEjB,MAAM,CAACsC;EAAe,GACtC,WAAW,CAEf,CACI,CACE,EACV1C,WAAW,CAACa,UAAU,IAAIP,WAAW,iBACpCpB,KAAA,CAAA+B,aAAA,CAAC5B,QAAQ;IAAC8B,OAAO,EAAET,cAAc,CAACV,WAAW,CAAE;IAACoC,KAAK,EAAEC,MAAM,CAACM;EAAU,gBACtEzD,KAAA,CAAA+B,aAAA,CAAC9B,GAAG,QACD,CAAC,CAACa,WAAW,CAACa,UAAU,CAAC+B,YAAY,iBACpC1D,KAAA,CAAA+B,aAAA,CAAC7B,oBAAoB;IAACgD,KAAK,EAAEC,MAAM,CAACQ,OAAQ;IAACC,MAAM,EAAE;MAAEC,GAAG,EAAE/C,WAAW,CAACa,UAAU,CAAC+B,YAAY,CAAC9B;IAAI;EAAE,EACvG,eACD5B,KAAA,CAAA+B,aAAA,CAAC9B,GAAG;IACFiD,KAAK,EAAEC,MAAM,CAACW,WAAY;IAC1BC,eAAe,EAAE9C,MAAM,CAAC;MAAE+C,IAAI,EAAE7C,OAAO,CAAC8C,aAAa;MAAEC,KAAK,EAAE/C,OAAO,CAACgD;IAAc,CAAC;EAAE,gBAEvFnE,KAAA,CAAA+B,aAAA,CAAC1B,IAAI;IAAC+D,aAAa,EAAE,CAAE;IAACC,KAAK;IAAClC,KAAK,EAAEjB,MAAM,CAACkB,cAAe;IAACc,KAAK,EAAEC,MAAM,CAACmB;EAAQ,GAC/ExD,WAAW,CAACa,UAAU,CAAC4C,KAAK,CACxB,EACN,CAAC,CAACzD,WAAW,CAACa,UAAU,CAAC6C,WAAW,iBACnCxE,KAAA,CAAA+B,aAAA,CAAC1B,IAAI;IAAC+D,aAAa,EAAE,CAAE;IAACK,QAAQ;IAACtC,KAAK,EAAEjB,MAAM,CAACkB,cAAe;IAACc,KAAK,EAAEC,MAAM,CAACuB;EAAO,GACjF5D,WAAW,CAACa,UAAU,CAAC6C,WAAW,CAEtC,eACDxE,KAAA,CAAA+B,aAAA,CAAC1B,IAAI;IAAC+D,aAAa,EAAE,CAAE;IAACK,QAAQ;IAACtC,KAAK,EAAEjB,MAAM,CAACsC;EAAe,GAC3D1C,WAAW,CAACa,UAAU,CAACC,GAAG,CACtB,CACH,CACF,CAET,CACG;AAEV,CAAC;AAED,MAAMuB,MAAM,GAAG7C,gBAAgB,CAAC;EAC9BmD,SAAS,EAAE;IACTkB,YAAY,EAAE,EAAE;IAChBC,QAAQ,EAAE;EACZ,CAAC;EACDd,WAAW,EAAE;IACXe,iBAAiB,EAAE,EAAE;IACrBC,UAAU,EAAE,CAAC;IACbC,aAAa,EAAE,EAAE;IACjBC,QAAQ,EAAE,GAAG;IACbC,sBAAsB,EAAE,EAAE;IAC1BC,uBAAuB,EAAE;EAC3B,CAAC;EACDvB,OAAO,EAAE;IACPwB,KAAK,EAAE,GAAG;IACVC,MAAM,EAAE,GAAG;IACXC,mBAAmB,EAAE,EAAE;IACvBC,oBAAoB,EAAE;EACxB,CAAC;EACDC,KAAK,EAAE;IACLC,YAAY,EAAE;EAChB,CAAC;EACDlB,OAAO,EAAE;IACPkB,YAAY,EAAE;EAChB,CAAC;EACDd,MAAM,EAAE;IACNe,UAAU,EAAE,EAAE;IACdD,YAAY,EAAE;EAChB,CAAC;EACDpC,OAAO,EAAE;IACPsC,kBAAkB,EAAE;EACtB;AACF,CAAC,CAAC;AAEF,eAAe/E,yBAAyB"}

package/lib/module/components/ThreadParentMessageRenderer/index.js

@@ -0,0 +1,196 @@
+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, { useRef } from 'react';
+import { Text, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { getMessageType, isMyMessage, isVoiceMessage } from '@sendbird/uikit-utils';
+import { VOICE_MESSAGE_META_ARRAY_DURATION_KEY } from '../../constants';
+import SBUUtils from '../../libs/SBUUtils';
+import { usePlatformService, useSendbirdChat } from './../../hooks/useContext';
+import ThreadParentMessageFile from './ThreadParentMessage.file';
+import ThreadParentMessageFileImage from './ThreadParentMessage.file.image';
+import ThreadParentMessageFileVideo from './ThreadParentMessage.file.video';
+import ThreadParentMessageFileVoice from './ThreadParentMessage.file.voice';
+import ThreadParentMessageUser from './ThreadParentMessage.user';
+import ThreadParentMessageUserOg from './ThreadParentMessage.user.og';
+const ThreadParentMessageRenderer = props => {
+  const playerUnsubscribes = useRef([]);
+  const {
+    sbOptions,
+    currentUser,
+    mentionManager
+  } = useSendbirdChat();
+  const {
+    palette
+  } = useUIKitTheme();
+  const {
+    mediaService,
+    playerService
+  } = usePlatformService();
+  const parentMessage = props.parentMessage;
+  const resetPlayer = async () => {
+    playerUnsubscribes.current.forEach(unsubscribe => {
+      try {
+        unsubscribe();
+      } catch {}
+    });
+    playerUnsubscribes.current.length = 0;
+    await playerService.reset();
+  };
+  const messageProps = {
+    onPressURL: url => SBUUtils.openURL(url),
+    onToggleVoiceMessage: async (state, setState) => {
+      if (isVoiceMessage(parentMessage) && parentMessage.sendingStatus === 'succeeded') {
+        if (playerService.uri === parentMessage.url) {
+          if (playerService.state === 'playing') {
+            await playerService.pause();
+          } else {
+            await playerService.play(parentMessage.url);
+          }
+        } else {
+          if (playerService.state !== 'idle') {
+            await resetPlayer();
+          }
+          const shouldSeekToTime = state.duration > state.currentTime && state.currentTime > 0;
+          let seekFinished = !shouldSeekToTime;
+          const forPlayback = playerService.addPlaybackListener(_ref => {
+            let {
+              stopped,
+              currentTime,
+              duration
+            } = _ref;
+            if (seekFinished) {
+              setState(prevState => ({
+                ...prevState,
+                currentTime: stopped ? 0 : currentTime,
+                duration
+              }));
+            }
+          });
+          const forState = playerService.addStateListener(state => {
+            switch (state) {
+              case 'preparing':
+                setState(prevState => ({
+                  ...prevState,
+                  status: 'preparing'
+                }));
+                break;
+              case 'playing':
+                setState(prevState => ({
+                  ...prevState,
+                  status: 'playing'
+                }));
+                break;
+              case 'idle':
+              case 'paused':
+                {
+                  setState(prevState => ({
+                    ...prevState,
+                    status: 'paused'
+                  }));
+                  break;
+                }
+              case 'stopped':
+                setState(prevState => ({
+                  ...prevState,
+                  status: 'paused'
+                }));
+                break;
+            }
+          });
+          playerUnsubscribes.current.push(forPlayback, forState);
+          await playerService.play(parentMessage.url);
+          if (shouldSeekToTime) {
+            await playerService.seek(state.currentTime);
+            seekFinished = true;
+          }
+        }
+      }
+    },
+    ...props
+  };
+  const userMessageProps = {
+    renderRegexTextChildren: message => {
+      if (mentionManager.shouldUseMentionedMessageTemplate(message, sbOptions.uikit.groupChannel.channel.enableMention)) {
+        return message.mentionedMessageTemplate;
+      } else {
+        return message.message;
+      }
+    },
+    regexTextPatterns: [{
+      regex: mentionManager.templateRegex,
+      replacer(_ref2) {
+        var _parentMessage$mentio;
+        let {
+          match,
+          groups,
+          parentProps,
+          index,
+          keyPrefix
+        } = _ref2;
+        const user = (_parentMessage$mentio = parentMessage.mentionedUsers) === null || _parentMessage$mentio === void 0 ? void 0 : _parentMessage$mentio.find(it => it.userId === groups[2]);
+        if (user) {
+          const mentionColor = !isMyMessage(parentMessage, currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId) && user.userId === (currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId) ? palette.onBackgroundLight01 : parentProps === null || parentProps === void 0 ? void 0 : parentProps.color;
+          return /*#__PURE__*/React.createElement(Text, _extends({}, parentProps, {
+            key: `${keyPrefix}-${index}`,
+            color: mentionColor,
+            onPress: () => {
+              var _messageProps$onPress;
+              return (_messageProps$onPress = messageProps.onPressMentionedUser) === null || _messageProps$onPress === void 0 ? void 0 : _messageProps$onPress.call(messageProps, user);
+            },
+            onLongPress: messageProps.onLongPress,
+            style: [parentProps === null || parentProps === void 0 ? void 0 : parentProps.style, {
+              fontWeight: '700'
+            }, user.userId === (currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId) && {
+              backgroundColor: palette.highlight
+            }]
+          }), `${mentionManager.asMentionedMessageText(user)}`);
+        }
+        return match;
+      }
+    }]
+  };
+  switch (getMessageType(props.parentMessage)) {
+    case 'user':
+      {
+        return /*#__PURE__*/React.createElement(ThreadParentMessageUser, _extends({}, userMessageProps, messageProps));
+      }
+    case 'user.opengraph':
+      {
+        return /*#__PURE__*/React.createElement(ThreadParentMessageUserOg, _extends({}, userMessageProps, messageProps));
+      }
+    case 'file':
+    case 'file.audio':
+      {
+        return /*#__PURE__*/React.createElement(ThreadParentMessageFile, messageProps);
+      }
+    case 'file.video':
+      {
+        return /*#__PURE__*/React.createElement(ThreadParentMessageFileVideo, _extends({
+          fetchThumbnailFromVideoSource: uri => mediaService.getVideoThumbnail({
+            url: uri,
+            timeMills: 1000
+          })
+        }, messageProps));
+      }
+    case 'file.image':
+      {
+        return /*#__PURE__*/React.createElement(ThreadParentMessageFileImage, messageProps);
+      }
+    case 'file.voice':
+      {
+        return /*#__PURE__*/React.createElement(ThreadParentMessageFileVoice, _extends({
+          durationMetaArrayKey: VOICE_MESSAGE_META_ARRAY_DURATION_KEY,
+          onUnmount: () => {
+            if (isVoiceMessage(parentMessage) && playerService.uri === parentMessage.url) {
+              resetPlayer();
+            }
+          }
+        }, messageProps));
+      }
+    default:
+      {
+        return null;
+      }
+  }
+};
+export default /*#__PURE__*/React.memo(ThreadParentMessageRenderer);
+//# sourceMappingURL=index.js.map