stream-chat-react-native-core 4.9.0-beta.2 → 4.9.0

package/lib/commonjs/components/Attachment/Gallery.js

@@ -100,9 +100,9 @@ var GalleryWithContext = function GalleryWithContext(props) {
       images = props.images,
       legacyImageViewerSwipeBehaviour = props.legacyImageViewerSwipeBehaviour,
       message = props.message,
-      _onLongPress = props.onLongPress,
-      _onPress = props.onPress,
-      _onPressIn = props.onPressIn,
+      onLongPress = props.onLongPress,
+      onPress = props.onPress,
+      onPressIn = props.onPressIn,
       preventPress = props.preventPress,
       setImage = props.setImage,
       setImages = props.setImages,
@@ -111,28 +111,16 @@ var GalleryWithContext = function GalleryWithContext(props) {
       videos = props.videos,
       VideoThumbnail = props.VideoThumbnail;
 
-  var _useLoadingImage = (0, _useLoadingImage2.useLoadingImage)(),
-      isLoadingImage = _useLoadingImage.isLoadingImage,
-      isLoadingImageError = _useLoadingImage.isLoadingImageError,
-      setLoadingImage = _useLoadingImage.setLoadingImage,
-      setLoadingImageError = _useLoadingImage.setLoadingImageError;
-
   var _useTheme = (0, _ThemeContext.useTheme)(),
-      _useTheme$theme = _useTheme.theme,
-      overlay = _useTheme$theme.colors.overlay,
-      _useTheme$theme$messa = _useTheme$theme.messageSimple.gallery,
+      _useTheme$theme$messa = _useTheme.theme.messageSimple.gallery,
       galleryContainer = _useTheme$theme$messa.galleryContainer,
       galleryItemColumn = _useTheme$theme$messa.galleryItemColumn,
       gridHeight = _useTheme$theme$messa.gridHeight,
       gridWidth = _useTheme$theme$messa.gridWidth,
-      image = _useTheme$theme$messa.image,
-      imageContainer = _useTheme$theme$messa.imageContainer,
       maxHeight = _useTheme$theme$messa.maxHeight,
       maxWidth = _useTheme$theme$messa.maxWidth,
       minHeight = _useTheme$theme$messa.minHeight,
-      minWidth = _useTheme$theme$messa.minWidth,
-      moreImagesContainer = _useTheme$theme$messa.moreImagesContainer,
-      moreImagesText = _useTheme$theme$messa.moreImagesText;
+      minWidth = _useTheme$theme$messa.minWidth;
 
   var sizeConfig = {
     gridHeight: gridHeight,
@@ -156,8 +144,6 @@ var GalleryWithContext = function GalleryWithContext(props) {
       width = _useMemo.width;
 
   if (!(imagesAndVideos != null && imagesAndVideos.length)) return null;
-  var messageText = message == null ? void 0 : message.text;
-  var messageId = message == null ? void 0 : message.id;
   var numOfColumns = thumbnailGrid.length;
   return _react["default"].createElement(_reactNative.View, {
     style: [styles.galleryContainer, {
@@ -170,7 +156,7 @@ var GalleryWithContext = function GalleryWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 188,
+      lineNumber: 181,
       columnNumber: 5
     }
   }, thumbnailGrid.map(function (rows, colIndex) {
@@ -184,41 +170,10 @@ var GalleryWithContext = function GalleryWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 205,
+        lineNumber: 198,
         columnNumber: 11
       }
-    }, rows.map(function (_ref, rowIndex) {
-      var height = _ref.height,
-          resizeMode = _ref.resizeMode,
-          type = _ref.type,
-          url = _ref.url,
-          width = _ref.width;
-
-      var openImageViewer = function openImageViewer() {
-        if (!legacyImageViewerSwipeBehaviour && message) {
-          setImages([message]);
-          setImage({
-            messageId: message.id,
-            url: url
-          });
-          setOverlay('gallery');
-        } else if (legacyImageViewerSwipeBehaviour) {
-          setImage({
-            messageId: message == null ? void 0 : message.id,
-            url: url
-          });
-          setOverlay('gallery');
-        }
-      };
-
-      var defaultOnPress = function defaultOnPress() {
-        if (type === 'video' && !(0, _native.isVideoPackageAvailable)()) {
-          (0, _openUrlSafely.openUrlSafely)(url);
-        } else {
-          openImageViewer();
-        }
-      };
-
+    }, rows.map(function (thumbnail, rowIndex) {
       var borderRadius = (0, _getGalleryImageBorderRadius.getGalleryImageBorderRadius)({
         alignment: alignment,
         colIndex: colIndex,
@@ -226,7 +181,7 @@ var GalleryWithContext = function GalleryWithContext(props) {
         hasThreadReplies: hasThreadReplies,
         height: height,
         invertedDirections: invertedDirections,
-        messageText: messageText,
+        messageText: message == null ? void 0 : message.text,
         numOfColumns: numOfColumns,
         numOfRows: numOfRows,
         rowIndex: rowIndex,
@@ -234,150 +189,251 @@ var GalleryWithContext = function GalleryWithContext(props) {
         threadList: threadList,
         width: width
       });
-      return _react["default"].createElement(_reactNative.TouchableOpacity, (0, _extends2["default"])({
-        activeOpacity: 0.8,
-        disabled: preventPress,
-        key: "gallery-item-" + messageId + "/" + colIndex + "/" + rowIndex + "/" + imagesAndVideos.length,
-        onLongPress: function onLongPress(event) {
-          if (_onLongPress) {
-            _onLongPress({
-              emitter: 'gallery',
-              event: event
-            });
-          }
-        },
-        onPress: function onPress(event) {
-          if (_onPress) {
-            _onPress({
-              defaultHandler: defaultOnPress,
-              emitter: 'gallery',
-              event: event
-            });
-          }
-        },
-        onPressIn: function onPressIn(event) {
-          if (_onPressIn) {
-            _onPressIn({
-              defaultHandler: defaultOnPress,
-              emitter: 'gallery',
-              event: event
-            });
-          }
-        },
-        style: [styles.imageContainer, {
-          height: height,
-          width: width
-        }, imageContainer],
-        testID: "gallery-" + (invertedDirections ? 'row' : 'column') + "-" + colIndex + "-item-" + rowIndex
-      }, additionalTouchableProps, {
+
+      if (message === undefined) {
+        return null;
+      }
+
+      return _react["default"].createElement(GalleryThumbnail, {
+        additionalTouchableProps: additionalTouchableProps,
+        borderRadius: borderRadius,
+        colIndex: colIndex,
+        ImageLoadingFailedIndicator: ImageLoadingFailedIndicator,
+        ImageLoadingIndicator: ImageLoadingIndicator,
+        imagesAndVideos: imagesAndVideos,
+        invertedDirections: invertedDirections || false,
+        key: rowIndex,
+        legacyImageViewerSwipeBehaviour: legacyImageViewerSwipeBehaviour,
+        message: message,
+        numOfColumns: numOfColumns,
+        numOfRows: numOfRows,
+        onLongPress: onLongPress,
+        onPress: onPress,
+        onPressIn: onPressIn,
+        preventPress: preventPress,
+        rowIndex: rowIndex,
+        setImage: setImage,
+        setImages: setImages,
+        setOverlay: setOverlay,
+        thumbnail: thumbnail,
+        VideoThumbnail: VideoThumbnail,
         __self: _this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 257,
+          lineNumber: 230,
           columnNumber: 17
         }
-      }), type === 'video' ? _react["default"].createElement(VideoThumbnail, {
-        style: [borderRadius, image, {
-          height: height - 1,
-          width: width - 1
-        }],
-        __self: _this,
-        __source: {
-          fileName: _jsxFileName,
-          lineNumber: 301,
-          columnNumber: 21
-        }
-      }) : _react["default"].createElement(_reactNative.View, {
-        style: styles.imageContainerStyle,
-        __self: _this,
-        __source: {
-          fileName: _jsxFileName,
-          lineNumber: 312,
-          columnNumber: 21
-        }
-      }, _react["default"].createElement(MemoizedGalleryImage, {
-        onError: function onError(error) {
-          console.warn(error);
-          setLoadingImage(false);
-          setLoadingImageError(true);
-        },
-        onLoadEnd: function onLoadEnd() {
-          return setLoadingImage(false);
-        },
-        onLoadStart: function onLoadStart() {
-          return setLoadingImage(true);
-        },
-        resizeMode: resizeMode,
-        style: [borderRadius, image, {
-          height: height - 1,
-          width: width - 1
-        }],
-        uri: url,
-        __self: _this,
-        __source: {
-          fileName: _jsxFileName,
-          lineNumber: 313,
-          columnNumber: 23
-        }
-      }), isLoadingImage && _react["default"].createElement(_reactNative.View, {
-        style: {
-          position: 'absolute'
-        },
-        __self: _this,
-        __source: {
-          fileName: _jsxFileName,
-          lineNumber: 333,
-          columnNumber: 25
-        }
-      }, _react["default"].createElement(ImageLoadingIndicator, {
-        style: styles.imageLoadingIndicatorStyle,
-        __self: _this,
-        __source: {
-          fileName: _jsxFileName,
-          lineNumber: 334,
-          columnNumber: 27
-        }
-      })), isLoadingImageError && _react["default"].createElement(_reactNative.View, {
-        style: {
-          position: 'absolute'
-        },
-        __self: _this,
-        __source: {
-          fileName: _jsxFileName,
-          lineNumber: 338,
-          columnNumber: 25
-        }
-      }, _react["default"].createElement(ImageLoadingFailedIndicator, {
-        style: styles.imageLoadingIndicatorStyle,
-        __self: _this,
-        __source: {
-          fileName: _jsxFileName,
-          lineNumber: 339,
-          columnNumber: 27
-        }
-      }))), colIndex === numOfColumns - 1 && rowIndex === numOfRows - 1 && imagesAndVideos.length > 4 ? _react["default"].createElement(_reactNative.View, {
-        style: [_reactNative.StyleSheet.absoluteFillObject, styles.moreImagesContainer, {
-          backgroundColor: overlay
-        }, moreImagesContainer],
-        __self: _this,
-        __source: {
-          fileName: _jsxFileName,
-          lineNumber: 347,
-          columnNumber: 21
-        }
-      }, _react["default"].createElement(_reactNative.Text, {
-        style: [styles.moreImagesText, moreImagesText],
-        __self: _this,
-        __source: {
-          fileName: _jsxFileName,
-          lineNumber: 355,
-          columnNumber: 23
-        }
-      }, "+" + (imagesAndVideos.length - 4))) : null);
+      });
     }));
   }));
 };
 
+var GalleryThumbnail = function GalleryThumbnail(_ref) {
+  var additionalTouchableProps = _ref.additionalTouchableProps,
+      borderRadius = _ref.borderRadius,
+      colIndex = _ref.colIndex,
+      ImageLoadingFailedIndicator = _ref.ImageLoadingFailedIndicator,
+      ImageLoadingIndicator = _ref.ImageLoadingIndicator,
+      imagesAndVideos = _ref.imagesAndVideos,
+      invertedDirections = _ref.invertedDirections,
+      legacyImageViewerSwipeBehaviour = _ref.legacyImageViewerSwipeBehaviour,
+      message = _ref.message,
+      numOfColumns = _ref.numOfColumns,
+      numOfRows = _ref.numOfRows,
+      _onLongPress = _ref.onLongPress,
+      _onPress = _ref.onPress,
+      _onPressIn = _ref.onPressIn,
+      preventPress = _ref.preventPress,
+      rowIndex = _ref.rowIndex,
+      setImage = _ref.setImage,
+      setImages = _ref.setImages,
+      setOverlay = _ref.setOverlay,
+      thumbnail = _ref.thumbnail,
+      VideoThumbnail = _ref.VideoThumbnail;
+
+  var _useLoadingImage = (0, _useLoadingImage2.useLoadingImage)(),
+      isLoadingImage = _useLoadingImage.isLoadingImage,
+      isLoadingImageError = _useLoadingImage.isLoadingImageError,
+      setLoadingImage = _useLoadingImage.setLoadingImage,
+      setLoadingImageError = _useLoadingImage.setLoadingImageError;
+
+  var _useTheme2 = (0, _ThemeContext.useTheme)(),
+      _useTheme2$theme = _useTheme2.theme,
+      overlay = _useTheme2$theme.colors.overlay,
+      _useTheme2$theme$mess = _useTheme2$theme.messageSimple.gallery,
+      image = _useTheme2$theme$mess.image,
+      imageContainer = _useTheme2$theme$mess.imageContainer,
+      moreImagesContainer = _useTheme2$theme$mess.moreImagesContainer,
+      moreImagesText = _useTheme2$theme$mess.moreImagesText;
+
+  var openImageViewer = function openImageViewer() {
+    if (!legacyImageViewerSwipeBehaviour && message) {
+      setImages([message]);
+      setImage({
+        messageId: message.id,
+        url: thumbnail.url
+      });
+      setOverlay('gallery');
+    } else if (legacyImageViewerSwipeBehaviour) {
+      setImage({
+        messageId: message == null ? void 0 : message.id,
+        url: thumbnail.url
+      });
+      setOverlay('gallery');
+    }
+  };
+
+  var defaultOnPress = function defaultOnPress() {
+    if (thumbnail.type === 'video' && !(0, _native.isVideoPackageAvailable)()) {
+      (0, _openUrlSafely.openUrlSafely)(thumbnail.url);
+    } else {
+      openImageViewer();
+    }
+  };
+
+  return _react["default"].createElement(_reactNative.TouchableOpacity, (0, _extends2["default"])({
+    activeOpacity: 0.8,
+    disabled: preventPress,
+    key: "gallery-item-" + message.id + "/" + colIndex + "/" + rowIndex + "/" + imagesAndVideos.length,
+    onLongPress: function onLongPress(event) {
+      if (_onLongPress) {
+        _onLongPress({
+          emitter: 'gallery',
+          event: event
+        });
+      }
+    },
+    onPress: function onPress(event) {
+      if (_onPress) {
+        _onPress({
+          defaultHandler: defaultOnPress,
+          emitter: 'gallery',
+          event: event
+        });
+      }
+    },
+    onPressIn: function onPressIn(event) {
+      if (_onPressIn) {
+        _onPressIn({
+          defaultHandler: defaultOnPress,
+          emitter: 'gallery',
+          event: event
+        });
+      }
+    },
+    style: [styles.imageContainer, {
+      height: thumbnail.height,
+      width: thumbnail.width
+    }, imageContainer],
+    testID: "gallery-" + (invertedDirections ? 'row' : 'column') + "-" + colIndex + "-item-" + rowIndex
+  }, additionalTouchableProps, {
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 357,
+      columnNumber: 5
+    }
+  }), thumbnail.type === 'video' ? _react["default"].createElement(VideoThumbnail, {
+    style: [borderRadius, image, {
+      height: thumbnail.height - 1,
+      width: thumbnail.width - 1
+    }],
+    thumb_url: thumbnail.thumb_url,
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 399,
+      columnNumber: 9
+    }
+  }) : _react["default"].createElement(_reactNative.View, {
+    style: styles.imageContainerStyle,
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 411,
+      columnNumber: 9
+    }
+  }, _react["default"].createElement(MemoizedGalleryImage, {
+    onError: function onError(error) {
+      console.warn(error);
+      setLoadingImage(false);
+      setLoadingImageError(true);
+    },
+    onLoadEnd: function onLoadEnd() {
+      return setLoadingImage(false);
+    },
+    onLoadStart: function onLoadStart() {
+      return setLoadingImage(true);
+    },
+    resizeMode: thumbnail.resizeMode,
+    style: [borderRadius, image, {
+      height: thumbnail.height - 1,
+      width: thumbnail.width - 1
+    }],
+    uri: thumbnail.url,
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 412,
+      columnNumber: 11
+    }
+  }), isLoadingImage && _react["default"].createElement(_reactNative.View, {
+    style: {
+      position: 'absolute'
+    },
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 432,
+      columnNumber: 13
+    }
+  }, _react["default"].createElement(ImageLoadingIndicator, {
+    style: styles.imageLoadingIndicatorStyle,
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 433,
+      columnNumber: 15
+    }
+  })), isLoadingImageError && _react["default"].createElement(_reactNative.View, {
+    style: {
+      position: 'absolute'
+    },
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 437,
+      columnNumber: 13
+    }
+  }, _react["default"].createElement(ImageLoadingFailedIndicator, {
+    style: styles.imageLoadingIndicatorStyle,
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 438,
+      columnNumber: 15
+    }
+  }))), colIndex === numOfColumns - 1 && rowIndex === numOfRows - 1 && imagesAndVideos.length > 4 ? _react["default"].createElement(_reactNative.View, {
+    style: [_reactNative.StyleSheet.absoluteFillObject, styles.moreImagesContainer, {
+      backgroundColor: overlay
+    }, moreImagesContainer],
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 444,
+      columnNumber: 9
+    }
+  }, _react["default"].createElement(_reactNative.Text, {
+    style: [styles.moreImagesText, moreImagesText],
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 452,
+      columnNumber: 11
+    }
+  }, "+" + (imagesAndVideos.length - 4))) : null);
+};
+
 var areEqual = function areEqual(prevProps, nextProps) {
   var prevGroupStyles = prevProps.groupStyles,
       prevHasThreadReplies = prevProps.hasThreadReplies,
@@ -492,7 +548,7 @@ var Gallery = function Gallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 497,
+      lineNumber: 588,
       columnNumber: 5
     }
   });