@sendbird/uikit-react-native 3.2.0 → 3.4.0

package/lib/module/components/FileViewer/FileViewerContent.js

@@ -0,0 +1,130 @@
+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 { ReactNativeZoomableView } from '@openspacelabs/react-native-zoomable-view';
+import React, { useLayoutEffect, useRef, useState } from 'react';
+import { StyleSheet, useWindowDimensions } from 'react-native';
+import { Box, Image, LoadingSpinner, createStyleSheet, useHeaderStyle, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { useIIFE } from '@sendbird/uikit-utils';
+import { usePlatformService } from '../../hooks/useContext';
+import SBUUtils from '../../libs/SBUUtils';
+const FileViewerContent = _ref => {
+  let {
+    type,
+    src,
+    topInset = 0,
+    bottomInset = 0,
+    maxZoom = 4,
+    minZoom = 1,
+    onPress
+  } = _ref;
+  const [loading, setLoading] = useState(true);
+  const {
+    defaultHeight
+  } = useHeaderStyle();
+  const {
+    mediaService
+  } = usePlatformService();
+  const {
+    palette
+  } = useUIKitTheme();
+  const source = {
+    uri: src
+  };
+  const onLoadEnd = () => setLoading(false);
+  const mediaViewer = useIIFE(() => {
+    switch (type) {
+      case 'image':
+        {
+          return /*#__PURE__*/React.createElement(ZoomableImageView, {
+            source: source,
+            style: StyleSheet.absoluteFill,
+            resizeMode: 'contain',
+            onLoadEnd: onLoadEnd,
+            zoomProps: {
+              minZoom,
+              maxZoom,
+              onTouchEnd: onPress
+            }
+          });
+        }
+      case 'video':
+      case 'audio':
+        {
+          return /*#__PURE__*/React.createElement(mediaService.VideoComponent, {
+            source: source,
+            style: [StyleSheet.absoluteFill, {
+              top: topInset,
+              bottom: defaultHeight + bottomInset
+            }],
+            resizeMode: 'contain',
+            onLoad: onLoadEnd
+          });
+        }
+      default:
+        {
+          return null;
+        }
+    }
+  });
+  return /*#__PURE__*/React.createElement(Box, {
+    style: styles.container
+  }, mediaViewer, loading && /*#__PURE__*/React.createElement(LoadingSpinner, {
+    style: {
+      position: 'absolute'
+    },
+    size: 40,
+    color: palette.primary300
+  }));
+};
+const ZoomableImageView = _ref2 => {
+  let {
+    zoomProps,
+    ...props
+  } = _ref2;
+  const {
+    width,
+    height
+  } = useWindowDimensions();
+  const imageSize = useRef();
+  const [contentSizeProps, setContentSizeProps] = useState({
+    contentWidth: width,
+    contentHeight: height
+  });
+  useLayoutEffect(() => {
+    SBUUtils.safeRun(async () => {
+      if (props.source.uri) {
+        const image = imageSize.current ?? (await SBUUtils.getImageSize(props.source.uri));
+        imageSize.current = image;
+        const viewRatio = width / height;
+        const imageRatio = image.width / image.height;
+        const fitDirection = viewRatio > imageRatio ? 'height' : 'width';
+        const ratio = fitDirection === 'height' ? height / image.height : width / image.width;
+        const actualSize = {
+          width: image.width * ratio,
+          height: image.height * ratio
+        };
+        setContentSizeProps({
+          contentWidth: actualSize.width,
+          contentHeight: actualSize.height
+        });
+      }
+    });
+  }, [props.source.uri, width, height]);
+  return /*#__PURE__*/React.createElement(ReactNativeZoomableView, _extends({
+    visualTouchFeedbackEnabled: false,
+    style: {
+      width,
+      height
+    },
+    initialZoom: 1
+  }, contentSizeProps, zoomProps), /*#__PURE__*/React.createElement(Image, props));
+};
+const styles = createStyleSheet({
+  container: {
+    zIndex: -1,
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+export default FileViewerContent;
+//# sourceMappingURL=FileViewerContent.js.map

package/lib/module/components/FileViewer/FileViewerContent.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ReactNativeZoomableView","React","useLayoutEffect","useRef","useState","StyleSheet","useWindowDimensions","Box","Image","LoadingSpinner","createStyleSheet","useHeaderStyle","useUIKitTheme","useIIFE","usePlatformService","SBUUtils","FileViewerContent","_ref","type","src","topInset","bottomInset","maxZoom","minZoom","onPress","loading","setLoading","defaultHeight","mediaService","palette","source","uri","onLoadEnd","mediaViewer","createElement","ZoomableImageView","style","absoluteFill","resizeMode","zoomProps","onTouchEnd","VideoComponent","top","bottom","onLoad","styles","container","position","size","color","primary300","_ref2","props","width","height","imageSize","contentSizeProps","setContentSizeProps","contentWidth","contentHeight","safeRun","image","current","getImageSize","viewRatio","imageRatio","fitDirection","ratio","actualSize","_extends","visualTouchFeedbackEnabled","initialZoom","zIndex","flex","alignItems","justifyContent"],"sources":["FileViewerContent.tsx"],"sourcesContent":["import { ReactNativeZoomableView, ReactNativeZoomableViewProps } from '@openspacelabs/react-native-zoomable-view';\nimport React, { useLayoutEffect, useRef, useState } from 'react';\nimport { ImageProps, ImageStyle, ImageURISource, StyleProp, StyleSheet, useWindowDimensions } from 'react-native';\n\nimport {\n  Box,\n  Image,\n  LoadingSpinner,\n  createStyleSheet,\n  useHeaderStyle,\n  useUIKitTheme,\n} from '@sendbird/uikit-react-native-foundation';\nimport { FileType, useIIFE } from '@sendbird/uikit-utils';\n\nimport { usePlatformService } from '../../hooks/useContext';\nimport SBUUtils from '../../libs/SBUUtils';\n\ntype Props = {\n  type: FileType;\n  src: string;\n  topInset?: number;\n  bottomInset?: number;\n  maxZoom?: number;\n  minZoom?: number;\n  onPress?: () => void;\n};\nconst FileViewerContent = ({ type, src, topInset = 0, bottomInset = 0, maxZoom = 4, minZoom = 1, onPress }: Props) => {\n  const [loading, setLoading] = useState(true);\n\n  const { defaultHeight } = useHeaderStyle();\n  const { mediaService } = usePlatformService();\n  const { palette } = useUIKitTheme();\n\n  const source = { uri: src };\n  const onLoadEnd = () => setLoading(false);\n  const mediaViewer = useIIFE(() => {\n    switch (type) {\n      case 'image': {\n        return (\n          <ZoomableImageView\n            source={source}\n            style={StyleSheet.absoluteFill}\n            resizeMode={'contain'}\n            onLoadEnd={onLoadEnd}\n            zoomProps={{\n              minZoom,\n              maxZoom,\n              onTouchEnd: onPress,\n            }}\n          />\n        );\n      }\n\n      case 'video':\n      case 'audio': {\n        return (\n          <mediaService.VideoComponent\n            source={source}\n            style={[StyleSheet.absoluteFill, { top: topInset, bottom: defaultHeight + bottomInset }]}\n            resizeMode={'contain'}\n            onLoad={onLoadEnd}\n          />\n        );\n      }\n\n      default: {\n        return null;\n      }\n    }\n  });\n\n  return (\n    <Box style={styles.container}>\n      {mediaViewer}\n      {loading && <LoadingSpinner style={{ position: 'absolute' }} size={40} color={palette.primary300} />}\n    </Box>\n  );\n};\n\nconst ZoomableImageView = ({\n  zoomProps,\n  ...props\n}: {\n  source: ImageURISource;\n  style: StyleProp<ImageStyle>;\n  resizeMode: ImageProps['resizeMode'];\n  onLoadEnd: () => void;\n  zoomProps?: ReactNativeZoomableViewProps;\n}) => {\n  const { width, height } = useWindowDimensions();\n\n  const imageSize = useRef<{ width: number; height: number }>();\n  const [contentSizeProps, setContentSizeProps] = useState<ReactNativeZoomableViewProps>({\n    contentWidth: width,\n    contentHeight: height,\n  });\n\n  useLayoutEffect(() => {\n    SBUUtils.safeRun(async () => {\n      if (props.source.uri) {\n        const image = imageSize.current ?? (await SBUUtils.getImageSize(props.source.uri));\n        imageSize.current = image;\n\n        const viewRatio = width / height;\n        const imageRatio = image.width / image.height;\n\n        const fitDirection = viewRatio > imageRatio ? 'height' : 'width';\n        const ratio = fitDirection === 'height' ? height / image.height : width / image.width;\n        const actualSize = { width: image.width * ratio, height: image.height * ratio };\n\n        setContentSizeProps({\n          contentWidth: actualSize.width,\n          contentHeight: actualSize.height,\n        });\n      }\n    });\n  }, [props.source.uri, width, height]);\n\n  return (\n    <ReactNativeZoomableView\n      visualTouchFeedbackEnabled={false}\n      style={{ width, height }}\n      initialZoom={1}\n      {...contentSizeProps}\n      {...zoomProps}\n    >\n      <Image {...props} />\n    </ReactNativeZoomableView>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    zIndex: -1,\n    flex: 1,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n});\n\nexport default FileViewerContent;\n"],"mappings":"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"}

package/lib/module/components/FileViewer/FileViewerFooter.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Box, Icon, PressBox, createStyleSheet, useHeaderStyle, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+const FileViewerFooter = _ref => {
+  let {
+    bottomInset,
+    deleteShown,
+    onPressDelete,
+    onPressDownload
+  } = _ref;
+  const {
+    palette
+  } = useUIKitTheme();
+  const {
+    defaultHeight
+  } = useHeaderStyle();
+  const {
+    left,
+    right
+  } = useSafeAreaInsets();
+  return /*#__PURE__*/React.createElement(Box, {
+    style: [styles.container, {
+      paddingLeft: styles.container.paddingHorizontal + left,
+      paddingRight: styles.container.paddingHorizontal + right,
+      paddingBottom: bottomInset,
+      height: defaultHeight + bottomInset,
+      backgroundColor: palette.overlay01
+    }]
+  }, /*#__PURE__*/React.createElement(PressBox, {
+    activeOpacity: 0.75,
+    onPress: onPressDownload,
+    style: styles.buttonContainer
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: 'download',
+    size: 24,
+    color: palette.onBackgroundDark01
+  })), /*#__PURE__*/React.createElement(Box, {
+    style: styles.titleContainer
+  }), /*#__PURE__*/React.createElement(PressBox, {
+    activeOpacity: 0.75,
+    onPress: onPressDelete,
+    style: styles.buttonContainer,
+    disabled: !deleteShown
+  }, deleteShown && /*#__PURE__*/React.createElement(Icon, {
+    icon: 'delete',
+    size: 24,
+    color: palette.onBackgroundDark01
+  })));
+};
+const styles = createStyleSheet({
+  container: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 12
+  },
+  buttonContainer: {
+    width: 32,
+    height: 32,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  titleContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+export default FileViewerFooter;
+//# sourceMappingURL=FileViewerFooter.js.map

package/lib/module/components/FileViewer/FileViewerFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useSafeAreaInsets","Box","Icon","PressBox","createStyleSheet","useHeaderStyle","useUIKitTheme","FileViewerFooter","_ref","bottomInset","deleteShown","onPressDelete","onPressDownload","palette","defaultHeight","left","right","createElement","style","styles","container","paddingLeft","paddingHorizontal","paddingRight","paddingBottom","height","backgroundColor","overlay01","activeOpacity","onPress","buttonContainer","icon","size","color","onBackgroundDark01","titleContainer","disabled","position","bottom","flexDirection","alignItems","justifyContent","width","flex"],"sources":["FileViewerFooter.tsx"],"sourcesContent":["import React from 'react';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport {\n  Box,\n  Icon,\n  PressBox,\n  createStyleSheet,\n  useHeaderStyle,\n  useUIKitTheme,\n} from '@sendbird/uikit-react-native-foundation';\n\ntype Props = {\n  bottomInset: number;\n  deleteShown: boolean;\n  onPressDelete: () => void;\n  onPressDownload: () => void;\n};\n\nconst FileViewerFooter = ({ bottomInset, deleteShown, onPressDelete, onPressDownload }: Props) => {\n  const { palette } = useUIKitTheme();\n  const { defaultHeight } = useHeaderStyle();\n  const { left, right } = useSafeAreaInsets();\n\n  return (\n    <Box\n      style={[\n        styles.container,\n        {\n          paddingLeft: styles.container.paddingHorizontal + left,\n          paddingRight: styles.container.paddingHorizontal + right,\n          paddingBottom: bottomInset,\n          height: defaultHeight + bottomInset,\n          backgroundColor: palette.overlay01,\n        },\n      ]}\n    >\n      <PressBox activeOpacity={0.75} onPress={onPressDownload} style={styles.buttonContainer}>\n        <Icon icon={'download'} size={24} color={palette.onBackgroundDark01} />\n      </PressBox>\n      <Box style={styles.titleContainer} />\n      <PressBox activeOpacity={0.75} onPress={onPressDelete} style={styles.buttonContainer} disabled={!deleteShown}>\n        {deleteShown && <Icon icon={'delete'} size={24} color={palette.onBackgroundDark01} />}\n      </PressBox>\n    </Box>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    position: 'absolute',\n    left: 0,\n    right: 0,\n    bottom: 0,\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n    paddingHorizontal: 12,\n  },\n  buttonContainer: {\n    width: 32,\n    height: 32,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  titleContainer: {\n    flex: 1,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n});\n\nexport default FileViewerFooter;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,iBAAiB,QAAQ,gCAAgC;AAElE,SACEC,GAAG,EACHC,IAAI,EACJC,QAAQ,EACRC,gBAAgB,EAChBC,cAAc,EACdC,aAAa,QACR,yCAAyC;AAShD,MAAMC,gBAAgB,GAAGC,IAAA,IAAyE;EAAA,IAAxE;IAAEC,WAAW;IAAEC,WAAW;IAAEC,aAAa;IAAEC;EAAuB,CAAC,GAAAJ,IAAA;EAC3F,MAAM;IAAEK;EAAQ,CAAC,GAAGP,aAAa,EAAE;EACnC,MAAM;IAAEQ;EAAc,CAAC,GAAGT,cAAc,EAAE;EAC1C,MAAM;IAAEU,IAAI;IAAEC;EAAM,CAAC,GAAGhB,iBAAiB,EAAE;EAE3C,oBACED,KAAA,CAAAkB,aAAA,CAAChB,GAAG;IACFiB,KAAK,EAAE,CACLC,MAAM,CAACC,SAAS,EAChB;MACEC,WAAW,EAAEF,MAAM,CAACC,SAAS,CAACE,iBAAiB,GAAGP,IAAI;MACtDQ,YAAY,EAAEJ,MAAM,CAACC,SAAS,CAACE,iBAAiB,GAAGN,KAAK;MACxDQ,aAAa,EAAEf,WAAW;MAC1BgB,MAAM,EAAEX,aAAa,GAAGL,WAAW;MACnCiB,eAAe,EAAEb,OAAO,CAACc;IAC3B,CAAC;EACD,gBAEF5B,KAAA,CAAAkB,aAAA,CAACd,QAAQ;IAACyB,aAAa,EAAE,IAAK;IAACC,OAAO,EAAEjB,eAAgB;IAACM,KAAK,EAAEC,MAAM,CAACW;EAAgB,gBACrF/B,KAAA,CAAAkB,aAAA,CAACf,IAAI;IAAC6B,IAAI,EAAE,UAAW;IAACC,IAAI,EAAE,EAAG;IAACC,KAAK,EAAEpB,OAAO,CAACqB;EAAmB,EAAG,CAC9D,eACXnC,KAAA,CAAAkB,aAAA,CAAChB,GAAG;IAACiB,KAAK,EAAEC,MAAM,CAACgB;EAAe,EAAG,eACrCpC,KAAA,CAAAkB,aAAA,CAACd,QAAQ;IAACyB,aAAa,EAAE,IAAK;IAACC,OAAO,EAAElB,aAAc;IAACO,KAAK,EAAEC,MAAM,CAACW,eAAgB;IAACM,QAAQ,EAAE,CAAC1B;EAAY,GAC1GA,WAAW,iBAAIX,KAAA,CAAAkB,aAAA,CAACf,IAAI;IAAC6B,IAAI,EAAE,QAAS;IAACC,IAAI,EAAE,EAAG;IAACC,KAAK,EAAEpB,OAAO,CAACqB;EAAmB,EAAG,CAC5E,CACP;AAEV,CAAC;AAED,MAAMf,MAAM,GAAGf,gBAAgB,CAAC;EAC9BgB,SAAS,EAAE;IACTiB,QAAQ,EAAE,UAAU;IACpBtB,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE,CAAC;IACRsB,MAAM,EAAE,CAAC;IACTC,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE,QAAQ;IACxBnB,iBAAiB,EAAE;EACrB,CAAC;EACDQ,eAAe,EAAE;IACfY,KAAK,EAAE,EAAE;IACTjB,MAAM,EAAE,EAAE;IACVe,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDN,cAAc,EAAE;IACdQ,IAAI,EAAE,CAAC;IACPH,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB;AACF,CAAC,CAAC;AAEF,eAAelC,gBAAgB"}

package/lib/module/components/FileViewer/FileViewerHeader.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Box, Icon, PressBox, Text, createStyleSheet, useHeaderStyle, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { truncate } from '@sendbird/uikit-utils';
+const FileViewerHeader = _ref => {
+  let {
+    headerShown = true,
+    topInset,
+    onClose,
+    subtitle,
+    title
+  } = _ref;
+  const {
+    palette
+  } = useUIKitTheme();
+  const {
+    defaultHeight
+  } = useHeaderStyle();
+  const {
+    left,
+    right
+  } = useSafeAreaInsets();
+  if (!headerShown) return null;
+  return /*#__PURE__*/React.createElement(Box, {
+    style: [styles.container, {
+      paddingLeft: styles.container.paddingHorizontal + left,
+      paddingRight: styles.container.paddingHorizontal + right,
+      paddingTop: topInset,
+      height: defaultHeight + topInset,
+      backgroundColor: palette.overlay01
+    }]
+  }, /*#__PURE__*/React.createElement(PressBox, {
+    activeOpacity: 0.75,
+    onPress: onClose,
+    style: styles.buttonContainer
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: 'close',
+    size: 24,
+    color: palette.onBackgroundDark01
+  })), /*#__PURE__*/React.createElement(Box, {
+    style: styles.titleContainer
+  }, /*#__PURE__*/React.createElement(Text, {
+    h2: true,
+    color: palette.onBackgroundDark01,
+    style: styles.title,
+    numberOfLines: 1
+  }, truncate(title, {
+    mode: 'mid',
+    maxLen: 18
+  })), /*#__PURE__*/React.createElement(Text, {
+    caption2: true,
+    color: palette.onBackgroundDark01,
+    numberOfLines: 1
+  }, subtitle)), /*#__PURE__*/React.createElement(Box, {
+    style: styles.buttonContainer
+  }));
+};
+const styles = createStyleSheet({
+  container: {
+    top: 0,
+    left: 0,
+    right: 0,
+    position: 'absolute',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 12
+  },
+  buttonContainer: {
+    width: 32,
+    height: 32,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  titleContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  title: {
+    marginBottom: 2
+  }
+});
+export default FileViewerHeader;
+//# sourceMappingURL=FileViewerHeader.js.map

package/lib/module/components/FileViewer/FileViewerHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useSafeAreaInsets","Box","Icon","PressBox","Text","createStyleSheet","useHeaderStyle","useUIKitTheme","truncate","FileViewerHeader","_ref","headerShown","topInset","onClose","subtitle","title","palette","defaultHeight","left","right","createElement","style","styles","container","paddingLeft","paddingHorizontal","paddingRight","paddingTop","height","backgroundColor","overlay01","activeOpacity","onPress","buttonContainer","icon","size","color","onBackgroundDark01","titleContainer","h2","numberOfLines","mode","maxLen","caption2","top","position","flexDirection","alignItems","justifyContent","width","flex","marginBottom"],"sources":["FileViewerHeader.tsx"],"sourcesContent":["import React from 'react';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport {\n  Box,\n  Icon,\n  PressBox,\n  Text,\n  createStyleSheet,\n  useHeaderStyle,\n  useUIKitTheme,\n} from '@sendbird/uikit-react-native-foundation';\nimport { truncate } from '@sendbird/uikit-utils';\n\ntype Props = {\n  headerShown?: boolean;\n  topInset: number;\n  onClose: () => void;\n  title: string;\n  subtitle: string;\n};\n\nconst FileViewerHeader = ({ headerShown = true, topInset, onClose, subtitle, title }: Props) => {\n  const { palette } = useUIKitTheme();\n  const { defaultHeight } = useHeaderStyle();\n  const { left, right } = useSafeAreaInsets();\n\n  if (!headerShown) return null;\n\n  return (\n    <Box\n      style={[\n        styles.container,\n        {\n          paddingLeft: styles.container.paddingHorizontal + left,\n          paddingRight: styles.container.paddingHorizontal + right,\n          paddingTop: topInset,\n          height: defaultHeight + topInset,\n          backgroundColor: palette.overlay01,\n        },\n      ]}\n    >\n      <PressBox activeOpacity={0.75} onPress={onClose} style={styles.buttonContainer}>\n        <Icon icon={'close'} size={24} color={palette.onBackgroundDark01} />\n      </PressBox>\n      <Box style={styles.titleContainer}>\n        <Text h2 color={palette.onBackgroundDark01} style={styles.title} numberOfLines={1}>\n          {truncate(title, { mode: 'mid', maxLen: 18 })}\n        </Text>\n        <Text caption2 color={palette.onBackgroundDark01} numberOfLines={1}>\n          {subtitle}\n        </Text>\n      </Box>\n      <Box style={styles.buttonContainer} />\n    </Box>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    top: 0,\n    left: 0,\n    right: 0,\n    position: 'absolute',\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n    paddingHorizontal: 12,\n  },\n  buttonContainer: {\n    width: 32,\n    height: 32,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  titleContainer: {\n    flex: 1,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  title: {\n    marginBottom: 2,\n  },\n});\n\nexport default FileViewerHeader;\n"],"mappings":"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"}

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

@@ -0,0 +1,123 @@
+import React, { useEffect } from 'react';
+import { StatusBar } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Box, useAlert, useHeaderStyle, useToast, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { Logger, getFileExtension, getFileType, isMyMessage, toMegabyte } from '@sendbird/uikit-utils';
+import { useLocalization, usePlatformService, useSendbirdChat } from '../../hooks/useContext';
+import FileViewerContent from './FileViewerContent';
+import FileViewerFooter from './FileViewerFooter';
+import FileViewerHeader from './FileViewerHeader';
+const FileViewer = _ref => {
+  let {
+    headerShown = true,
+    maxZoom = 3,
+    minZoom = 1,
+    headerTopInset,
+    fileMessage,
+    onClose,
+    onPressDownload,
+    onPressDelete,
+    deleteMessage
+  } = _ref;
+  const {
+    topInset,
+    statusBarTranslucent
+  } = useHeaderStyle();
+  const {
+    bottom
+  } = useSafeAreaInsets();
+  const {
+    palette
+  } = useUIKitTheme();
+  const {
+    alert
+  } = useAlert();
+  const {
+    show
+  } = useToast();
+  const {
+    fileService
+  } = usePlatformService();
+  const {
+    currentUser
+  } = useSendbirdChat();
+  const {
+    STRINGS
+  } = useLocalization();
+  const fileType = getFileType(fileMessage.type || getFileExtension(fileMessage.url));
+  const canDelete = isMyMessage(fileMessage, currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId);
+  const basicTopInset = statusBarTranslucent ? topInset : 0;
+  const onPressDeleteButton = () => {
+    if (!canDelete) return;
+    if (onPressDelete) {
+      onPressDelete(fileMessage);
+    } else {
+      alert({
+        title: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_TITLE,
+        buttons: [{
+          text: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_CANCEL
+        }, {
+          text: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_OK,
+          style: 'destructive',
+          onPress: () => {
+            deleteMessage().then(() => {
+              onClose();
+            }).catch(() => {
+              show(STRINGS.TOAST.DELETE_MSG_ERROR, 'error');
+            });
+          }
+        }]
+      });
+    }
+  };
+  const onPressDownloadButton = () => {
+    if (onPressDownload) {
+      onPressDownload(fileMessage);
+    } else {
+      if (toMegabyte(fileMessage.size) > 4) {
+        show(STRINGS.TOAST.DOWNLOAD_START, 'success');
+      }
+      fileService.save({
+        fileUrl: fileMessage.url,
+        fileName: fileMessage.name,
+        fileType: fileMessage.type
+      }).then(response => {
+        show(STRINGS.TOAST.DOWNLOAD_OK, 'success');
+        Logger.log('File saved to', response);
+      }).catch(err => {
+        show(STRINGS.TOAST.DOWNLOAD_ERROR, 'error');
+        Logger.log('File save failure', err);
+      });
+    }
+  };
+  useEffect(() => {
+    if (fileType === 'file') onClose();
+  }, []);
+  return /*#__PURE__*/React.createElement(Box, {
+    flex: 1,
+    backgroundColor: palette.background700
+  }, /*#__PURE__*/React.createElement(StatusBar, {
+    barStyle: 'light-content',
+    animated: true
+  }), /*#__PURE__*/React.createElement(FileViewerHeader, {
+    topInset: headerTopInset ?? basicTopInset,
+    headerShown: headerShown,
+    title: STRINGS.FILE_VIEWER.TITLE(fileMessage),
+    subtitle: STRINGS.FILE_VIEWER.SUBTITLE(fileMessage),
+    onClose: onClose
+  }), /*#__PURE__*/React.createElement(FileViewerContent, {
+    topInset: headerTopInset ?? basicTopInset,
+    bottomInset: bottom,
+    type: fileType,
+    src: fileMessage.url,
+    maxZoom: maxZoom,
+    minZoom: minZoom
+  }), /*#__PURE__*/React.createElement(FileViewerFooter, {
+    bottomInset: bottom,
+    deleteShown: canDelete,
+    onPressDelete: onPressDeleteButton,
+    onPressDownload: onPressDownloadButton
+  }));
+};
+export default FileViewer;
+//# sourceMappingURL=index.js.map

package/lib/module/components/FileViewer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","StatusBar","useSafeAreaInsets","Box","useAlert","useHeaderStyle","useToast","useUIKitTheme","Logger","getFileExtension","getFileType","isMyMessage","toMegabyte","useLocalization","usePlatformService","useSendbirdChat","FileViewerContent","FileViewerFooter","FileViewerHeader","FileViewer","_ref","headerShown","maxZoom","minZoom","headerTopInset","fileMessage","onClose","onPressDownload","onPressDelete","deleteMessage","topInset","statusBarTranslucent","bottom","palette","alert","show","fileService","currentUser","STRINGS","fileType","type","url","canDelete","userId","basicTopInset","onPressDeleteButton","title","LABELS","CHANNEL_MESSAGE_DELETE_CONFIRM_TITLE","buttons","text","CHANNEL_MESSAGE_DELETE_CONFIRM_CANCEL","CHANNEL_MESSAGE_DELETE_CONFIRM_OK","style","onPress","then","catch","TOAST","DELETE_MSG_ERROR","onPressDownloadButton","size","DOWNLOAD_START","save","fileUrl","fileName","name","response","DOWNLOAD_OK","log","err","DOWNLOAD_ERROR","createElement","flex","backgroundColor","background700","barStyle","animated","FILE_VIEWER","TITLE","subtitle","SUBTITLE","bottomInset","src","deleteShown"],"sources":["index.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { StatusBar } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport { Box, useAlert, useHeaderStyle, useToast, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport type { SendbirdFileMessage } from '@sendbird/uikit-utils';\nimport { Logger, getFileExtension, getFileType, isMyMessage, toMegabyte } from '@sendbird/uikit-utils';\n\nimport { useLocalization, usePlatformService, useSendbirdChat } from '../../hooks/useContext';\nimport FileViewerContent from './FileViewerContent';\nimport FileViewerFooter from './FileViewerFooter';\nimport FileViewerHeader from './FileViewerHeader';\n\ntype Props = {\n  fileMessage: SendbirdFileMessage;\n  deleteMessage: () => Promise<void>;\n\n  onClose: () => void;\n  onPressDownload?: (message: SendbirdFileMessage) => void;\n  onPressDelete?: (message: SendbirdFileMessage) => void;\n\n  headerShown?: boolean;\n  headerTopInset?: number;\n\n  /** This prop is only available on the Image viewer */\n  minZoom?: number;\n  /** This prop is only available on the Image viewer */\n  maxZoom?: number;\n};\n\nconst FileViewer = ({\n  headerShown = true,\n  maxZoom = 3,\n  minZoom = 1,\n  headerTopInset,\n  fileMessage,\n  onClose,\n  onPressDownload,\n  onPressDelete,\n  deleteMessage,\n}: Props) => {\n  const { topInset, statusBarTranslucent } = useHeaderStyle();\n  const { bottom } = useSafeAreaInsets();\n  const { palette } = useUIKitTheme();\n  const { alert } = useAlert();\n  const { show } = useToast();\n\n  const { fileService } = usePlatformService();\n  const { currentUser } = useSendbirdChat();\n  const { STRINGS } = useLocalization();\n\n  const fileType = getFileType(fileMessage.type || getFileExtension(fileMessage.url));\n  const canDelete = isMyMessage(fileMessage, currentUser?.userId);\n  const basicTopInset = statusBarTranslucent ? topInset : 0;\n\n  const onPressDeleteButton = () => {\n    if (!canDelete) return;\n\n    if (onPressDelete) {\n      onPressDelete(fileMessage);\n    } else {\n      alert({\n        title: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_TITLE,\n        buttons: [\n          {\n            text: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_CANCEL,\n          },\n          {\n            text: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_OK,\n            style: 'destructive',\n            onPress: () => {\n              deleteMessage()\n                .then(() => {\n                  onClose();\n                })\n                .catch(() => {\n                  show(STRINGS.TOAST.DELETE_MSG_ERROR, 'error');\n                });\n            },\n          },\n        ],\n      });\n    }\n  };\n\n  const onPressDownloadButton = () => {\n    if (onPressDownload) {\n      onPressDownload(fileMessage);\n    } else {\n      if (toMegabyte(fileMessage.size) > 4) {\n        show(STRINGS.TOAST.DOWNLOAD_START, 'success');\n      }\n\n      fileService\n        .save({ fileUrl: fileMessage.url, fileName: fileMessage.name, fileType: fileMessage.type })\n        .then((response) => {\n          show(STRINGS.TOAST.DOWNLOAD_OK, 'success');\n          Logger.log('File saved to', response);\n        })\n        .catch((err) => {\n          show(STRINGS.TOAST.DOWNLOAD_ERROR, 'error');\n          Logger.log('File save failure', err);\n        });\n    }\n  };\n\n  useEffect(() => {\n    if (fileType === 'file') onClose();\n  }, []);\n\n  return (\n    <Box flex={1} backgroundColor={palette.background700}>\n      <StatusBar barStyle={'light-content'} animated />\n      <FileViewerHeader\n        topInset={headerTopInset ?? basicTopInset}\n        headerShown={headerShown}\n        title={STRINGS.FILE_VIEWER.TITLE(fileMessage)}\n        subtitle={STRINGS.FILE_VIEWER.SUBTITLE(fileMessage)}\n        onClose={onClose}\n      />\n      <FileViewerContent\n        topInset={headerTopInset ?? basicTopInset}\n        bottomInset={bottom}\n        type={fileType}\n        src={fileMessage.url}\n        maxZoom={maxZoom}\n        minZoom={minZoom}\n      />\n      <FileViewerFooter\n        bottomInset={bottom}\n        deleteShown={canDelete}\n        onPressDelete={onPressDeleteButton}\n        onPressDownload={onPressDownloadButton}\n      />\n    </Box>\n  );\n};\n\nexport default FileViewer;\n"],"mappings":"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"}

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

@@ -1,10 +1,12 @@
 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 { Box, GroupChannelMessage, Text, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import React, { useContext, useEffect, useRef } from 'react';
+import { Box, GroupChannelMessage, Text, TypingIndicatorBubble, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import { calcMessageGrouping, getMessageType, isMyMessage, isVoiceMessage, shouldRenderParentMessage, shouldRenderReaction, useIIFE } from '@sendbird/uikit-utils';
 import { VOICE_MESSAGE_META_ARRAY_DURATION_KEY } from '../../constants';
+import { GroupChannelContexts } from '../../domain/groupChannel/module/moduleContext';
 import { useLocalization, usePlatformService, useSendbirdChat } from '../../hooks/useContext';
 import SBUUtils from '../../libs/SBUUtils';
+import { TypingIndicatorType } from '../../types';
 import { ReactionAddons } from '../ReactionAddons';
 import GroupChannelMessageDateSeparator from './GroupChannelMessageDateSeparator';
 import GroupChannelMessageFocusAnimation from './GroupChannelMessageFocusAnimation';
@@ -296,5 +298,35 @@ const GroupChannelMessageRenderer = _ref => {
     focused: focused
   }, renderMessage()));
 };
+export const GroupChannelTypingIndicatorBubble = () => {
+  const {
+    sbOptions
+  } = useSendbirdChat();
+  const {
+    publish
+  } = useContext(GroupChannelContexts.PubSub);
+  const {
+    typingUsers
+  } = useContext(GroupChannelContexts.TypingIndicator);
+  const shouldRenderBubble = useIIFE(() => {
+    if (typingUsers.length === 0) return false;
+    if (!sbOptions.uikit.groupChannel.channel.enableTypingIndicator) return false;
+    if (!sbOptions.uikit.groupChannel.channel.typingIndicatorTypes.has(TypingIndicatorType.Bubble)) return false;
+    return true;
+  });
+  useEffect(() => {
+    if (shouldRenderBubble) publish({
+      type: 'TYPING_BUBBLE_RENDERED'
+    });
+  }, [shouldRenderBubble]);
+  if (!shouldRenderBubble) return null;
+  return /*#__PURE__*/React.createElement(Box, {
+    paddingHorizontal: 16,
+    marginTop: 4,
+    marginBottom: 16
+  }, /*#__PURE__*/React.createElement(TypingIndicatorBubble, {
+    typingUsers: typingUsers
+  }));
+};
 export default /*#__PURE__*/React.memo(GroupChannelMessageRenderer);
 //# sourceMappingURL=index.js.map