@applicaster/zapp-react-native-ui-components/Components/FocusableList/FocusableChild.ts

Applicaster Zapp React Native ui components for the Quick Brick App

import * as React from "react";
import { isEqual } from "@applicaster/zapp-react-native-utils/equalUtils";
import { useFocusable } from "../Focusable/index.android";
import { useCellState } from "./hooks/useCellState.android";

/**
 * returns parent focus from prop or from context
 * */
const useParentFocus = (
  { nextFocusDown, nextFocusUp, nextFocusRight, nextFocusLeft },
  context
) =>
  React.useMemo(
    () => ({
      nextFocusRight: nextFocusRight ?? context.nextFocusRight,
      nextFocusDown: nextFocusDown ?? context.nextFocusDown,
      nextFocusLeft: nextFocusLeft ?? context.nextFocusLeft,
      nextFocusUp: nextFocusUp ?? context.nextFocusUp,
    }),
    [
      nextFocusRight,
      nextFocusDown,
      nextFocusLeft,
      nextFocusUp,
      context.nextFocusLeft,
      context.nextFocusRight,
      context.nextFocusUp,
      context.nextFocusDown,
    ]
  );

function FocusableChildComponent(props) {
  const { setIsFocusable, ...focusableContext } = useFocusable();
  const focused = useCellState(props.id);

  const parentFocus = useParentFocus(props, focusableContext);

  const onLoadFailed = React.useCallback(() => {
    setIsFocusable(false);
  }, []);

  return props.renderItem({
    ...props,
    focused,
    onLoadFailed,
    parentFocus,
  });
}

const byValueKeyList = ["focused", "item", "extraChildrenData", "extraData"];

export const FocusableChild = React.memo(
  FocusableChildComponent,
  isEqual({
    byValue: byValueKeyList,
  })
);