stream-chat-react-native-core/lib/module/components/Message/MessageOverlayWrapper.js

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.MessageOverlayWrapper = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _reactNativeTeleport = require("react-native-teleport");
var _MessageContext = require("../../contexts/messageContext/MessageContext");
var _jsxRuntime = require("react/jsx-runtime");
var _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/Message/MessageOverlayWrapper.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 MessageOverlayWrapper = ({
  children,
  targetId,
  testID
}) => {
  var _placeholderLayout$h;
  var _useMessageContext = (0, _MessageContext.useMessageContext)(),
    registerMessageOverlayTarget = _useMessageContext.registerMessageOverlayTarget,
    unregisterMessageOverlayTarget = _useMessageContext.unregisterMessageOverlayTarget;
  var _useMessageOverlayRun = (0, _MessageContext.useMessageOverlayRuntimeContext)(),
    messageOverlayTargetId = _useMessageOverlayRun.messageOverlayTargetId,
    overlayActive = _useMessageOverlayRun.overlayActive,
    overlayTargetRectRef = _useMessageOverlayRun.overlayTargetRectRef;
  var isActiveTarget = messageOverlayTargetId === targetId;
  var placeholderLayout = overlayTargetRectRef.current;
  var handleTargetRef = (0, _react.useCallback)(view => {
    registerMessageOverlayTarget({
      id: targetId,
      view
    });
  }, [registerMessageOverlayTarget, targetId]);
  (0, _react.useEffect)(() => () => {
    unregisterMessageOverlayTarget(targetId);
  }, [targetId, unregisterMessageOverlayTarget]);
  if (!isActiveTarget) {
    return children;
  }
  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [(0, _jsxRuntime.jsx)(_reactNativeTeleport.Portal, {
      hostName: overlayActive ? 'message-overlay' : undefined,
      children: (0, _jsxRuntime.jsx)(_reactNative.View, {
        collapsable: false,
        ref: handleTargetRef,
        testID: testID,
        children: (0, _jsxRuntime.jsx)(_MessageContext.MessageOverlayTargetProvider, {
          value: isActiveTarget,
          children: children
        })
      })
    }), overlayActive ? (0, _jsxRuntime.jsx)(_reactNative.View, {
      pointerEvents: "none",
      style: {
        height: (_placeholderLayout$h = placeholderLayout == null ? void 0 : placeholderLayout.h) != null ? _placeholderLayout$h : 0,
        width: placeholderLayout != null && placeholderLayout.w && placeholderLayout.w > 0 ? placeholderLayout.w : '100%'
      },
      testID: testID ? `${testID}-placeholder` : 'message-overlay-wrapper-placeholder'
    }) : null]
  });
};
exports.MessageOverlayWrapper = MessageOverlayWrapper;
//# sourceMappingURL=MessageOverlayWrapper.js.map