stream-chat-react-native-core/lib/module/contexts/overlayContext/OverlayProvider.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.OverlayProvider = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _reactNativeReanimated = require("react-native-reanimated");
var _reactNativeTeleport = require("react-native-teleport");
var _MessageOverlayHostLayer = require("./MessageOverlayHostLayer");
var _OverlayContext = require("./OverlayContext");
var _OverlayA11yShield = require("../../components/Accessibility/OverlayA11yShield");
var _ImageGallery = require("../../components/ImageGallery/ImageGallery");
var _useStreami18n = require("../../hooks/useStreami18n");
var _AccessibilityContext = require("../accessibilityContext/AccessibilityContext");
var _ImageGalleryContext = require("../imageGalleryContext/ImageGalleryContext");
var _ScreenReaderContext = require("../screenReaderContext/ScreenReaderContext");
var _ThemeContext = require("../themeContext/ThemeContext");
var _TranslationContext = require("../translationContext/TranslationContext");
var _jsxRuntime = require("react/jsx-runtime");
var _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/contexts/overlayContext/OverlayProvider.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 OverlayProvider = props => {
  var accessibility = props.accessibility,
    autoPlayVideo = props.autoPlayVideo,
    children = props.children,
    giphyVersion = props.giphyVersion,
    i18nInstance = props.i18nInstance,
    numberOfImageGalleryGridColumns = props.numberOfImageGalleryGridColumns,
    value = props.value;
  var _useState = (0, _react.useState)(value?.overlay || 'none'),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    overlay = _useState2[0],
    setOverlay = _useState2[1];
  var overlayOpacity = (0, _reactNativeReanimated.useSharedValue)(0);
  var translators = (0, _useStreami18n.useStreami18n)(i18nInstance);
  (0, _react.useEffect)(() => {
    var backAction = () => {
      if (overlay !== 'none') {
        setOverlay('none');
        return true;
      }
      return false;
    };
    var backHandler = _reactNative.BackHandler.addEventListener('hardwareBackPress', backAction);
    return () => backHandler.remove();
  }, [overlay]);
  (0, _react.useEffect)(() => {
    (0, _reactNativeReanimated.cancelAnimation)(overlayOpacity);
    if (overlay !== 'none') {
      overlayOpacity.value = (0, _reactNativeReanimated.withTiming)(1);
    } else {
      overlayOpacity.value = (0, _reactNativeReanimated.withTiming)(0);
    }
  }, [overlay]);
  var overlayContext = {
    overlay,
    overlayOpacity,
    setOverlay,
    style: value?.style
  };
  var imageGalleryProviderProps = (0, _react.useMemo)(() => ({
    autoPlayVideo,
    giphyVersion,
    numberOfImageGalleryGridColumns
  }), [autoPlayVideo, giphyVersion, numberOfImageGalleryGridColumns]);
  return (0, _jsxRuntime.jsx)(_TranslationContext.TranslationProvider, {
    value: {
      ...translators,
      userLanguage: _TranslationContext.DEFAULT_USER_LANGUAGE
    },
    children: (0, _jsxRuntime.jsx)(_AccessibilityContext.AccessibilityProvider, {
      value: accessibility,
      children: (0, _jsxRuntime.jsx)(_ScreenReaderContext.ScreenReaderProvider, {
        children: (0, _jsxRuntime.jsx)(_OverlayContext.OverlayContext.Provider, {
          value: overlayContext,
          children: (0, _jsxRuntime.jsx)(_ImageGalleryContext.ImageGalleryProvider, {
            value: imageGalleryProviderProps,
            children: (0, _jsxRuntime.jsx)(_ThemeContext.ThemeProvider, {
              style: overlayContext.style,
              children: (0, _jsxRuntime.jsxs)(_reactNativeTeleport.PortalProvider, {
                children: [accessibility?.enabled ? (0, _jsxRuntime.jsx)(_OverlayA11yShield.OverlayA11yShield, {
                  children: children
                }) : children, overlay === 'gallery' && (0, _jsxRuntime.jsx)(_ImageGallery.ImageGallery, {
                  overlayOpacity: overlayOpacity
                }), (0, _jsxRuntime.jsx)(_MessageOverlayHostLayer.MessageOverlayHostLayer, {})]
              })
            })
          })
        })
      })
    })
  });
};
exports.OverlayProvider = OverlayProvider;
//# sourceMappingURL=OverlayProvider.js.map