stream-chat-react-native-core 4.1.0-next.1 → 4.1.1-beta.2

package/lib/module/components/ImageGallery/ImageGallery.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.clamp = exports.ImageGallery = exports.IsSwiping = exports.HasPinched = void 0;
+exports.clamp = exports.IsSwiping = exports.ImageGallery = exports.HasPinched = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -17,12 +17,12 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactNative = require("react-native");
 
-var _bottomSheet = _interopRequireDefault(require("@gorhom/bottom-sheet"));
-
 var _reactNativeGestureHandler = require("react-native-gesture-handler");
 
 var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
 
+var _bottomSheet = require("@gorhom/bottom-sheet");
+
 var _AnimatedGalleryImage = require("./components/AnimatedGalleryImage");
 
 var _ImageGalleryFooter = require("./components/ImageGalleryFooter");
@@ -43,6 +43,10 @@ var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
 
 var _native = require("../../native");
 
+var _getResizedImageUrl = require("../../utils/getResizedImageUrl");
+
+var _getUrlOfImageAttachment = require("../../utils/getUrlOfImageAttachment");
+
 var _utils = require("../../utils/utils");
 
 var _this = this,
@@ -84,17 +88,23 @@ var ImageGallery = function ImageGallery(props) {
       imageGalleryGridHandleHeight = props.imageGalleryGridHandleHeight,
       imageGalleryGridSnapPoints = props.imageGalleryGridSnapPoints,
       numberOfImageGalleryGridColumns = props.numberOfImageGalleryGridColumns,
-      overlayOpacity = props.overlayOpacity,
-      visible = props.visible;
+      overlayOpacity = props.overlayOpacity;
 
   var _useTheme = (0, _ThemeContext.useTheme)(),
       _useTheme$theme = _useTheme.theme,
       white_snow = _useTheme$theme.colors.white_snow,
-      backgroundColor = _useTheme$theme.imageGallery.backgroundColor;
+      _useTheme$theme$image = _useTheme$theme.imageGallery,
+      backgroundColor = _useTheme$theme$image.backgroundColor,
+      pager = _useTheme$theme$image.pager,
+      slide = _useTheme$theme$image.slide;
+
+  var _useState = (0, _react.useState)([]),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      gridPhotos = _useState2[0],
+      setGridPhotos = _useState2[1];
 
   var _useOverlayContext = (0, _OverlayContext.useOverlayContext)(),
       overlay = _useOverlayContext.overlay,
-      setBlurType = _useOverlayContext.setBlurType,
       setOverlay = _useOverlayContext.setOverlay,
       translucentStatusBar = _useOverlayContext.translucentStatusBar;
 
@@ -111,45 +121,43 @@ var ImageGallery = function ImageGallery(props) {
   var quarterScreenHeight = screenHeight / 4;
 
   var snapPoints = _react["default"].useMemo(function () {
-    return [0, screenHeight * 9 / 10];
+    return [screenHeight * 9 / 10];
   }, []);
 
-  var bottomSheetRef = (0, _react.useRef)(null);
+  var bottomSheetModalRef = (0, _react.useRef)(null);
 
-  var _useState = (0, _react.useState)(0),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      currentBottomSheetIndex = _useState2[0],
-      setCurrentBottomSheetIndex = _useState2[1];
+  var _useState3 = (0, _react.useState)(0),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      currentBottomSheetIndex = _useState4[0],
+      setCurrentBottomSheetIndex = _useState4[1];
 
   var animatedBottomSheetIndex = (0, _reactNativeReanimated.useSharedValue)(0);
-  var showScreen = (0, _reactNativeReanimated.useSharedValue)(0);
+  var screenTranslateY = (0, _reactNativeReanimated.useSharedValue)(screenHeight);
 
-  var fadeScreen = function fadeScreen(show) {
+  var showScreen = function showScreen() {
     'worklet';
 
-    showScreen.value = (0, _reactNativeReanimated.withTiming)(show ? 1 : 0, {
+    screenTranslateY.value = (0, _reactNativeReanimated.withTiming)(0, {
       duration: 250,
       easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.ease)
     });
   };
 
   (0, _react.useEffect)(function () {
-    if (visible) {
-      _reactNative.Keyboard.dismiss();
-    }
-
-    fadeScreen(visible);
-  }, [visible]);
+    _reactNative.Keyboard.dismiss();
 
-  var _useState3 = (0, _react.useState)(screenHeight),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      currentImageHeight = _useState4[0],
-      setCurrentImageHeight = _useState4[1];
+    showScreen();
+  }, []);
 
-  var _useState5 = (0, _react.useState)(0),
+  var _useState5 = (0, _react.useState)(screenHeight),
       _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-      selectedIndex = _useState6[0],
-      setSelectedIndex = _useState6[1];
+      currentImageHeight = _useState6[0],
+      setCurrentImageHeight = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(0),
+      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+      selectedIndex = _useState8[0],
+      setSelectedIndex = _useState8[1];
 
   var index = (0, _reactNativeReanimated.useSharedValue)(0);
   var headerFooterVisible = (0, _reactNativeReanimated.useSharedValue)(1);
@@ -208,37 +216,26 @@ var ImageGallery = function ImageGallery(props) {
     offsetScale.value = 1;
   };
 
-  var resetVisibleValues = function resetVisibleValues() {
-    'worklet';
-
-    resetTouchValues();
-    resetMovementValues();
-    headerFooterVisible.value = 1;
-    offsetX.value = 0;
-    offsetY.value = 0;
-    adjustedFocalX.value = 0;
-    adjustedFocalY.value = 0;
-    tapX.value = 0;
-    tapY.value = 0;
-  };
-
-  (0, _react.useEffect)(function () {
-    if (!visible) {
-      resetVisibleValues();
-    }
-  }, [visible]);
   var photos = images.reduce(function (acc, cur) {
     var _cur$attachments;
 
     var attachmentImages = ((_cur$attachments = cur.attachments) == null ? void 0 : _cur$attachments.filter(function (attachment) {
-      return attachment.type === 'image' && !attachment.title_link && !attachment.og_scrape_url && (attachment.image_url || attachment.thumb_url);
+      return attachment.type === 'image' && !attachment.title_link && !attachment.og_scrape_url && (0, _getUrlOfImageAttachment.getUrlOfImageAttachment)(attachment);
     })) || [];
-    var attachmentPhotos = attachmentImages.map(function (attachmentImage) {
+    var attachmentPhotos = attachmentImages.map(function (a) {
+      var imageUrl = (0, _getUrlOfImageAttachment.getUrlOfImageAttachment)(a);
       return {
+        channelId: cur.cid,
         created_at: cur.created_at,
-        id: "photoId-" + cur.id + "-" + (attachmentImage.image_url || attachmentImage.thumb_url),
+        id: "photoId-" + cur.id + "-" + imageUrl,
         messageId: cur.id,
-        uri: attachmentImage.image_url || attachmentImage.thumb_url || '',
+        original_height: a.original_height,
+        original_width: a.original_width,
+        uri: (0, _getResizedImageUrl.getResizedImageUrl)({
+          height: screenHeight,
+          url: imageUrl,
+          width: screenWidth
+        }),
         user: cur.user,
         user_id: cur.user_id
       };
@@ -264,12 +261,16 @@ var ImageGallery = function ImageGallery(props) {
   }, [image, photoLength]);
   var uriForCurrentImage = (_photos$selectedIndex = photos[selectedIndex]) == null ? void 0 : _photos$selectedIndex.uri;
   (0, _react.useEffect)(function () {
-    var _photos$index$value;
-
     setCurrentImageHeight(screenHeight);
-
-    if ((_photos$index$value = photos[index.value]) != null && _photos$index$value.uri) {
-      _reactNative.Image.getSize(photos[index.value].uri, function (width, height) {
+    var photo = photos[index.value];
+    var height = photo == null ? void 0 : photo.original_height;
+    var width = photo == null ? void 0 : photo.original_width;
+
+    if (height && width) {
+      var imageHeight = Math.floor(height * (screenWidth / width));
+      setCurrentImageHeight(imageHeight > screenHeight ? screenHeight : imageHeight);
+    } else if (photo != null && photo.uri) {
+      _reactNative.Image.getSize(photo.uri, function (width, height) {
         var imageHeight = Math.floor(height * (screenWidth / width));
         setCurrentImageHeight(imageHeight > screenHeight ? screenHeight : imageHeight);
       });
@@ -356,9 +357,7 @@ var ImageGallery = function ImageGallery(props) {
             duration: 200,
             easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.ease)
           }, function () {
-            showScreen.value = 0;
             (0, _reactNativeReanimated.runOnJS)(setOverlay)('none');
-            (0, _reactNativeReanimated.runOnJS)(setBlurType)(undefined);
           });
           scale.value = (0, _reactNativeReanimated.withTiming)(0.6, {
             duration: 200,
@@ -544,7 +543,7 @@ var ImageGallery = function ImageGallery(props) {
         translateX: translationX.value
       }]
     };
-  }, [visible]);
+  }, []);
   var containerBackground = (0, _reactNativeReanimated.useAnimatedStyle)(function () {
     return {
       backgroundColor: backgroundColor || white_snow,
@@ -553,32 +552,37 @@ var ImageGallery = function ImageGallery(props) {
   }, [headerFooterOpacity]);
   var showScreenStyle = (0, _reactNativeReanimated.useAnimatedStyle)(function () {
     return {
-      opacity: (0, _reactNativeReanimated.interpolate)(showScreen.value, [0, 0.01, 1], [0, 1, 1]),
       transform: [{
-        translateY: (0, _reactNativeReanimated.interpolate)(showScreen.value, [0, 1], [screenHeight, 0])
+        translateY: screenTranslateY.value
       }]
     };
   }, []);
 
   var closeGridView = function closeGridView() {
-    if (bottomSheetRef.current) {
-      bottomSheetRef.current.close();
+    var _bottomSheetModalRef$;
+
+    if ((_bottomSheetModalRef$ = bottomSheetModalRef.current) != null && _bottomSheetModalRef$.close) {
+      bottomSheetModalRef.current.close();
+      setGridPhotos([]);
     }
   };
 
   var openGridView = function openGridView() {
-    if (bottomSheetRef.current) {
-      bottomSheetRef.current.snapTo(1);
+    var _bottomSheetModalRef$2;
+
+    if ((_bottomSheetModalRef$2 = bottomSheetModalRef.current) != null && _bottomSheetModalRef$2.present) {
+      bottomSheetModalRef.current.present();
+      setGridPhotos(photos);
     }
   };
 
   return _react["default"].createElement(_reactNativeReanimated["default"].View, {
-    pointerEvents: visible ? 'auto' : 'none',
+    pointerEvents: 'auto',
     style: [_reactNative.StyleSheet.absoluteFillObject, showScreenStyle],
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1055,
+      lineNumber: 1042,
       columnNumber: 5
     }
   }, _react["default"].createElement(_reactNativeReanimated["default"].View, {
@@ -586,7 +590,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1059,
+      lineNumber: 1043,
       columnNumber: 7
     }
   }), _react["default"].createElement(_reactNativeGestureHandler.TapGestureHandler, {
@@ -598,7 +602,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1060,
+      lineNumber: 1044,
       columnNumber: 7
     }
   }, _react["default"].createElement(_reactNativeReanimated["default"].View, {
@@ -606,7 +610,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1067,
+      lineNumber: 1051,
       columnNumber: 9
     }
   }, _react["default"].createElement(_reactNativeGestureHandler.TapGestureHandler, {
@@ -620,7 +624,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1068,
+      lineNumber: 1052,
       columnNumber: 11
     }
   }, _react["default"].createElement(_reactNativeReanimated["default"].View, {
@@ -628,7 +632,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1077,
+      lineNumber: 1061,
       columnNumber: 13
     }
   }, _react["default"].createElement(_reactNativeGestureHandler.PinchGestureHandler, {
@@ -638,7 +642,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1078,
+      lineNumber: 1062,
       columnNumber: 15
     }
   }, _react["default"].createElement(_reactNativeReanimated["default"].View, {
@@ -646,7 +650,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1083,
+      lineNumber: 1067,
       columnNumber: 17
     }
   }, _react["default"].createElement(_reactNativeGestureHandler.PanGestureHandler, {
@@ -659,7 +663,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1084,
+      lineNumber: 1068,
       columnNumber: 19
     }
   }, _react["default"].createElement(_reactNativeReanimated["default"].View, {
@@ -667,11 +671,11 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1092,
+      lineNumber: 1076,
       columnNumber: 21
     }
   }, _react["default"].createElement(_reactNativeReanimated["default"].View, {
-    style: [styles.animatedContainer, pagerStyle, {
+    style: [styles.animatedContainer, pagerStyle, pager, {
       transform: [{
         scaleX: -1
       }, {
@@ -681,7 +685,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1093,
+      lineNumber: 1077,
       columnNumber: 23
     }
   }, photos.map(function (photo, i) {
@@ -695,17 +699,17 @@ var ImageGallery = function ImageGallery(props) {
       screenHeight: screenHeight,
       selected: selectedIndex === i,
       shouldRender: Math.abs(selectedIndex - i) < 4,
-      style: {
+      style: [{
         height: screenHeight * 8,
         marginRight: MARGIN,
         width: screenWidth * 8
-      },
+      }, slide],
       translateX: translateX,
       translateY: translateY,
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 1108,
+        lineNumber: 1093,
         columnNumber: 27
       }
     });
@@ -717,7 +721,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1136,
+      lineNumber: 1124,
       columnNumber: 7
     }
   })), _react["default"].createElement(_ImageGalleryFooter.ImageGalleryFooter, (0, _extends2["default"])({
@@ -731,7 +735,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1142,
+      lineNumber: 1130,
       columnNumber: 7
     }
   })), _react["default"].createElement(_ImageGalleryOverlay.ImageGalleryOverlay, {
@@ -741,12 +745,19 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1151,
+      lineNumber: 1139,
       columnNumber: 7
     }
-  }), _react["default"].createElement(_bottomSheet["default"], {
+  }), _react["default"].createElement(_bottomSheet.BottomSheetModalProvider, {
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 1144,
+      columnNumber: 7
+    }
+  }, _react["default"].createElement(_bottomSheet.BottomSheetModal, {
     animatedIndex: animatedBottomSheetIndex,
-    containerHeight: fullScreenHeight,
+    enablePanDownToClose: true,
     handleComponent: function handleComponent() {
       return _react["default"].createElement(_ImageGridHandle.ImageGridHandle, (0, _extends2["default"])({
         closeGridView: closeGridView
@@ -754,8 +765,8 @@ var ImageGallery = function ImageGallery(props) {
         __self: _this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 1160,
-          columnNumber: 11
+          lineNumber: 1149,
+          columnNumber: 13
         }
       }));
     },
@@ -764,28 +775,27 @@ var ImageGallery = function ImageGallery(props) {
     onChange: function onChange(index) {
       return setCurrentBottomSheetIndex(index);
     },
-    ref: bottomSheetRef,
+    ref: bottomSheetModalRef,
     snapPoints: imageGalleryGridSnapPoints || snapPoints,
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1156,
-      columnNumber: 7
+      lineNumber: 1145,
+      columnNumber: 9
     }
   }, _react["default"].createElement(_ImageGrid.ImageGrid, (0, _extends2["default"])({
     closeGridView: closeGridView,
     numberOfImageGalleryGridColumns: numberOfImageGalleryGridColumns,
-    photos: photos,
-    resetVisibleValues: resetVisibleValues,
+    photos: gridPhotos,
     setImage: setImage
   }, imageGalleryCustomComponents == null ? void 0 : imageGalleryCustomComponents.grid, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1171,
-      columnNumber: 9
+      lineNumber: 1160,
+      columnNumber: 11
     }
-  }))));
+  })))));
 };
 
 exports.ImageGallery = ImageGallery;