stream-chat-react-native-core/lib/module/state-store/message-overlay-store.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.useShouldTeleportToClosingPortal = exports.useOverlayController = exports.useIsOverlayClosing = exports.useIsOverlayActive = exports.useHasActiveId = exports.useClosingPortalLayouts = exports.useClosingPortalHostBlacklistState = exports.useClosingPortalHostBlacklist = exports.setOverlayTopH = exports.setOverlayMessageH = exports.setOverlayBottomH = exports.setClosingPortalLayout = exports.scheduleActionOnClose = exports.registerOverlaySharedValueController = exports.overlayStore = exports.openOverlay = exports.finalizeCloseOverlay = exports.createClosingPortalLayoutRegistrationId = exports.closeOverlay = exports.clearClosingPortalLayout = exports.bumpOverlayLayoutRevision = exports.activeIdSelector = void 0;
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _react = require("react");
var _reactNativeReanimated = require("react-native-reanimated");
var _streamChat = require("stream-chat");
var _shim = require("use-sync-external-store/shim");
var _hooks = require("../hooks");
var DefaultState = {
  closingPortalHostBlacklist: [],
  closing: false,
  id: undefined,
  messageId: undefined
};
var DefaultClosingPortalLayoutsState = {
  layouts: {}
};
var closingPortalLayoutRegistrationCounter = 0;
var closingPortalHostBlacklistRegistrationCounter = 0;
var closingPortalHostBlacklistStack = [];
var sharedValueController;
var registerOverlaySharedValueController = controller => {
  sharedValueController = controller;
  return () => {
    if (sharedValueController === controller) {
      sharedValueController = undefined;
    }
  };
};
exports.registerOverlaySharedValueController = registerOverlaySharedValueController;
var setOverlayMessageH = messageH => {
  sharedValueController?.setMessageH(messageH);
};
exports.setOverlayMessageH = setOverlayMessageH;
var setOverlayTopH = topH => {
  sharedValueController?.setTopH(topH);
};
exports.setOverlayTopH = setOverlayTopH;
var setOverlayBottomH = bottomH => {
  sharedValueController?.setBottomH(bottomH);
};
exports.setOverlayBottomH = setOverlayBottomH;
var bumpOverlayLayoutRevision = (closeCorrectionDeltaY = 0) => {
  sharedValueController?.incrementCloseCorrectionY(closeCorrectionDeltaY);
};
exports.bumpOverlayLayoutRevision = bumpOverlayLayoutRevision;
var openOverlay = params => {
  var overlayPayload = typeof params === 'string' ? {
    id: params,
    messageId: undefined
  } : params;
  sharedValueController?.resetCloseCorrectionY();
  overlayStore.partialNext({
    closing: false,
    closingPortalHostBlacklist: getCurrentClosingPortalHostBlacklist(),
    ...overlayPayload
  });
};
exports.openOverlay = openOverlay;
var closeOverlay = () => {
  if (!overlayStore.getLatestValue().id) {
    return;
  }
  requestAnimationFrame(() => {
    if (!overlayStore.getLatestValue().id) {
      return;
    }
    overlayStore.partialNext({
      closing: true
    });
  });
};
exports.closeOverlay = closeOverlay;
var actionQueue = [];
var scheduleActionOnClose = action => {
  var _overlayStore$getLate = overlayStore.getLatestValue(),
    id = _overlayStore$getLate.id;
  if (id) {
    actionQueue.push(action);
    return;
  }
  action();
};
exports.scheduleActionOnClose = scheduleActionOnClose;
var finalizeCloseOverlay = () => {
  if (!overlayStore.getLatestValue().id) {
    return;
  }
  overlayStore.next({
    ...DefaultState,
    closingPortalHostBlacklist: getCurrentClosingPortalHostBlacklist()
  });
  sharedValueController?.reset();
};
exports.finalizeCloseOverlay = finalizeCloseOverlay;
var overlayStore = exports.overlayStore = new _streamChat.StateStore(DefaultState);
var closingPortalLayoutsStore = new _streamChat.StateStore(DefaultClosingPortalLayoutsState);
var createClosingPortalLayoutRegistrationId = () => `closing-portal-layout-${closingPortalLayoutRegistrationCounter++}`;
exports.createClosingPortalLayoutRegistrationId = createClosingPortalLayoutRegistrationId;
var getCurrentClosingPortalHostBlacklist = () => closingPortalHostBlacklistStack[closingPortalHostBlacklistStack.length - 1]?.hostNames ?? [];
var syncClosingPortalHostBlacklist = () => {
  overlayStore.partialNext({
    closingPortalHostBlacklist: getCurrentClosingPortalHostBlacklist()
  });
};
var createClosingPortalHostBlacklistRegistrationId = () => `closing-portal-host-blacklist-${closingPortalHostBlacklistRegistrationCounter++}`;
var setClosingPortalHostBlacklist = (id, hostNames) => {
  var existingEntryIndex = closingPortalHostBlacklistStack.findIndex(entry => entry.id === id);
  if (existingEntryIndex === -1) {
    closingPortalHostBlacklistStack = [...closingPortalHostBlacklistStack, {
      hostNames,
      id
    }];
  } else {
    closingPortalHostBlacklistStack = closingPortalHostBlacklistStack.map((entry, index) => index === existingEntryIndex ? {
      ...entry,
      hostNames
    } : entry);
  }
  syncClosingPortalHostBlacklist();
};
var clearClosingPortalHostBlacklist = id => {
  var nextBlacklistStack = closingPortalHostBlacklistStack.filter(entry => entry.id !== id);
  if (nextBlacklistStack.length === closingPortalHostBlacklistStack.length) {
    return;
  }
  closingPortalHostBlacklistStack = nextBlacklistStack;
  syncClosingPortalHostBlacklist();
};
var setClosingPortalLayout = (hostName, id, layout) => {
  var _closingPortalLayouts = closingPortalLayoutsStore.getLatestValue(),
    layouts = _closingPortalLayouts.layouts;
  var hostEntries = layouts[hostName] ?? [];
  var existingEntry = hostEntries.find(entry => entry.id === id);
  if (existingEntry) {
    existingEntry.layout.value = layout;
    return;
  }
  if (!layout) return;
  closingPortalLayoutsStore.next({
    layouts: {
      ...layouts,
      [hostName]: [...hostEntries, {
        id,
        layout: (0, _reactNativeReanimated.makeMutable)(layout)
      }]
    }
  });
};
exports.setClosingPortalLayout = setClosingPortalLayout;
var clearClosingPortalLayout = (hostName, id) => {
  var _closingPortalLayouts2 = closingPortalLayoutsStore.getLatestValue(),
    layouts = _closingPortalLayouts2.layouts;
  var hostEntries = layouts[hostName];
  if (!hostEntries?.length) {
    return;
  }
  var nextHostEntries = hostEntries.filter(entry => entry.id !== id);
  var nextLayouts = {
    ...layouts
  };
  if (nextHostEntries.length === 0) {
    delete nextLayouts[hostName];
  } else {
    nextLayouts[hostName] = nextHostEntries;
  }
  closingPortalLayoutsStore.next({
    layouts: nextLayouts
  });
};
exports.clearClosingPortalLayout = clearClosingPortalLayout;
var actionQueueSelector = nextState => ({
  active: !!nextState.id
});
overlayStore.subscribeWithSelector(actionQueueSelector, function () {
  var _ref = (0, _asyncToGenerator2.default)(function* ({
    active
  }) {
    if (!active) {
      for (var action of actionQueue) {
        yield action();
      }
      actionQueue = [];
    }
  });
  return function (_x) {
    return _ref.apply(this, arguments);
  };
}());
var selector = nextState => ({
  closing: nextState.closing,
  id: nextState.id,
  messageId: nextState.messageId
});
var useOverlayController = () => {
  return (0, _hooks.useStateStore)(overlayStore, selector);
};
exports.useOverlayController = useOverlayController;
var overlayClosingSelector = nextState => ({
  closing: nextState.closing
});
var closingPortalHostBlacklistSelector = nextState => ({
  closingPortalHostBlacklist: nextState.closingPortalHostBlacklist
});
var useIsOverlayClosing = () => {
  return (0, _hooks.useStateStore)(overlayStore, overlayClosingSelector).closing;
};
exports.useIsOverlayClosing = useIsOverlayClosing;
var useClosingPortalHostBlacklistState = () => {
  return (0, _hooks.useStateStore)(overlayStore, closingPortalHostBlacklistSelector).closingPortalHostBlacklist;
};
exports.useClosingPortalHostBlacklistState = useClosingPortalHostBlacklistState;
var useShouldTeleportToClosingPortal = (hostName, id) => {
  var closing = useIsOverlayClosing();
  var closingPortalHostBlacklist = useClosingPortalHostBlacklistState();
  var closingPortalLayouts = useClosingPortalLayouts();
  var hostEntries = closingPortalLayouts[hostName];
  return !!overlayStore.getLatestValue().id && closing && !closingPortalHostBlacklist.includes(hostName) && hostEntries?.[hostEntries.length - 1]?.id === id;
};
exports.useShouldTeleportToClosingPortal = useShouldTeleportToClosingPortal;
var useClosingPortalHostBlacklist = (hostNames, enabled = true) => {
  var registrationIdRef = (0, _react.useRef)(null);
  if (!registrationIdRef.current) {
    registrationIdRef.current = createClosingPortalHostBlacklistRegistrationId();
  }
  var registrationId = registrationIdRef.current;
  var serializedNormalizedHostNames = JSON.stringify([...new Set(hostNames)]);
  (0, _react.useEffect)(() => {
    if (!enabled) {
      clearClosingPortalHostBlacklist(registrationId);
      return;
    }
    setClosingPortalHostBlacklist(registrationId, JSON.parse(serializedNormalizedHostNames));
    return () => {
      clearClosingPortalHostBlacklist(registrationId);
    };
  }, [enabled, registrationId, serializedNormalizedHostNames]);
};
exports.useClosingPortalHostBlacklist = useClosingPortalHostBlacklist;
var useClosingPortalLayouts = () => {
  var subscribe = (0, _react.useCallback)(listener => closingPortalLayoutsStore.subscribe(() => {
    listener();
  }), []);
  var getSnapshot = (0, _react.useCallback)(() => closingPortalLayoutsStore.getLatestValue().layouts, []);
  return (0, _shim.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
};
exports.useClosingPortalLayouts = useClosingPortalLayouts;
var noOpObject = {
  active: false,
  closing: false
};
var useIsOverlayActive = id => {
  var messageOverlaySelector = (0, _react.useCallback)(nextState => nextState.id === id ? {
    active: true,
    closing: nextState.closing
  } : noOpObject, [id]);
  return (0, _hooks.useStateStore)(overlayStore, messageOverlaySelector);
};
exports.useIsOverlayActive = useIsOverlayActive;
var activeIdSelector = nextState => ({
  id: nextState.id
});
exports.activeIdSelector = activeIdSelector;
var useHasActiveId = () => {
  var _useStateStore = (0, _hooks.useStateStore)(overlayStore, activeIdSelector),
    id = _useStateStore.id;
  return !!id;
};
exports.useHasActiveId = useHasActiveId;
//# sourceMappingURL=message-overlay-store.js.map