@applicaster/zapp-react-native-ui-components/Components/MasterCell/DefaultComponents/tv/TvActionButtons/index.ts

Applicaster Zapp React Native ui components for the Quick Brick App

import { times } from "@applicaster/zapp-react-native-utils/utils";
import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";

import { Button } from "./Button";
import {
  getButtonsCount,
  getPluginIdentifier,
  mapSelfAlignment,
} from "./utils";

import { compact } from "@applicaster/zapp-react-native-utils/cellUtils";
import { PREFIX, BUTTON_PREFIX } from "./const";

export {
  insertButtonsBetweenLabels,
  insertButtonsBetweenLabelContainers,
} from "./utils";

const buttonId = (index: number) => `${BUTTON_PREFIX}_${index}`;

type Props = {
  value: Function;
  platformValue: Function;
  configuration: Record<string, unknown>;
  state: string;
  skipButtons: boolean;
};

export const TvActionButtons = ({
  value,
  platformValue,
  configuration,
  state,
  skipButtons,
}: Props) => {
  if (skipButtons || !value(`${PREFIX}_container_buttons_enabled`)) {
    return null;
  }

  const buttonsCount = getButtonsCount(configuration, PREFIX);

  if (buttonsCount <= 0) {
    return null;
  }

  const independentStyles = value(`${PREFIX}_container_independent_styles`);

  return {
    type: "ButtonContainerView",
    style: {
      flexDirection: "row",

      justifyContent: mapSelfAlignment(value(`${PREFIX}_container_align`)),

      marginTop: toNumberWithDefaultZero(
        value(`${PREFIX}_container_margin_top`)
      ),
      marginRight: toNumberWithDefaultZero(
        value(`${PREFIX}_container_margin_right`)
      ),
      marginBottom: toNumberWithDefaultZero(
        value(`${PREFIX}_container_margin_bottom`)
      ),
      marginLeft: toNumberWithDefaultZero(
        value(`${PREFIX}_container_margin_left`)
      ),
    },
    additionalProps: {
      horizontalGutter: toNumberWithDefaultZero(
        value(`${PREFIX}_container_horizontal_gutter`)
      ),
      state,
      buttonsCount,
    },
    elements: compact(
      times((index) => {
        const prefixSpecificButton = buttonId(index + 1);

        return Button({
          prefix: independentStyles ? prefixSpecificButton : buttonId(1),
          value,
          platformValue,
          pluginIdentifier: getPluginIdentifier(configuration, PREFIX, index),
          suffixId: prefixSpecificButton,
          preferredFocus: index === 0,
        });
      }, buttonsCount)
    ),
  };
};