@applicaster/zapp-react-native-utils/reactHooks/resolvers/useCellResolver.ts

Applicaster Zapp React Native utilities package

/// <reference types="@applicaster/applicaster-types" />
import memoizee from "memoizee";
import * as R from "ramda";

import { CellRendererResolver } from "@applicaster/zapp-react-native-ui-components/Components/CellRendererResolver";
import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
import { useDimensions } from "../layout";
import { useIsRTL } from "../../localizationUtils";

type CellOptions = {
  generateId?: () => string;
  skipButtons?: boolean;
  enable_video_preview?: boolean;
  player_screen_id?: string;
  componentId?: string;
  componentType?: string;
};

type CellWidth = string | number;
type Props = {
  component: {
    id: string | number;
    rules?: Record<string, any>;
    styles?: {
      cell_plugin_configuration_id?: string;
      horizontal_list_cell_width?: string | number;
      cell_width?: CellWidth;
    };
  };
  cellWidth?: CellWidth;
} & CellOptions;

const cellWidthLens = R.lensPath(["styles", "cell_width"]);
const viewAtCellWidth = R.view(cellWidthLens);
const setCellWidth = R.set(cellWidthLens);
const MEMOIZED_LENGTH = 9;

const cellRenderer = (...args) => CellRendererResolver(args[MEMOIZED_LENGTH]); // pick 6th argument with data

const memoCellRenderer = memoizee(cellRenderer, {
  length: MEMOIZED_LENGTH,
  max: 1000,
});

export function useCellResolver({
  component,
  cellWidth,
  ...cellResolverOptions
}: Props) {
  let _component = Object.assign({}, component);

  const { width, height } = useDimensions("screen", {
    updateForInactiveScreens: false,
  });

  const { plugins, cellStyles } = usePickFromState(["plugins", "cellStyles"]);
  const isRTL = useIsRTL();

  const options = {
    isRTL,
    ...cellResolverOptions,
  };

  if (cellWidth) {
    _component = setCellWidth(cellWidth, _component);
  }

  const rules = _component?.rules || {};

  const cell_plugin_configuration_id =
    _component?.styles?.cell_plugin_configuration_id;

  const horizontal_list_cell_width =
    _component?.styles?.horizontal_list_cell_width;

  return memoCellRenderer(
    /* memoizee check prop list */
    cell_plugin_configuration_id,
    width,
    height,
    horizontal_list_cell_width,
    viewAtCellWidth(_component),
    options.generateId,
    options.skipButtons,
    rules.enable_video_preview,
    rules.player_screen_id,
    /* cell renderer input object */
    {
      component: _component,
      plugins,
      styles: {},
      cellStyles,
      ...options,
    }
  );
}