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

Applicaster Zapp React Native ui components for the Quick Brick App

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

import { compact } from "@applicaster/zapp-react-native-utils/cellUtils";

import { TextLabelsContainer } from "./TextLabelsContainer";
import { Asset } from "./Asset";
import { Spacer } from "./Spacer";

const compactAndSort = ({ value, prefix, asset, labels, spacer }) => {
  const assetAlignment = value(`${prefix}_asset_alignment`) || "left";

  if (assetAlignment.toLowerCase() === "right") {
    return compact([labels, spacer, asset]);
  }

  return compact([asset, labels]);
};

const displayMode = ({ value, prefix }) => {
  const mode = value(`${prefix}_display_mode`) || "dynamic";

  const width = toNumberWithDefault(
    240,
    value(`${prefix}_fixed_and_fixed_center_width`)
  );

  if (mode === "fixed") {
    return {
      width,
    };
  }

  if (mode === "fixed_center") {
    return {
      width,
      justifyContent: "center",
    };
  }

  // dynamic mode
  return {};
};

type Props = {
  prefix: string;
  value: Function;
  platformValue: Function;
  pluginIdentifier: string;
  suffixId: string;
  preferredFocus: boolean;
};

export const Button = ({
  prefix,
  value,
  platformValue,
  pluginIdentifier,
  suffixId,
  preferredFocus,
}: Props) => {
  if (!value(`${suffixId}_button_enabled`)) return null;

  return {
    type: "FocusableView", // container
    style: {
      flexDirection: "row",
      alignItems: "center",
      display: "flex",

      paddingTop: toNumberWithDefaultZero(
        value(`${prefix}_background_padding_top`)
      ),
      paddingRight: toNumberWithDefaultZero(
        value(`${prefix}_background_padding_right`)
      ),
      paddingBottom: toNumberWithDefaultZero(
        value(`${prefix}_background_padding_bottom`)
      ),
      paddingLeft: toNumberWithDefaultZero(
        value(`${prefix}_background_padding_left`)
      ),

      // BORDER
      borderRadius: toNumberWithDefaultZero(
        value(`${prefix}_background_corner_radius`)
      ),
      borderWidth: value(`${prefix}_background_border_thickness`),
      borderStyle: "solid",
      // BORDER

      ...displayMode({ value, prefix }),
    },
    data: [
      {
        func: (x) => x,
        args: [],
        propName: "item",
      },
    ],
    elements: compactAndSort({
      prefix,
      value,
      asset: Asset({
        prefix,
        value,
        pluginIdentifier,
      }),
      labels: TextLabelsContainer({
        prefix,
        value,
        platformValue,
        pluginIdentifier,
      }),
      spacer: Spacer(),
    }),
    additionalProps: {
      suffixId,
      focusedStyles: {
        backgroundColor: value(`${prefix}_focused_background_color`),
        borderColor: value(`${prefix}_focused_background_border_color`),
      },
      normalStyles: {
        backgroundColor: value(`${prefix}_background_color`),
        borderColor: value(`${prefix}_background_border_color`),
      },
      pluginIdentifier,
      preferredFocus,
    },
  };
};