stream-chat-react-native-core/lib/commonjs/components/ImageGallery/ImageGallery.js

The official React Native and Expo components for Stream Chat, a service for building chat applications

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.clamp = exports.IsSwiping = exports.ImageGalleryWithContext = exports.ImageGallery = exports.HasPinched = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _reactNativeGestureHandler = require("react-native-gesture-handler");
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
var _AnimatedGalleryImage = require("./components/AnimatedGalleryImage");
var _AnimatedGalleryVideo = require("./components/AnimatedGalleryVideo");
var _ImageGalleryA11yProbe = require("./components/ImageGalleryA11yProbe");
var _useCurrentImageHeight = require("./hooks/useCurrentImageHeight");
var _useImageGalleryGestures = require("./hooks/useImageGalleryGestures");
var _AccessibilityContext = require("../../contexts/accessibilityContext/AccessibilityContext");
var _ComponentsContext = require("../../contexts/componentsContext/ComponentsContext");
var _ImageGalleryContext = require("../../contexts/imageGalleryContext/ImageGalleryContext");
var _OverlayContext = require("../../contexts/overlayContext/OverlayContext");
var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
var _hooks = require("../../hooks");
var _useViewport2 = require("../../hooks/useViewport");
var _types = require("../../types/types");
var _KeyboardCompatibleView = require("../KeyboardCompatibleView/KeyboardCompatibleView");
var _UIComponents = require("../UIComponents");
var _jsxRuntime = require("react/jsx-runtime");
var _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/ImageGallery/ImageGallery.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var MARGIN = 32;
var HasPinched = exports.HasPinched = function (HasPinched) {
  HasPinched[HasPinched["FALSE"] = 0] = "FALSE";
  HasPinched[HasPinched["TRUE"] = 1] = "TRUE";
  return HasPinched;
}({});
var IsSwiping = exports.IsSwiping = function (IsSwiping) {
  IsSwiping[IsSwiping["UNDETERMINED"] = 0] = "UNDETERMINED";
  IsSwiping[IsSwiping["TRUE"] = 1] = "TRUE";
  IsSwiping[IsSwiping["FALSE"] = 2] = "FALSE";
  return IsSwiping;
}({});
var imageGallerySelector = state => ({
  assets: state.assets
});
var PAGER_WINDOW_RADIUS = 4;
var galleryPagerSelector = state => ({
  assets: state.assets,
  currentIndex: state.currentIndex
});
var GalleryPager = props => {
  var fullWindowHeight = props.fullWindowHeight,
    fullWindowWidth = props.fullWindowWidth,
    offsetScale = props.offsetScale,
    scale = props.scale,
    slide = props.slide,
    translateX = props.translateX,
    translateY = props.translateY;
  var _useImageGalleryConte = (0, _ImageGalleryContext.useImageGalleryContext)(),
    imageGalleryStateStore = _useImageGalleryConte.imageGalleryStateStore;
  var _useStateStore = (0, _hooks.useStateStore)(imageGalleryStateStore.state, galleryPagerSelector),
    assets = _useStateStore.assets,
    currentIndex = _useStateStore.currentIndex;
  var slideStyle = {
    height: fullWindowHeight * 8,
    marginRight: MARGIN,
    width: fullWindowWidth * 8
  };
  var lo = Math.max(0, currentIndex - PAGER_WINDOW_RADIUS);
  var hi = Math.min(assets.length - 1, currentIndex + PAGER_WINDOW_RADIUS);
  var slides = [];
  for (var i = lo; i <= hi; i++) {
    var photo = assets[i];
    slides.push(photo.type === _types.FileTypes.Video ? (0, _jsxRuntime.jsx)(_AnimatedGalleryVideo.AnimatedGalleryVideo, {
      attachmentId: photo.id,
      index: i,
      offsetScale: offsetScale,
      photo: photo,
      scale: scale,
      screenHeight: fullWindowHeight,
      style: [slideStyle, slide],
      translateX: translateX,
      translateY: translateY
    }, photo.id) : (0, _jsxRuntime.jsx)(_AnimatedGalleryImage.AnimatedGalleryImage, {
      accessibilityLabel: 'Image Item',
      index: i,
      offsetScale: offsetScale,
      photo: photo,
      scale: scale,
      screenHeight: fullWindowHeight,
      screenWidth: fullWindowWidth,
      style: [slideStyle, slide],
      translateX: translateX,
      translateY: translateY
    }, photo.id));
  }
  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [lo > 0 ? (0, _jsxRuntime.jsx)(_reactNative.View, {
      style: {
        width: lo * (fullWindowWidth * 8 + MARGIN)
      }
    }, 'gallery-pager-leading-spacer') : null, slides]
  });
};
var ImageGalleryWithContext = props => {
  var numberOfImageGalleryGridColumns = props.numberOfImageGalleryGridColumns,
    overlayOpacity = props.overlayOpacity,
    ImageGalleryHeader = props.ImageGalleryHeader,
    ImageGalleryFooter = props.ImageGalleryFooter,
    ImageGalleryGrid = props.ImageGalleryGrid;
  var _useState = (0, _react.useState)(false),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    isGridViewVisible = _useState2[0],
    setIsGridViewVisible = _useState2[1];
  var _useTheme = (0, _ThemeContext.useTheme)(),
    _useTheme$theme = _useTheme.theme,
    _useTheme$theme$image = _useTheme$theme.imageGallery,
    backgroundColor = _useTheme$theme$image.backgroundColor,
    pager = _useTheme$theme$image.pager,
    slide = _useTheme$theme$image.slide,
    semantics = _useTheme$theme.semantics;
  var _useImageGalleryConte2 = (0, _ImageGalleryContext.useImageGalleryContext)(),
    imageGalleryStateStore = _useImageGalleryConte2.imageGalleryStateStore;
  var _useStateStore2 = (0, _hooks.useStateStore)(imageGalleryStateStore.state, imageGallerySelector),
    assets = _useStateStore2.assets;
  var _useViewport = (0, _useViewport2.useViewport)(),
    vh = _useViewport.vh,
    vw = _useViewport.vw;
  var fullWindowHeight = vh(100);
  var fullWindowWidth = vw(100);
  var halfScreenWidth = fullWindowWidth / 2;
  var halfScreenHeight = fullWindowHeight / 2;
  var quarterScreenHeight = fullWindowHeight / 4;
  var screenTranslateY = (0, _reactNativeReanimated.useSharedValue)(fullWindowHeight);
  var showScreen = (0, _react.useCallback)(() => {
    'worklet';

    screenTranslateY.value = (0, _reactNativeReanimated.withTiming)(0, {
      duration: 250,
      easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.ease)
    });
  }, [screenTranslateY]);
  (0, _react.useEffect)(() => {
    (0, _KeyboardCompatibleView.dismissKeyboard)();
    showScreen();
  }, [showScreen]);
  var currentImageHeight = (0, _useCurrentImageHeight.useCurrentImageHeight)({
    assets,
    fullWindowHeight,
    fullWindowWidth,
    imageGalleryStateStore
  });
  var headerFooterVisible = (0, _reactNativeReanimated.useSharedValue)(1);
  var translateX = (0, _reactNativeReanimated.useSharedValue)(0);
  var translateY = (0, _reactNativeReanimated.useSharedValue)(0);
  var offsetScale = (0, _reactNativeReanimated.useSharedValue)(1);
  var scale = (0, _reactNativeReanimated.useSharedValue)(1);
  var translationX = (0, _reactNativeReanimated.useSharedValue)(-(fullWindowWidth + MARGIN) * imageGalleryStateStore.state.getLatestValue().currentIndex);
  var currentIndexShared = imageGalleryStateStore.currentIndexShared;
  (0, _reactNativeReanimated.useAnimatedReaction)(() => currentIndexShared.value, index => {
    translationX.value = -(fullWindowWidth + MARGIN) * index;
  }, [fullWindowWidth]);
  var _useImageGalleryGestu = (0, _useImageGalleryGestures.useImageGalleryGestures)({
      currentImageHeight,
      halfScreenHeight,
      halfScreenWidth,
      headerFooterVisible,
      offsetScale,
      overlayOpacity,
      scale,
      screenHeight: fullWindowHeight,
      screenWidth: fullWindowWidth,
      translateX,
      translateY,
      translationX
    }),
    doubleTap = _useImageGalleryGestu.doubleTap,
    pan = _useImageGalleryGestu.pan,
    pinch = _useImageGalleryGestu.pinch,
    singleTap = _useImageGalleryGestu.singleTap;
  var headerFooterOpacity = (0, _reactNativeReanimated.useDerivedValue)(() => {
    var imageHeight = currentImageHeight.value;
    return imageHeight * scale.value < fullWindowHeight && translateY.value > 0 ? 1 - translateY.value / quarterScreenHeight : imageHeight * scale.value > fullWindowHeight && translateY.value > imageHeight / 2 * scale.value - halfScreenHeight ? 1 - (translateY.value - (imageHeight / 2 * scale.value - halfScreenHeight)) / quarterScreenHeight : 1;
  }, []);
  var pagerStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
    transform: [{
      scaleX: 1
    }, {
      translateX: translationX.value
    }]
  }), []);
  var containerBackground = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
    backgroundColor: backgroundColor || semantics.backgroundCoreApp,
    opacity: headerFooterOpacity.value
  }), [headerFooterOpacity]);
  var showScreenStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
    transform: [{
      translateY: screenTranslateY.value
    }]
  }), []);
  var closeGridView = () => {
    setIsGridViewVisible(false);
  };
  var openGridView = () => {
    setIsGridViewVisible(true);
  };
  var _useAccessibilityCont = (0, _AccessibilityContext.useAccessibilityContext)(),
    isAccessibilityEnabled = _useAccessibilityCont.enabled;
  (0, _react.useEffect)(() => {
    return () => {
      var handle = imageGalleryStateStore.requesterNode;
      if (handle == null) return;
      imageGalleryStateStore.requesterNode = null;
      if (_reactNative.Platform.OS === 'android') {
        _reactNative.AccessibilityInfo.setAccessibilityFocus(handle);
      } else {
        requestAnimationFrame(() => {
          _reactNative.AccessibilityInfo.setAccessibilityFocus(handle);
        });
      }
    };
  }, [imageGalleryStateStore]);
  return (0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
    accessibilityViewIsModal: true,
    pointerEvents: 'auto',
    style: [_reactNative.StyleSheet.absoluteFill, showScreenStyle],
    children: [isAccessibilityEnabled ? (0, _jsxRuntime.jsx)(_ImageGalleryA11yProbe.ImageGalleryA11yProbe, {
      containerBackground: containerBackground
    }) : (0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
      style: [_reactNative.StyleSheet.absoluteFill, containerBackground]
    }), (0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
      gesture: _reactNativeGestureHandler.Gesture.Simultaneous(singleTap, doubleTap, pinch, pan),
      children: (0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
        style: _reactNative.StyleSheet.absoluteFill,
        children: (0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
          testID: "image-gallery-pager",
          style: [styles.animatedContainer, pagerStyle, pager],
          children: (0, _jsxRuntime.jsx)(GalleryPager, {
            fullWindowHeight: fullWindowHeight,
            fullWindowWidth: fullWindowWidth,
            offsetScale: offsetScale,
            scale: scale,
            slide: slide,
            translateX: translateX,
            translateY: translateY
          })
        })
      })
    }), ImageGalleryHeader ? (0, _jsxRuntime.jsx)(ImageGalleryHeader, {
      opacity: headerFooterOpacity,
      visible: headerFooterVisible
    }) : null, ImageGalleryFooter ? (0, _jsxRuntime.jsx)(ImageGalleryFooter, {
      accessibilityLabel: 'Image Gallery Footer',
      opacity: headerFooterOpacity,
      openGridView: openGridView,
      visible: headerFooterVisible
    }) : null, (0, _jsxRuntime.jsx)(_UIComponents.BottomSheetModal, {
      height: 350,
      onClose: () => {
        setIsGridViewVisible(false);
      },
      visible: isGridViewVisible,
      children: ImageGalleryGrid ? (0, _jsxRuntime.jsx)(ImageGalleryGrid, {
        closeGridView: closeGridView,
        numberOfImageGalleryGridColumns: numberOfImageGalleryGridColumns
      }) : null
    })]
  });
};
exports.ImageGalleryWithContext = ImageGalleryWithContext;
var ImageGallery = props => {
  var _useImageGalleryConte3 = (0, _ImageGalleryContext.useImageGalleryContext)(),
    numberOfImageGalleryGridColumns = _useImageGalleryConte3.numberOfImageGalleryGridColumns;
  var _useComponentsContext = (0, _ComponentsContext.useComponentsContext)(),
    ImageGalleryHeader = _useComponentsContext.ImageGalleryHeader,
    ImageGalleryFooter = _useComponentsContext.ImageGalleryFooter,
    ImageGalleryGrid = _useComponentsContext.ImageGalleryGrid;
  var _useOverlayContext = (0, _OverlayContext.useOverlayContext)(),
    overlayOpacity = _useOverlayContext.overlayOpacity;
  return (0, _jsxRuntime.jsx)(ImageGalleryWithContext, {
    numberOfImageGalleryGridColumns: numberOfImageGalleryGridColumns,
    overlayOpacity: overlayOpacity,
    ImageGalleryHeader: ImageGalleryHeader,
    ImageGalleryFooter: ImageGalleryFooter,
    ImageGalleryGrid: ImageGalleryGrid,
    ...props
  });
};
exports.ImageGallery = ImageGallery;
var clamp = (value, lowerBound, upperBound) => {
  'worklet';

  return Math.min(Math.max(lowerBound, value), upperBound);
};
exports.clamp = clamp;
var styles = _reactNative.StyleSheet.create({
  animatedContainer: {
    alignItems: 'center',
    direction: 'ltr',
    flexDirection: 'row'
  }
});
ImageGallery.displayName = 'ImageGallery{imageGallery}';
//# sourceMappingURL=ImageGallery.js.map