npm - stream-chat-react-native-core - Versions diffs - 5.22.0-beta.2 → 5.22.0-beta.4 - Mend

stream-chat-react-native-core 5.22.0-beta.2 → 5.22.0-beta.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (136) hide show

package/lib/module/components/ImageGallery/components/AnimatedGalleryVideo.js CHANGED Viewed

@@ -8,15 +8,13 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _useViewport2 = require("../../../hooks/useViewport");
 var _native = require("../../../native");
-var _utils = require("../../../utils/utils");
 var _Spinner = require("../../Spinner/Spinner");
 var _this = this,
   _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/ImageGallery/components/AnimatedGalleryVideo.tsx";
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var screenWidth = (0, _utils.vw)(100);
-var halfScreenWidth = (0, _utils.vw)(50);
 var oneEighth = 1 / 8;
 var styles = _reactNative.StyleSheet.create({
   activityIndicator: {
@@ -50,6 +48,10 @@ var AnimatedGalleryVideo = _react["default"].memo(function (props) {
     translateX = props.translateX,
     translateY = props.translateY,
     videoRef = props.videoRef;
+  var _useViewport = (0, _useViewport2.useViewport)(),
+    vw = _useViewport.vw;
+  var screenWidth = vw(100);
+  var halfScreenWidth = vw(50);
   var onLoadStart = function onLoadStart() {
     setOpacity(1);
   };
@@ -113,7 +115,7 @@ var AnimatedGalleryVideo = _react["default"].memo(function (props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 163,
+        lineNumber: 165,
         columnNumber: 9
       }
     });
@@ -134,7 +136,7 @@ var AnimatedGalleryVideo = _react["default"].memo(function (props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 171,
+      lineNumber: 173,
       columnNumber: 7
     }
   }, (0, _native.isVideoPackageAvailable)() && _react["default"].createElement(_native.Video, {
@@ -154,7 +156,7 @@ var AnimatedGalleryVideo = _react["default"].memo(function (props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 189,
+      lineNumber: 191,
       columnNumber: 11
     }
   }), _react["default"].createElement(_reactNativeReanimated["default"].View, {
@@ -172,7 +174,7 @@ var AnimatedGalleryVideo = _react["default"].memo(function (props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 205,
+      lineNumber: 207,
       columnNumber: 9
     }
   }, _react["default"].createElement(_Spinner.Spinner, {
@@ -181,7 +183,7 @@ var AnimatedGalleryVideo = _react["default"].memo(function (props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 219,
+      lineNumber: 221,
       columnNumber: 11
     }
   })));

package/lib/module/components/ImageGallery/components/AnimatedGalleryVideo.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeReanimated","_native","_utils","_Spinner","_this","_jsxFileName","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","screenWidth","vw","halfScreenWidth","oneEighth","styles","StyleSheet","create","activityIndicator","alignSelf","videoPlayer","height","width","AnimatedGalleryVideo","React","memo","props","_useState","useState","_useState2","_slicedToArray2","opacity","setOpacity","attachmentId","handleEnd","handleLoad","handleProgress","index","offsetScale","paused","previous","repeat","scale","screenHeight","selected","shouldRender","source","style","translateX","translateY","videoRef","onLoadStart","onLoad","payload","duration","onEnd","onProgress","data","currentTime","seekableDuration","onBuffer","_ref","isBuffering","onPlayBackStatusUpdate","playbackStatus","isLoaded","error","console","durationMillis","isPlaying","positionMillis","didJustFinish","isLooping","animatedViewStyles","useAnimatedStyle","xScaleOffset","yScaleOffset","transform","value","scaleX","createElement","View","accessibilityLabel","__self","__source","fileName","lineNumber","columnNumber","isVideoPackageAvailable","Video","onPlaybackStatusUpdate","resizeMode","testID","uri","Spinner","prevProps","nextProps","exports","displayName"],"sources":["AnimatedGalleryVideo.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, ViewStyle } from 'react-native';\nimport type { StyleProp } from 'react-native';\nimport Animated, { useAnimatedStyle } from 'react-native-reanimated';\n\nimport {\n isVideoPackageAvailable,\n PlaybackStatus,\n Video,\n VideoPayloadData,\n VideoProgressData,\n VideoType,\n} from '../../../native';\n\nimport { vw } from '../../../utils/utils';\nimport { Spinner } from '../../Spinner/Spinner';\n\nconst screenWidth = vw(100);\nconst halfScreenWidth = vw(50);\nconst oneEighth = 1 / 8;\n\nexport type AnimatedGalleryVideoType = {\n attachmentId: string;\n handleEnd: () => void;\n handleLoad: (index: string, duration: number) => void;\n handleProgress: (index: string, progress: number, hasEnd?: boolean) => void;\n index: number;\n offsetScale: Animated.SharedValue<number>;\n paused: boolean;\n previous: boolean;\n scale: Animated.SharedValue<number>;\n screenHeight: number;\n selected: boolean;\n shouldRender: boolean;\n source: { uri: string };\n translateX: Animated.SharedValue<number>;\n translateY: Animated.SharedValue<number>;\n videoRef: React.RefObject<VideoType>;\n repeat?: boolean;\n style?: StyleProp<ViewStyle>;\n};\n\nconst styles = StyleSheet.create({\n activityIndicator: {\n alignSelf: 'center',\n },\n videoPlayer: {\n height: '100%',\n width: '100%',\n },\n});\n\nexport const AnimatedGalleryVideo: React.FC<AnimatedGalleryVideoType> = React.memo(\n (props) => {\n const [opacity, setOpacity] = useState<number>(1);\n\n const {\n attachmentId,\n handleEnd,\n handleLoad,\n handleProgress,\n index,\n offsetScale,\n paused,\n previous,\n repeat,\n scale,\n screenHeight,\n selected,\n shouldRender,\n source,\n style,\n translateX,\n translateY,\n videoRef,\n } = props;\n\n const onLoadStart = () => {\n setOpacity(1);\n };\n\n const onLoad = (payload: VideoPayloadData) => {\n setOpacity(0);\n handleLoad(attachmentId, payload.duration);\n };\n\n const onEnd = () => {\n handleEnd();\n };\n\n const onProgress = (data: VideoProgressData) => {\n handleProgress(attachmentId, data.currentTime / data.seekableDuration);\n };\n\n const onBuffer = ({ isBuffering }: { isBuffering: boolean }) => {\n if (isBuffering) setOpacity(1);\n else setOpacity(0);\n };\n\n const onPlayBackStatusUpdate = (playbackStatus: PlaybackStatus) => {\n if (!playbackStatus.isLoaded) {\n // Update your UI for the unloaded state\n setOpacity(1);\n if (playbackStatus.error) {\n console.error(`Encountered a fatal error during playback: ${playbackStatus.error}`);\n }\n } else {\n // Update your UI for the loaded state\n setOpacity(0);\n handleLoad(attachmentId, playbackStatus.durationMillis / 1000);\n if (playbackStatus.isPlaying) {\n // Update your UI for the playing state\n handleProgress(\n attachmentId,\n playbackStatus.positionMillis / 1000 / (playbackStatus.durationMillis / 1000),\n );\n }\n\n if (playbackStatus.isBuffering) {\n // Update your UI for the buffering state\n setOpacity(1);\n }\n\n if (playbackStatus.didJustFinish && !playbackStatus.isLooping) {\n // The player has just finished playing and will stop. Maybe you want to play something else?\n handleEnd();\n }\n }\n };\n\n const animatedViewStyles = useAnimatedStyle<ViewStyle>(() => {\n const xScaleOffset = -7 * screenWidth * (0.5 + index);\n const yScaleOffset = -screenHeight * 3.5;\n return {\n transform: [\n {\n translateX: selected\n ? translateX.value + xScaleOffset\n : scale.value < 1 \|\| scale.value !== offsetScale.value\n ? xScaleOffset\n : previous\n ? translateX.value - halfScreenWidth * (scale.value - 1) + xScaleOffset\n : translateX.value + halfScreenWidth * (scale.value - 1) + xScaleOffset,\n },\n {\n translateY: selected ? translateY.value + yScaleOffset : yScaleOffset,\n },\n {\n scale: selected ? scale.value / 8 : oneEighth,\n },\n { scaleX: -1 },\n ],\n };\n }, [previous, selected]);\n\n /*\n An empty view is rendered for images not close to the currently\n * selected in order to maintain spacing while reducing the image\n * load on memory.\n /\n if (!shouldRender) {\n return (\n <View\n accessibilityLabel='Empty View Image Gallery'\n style={[style, { transform: [{ scale: oneEighth }] }]}\n />\n );\n }\n\n return (\n <Animated.View\n accessibilityLabel='Image Gallery Video'\n style={[\n style,\n animatedViewStyles,\n {\n transform: [\n { scaleX: -1 },\n { translateY: -screenHeight 3.5 },\n {\n translateX: -translateX.value + 7 * screenWidth * (0.5 + index),\n },\n { scale: oneEighth },\n ],\n },\n ]}\n >\n {isVideoPackageAvailable() && (\n <Video\n onBuffer={onBuffer}\n onEnd={onEnd}\n onLoad={onLoad}\n onLoadStart={onLoadStart}\n onPlaybackStatusUpdate={onPlayBackStatusUpdate}\n onProgress={onProgress}\n paused={paused}\n repeat={repeat}\n resizeMode='contain'\n style={style}\n testID='video-player'\n uri={source.uri}\n videoRef={videoRef}\n />\n )}\n <Animated.View\n accessibilityLabel='Spinner'\n style={[\n styles.activityIndicator,\n {\n opacity,\n transform: [\n { scaleX: -1 },\n { translateY: -screenHeight * 4 },\n { scale: 1 / oneEighth },\n ],\n },\n ]}\n >\n <Spinner height={40} width={40} />\n </Animated.View>\n </Animated.View>\n );\n },\n\n (prevProps, nextProps) => {\n if (\n prevProps.paused === nextProps.paused &&\n prevProps.repeat === nextProps.repeat &&\n prevProps.shouldRender === nextProps.shouldRender &&\n prevProps.source.uri === nextProps.source.uri &&\n prevProps.screenHeight === nextProps.screenHeight &&\n prevProps.selected === nextProps.selected &&\n prevProps.previous === nextProps.previous &&\n prevProps.index === nextProps.index\n ) {\n return true;\n }\n return false;\n },\n);\n\nAnimatedGalleryVideo.displayName = 'AnimatedGalleryVideo';\n"],"mappings":"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"}
1	+ {"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeReanimated","_useViewport2","_native","_Spinner","_this","_jsxFileName","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","oneEighth","styles","StyleSheet","create","activityIndicator","alignSelf","videoPlayer","height","width","AnimatedGalleryVideo","React","memo","props","_useState","useState","_useState2","_slicedToArray2","opacity","setOpacity","attachmentId","handleEnd","handleLoad","handleProgress","index","offsetScale","paused","previous","repeat","scale","screenHeight","selected","shouldRender","source","style","translateX","translateY","videoRef","_useViewport","useViewport","vw","screenWidth","halfScreenWidth","onLoadStart","onLoad","payload","duration","onEnd","onProgress","data","currentTime","seekableDuration","onBuffer","_ref","isBuffering","onPlayBackStatusUpdate","playbackStatus","isLoaded","error","console","durationMillis","isPlaying","positionMillis","didJustFinish","isLooping","animatedViewStyles","useAnimatedStyle","xScaleOffset","yScaleOffset","transform","value","scaleX","createElement","View","accessibilityLabel","__self","__source","fileName","lineNumber","columnNumber","isVideoPackageAvailable","Video","onPlaybackStatusUpdate","resizeMode","testID","uri","Spinner","prevProps","nextProps","exports","displayName"],"sources":["AnimatedGalleryVideo.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, ViewStyle } from 'react-native';\nimport type { StyleProp } from 'react-native';\nimport Animated, { useAnimatedStyle } from 'react-native-reanimated';\n\nimport { useViewport } from '../../../hooks/useViewport';\nimport {\n isVideoPackageAvailable,\n PlaybackStatus,\n Video,\n VideoPayloadData,\n VideoProgressData,\n VideoType,\n} from '../../../native';\n\nimport { Spinner } from '../../Spinner/Spinner';\n\nconst oneEighth = 1 / 8;\n\nexport type AnimatedGalleryVideoType = {\n attachmentId: string;\n handleEnd: () => void;\n handleLoad: (index: string, duration: number) => void;\n handleProgress: (index: string, progress: number, hasEnd?: boolean) => void;\n index: number;\n offsetScale: Animated.SharedValue<number>;\n paused: boolean;\n previous: boolean;\n scale: Animated.SharedValue<number>;\n screenHeight: number;\n selected: boolean;\n shouldRender: boolean;\n source: { uri: string };\n translateX: Animated.SharedValue<number>;\n translateY: Animated.SharedValue<number>;\n videoRef: React.RefObject<VideoType>;\n repeat?: boolean;\n style?: StyleProp<ViewStyle>;\n};\n\nconst styles = StyleSheet.create({\n activityIndicator: {\n alignSelf: 'center',\n },\n videoPlayer: {\n height: '100%',\n width: '100%',\n },\n});\n\nexport const AnimatedGalleryVideo: React.FC<AnimatedGalleryVideoType> = React.memo(\n (props) => {\n const [opacity, setOpacity] = useState<number>(1);\n\n const {\n attachmentId,\n handleEnd,\n handleLoad,\n handleProgress,\n index,\n offsetScale,\n paused,\n previous,\n repeat,\n scale,\n screenHeight,\n selected,\n shouldRender,\n source,\n style,\n translateX,\n translateY,\n videoRef,\n } = props;\n const { vw } = useViewport();\n\n const screenWidth = vw(100);\n const halfScreenWidth = vw(50);\n\n const onLoadStart = () => {\n setOpacity(1);\n };\n\n const onLoad = (payload: VideoPayloadData) => {\n setOpacity(0);\n handleLoad(attachmentId, payload.duration);\n };\n\n const onEnd = () => {\n handleEnd();\n };\n\n const onProgress = (data: VideoProgressData) => {\n handleProgress(attachmentId, data.currentTime / data.seekableDuration);\n };\n\n const onBuffer = ({ isBuffering }: { isBuffering: boolean }) => {\n if (isBuffering) setOpacity(1);\n else setOpacity(0);\n };\n\n const onPlayBackStatusUpdate = (playbackStatus: PlaybackStatus) => {\n if (!playbackStatus.isLoaded) {\n // Update your UI for the unloaded state\n setOpacity(1);\n if (playbackStatus.error) {\n console.error(`Encountered a fatal error during playback: ${playbackStatus.error}`);\n }\n } else {\n // Update your UI for the loaded state\n setOpacity(0);\n handleLoad(attachmentId, playbackStatus.durationMillis / 1000);\n if (playbackStatus.isPlaying) {\n // Update your UI for the playing state\n handleProgress(\n attachmentId,\n playbackStatus.positionMillis / 1000 / (playbackStatus.durationMillis / 1000),\n );\n }\n\n if (playbackStatus.isBuffering) {\n // Update your UI for the buffering state\n setOpacity(1);\n }\n\n if (playbackStatus.didJustFinish && !playbackStatus.isLooping) {\n // The player has just finished playing and will stop. Maybe you want to play something else?\n handleEnd();\n }\n }\n };\n\n const animatedViewStyles = useAnimatedStyle<ViewStyle>(() => {\n const xScaleOffset = -7 * screenWidth * (0.5 + index);\n const yScaleOffset = -screenHeight * 3.5;\n return {\n transform: [\n {\n translateX: selected\n ? translateX.value + xScaleOffset\n : scale.value < 1 \|\| scale.value !== offsetScale.value\n ? xScaleOffset\n : previous\n ? translateX.value - halfScreenWidth * (scale.value - 1) + xScaleOffset\n : translateX.value + halfScreenWidth * (scale.value - 1) + xScaleOffset,\n },\n {\n translateY: selected ? translateY.value + yScaleOffset : yScaleOffset,\n },\n {\n scale: selected ? scale.value / 8 : oneEighth,\n },\n { scaleX: -1 },\n ],\n };\n }, [previous, selected]);\n\n /*\n An empty view is rendered for images not close to the currently\n * selected in order to maintain spacing while reducing the image\n * load on memory.\n /\n if (!shouldRender) {\n return (\n <View\n accessibilityLabel='Empty View Image Gallery'\n style={[style, { transform: [{ scale: oneEighth }] }]}\n />\n );\n }\n\n return (\n <Animated.View\n accessibilityLabel='Image Gallery Video'\n style={[\n style,\n animatedViewStyles,\n {\n transform: [\n { scaleX: -1 },\n { translateY: -screenHeight 3.5 },\n {\n translateX: -translateX.value + 7 * screenWidth * (0.5 + index),\n },\n { scale: oneEighth },\n ],\n },\n ]}\n >\n {isVideoPackageAvailable() && (\n <Video\n onBuffer={onBuffer}\n onEnd={onEnd}\n onLoad={onLoad}\n onLoadStart={onLoadStart}\n onPlaybackStatusUpdate={onPlayBackStatusUpdate}\n onProgress={onProgress}\n paused={paused}\n repeat={repeat}\n resizeMode='contain'\n style={style}\n testID='video-player'\n uri={source.uri}\n videoRef={videoRef}\n />\n )}\n <Animated.View\n accessibilityLabel='Spinner'\n style={[\n styles.activityIndicator,\n {\n opacity,\n transform: [\n { scaleX: -1 },\n { translateY: -screenHeight * 4 },\n { scale: 1 / oneEighth },\n ],\n },\n ]}\n >\n <Spinner height={40} width={40} />\n </Animated.View>\n </Animated.View>\n );\n },\n\n (prevProps, nextProps) => {\n if (\n prevProps.paused === nextProps.paused &&\n prevProps.repeat === nextProps.repeat &&\n prevProps.shouldRender === nextProps.shouldRender &&\n prevProps.source.uri === nextProps.source.uri &&\n prevProps.screenHeight === nextProps.screenHeight &&\n prevProps.selected === nextProps.selected &&\n prevProps.previous === nextProps.previous &&\n prevProps.index === nextProps.index\n ) {\n return true;\n }\n return false;\n },\n);\n\nAnimatedGalleryVideo.displayName = 'AnimatedGalleryVideo';\n"],"mappings":"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"}

package/lib/module/components/ImageGallery/components/ImageGrid.js CHANGED Viewed

@@ -10,7 +10,7 @@ var _reactNative = require("react-native");
 var _bottomSheet = require("@gorhom/bottom-sheet");
 var _VideoThumbnail = require("../../../components/Attachment/VideoThumbnail");
 var _ThemeContext = require("../../../contexts/themeContext/ThemeContext");
-var _utils = require("../../../utils/utils");
+var _useViewport2 = require("../../../hooks/useViewport");
 var _excluded = ["imageComponent"];
 var _this = this,
   _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/ImageGallery/components/ImageGrid.tsx";
@@ -38,13 +38,15 @@ var GridImage = function GridImage(_ref) {
   var item = _ref.item;
   var _useTheme = (0, _ThemeContext.useTheme)(),
     gridImage = _useTheme.theme.imageGallery.grid.gridImage;
+  var _useViewport = (0, _useViewport2.useViewport)(),
+    vw = _useViewport.vw;
   var imageComponent = item.imageComponent,
     restItem = (0, _objectWithoutProperties2["default"])(item, _excluded);
   var numberOfImageGalleryGridColumns = restItem.numberOfImageGalleryGridColumns,
     selectAndClose = restItem.selectAndClose,
     type = restItem.type,
     uri = restItem.uri;
-  var size = (0, _utils.vw)(100) / (numberOfImageGalleryGridColumns || 3) - 2;
+  var size = vw(100) / (numberOfImageGalleryGridColumns || 3) - 2;
   if (imageComponent) {
     return imageComponent({
       item: restItem
@@ -56,7 +58,7 @@ var GridImage = function GridImage(_ref) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 85,
+      lineNumber: 86,
       columnNumber: 5
     }
   }, type === 'video' ? _react["default"].createElement(_reactNative.View, {
@@ -67,14 +69,14 @@ var GridImage = function GridImage(_ref) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 87,
+      lineNumber: 88,
       columnNumber: 9
     }
   }, _react["default"].createElement(_VideoThumbnail.VideoThumbnail, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 88,
+      lineNumber: 89,
       columnNumber: 11
     }
   })) : _react["default"].createElement(_reactNative.Image, {
@@ -88,7 +90,7 @@ var GridImage = function GridImage(_ref) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 91,
+      lineNumber: 92,
       columnNumber: 9
     }
   }));
@@ -100,7 +102,7 @@ var renderItem = function renderItem(_ref2) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 103,
+      lineNumber: 104,
       columnNumber: 7
     }
   });
@@ -147,7 +149,7 @@ var ImageGrid = function ImageGrid(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 157,
+      lineNumber: 158,
       columnNumber: 5
     }
   });

