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

Applicaster Zapp React Native ui components for the Quick Brick App

import * as R from "ramda";
import { toNumber } from "@applicaster/zapp-react-native-utils/numberUtils";

import { getTextTransform, withAntialiasing } from "./utils";

const Text = "Text";

type Props = {
  prefix: string;
  value: Function;
  platformValue: Function;
  pluginIdentifier: string;
  name: string;
};

export const TextLabel = ({
  prefix,
  value,
  platformValue,
  pluginIdentifier,
  name,
}: Props) => {
  if (!value(`${prefix}_toggle`)) return null;

  return {
    type: Text, // Text Label
    style: {
      marginTop: value(`${prefix}_margin_top`),
      marginRight: value(`${prefix}_margin_right`),
      marginBottom: value(`${prefix}_margin_bottom`),
      marginLeft: value(`${prefix}_margin_left`),
      paddingTop: value(`${prefix}_padding_top`),
      paddingRight: value(`${prefix}_padding_right`),
      paddingBottom: value(`${prefix}_padding_bottom`),
      paddingLeft: value(`${prefix}_padding_left`),
      borderRadius: toNumber(value(`${prefix}_corner_radius`)),
      textAlign: value(`${prefix}_text_alignment`),
      textTransform: getTextTransform(value(`${prefix}_text_transform`)),
      lineHeight: platformValue(`${prefix}_line_height`),
      letterSpacing: platformValue(`${prefix}_letter_spacing`),
      fontSize: platformValue(`${prefix}_font_size`),
      fontFamily: platformValue(`${prefix}_font_family`),

      ...withAntialiasing(),
    },
    data: [
      {
        func: R.identity,
        args: [],
        propName: "entry",
      },
    ],
    additionalProps: {
      label: { context: pluginIdentifier, name },
      numberOfLines: value(`${prefix}_number_of_lines`),
      transformText: value(`${prefix}_text_transform`),

      focusedStyles: {
        backgroundColor: value(`${prefix}_focused_background_color`),
        color: value(`${prefix}_focused_font_color`),
      },
      normalStyles: {
        backgroundColor: value(`${prefix}_background_color`),
        color: value(`${prefix}_font_color`),
      },
    },
  };
};