stream-chat-react-native-core/lib/module/components/UIComponents/PortalWhileClosingView.js

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.PortalWhileClosingView = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
var _reactNativeTeleport = require("react-native-teleport");
var _measureInWindow = require("../../components/Message/utils/measureInWindow");
var _hooks = require("../../hooks");
var _stateStore = require("../../state-store");
var _jsxRuntime = require("react/jsx-runtime");
var _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/UIComponents/PortalWhileClosingView.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 PortalWhileClosingView = ({
  children,
  portalHostName,
  portalName
}) => {
  var registrationIdRef = (0, _react.useRef)(null);
  if (!registrationIdRef.current) {
    registrationIdRef.current = (0, _stateStore.createClosingPortalLayoutRegistrationId)();
  }
  var registrationId = registrationIdRef.current;
  var _useSyncingApi = useSyncingApi(portalHostName, registrationId),
    syncPortalLayout = _useSyncingApi.syncPortalLayout,
    containerRef = _useSyncingApi.containerRef,
    placeholderLayout = _useSyncingApi.placeholderLayout;
  var shouldTeleport = (0, _stateStore.useShouldTeleportToClosingPortal)(portalHostName, registrationId);
  (0, _react.useEffect)(() => {
    return () => {
      (0, _stateStore.clearClosingPortalLayout)(portalHostName, registrationId);
    };
  }, [portalHostName, registrationId]);
  var placeholderStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
    height: placeholderLayout.value.h,
    width: placeholderLayout.value.w > 0 ? placeholderLayout.value.w : '100%'
  }));
  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [(0, _jsxRuntime.jsx)(_reactNativeTeleport.Portal, {
      hostName: shouldTeleport ? portalHostName : undefined,
      name: portalName,
      children: (0, _jsxRuntime.jsx)(_reactNative.View, {
        collapsable: false,
        ref: containerRef,
        onLayout: syncPortalLayout,
        children: children
      })
    }), shouldTeleport ? (0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
      pointerEvents: "none",
      style: placeholderStyle,
      testID: `portal-while-closing-placeholder-${portalName}`
    }) : null]
  });
};
exports.PortalWhileClosingView = PortalWhileClosingView;
var useSyncingApi = (portalHostName, registrationId) => {
  var containerRef = (0, _react.useRef)(null);
  var placeholderLayout = (0, _reactNativeReanimated.useSharedValue)({
    h: 0,
    w: 0
  });
  var insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
  var hasActiveId = (0, _stateStore.useHasActiveId)();
  var isClosing = (0, _stateStore.useIsOverlayClosing)();
  var syncPortalLayout = (0, _hooks.useStableCallback)(() => {
    if (!hasActiveId && !isClosing) {
      return;
    }
    (0, _measureInWindow.measureInWindow)(containerRef, insets).then(rect => {
      placeholderLayout.value = {
        h: rect.h,
        w: rect.w
      };
      (0, _stateStore.setClosingPortalLayout)(portalHostName, registrationId, rect);
    }).catch(() => {});
  });
  (0, _react.useEffect)(() => {
    if (hasActiveId || isClosing) {
      syncPortalLayout();
    }
  }, [insets.bottom, isClosing, hasActiveId, syncPortalLayout]);
  return (0, _react.useMemo)(() => ({
    syncPortalLayout,
    containerRef,
    placeholderLayout
  }), [placeholderLayout, syncPortalLayout]);
};
//# sourceMappingURL=PortalWhileClosingView.js.map