package/lib/module/components/ImageGallery/components/ImageGrid.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_bottomSheet","_VideoThumbnail","_ThemeContext","~~_utils~~","_excluded","_this","_jsxFileName","styles","StyleSheet","create","avatarImage","borderRadius","height","width","avatarImageWrapper","borderWidth","margin","contentContainer","flexGrow","image","GridImage","_ref","item","_useTheme","useTheme","gridImage","theme","imageGallery","grid","imageComponent","restItem","_objectWithoutProperties2","numberOfImageGalleryGridColumns","selectAndClose","type","uri","size","~~vw","~~createElement","TouchableOpacity","accessibilityLabel","onPress","__self","__source","fileName","lineNumber","columnNumber","View","style","VideoThumbnail","Image","source","renderItem","_ref2","ImageGrid","props","avatarComponent","closeGridView","photos","setSelectedMessage","_useTheme2","_useTheme2$theme","white","colors","_useTheme2$theme$imag","container","imageGridItems","map","photo","_extends2","messageId","url","BottomSheetFlatList","contentContainerStyle","backgroundColor","data","keyExtractor","index","numColumns","exports","displayName"],"sources":["ImageGrid.tsx"],"sourcesContent":["import React from 'react';\nimport { Image, StyleSheet, View } from 'react-native';\n\nimport { BottomSheetFlatList, TouchableOpacity } from '@gorhom/bottom-sheet';\n\nimport { VideoThumbnail } from '../../../components/Attachment/VideoThumbnail';\nimport { useTheme } from '../../../contexts/themeContext/ThemeContext';\nimport ~~type~~ { ~~DefaultStreamChatGenerics~~ } from '../../../~~types~~/~~types~~';\nimport { vw } from '../../../~~utils~~/~~utils~~';\n\nimport type { Photo } from '../ImageGallery';\n\nconst styles = StyleSheet.create({\n avatarImage: {\n borderRadius: 22,\n height: 22,\n width: 22,\n },\n avatarImageWrapper: {\n borderRadius: 24,\n borderWidth: 1,\n height: 24,\n margin: 8,\n width: 24,\n },\n contentContainer: {\n flexGrow: 1,\n },\n image: {\n margin: 1,\n },\n});\n\nexport type ImageGalleryGridImageComponent<\n StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = ({\n item,\n}: {\n item: Photo<StreamChatGenerics> & {\n selectAndClose: () => void;\n numberOfImageGalleryGridColumns?: number;\n };\n}) => React.ReactElement \| null;\n\nexport type ImageGalleryGridImageComponents<\n StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = {\n avatarComponent?: ImageGalleryGridImageComponent<StreamChatGenerics>;\n imageComponent?: ImageGalleryGridImageComponent<StreamChatGenerics>;\n};\n\nexport type GridImageItem<\n StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Photo<StreamChatGenerics> &\n ImageGalleryGridImageComponents<StreamChatGenerics> & {\n selectAndClose: () => void;\n numberOfImageGalleryGridColumns?: number;\n };\n\nconst GridImage = <\n StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>({\n item,\n}: {\n item: GridImageItem<StreamChatGenerics>;\n}) => {\n const {\n theme: {\n imageGallery: {\n grid: { gridImage },\n },\n },\n } = useTheme();\n const { imageComponent, ...restItem } = item;\n\n const { numberOfImageGalleryGridColumns, selectAndClose, type, uri } = restItem;\n\n const size = vw(100) / (numberOfImageGalleryGridColumns \|\| 3) - 2;\n\n if (imageComponent) {\n return imageComponent({ item: restItem });\n }\n\n return (\n <TouchableOpacity accessibilityLabel='Grid Image' onPress={selectAndClose}>\n {type === 'video' ? (\n <View style={[styles.image, { height: size, width: size }, gridImage]}>\n <VideoThumbnail />\n </View>\n ) : (\n <Image source={{ uri }} style={[styles.image, { height: size, width: size }]} />\n )}\n </TouchableOpacity>\n );\n};\n\nconst renderItem = <\n StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>({\n item,\n}: {\n item: GridImageItem<StreamChatGenerics>;\n}) => <GridImage item={item} />;\n\nexport type ImageGridType<\n StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = ImageGalleryGridImageComponents<StreamChatGenerics> & {\n closeGridView: () => void;\n photos: Photo<StreamChatGenerics>[];\n setSelectedMessage: React.Dispatch<\n React.SetStateAction<\n \| {\n messageId?: string \| undefined;\n url?: string \| undefined;\n }\n \| undefined\n >\n >;\n numberOfImageGalleryGridColumns?: number;\n};\n\nexport const ImageGrid = <\n StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n props: ImageGridType<StreamChatGenerics>,\n) => {\n const {\n avatarComponent,\n closeGridView,\n imageComponent,\n numberOfImageGalleryGridColumns,\n photos,\n setSelectedMessage,\n } = props;\n\n const {\n theme: {\n colors: { white },\n imageGallery: {\n grid: { container, contentContainer },\n },\n },\n } = useTheme();\n\n const imageGridItems = photos.map((photo) => ({\n ...photo,\n avatarComponent,\n imageComponent,\n numberOfImageGalleryGridColumns,\n selectAndClose: () => {\n setSelectedMessage({ messageId: photo.messageId, url: photo.uri });\n closeGridView();\n },\n }));\n\n return (\n <BottomSheetFlatList<GridImageItem<StreamChatGenerics>>\n accessibilityLabel='Image Grid'\n contentContainerStyle={[\n styles.contentContainer,\n { backgroundColor: white },\n contentContainer,\n ]}\n data={imageGridItems as GridImageItem<StreamChatGenerics>[]}\n keyExtractor={(item, index) => `${item.uri}-${index}`}\n numColumns={numberOfImageGalleryGridColumns \|\| 3}\n renderItem={renderItem}\n style={container}\n />\n );\n};\n\nImageGrid.displayName = 'ImageGrid{imageGallery{grid}}';\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAEA,IAAAE,YAAA,GAAAF,OAAA;AAEA,IAAAG,eAAA,GAAAH,OAAA;AACA,IAAAI,aAAA,GAAAJ,OAAA;~~AAEA~~,IAAAK,~~MAAA~~,GAAAL,OAAA;~~AAA0C~~,IAAAM,SAAA;AAAA,IAAAC,KAAA;EAAAC,YAAA;~~AAI1C~~,IAAMC,MAAM,GAAGC,uBAAU,CAACC,MAAM,CAAC;EAC/BC,WAAW,EAAE;IACXC,YAAY,EAAE,EAAE;IAChBC,MAAM,EAAE,EAAE;IACVC,KAAK,EAAE;EACT,CAAC;EACDC,kBAAkB,EAAE;IAClBH,YAAY,EAAE,EAAE;IAChBI,WAAW,EAAE,CAAC;IACdH,MAAM,EAAE,EAAE;IACVI,MAAM,EAAE,CAAC;IACTH,KAAK,EAAE;EACT,CAAC;EACDI,gBAAgB,EAAE;IAChBC,QAAQ,EAAE;EACZ,CAAC;EACDC,KAAK,EAAE;IACLH,MAAM,EAAE;EACV;AACF,CAAC,CAAC;AA4BF,IAAMI,SAAS,GAAG,SAAZA,SAASA,CAAAC,IAAA,EAMT;EAAA,IAHJC,IAAI,GAAAD,IAAA,CAAJC,IAAI;EAIJ,IAAAC,SAAA,GAMI,IAAAC,sBAAQ,EAAC,CAAC;IAHAC,SAAS,GAAAF,SAAA,CAFrBG,KAAK,CACHC,YAAY,CACVC,IAAI,CAAIH,SAAS;EAIvB,~~IAAQI~~,cAAc,~~GAAkBP~~,IAAI,~~CAApCO~~,cAAc;IAAKC,QAAQ,OAAAC,yBAAA,~~aAAKT~~,IAAI,EAAAlB,SAAA;EAE5C,~~IAAQ4B~~,+BAA+B,GAAgCF,QAAQ,CAAvEE,+BAA+B;IAAEC,cAAc,GAAgBH,QAAQ,CAAtCG,cAAc;IAAEC,IAAI,GAAUJ,QAAQ,CAAtBI,IAAI;IAAEC,GAAG,GAAKL,QAAQ,CAAhBK,GAAG;EAElE,IAAMC,IAAI,~~GAAG~~,~~IAAAC~~,~~SAAE~~,~~EAAC,~~GAAG,CAAC,~~IAAIL~~,+BAA+B,IAAI,CAAC,CAAC,GAAG,CAAC;EAEjE,IAAIH,cAAc,EAAE;IAClB,OAAOA,cAAc,CAAC;~~MAAEP~~,IAAI,~~EAAEQ~~;IAAS,CAAC,CAAC;EAC3C;EAEA,~~OACElC~~,MAAA,~~YAAA0C~~,aAAA,~~CAACtC~~,YAAA,~~CAAAuC~~,gBAAgB;IAACC,kBAAkB,EAAC,YAAY;IAACC,OAAO,~~EAAER~~,cAAe;~~IAAAS~~,MAAA,~~EAAArC~~,KAAA;~~IAAAsC~~,QAAA;MAAAC,QAAA,~~EAAAtC~~,YAAA;~~MAAAuC~~,UAAA;MAAAC,YAAA;IAAA;EAAA,~~GACvEZ~~,IAAI,KAAK,OAAO,~~GACftC~~,MAAA,~~YAAA0C~~,aAAA,~~CAACvC~~,YAAA,~~CAAAgD~~,IAAI;IAACC,KAAK,EAAE,~~CAACzC~~,MAAM,CAACY,KAAK,EAAE;MAAEP,MAAM,~~EAAEwB~~,IAAI;~~MAAEvB~~,KAAK,~~EAAEuB~~;IAAK,CAAC,~~EAAEX~~,SAAS,CAAE;~~IAAAiB~~,MAAA,~~EAAArC~~,KAAA;~~IAAAsC~~,QAAA;MAAAC,QAAA,~~EAAAtC~~,YAAA;~~MAAAuC~~,UAAA;MAAAC,YAAA;IAAA;EAAA,~~GACpElD~~,MAAA,~~YAAA0C~~,aAAA,~~CAACrC~~,eAAA,~~CAAAgD~~,cAAc;IAAAP,MAAA,~~EAAArC~~,KAAA;~~IAAAsC~~,QAAA;MAAAC,QAAA,~~EAAAtC~~,YAAA;~~MAAAuC~~,UAAA;MAAAC,YAAA;IAAA;EAAA,CAAE,CACb,CAAC,~~GAEPlD~~,MAAA,~~YAAA0C~~,aAAA,~~CAACvC~~,YAAA,~~CAAAmD~~,KAAK;IAACC,MAAM,EAAE;~~MAAEhB~~,GAAG,EAAHA;IAAI,CAAE;~~IAACa~~,KAAK,EAAE,~~CAACzC~~,MAAM,CAACY,KAAK,EAAE;MAAEP,MAAM,~~EAAEwB~~,IAAI;~~MAAEvB~~,KAAK,~~EAAEuB~~;IAAK,CAAC,CAAE;~~IAAAM~~,MAAA,~~EAAArC~~,KAAA;~~IAAAsC~~,QAAA;MAAAC,QAAA,~~EAAAtC~~,YAAA;~~MAAAuC~~,UAAA;MAAAC,YAAA;IAAA;EAAA,CAAE,CAEjE,CAAC;AAEvB,CAAC;AAED,IAAMM,UAAU,GAAG,SAAbA,UAAUA,CAAAC,KAAA;EAAA,~~IAGd/B~~,IAAI,~~GAAA+B~~,KAAA,~~CAAJ/B~~,IAAI;EAAA,OAGA1B,MAAA,~~YAAA0C~~,aAAA,~~CAAClB~~,SAAS;IAACE,IAAI,EAAEA,IAAK;~~IAAAoB~~,MAAA,~~EAAArC~~,KAAA;~~IAAAsC~~,QAAA;MAAAC,QAAA,~~EAAAtC~~,YAAA;~~MAAAuC~~,UAAA;MAAAC,YAAA;IAAA;EAAA,CAAE,CAAC;AAAA;AAmBxB,IAAMQ,SAAS,GAAG,SAAZA,SAASA,CAGpBC,KAAwC,EACrC;EACH,IACEC,eAAe,GAMbD,KAAK,CANPC,eAAe;IACfC,aAAa,GAKXF,KAAK,CALPE,aAAa;~~IACb5B~~,cAAc,~~GAIZ0B~~,KAAK,~~CAJP1B~~,cAAc;IACdG,+BAA+B,~~GAG7BuB~~,KAAK,~~CAHPvB~~,+BAA+B;IAC/~~B0B~~,MAAM,GAEJH,KAAK,CAFPG,MAAM;IACNC,kBAAkB,GAChBJ,KAAK,CADPI,kBAAkB;EAGpB,IAAAC,UAAA,GAOI,~~IAAApC~~,sBAAQ,EAAC,CAAC;~~IAAAqC~~,gBAAA,GAAAD,UAAA,~~CANZlC~~,KAAK;~~IACOoC~~,KAAK,GAAAD,gBAAA,CAAfE,MAAM,CAAID,KAAK;IAAAE,qBAAA,GAAAH,gBAAA,~~CACflC~~,YAAY,CACVC,IAAI;~~IAAIqC~~,SAAS,GAAAD,qBAAA,CAATC,SAAS;~~IAAEhD~~,gBAAgB,~~GAAA+C~~,qBAAA,~~CAAhB/C~~,gBAAgB;EAKzC,~~IAAMiD~~,cAAc,GAAGR,MAAM,CAACS,GAAG,CAAC,UAACC,KAAK;IAAA,WAAAC,SAAA,iBACnCD,KAAK;MACRZ,eAAe,EAAfA,eAAe;~~MACf3B~~,cAAc,EAAdA,cAAc;MACdG,+BAA+B,EAA/BA,+BAA+B;MAC/BC,cAAc,EAAE,SAAAA,eAAA,EAAM;~~QACpB0B~~,kBAAkB,CAAC;UAAEW,SAAS,EAAEF,KAAK,CAACE,SAAS;UAAEC,GAAG,EAAEH,KAAK,~~CAACjC~~;QAAI,CAAC,CAAC;~~QAClEsB~~,aAAa,CAAC,CAAC;MACjB;IAAC;EAAA,CACD,CAAC;EAEH,~~OACE7D~~,MAAA,~~YAAA0C~~,aAAA,~~CAACtC~~,YAAA,~~CAAAwE~~,mBAAmB;IAClBhC,kBAAkB,EAAC,YAAY;IAC/BiC,qBAAqB,EAAE,~~CACrBlE~~,MAAM,CAACU,gBAAgB,EACvB;~~MAAEyD~~,eAAe,EAAEZ;IAAM,CAAC,~~EAC1B7C~~,gBAAgB,CAChB;~~IACF0D~~,IAAI,EAAET,cAAsD;IAC5DU,YAAY,EAAE,SAAAA,~~aAACtD~~,IAAI,~~EAAEuD~~,KAAK;MAAA,~~OAAQvD~~,IAAI,~~CAACa~~,GAAG,~~SAAI0C~~,KAAK;IAAA,CAAG;IACtDC,UAAU,~~EAAE9C~~,+BAA+B,IAAI,CAAE;~~IACjDoB~~,UAAU,EAAEA,UAAW;IACvBJ,KAAK,EAAEiB,SAAU;IAAAvB,MAAA,~~EAAArC~~,KAAA;~~IAAAsC~~,QAAA;MAAAC,QAAA,~~EAAAtC~~,YAAA;~~MAAAuC~~,UAAA;MAAAC,YAAA;IAAA;EAAA,CAClB,CAAC;AAEN,CAAC;AAACiC,OAAA,CAAAzB,SAAA,GAAAA,SAAA;AAEFA,SAAS,CAAC0B,WAAW,GAAG,+BAA+B"}
1	+ {"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_bottomSheet","_VideoThumbnail","_ThemeContext","_useViewport2","_excluded","_this","_jsxFileName","styles","StyleSheet","create","avatarImage","borderRadius","height","width","avatarImageWrapper","borderWidth","margin","contentContainer","flexGrow","image","GridImage","_ref","item","_useTheme","useTheme","gridImage","theme","imageGallery","grid","_useViewport","useViewport","vw","imageComponent","restItem","_objectWithoutProperties2","numberOfImageGalleryGridColumns","selectAndClose","type","uri","size","createElement","TouchableOpacity","accessibilityLabel","onPress","__self","__source","fileName","lineNumber","columnNumber","View","style","VideoThumbnail","Image","source","renderItem","_ref2","ImageGrid","props","avatarComponent","closeGridView","photos","setSelectedMessage","_useTheme2","_useTheme2$theme","white","colors","_useTheme2$theme$imag","container","imageGridItems","map","photo","_extends2","messageId","url","BottomSheetFlatList","contentContainerStyle","backgroundColor","data","keyExtractor","index","numColumns","exports","displayName"],"sources":["ImageGrid.tsx"],"sourcesContent":["import React from 'react';\nimport { Image, StyleSheet, View } from 'react-native';\n\nimport { BottomSheetFlatList, TouchableOpacity } from '@gorhom/bottom-sheet';\n\nimport { VideoThumbnail } from '../../../components/Attachment/VideoThumbnail';\nimport { useTheme } from '../../../contexts/themeContext/ThemeContext';\nimport { useViewport } from '../../../hooks/useViewport';\nimport type { DefaultStreamChatGenerics } from '../../../types/types';\n\nimport type { Photo } from '../ImageGallery';\n\nconst styles = StyleSheet.create({\n avatarImage: {\n borderRadius: 22,\n height: 22,\n width: 22,\n },\n avatarImageWrapper: {\n borderRadius: 24,\n borderWidth: 1,\n height: 24,\n margin: 8,\n width: 24,\n },\n contentContainer: {\n flexGrow: 1,\n },\n image: {\n margin: 1,\n },\n});\n\nexport type ImageGalleryGridImageComponent<\n StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = ({\n item,\n}: {\n item: Photo<StreamChatGenerics> & {\n selectAndClose: () => void;\n numberOfImageGalleryGridColumns?: number;\n };\n}) => React.ReactElement \| null;\n\nexport type ImageGalleryGridImageComponents<\n StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = {\n avatarComponent?: ImageGalleryGridImageComponent<StreamChatGenerics>;\n imageComponent?: ImageGalleryGridImageComponent<StreamChatGenerics>;\n};\n\nexport type GridImageItem<\n StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Photo<StreamChatGenerics> &\n ImageGalleryGridImageComponents<StreamChatGenerics> & {\n selectAndClose: () => void;\n numberOfImageGalleryGridColumns?: number;\n };\n\nconst GridImage = <\n StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>({\n item,\n}: {\n item: GridImageItem<StreamChatGenerics>;\n}) => {\n const {\n theme: {\n imageGallery: {\n grid: { gridImage },\n },\n },\n } = useTheme();\n const { vw } = useViewport();\n const { imageComponent, ...restItem } = item;\n\n const { numberOfImageGalleryGridColumns, selectAndClose, type, uri } = restItem;\n\n const size = vw(100) / (numberOfImageGalleryGridColumns \|\| 3) - 2;\n\n if (imageComponent) {\n return imageComponent({ item: restItem });\n }\n\n return (\n <TouchableOpacity accessibilityLabel='Grid Image' onPress={selectAndClose}>\n {type === 'video' ? (\n <View style={[styles.image, { height: size, width: size }, gridImage]}>\n <VideoThumbnail />\n </View>\n ) : (\n <Image source={{ uri }} style={[styles.image, { height: size, width: size }]} />\n )}\n </TouchableOpacity>\n );\n};\n\nconst renderItem = <\n StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>({\n item,\n}: {\n item: GridImageItem<StreamChatGenerics>;\n}) => <GridImage item={item} />;\n\nexport type ImageGridType<\n StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = ImageGalleryGridImageComponents<StreamChatGenerics> & {\n closeGridView: () => void;\n photos: Photo<StreamChatGenerics>[];\n setSelectedMessage: React.Dispatch<\n React.SetStateAction<\n \| {\n messageId?: string \| undefined;\n url?: string \| undefined;\n }\n \| undefined\n >\n >;\n numberOfImageGalleryGridColumns?: number;\n};\n\nexport const ImageGrid = <\n StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n props: ImageGridType<StreamChatGenerics>,\n) => {\n const {\n avatarComponent,\n closeGridView,\n imageComponent,\n numberOfImageGalleryGridColumns,\n photos,\n setSelectedMessage,\n } = props;\n\n const {\n theme: {\n colors: { white },\n imageGallery: {\n grid: { container, contentContainer },\n },\n },\n } = useTheme();\n\n const imageGridItems = photos.map((photo) => ({\n ...photo,\n avatarComponent,\n imageComponent,\n numberOfImageGalleryGridColumns,\n selectAndClose: () => {\n setSelectedMessage({ messageId: photo.messageId, url: photo.uri });\n closeGridView();\n },\n }));\n\n return (\n <BottomSheetFlatList<GridImageItem<StreamChatGenerics>>\n accessibilityLabel='Image Grid'\n contentContainerStyle={[\n styles.contentContainer,\n { backgroundColor: white },\n contentContainer,\n ]}\n data={imageGridItems as GridImageItem<StreamChatGenerics>[]}\n keyExtractor={(item, index) => `${item.uri}-${index}`}\n numColumns={numberOfImageGalleryGridColumns \|\| 3}\n renderItem={renderItem}\n style={container}\n />\n );\n};\n\nImageGrid.displayName = 'ImageGrid{imageGallery{grid}}';\n"],"mappings":"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"}

