@applicaster/zapp-react-native-utils/focusManager/aux/index.ts

Applicaster Zapp React Native utilities package

import { isNil, pathOr } from "@applicaster/zapp-react-native-utils/utils";

import {
  QUICK_BRICK_CONTENT,
  QUICK_BRICK_NAVBAR,
  QUICK_BRICK_NAVBAR_SECTIONS,
} from "@applicaster/quick-brick-core/const";

const isNavBar = (node) => QUICK_BRICK_NAVBAR === node?.id;
const isContent = (node) => QUICK_BRICK_CONTENT === node?.id;

// SCREEN_PICKER_SELECTOR_CONTAINER(we assume there is only one SCREEN_PICKER)
let screenPickerSelectorContainerId;

export const onRegisterScreenPickerSelectorContainer = (id) => {
  screenPickerSelectorContainerId = id;
};

export const onUnregisterScreenPickerSelectorContainer = (id) => {
  // reset screenSelectorId on unregistration
  if (screenPickerSelectorContainerId === id) {
    screenPickerSelectorContainerId = undefined;
  }
};
// SCREEN_PICKER_SELECTOR_CONTAINER

// SCREEN_PICKER_CONTENT_CONTAINER(we assume there is only one SCREEN_PICKER)
let screenPickerContentContainerId;

export const onRegisterScreenPickerContentContainer = (id) => {
  screenPickerContentContainerId = id;
};

export const onUnregisterScreenPickerContentContainer = (id) => {
  // reset screenSelectorId on unregistration
  if (screenPickerContentContainerId === id) {
    screenPickerContentContainerId = undefined;
  }
};

const isScreenPickerContentContainer = (node) =>
  screenPickerContentContainerId === node?.id;

// SCREEN_PICKER_CONTENT_CONTAINER

export const findSelectedMenuId = (
  focusableTree,
  { index, sectionKey }: { index: number; sectionKey: string }
) => {
  const sectionName = QUICK_BRICK_NAVBAR_SECTIONS[sectionKey];

  return pathOr(
    undefined,
    ["children", index, "id"],
    focusableTree.find(sectionName)
  );
};

export const findSelectedTabId = (focusableTree, index: number): string => {
  const screenSelectorContainerNode = focusableTree.find(
    screenPickerSelectorContainerId
  );

  const selectedTabId = screenSelectorContainerNode.children[index]?.id;

  return selectedTabId;
};

export const isTabsScreenContentFocused = (focusableTree, id) => {
  const node = focusableTree.find(id);

  if (isNil(node)) {
    return false;
  }

  if (isNavBar(node)) {
    return false;
  }

  if (isContent(node)) {
    return false;
  }

  if (isScreenPickerContentContainer(node)) {
    return true;
  }

  return isTabsScreenContentFocused(focusableTree, node.parentId);
};

export const contextWithoutScrolling = (
  source: FocusManager.FocusContext["source"]
): FocusManager.FocusContext => {
  return {
    source,
    preserveScroll: true,
  };
};