@applicaster/zapp-react-native-ui-components/Components/FocusableList/hooks/useCellState.android.ts

Applicaster Zapp React Native ui components for the Quick Brick App

import * as React from "react";
import * as FOCUS_EVENTS from "@applicaster/zapp-react-native-utils/appUtils/focusManager/events";
import { useFocusManager } from "@applicaster/zapp-react-native-utils/focusManager";

export const useCellState = (id: string) => {
  const focusManager = useFocusManager();

  const [currentCellFocused, setCurrentCellFocused] = React.useState(
    focusManager.isFocused(id)
  );

  React.useEffect(() => {
    const focusHandler = (focusable) => {
      const isChildren = focusManager.isFocusableChildOf(focusable, id);

      setCurrentCellFocused(isChildren);
    };

    focusManager.on(FOCUS_EVENTS.FOCUS, focusHandler);

    const resetHandler = ({ focusedId }) => {
      if (id === focusedId) {
        setCurrentCellFocused(false);
      }
    };

    focusManager.on(FOCUS_EVENTS.RESET, resetHandler);

    return () => {
      focusManager.removeHandler(FOCUS_EVENTS.FOCUS, focusHandler);
      focusManager.removeHandler(FOCUS_EVENTS.RESET, resetHandler);
    };
  }, [id]);

  return currentCellFocused;
};