package/lib/module/components/Indicators/EmptyStateIndicator.js CHANGED Viewed

@@ -7,11 +7,10 @@ var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
 var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
 var _TranslationContext = require("../../contexts/translationContext/TranslationContext");
+var _useViewport2 = require("../../hooks/useViewport");
 var _MessageIcon = require("../../icons/MessageIcon");
-var _utils = require("../../utils/utils");
 var _this = this,
   _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/Indicators/EmptyStateIndicator.tsx";
-var width = (0, _utils.vw)(33);
 var styles = _reactNative.StyleSheet.create({
   channelContainer: {
     alignItems: 'center',
@@ -20,8 +19,7 @@ var styles = _reactNative.StyleSheet.create({
   },
   channelDetails: {
     fontSize: 14,
-    textAlign: 'center',
-    width: (0, _utils.vw)(66)
+    textAlign: 'center'
   },
   channelTitle: {
     fontSize: 16,
@@ -41,6 +39,9 @@ var EmptyStateIndicator = function EmptyStateIndicator(_ref) {
     channelContainer = _useTheme$theme$empty.channelContainer,
     channelDetails = _useTheme$theme$empty.channelDetails,
     channelTitle = _useTheme$theme$empty.channelTitle;
+  var _useViewport = (0, _useViewport2.useViewport)(),
+    vw = _useViewport.vw;
+  var width = vw(33);
   var _useTranslationContex = (0, _TranslationContext.useTranslationContext)(),
     t = _useTranslationContex.t;
   switch (listType) {
@@ -50,7 +51,7 @@ var EmptyStateIndicator = function EmptyStateIndicator(_ref) {
         __self: _this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 45,
+          lineNumber: 44,
           columnNumber: 9
         }
       }, _react["default"].createElement(_MessageIcon.MessageIcon, {
@@ -60,7 +61,7 @@ var EmptyStateIndicator = function EmptyStateIndicator(_ref) {
         __self: _this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 46,
+          lineNumber: 45,
           columnNumber: 11
         }
       }), _react["default"].createElement(_reactNative.Text, {
@@ -71,18 +72,19 @@ var EmptyStateIndicator = function EmptyStateIndicator(_ref) {
         __self: _this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 47,
+          lineNumber: 46,
           columnNumber: 11
         }
       }, t("Let's start chatting!")), _react["default"].createElement(_reactNative.Text, {
         style: [styles.channelDetails, {
-          color: grey
+          color: grey,
+          width: vw(66)
         }, channelDetails],
         testID: "empty-channel-state-details",
         __self: _this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 53,
+          lineNumber: 52,
           columnNumber: 11
         }
       }, t('How about sending your first message to a friend?')));
@@ -96,7 +98,7 @@ var EmptyStateIndicator = function EmptyStateIndicator(_ref) {
         __self: _this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 64,
+          lineNumber: 63,
           columnNumber: 14
         }
       }, "No items exist");

package/lib/module/components/Indicators/EmptyStateIndicator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_ThemeContext","_TranslationContext","~~_MessageIcon~~","~~_utils~~","_this","_jsxFileName","~~width","vw","~~styles","StyleSheet","create","channelContainer","alignItems","flex","justifyContent","channelDetails","fontSize","textAlign","channelTitle","paddingBottom","paddingTop","EmptyStateIndicator","_ref","listType","_useTheme","useTheme","_useTheme$theme","theme","_useTheme$theme$color","colors","black","grey","grey_gainsboro","_useTheme$theme$empty","emptyStateIndicator","_useTranslationContex","useTranslationContext","t","createElement","View","style","__self","__source","fileName","lineNumber","columnNumber","MessageIcon","height","pathFill","Text","color","testID","exports"],"sources":["EmptyStateIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleSheet, Text, View } from 'react-native';\n\nimport { useTheme } from '../../contexts/themeContext/ThemeContext';\nimport { useTranslationContext } from '../../contexts/translationContext/TranslationContext';\nimport { ~~MessageIcon~~ } from '../../~~icons~~/~~MessageIcon~~';\nimport { vw } from '../../~~utils~~/~~utils~~';\n\nconst ~~width = vw(33);\n\nconst~~ styles = StyleSheet.create({\n channelContainer: {\n alignItems: 'center',\n flex: 1,\n justifyContent: 'center',\n },\n channelDetails: {\n fontSize: 14,\n textAlign: 'center',\n ~~width: vw(66),\n~~ },\n channelTitle: {\n fontSize: 16,\n paddingBottom: 8,\n paddingTop: 16,\n },\n});\n\nexport type EmptyStateProps = {\n listType?: 'channel' \| 'message' \| 'default';\n};\n\nexport const EmptyStateIndicator: React.FC<EmptyStateProps> = ({ listType }) => {\n const {\n theme: {\n colors: { black, grey, grey_gainsboro },\n emptyStateIndicator: { channelContainer, channelDetails, channelTitle },\n },\n } = useTheme();\n const { t } = useTranslationContext();\n\n switch (listType) {\n case 'channel':\n return (\n <View style={[styles.channelContainer, channelContainer]}>\n <MessageIcon height={width} pathFill={grey_gainsboro} width={width} />\n <Text\n style={[styles.channelTitle, { color: black }, channelTitle]}\n testID='empty-channel-state-title'\n >\n {t(\"Let's start chatting!\")}\n </Text>\n <Text\n style={[styles.channelDetails, { color: grey }, channelDetails]}\n testID='empty-channel-state-details'\n >\n {t('How about sending your first message to a friend?')}\n </Text>\n </View>\n );\n case 'message':\n return null;\n default:\n return <Text style={{ color: black }}>No items exist</Text>;\n }\n};\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAEA,IAAAE,aAAA,GAAAF,OAAA;AACA,IAAAG,mBAAA,GAAAH,OAAA;AACA,IAAAI,~~YAAA~~,GAAAJ,OAAA;AACA,IAAAK,~~MAAA~~,GAAAL,OAAA;~~AAAuC~~,IAAAM,KAAA;EAAAC,YAAA;~~AAEvC~~,IAAMC,~~KAAK,GAAG,IAAAC,SAAE,EAAC,EAAE,CAAC;AAEpB,IAAMC,~~MAAM,GAAGC,uBAAU,CAACC,MAAM,CAAC;EAC/BC,gBAAgB,EAAE;IAChBC,UAAU,EAAE,QAAQ;IACpBC,IAAI,EAAE,CAAC;IACPC,cAAc,EAAE;EAClB,CAAC;EACDC,cAAc,EAAE;IACdC,QAAQ,EAAE,EAAE;IACZC,SAAS,EAAE~~,QAAQ~~;~~IACnBX~~,~~KAAK,EAAE,IAAAC,SAAE,EAAC,EAAE;EACd,~~CAAC;~~EACDW~~,YAAY,EAAE;IACZF,QAAQ,EAAE,EAAE;IACZG,aAAa,EAAE,CAAC;IAChBC,UAAU,EAAE;EACd;AACF,CAAC,CAAC;AAMK,IAAMC,mBAA8C,GAAG,SAAjDA,mBAA8CA,CAAAC,IAAA,EAAqB;EAAA,IAAfC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;EACvE,IAAAC,SAAA,GAKI,IAAAC,sBAAQ,EAAC,CAAC;IAAAC,eAAA,GAAAF,SAAA,CAJZG,KAAK;IAAAC,qBAAA,GAAAF,eAAA,CACHG,MAAM;IAAIC,KAAK,GAAAF,qBAAA,CAALE,KAAK;IAAEC,IAAI,GAAAH,qBAAA,CAAJG,IAAI;IAAEC,cAAc,GAAAJ,qBAAA,CAAdI,cAAc;IAAAC,qBAAA,GAAAP,eAAA,CACrCQ,mBAAmB;IAAIvB,gBAAgB,GAAAsB,qBAAA,CAAhBtB,gBAAgB;IAAEI,cAAc,GAAAkB,qBAAA,CAAdlB,cAAc;IAAEG,YAAY,GAAAe,qBAAA,CAAZf,YAAY;EAGzE,IAAAiB,qBAAA,GAAc,IAAAC,yCAAqB,EAAC,CAAC;IAA7BC,CAAC,GAAAF,qBAAA,CAADE,CAAC;EAET,~~QAAQd~~,QAAQ;IACd,KAAK,SAAS;MACZ,~~OACE3B~~,MAAA,~~YAAA0C~~,aAAA,~~CAACvC~~,YAAA,~~CAAAwC~~,IAAI;QAACC,KAAK,EAAE,~~CAAChC~~,MAAM,CAACG,gBAAgB,EAAEA,gBAAgB,CAAE;~~QAAA8B~~,MAAA,~~EAAArC~~,KAAA;~~QAAAsC~~,QAAA;UAAAC,QAAA,~~EAAAtC~~,YAAA;~~UAAAuC~~,UAAA;UAAAC,YAAA;QAAA;MAAA,~~GACvDjD~~,MAAA,~~YAAA0C~~,aAAA,~~CAACpC~~,YAAA,~~CAAA4C~~,WAAW;QAACC,MAAM,~~EAAEzC~~,KAAM;~~QAAC0C~~,QAAQ,~~EAAEhB~~,cAAe;~~QAAC1B~~,KAAK,EAAEA,KAAM;~~QAAAmC~~,MAAA,~~EAAArC~~,KAAA;~~QAAAsC~~,QAAA;UAAAC,QAAA,~~EAAAtC~~,YAAA;~~UAAAuC~~,UAAA;UAAAC,YAAA;QAAA;MAAA,CAAE,CAAC,~~EACtEjD~~,MAAA,~~YAAA0C~~,aAAA,~~CAACvC~~,YAAA,~~CAAAkD~~,IAAI;QACHT,KAAK,EAAE,~~CAAChC~~,MAAM,CAACU,YAAY,EAAE;~~UAAEgC~~,KAAK,~~EAAEpB~~;QAAM,CAAC,EAAEZ,YAAY,CAAE;~~QAC7DiC~~,MAAM,EAAC,2BAA2B;QAAAV,MAAA,~~EAAArC~~,KAAA;~~QAAAsC~~,QAAA;UAAAC,QAAA,~~EAAAtC~~,YAAA;~~UAAAuC~~,UAAA;UAAAC,YAAA;QAAA;MAAA,GAEjCR,CAAC,CAAC,uBAAuB,CACtB,CAAC,~~EACPzC~~,MAAA,~~YAAA0C~~,aAAA,~~CAACvC~~,YAAA,~~CAAAkD~~,IAAI;QACHT,KAAK,EAAE,~~CAAChC~~,MAAM,CAACO,cAAc,EAAE;~~UAAEmC~~,KAAK,~~EAAEnB~~;~~QAAK~~,CAAC,~~EAAEhB~~,cAAc,CAAE;~~QAChEoC~~,MAAM,EAAC,6BAA6B;QAAAV,MAAA,~~EAAArC~~,KAAA;~~QAAAsC~~,QAAA;UAAAC,QAAA,~~EAAAtC~~,YAAA;~~UAAAuC~~,UAAA;UAAAC,YAAA;QAAA;MAAA,GAEnCR,CAAC,CAAC,mDAAmD,CAClD,CACF,CAAC;IAEX,KAAK,SAAS;MACZ,OAAO,IAAI;IACb;MACE,~~OAAOzC~~,MAAA,~~YAAA0C~~,aAAA,~~CAACvC~~,YAAA,~~CAAAkD~~,IAAI;QAACT,KAAK,EAAE;UAAEU,KAAK,~~EAAEpB~~;QAAM,CAAE;~~QAAAW~~,MAAA,~~EAAArC~~,KAAA;~~QAAAsC~~,QAAA;UAAAC,QAAA,~~EAAAtC~~,YAAA;~~UAAAuC~~,UAAA;UAAAC,YAAA;QAAA;MAAA,GAAC,gBAAoB,CAAC;EAC/D;AACF,CAAC;AAACO,OAAA,~~CAAA/B~~,mBAAA,GAAAA,mBAAA"}
1	+ {"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_ThemeContext","_TranslationContext","_useViewport2","_MessageIcon","_this","_jsxFileName","styles","StyleSheet","create","channelContainer","alignItems","flex","justifyContent","channelDetails","fontSize","textAlign","channelTitle","paddingBottom","paddingTop","EmptyStateIndicator","_ref","listType","_useTheme","useTheme","_useTheme$theme","theme","_useTheme$theme$color","colors","black","grey","grey_gainsboro","_useTheme$theme$empty","emptyStateIndicator","_useViewport","useViewport","vw","width","_useTranslationContex","useTranslationContext","t","createElement","View","style","__self","__source","fileName","lineNumber","columnNumber","MessageIcon","height","pathFill","Text","color","testID","exports"],"sources":["EmptyStateIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleSheet, Text, View } from 'react-native';\n\nimport { useTheme } from '../../contexts/themeContext/ThemeContext';\nimport { useTranslationContext } from '../../contexts/translationContext/TranslationContext';\nimport { useViewport } from '../../hooks/useViewport';\nimport { MessageIcon } from '../../icons/MessageIcon';\n\nconst styles = StyleSheet.create({\n channelContainer: {\n alignItems: 'center',\n flex: 1,\n justifyContent: 'center',\n },\n channelDetails: {\n fontSize: 14,\n textAlign: 'center',\n },\n channelTitle: {\n fontSize: 16,\n paddingBottom: 8,\n paddingTop: 16,\n },\n});\n\nexport type EmptyStateProps = {\n listType?: 'channel' \| 'message' \| 'default';\n};\n\nexport const EmptyStateIndicator: React.FC<EmptyStateProps> = ({ listType }) => {\n const {\n theme: {\n colors: { black, grey, grey_gainsboro },\n emptyStateIndicator: { channelContainer, channelDetails, channelTitle },\n },\n } = useTheme();\n const { vw } = useViewport();\n const width = vw(33);\n const { t } = useTranslationContext();\n\n switch (listType) {\n case 'channel':\n return (\n <View style={[styles.channelContainer, channelContainer]}>\n <MessageIcon height={width} pathFill={grey_gainsboro} width={width} />\n <Text\n style={[styles.channelTitle, { color: black }, channelTitle]}\n testID='empty-channel-state-title'\n >\n {t(\"Let's start chatting!\")}\n </Text>\n <Text\n style={[styles.channelDetails, { color: grey, width: vw(66) }, channelDetails]}\n testID='empty-channel-state-details'\n >\n {t('How about sending your first message to a friend?')}\n </Text>\n </View>\n );\n case 'message':\n return null;\n default:\n return <Text style={{ color: black }}>No items exist</Text>;\n }\n};\n"],"mappings":"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"}

package/lib/module/components/Message/MessageSimple/MessageContent.js CHANGED Viewed

@@ -12,6 +12,7 @@ var _MessageContext = require("../../../contexts/messageContext/MessageContext")
 var _MessagesContext = require("../../../contexts/messagesContext/MessagesContext");
 var _ThemeContext = require("../../../contexts/themeContext/ThemeContext");
 var _TranslationContext = require("../../../contexts/translationContext/TranslationContext");
+var _useViewport2 = require("../../../hooks/useViewport");
 var _utils = require("../../../utils/utils");
 var _excluded = ["borderBottomLeftRadius", "borderBottomRightRadius", "borderRadius", "borderRadiusL", "borderRadiusS", "borderTopLeftRadius", "borderTopRightRadius"];
 var _this = this,
@@ -106,6 +107,8 @@ var MessageContentWithContext = function MessageContentWithContext(props) {
     _useTheme$theme$messa4 = _useTheme$theme$messa.reactionList,
     radius = _useTheme$theme$messa4.radius,
     reactionSize = _useTheme$theme$messa4.reactionSize;
+  var _useViewport = (0, _useViewport2.useViewport)(),
+    vw = _useViewport.vw;
   var getDateText = function getDateText(formatter) {
     if (!message.created_at) return '';
     if (formatter) {
@@ -142,7 +145,7 @@ var MessageContentWithContext = function MessageContentWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 210,
+        lineNumber: 212,
         columnNumber: 7
       }
     });
@@ -228,7 +231,7 @@ var MessageContentWithContext = function MessageContentWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 279,
+      lineNumber: 281,
       columnNumber: 5
     }
   }), MessageHeader && _react["default"].createElement(MessageHeader, {
@@ -244,7 +247,7 @@ var MessageContentWithContext = function MessageContentWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 320,
+      lineNumber: 322,
       columnNumber: 9
     }
   }), _react["default"].createElement(_reactNative.View, {
@@ -253,7 +256,7 @@ var MessageContentWithContext = function MessageContentWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 332,
+      lineNumber: 334,
       columnNumber: 7
     }
   }, hasThreadReplies && !threadList && !noBorder && _react["default"].createElement(_reactNative.View, {
@@ -266,7 +269,7 @@ var MessageContentWithContext = function MessageContentWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 334,
+      lineNumber: 336,
       columnNumber: 11
     }
   }), _react["default"].createElement(_reactNative.View, {
@@ -280,7 +283,7 @@ var MessageContentWithContext = function MessageContentWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 347,
+      lineNumber: 349,
       columnNumber: 9
     }
   }, messageContentOrder.map(function (messageContentType, messageContentOrderIndex) {
@@ -292,19 +295,19 @@ var MessageContentWithContext = function MessageContentWithContext(props) {
           __self: _this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 366,
+            lineNumber: 368,
             columnNumber: 21
           }
         }, _react["default"].createElement(Reply, {
           styles: {
             messageContainer: {
-              maxWidth: (0, _utils.vw)(60)
+              maxWidth: vw(60)
             }
           },
           __self: _this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 370,
+            lineNumber: 372,
             columnNumber: 23
           }
         }));
