@applicaster/zapp-react-native-utils/appUtils/RiverFocusManager/index.js

Applicaster Zapp React Native utilities package

import * as R from "ramda";

import { focusManager } from "../focusManager";

let riverFocusData = {};
let initialyPresentedScreenFocused = false;

export const riverFocusManager = (function () {
  function setScreenFocusableData({
    screenFocusableGroupId,
    groupId,
    itemId,
    contentOffsetY,
    componentId,
    itemIndex,
  }) {
    riverFocusData[screenFocusableGroupId] = {
      groupId,
      itemId,
      contentOffsetY,
      componentId,
      itemIndex,
    };
  }

  /**
   * Retrieve screen focus data by id
   *
   * @param {String}  screenFocusableGroupId Id that was used to save screen data.
   *
   */
  function screenFocusableData({ screenFocusableGroupId }) {
    return riverFocusData[screenFocusableGroupId];
  }

  /**
   * Clear screen data for specific screen
   *
   * @param {String}  screenId Unique Id of the screen from layout.json
   * @param {boolean} isInsideContainer If this screen a screen picker child
   *
   */
  function clearScreenData({ screenId, isInsideContainer }) {
    const groupId = screenFocusableGroupId({
      screenId,
      isInsideContainer,
    });

    riverFocusData[groupId] = null;
  }

  /**
   * Clear all saved screen data.
   *
   */
  function clearAllScreensData() {
    riverFocusData = {};
  }

  /**
   * Focus on selected items
   *
   * @param {String}  screenFocusableGroupId Top group id that was saved as screenn
   * @param {String} screenFocusedOnItem focusable item to focus
   * @param {object} history navigator history object
   *
   */
  function focusOnSelectedItem({
    screenFocusableGroupId,
    screenFocusedOnItem,
    previousAction,
    isDeepLink,
  }) {
    // Check if screen should be focused
    const shouldFocus =
      (initialyPresentedScreenFocused === false && R.isEmpty(riverFocusData)) ||
      R.compose(R.not, R.isNil)(riverFocusData[screenFocusableGroupId]) ||
      isDeepLink;

    // TODO: Uncommit it to start fixing bug where selection wrong item
    // Try to get screen data of exists for current screen.
    // const currentRiverFocusData = riverFocusData[screenFocusableGroupId];
    if (shouldFocus || previousAction === "PUSH") {
      // If initial screen was not focused yet on first item. We to do it and not allow it anymore
      if (initialyPresentedScreenFocused === false) {
        initialyPresentedScreenFocused = true;
      }

      // If data was found, try focus on expected item
      // if (currentRiverFocusData) {
      //   const { itemId } = riverFocusData[screenFocusableGroupId];

      //   focusManager.forceFocusOnFocusable({
      //     itemId,
      //     callback: () => {
      //       // When we get complication from native side send complition on js part
      //       screenFocusedOnItem();
      //     },
      //   });
      //   // If not, try find first initially focused item in top focsable groups and all sub focusable groups
      // } else {
      focusManager.forceFocusOnInitialFocusable({
        groupId: screenFocusableGroupId,
        callback: () => {
          // When we get complication from native side send complition on js part
          screenFocusedOnItem();
        },
      });
      // }
    } else {
      // Will not focus send completion that screen is ready
      screenFocusedOnItem();
    }
  }

  /**
   * Create unique key that will be used for save focused group data inside specific screen
   *
   * @param {String}  screenId Unique Id of the screen from layout.json
   * @param {boolean} isInsideContainer If this screen a screen picker child
   *
   */
  function screenFocusableGroupId({ screenId, isInsideContainer }) {
    return R.isNil(isInsideContainer)
      ? `RiverFocusableGroup-${screenId}`
      : `RiverFocusableGroup-${screenId}-isInsideContainer`;
  }

  return {
    setScreenFocusableData,
    clearAllScreensData,
    focusOnSelectedItem,
    screenFocusableGroupId,
    screenFocusableData,
    clearScreenData,
  };
})();