@@ -316,7 +319,7 @@ var MessageContentWithContext = function MessageContentWithContext(props) {
             __self: _this,
             __source: {
               fileName: _jsxFileName,
-              lineNumber: 376,
+              lineNumber: 378,
               columnNumber: 19
             }
           });
@@ -328,7 +331,7 @@ var MessageContentWithContext = function MessageContentWithContext(props) {
           __self: _this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 380,
+            lineNumber: 382,
             columnNumber: 19
           }
         });
@@ -338,7 +341,7 @@ var MessageContentWithContext = function MessageContentWithContext(props) {
           __self: _this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 386,
+            lineNumber: 388,
             columnNumber: 24
           }
         });
@@ -349,7 +352,7 @@ var MessageContentWithContext = function MessageContentWithContext(props) {
           __self: _this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 390,
+            lineNumber: 392,
             columnNumber: 19
           }
         });
@@ -358,7 +361,7 @@ var MessageContentWithContext = function MessageContentWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 397,
+      lineNumber: 399,
       columnNumber: 19
     }
   })), _react["default"].createElement(MessageReplies, {
@@ -367,7 +370,7 @@ var MessageContentWithContext = function MessageContentWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 399,
+      lineNumber: 401,
       columnNumber: 7
     }
   }), _react["default"].createElement(MessageFooter, {
@@ -376,7 +379,7 @@ var MessageContentWithContext = function MessageContentWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 400,
+      lineNumber: 402,
       columnNumber: 7
     }
   }));
@@ -530,7 +533,7 @@ var MessageContent = function MessageContent(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 586,
+      lineNumber: 588,
       columnNumber: 5
     }
   }));