@applicaster/zapp-react-native-ui-components/Components/Tabs/TV/styles.ts

Applicaster Zapp React Native ui components for the Quick Brick App

/* eslint-disable react-native/no-unused-styles */
import { StyleSheet } from "react-native";
import * as R from "ramda";
import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
import {
  valueFromConfig,
  displayTypePath,
  itemSizeTypePath,
  itemsAlignmentPath,
  isFixed,
  transformValue,
  itemAlignmentPath,
} from "./utils";

const SCREEN_WIDTH = 1920;

export const getStyles = (config): Partial<TVTabsStyles> => {
  const valueOf = valueFromConfig(config);

  const displayType = displayTypePath(config);
  const itemSizeType = itemSizeTypePath(config);
  const itemsAlignment = itemsAlignmentPath(config);

  const isDisplayTypeFixed = isFixed(displayType);
  const isItemSizeTypeFixed = isFixed(itemSizeType);

  const width = config.tab_bar_width;
  const itemsAlignmentProp = transformValue(itemsAlignment, "alignItems");

  const itemAlignmentProp = (type) =>
    transformValue(itemAlignmentPath(config), type);

  const itemWidth: number = R.prop("tab_bar_item_width", config);

  const itemsAlignmentInnerProp = transformValue(
    config.tab_bar_alignment,
    "alignItems"
  );

  const componentPaddings = {
    paddingTop: config.component_padding_top,
    paddingLeft: config.component_padding_left,
    paddingBottom: config.component_padding_bottom,
    paddingRight: config.component_padding_right,
  };

  const styles: Partial<TVTabsStyles> = {
    tabsWrapper: {
      width: "100%",
      zIndex: 1,
      top: 0,
      left: 0,
      alignItems: itemsAlignmentProp,
      position: "absolute",
    },
    tabsFocusableGroup: platformSelect({
      tvos: {
        width: "100%",
        height: "100%",
        alignItems: itemsAlignmentProp,
        marginTop: 1,
      },
    }),
    tabs: {
      width: isDisplayTypeFixed ? width : undefined,
      maxWidth: SCREEN_WIDTH,
      backgroundColor: config.tab_bar_background_color,
      borderColor: config.tab_bar_border_color,
      borderWidth: config.tab_bar_border_width,
      borderRadius: config.tab_bar_border_radius,
      overflow: "hidden",
      ...platformSelect({
        android_tv: {
          flexDirection: isDisplayTypeFixed ? "row" : "column",
        },
        amazon: {
          flexDirection: isDisplayTypeFixed ? "row" : "column",
        },
        tvos: {
          marginTop: -1,
        },
      }),
    },
    tabsBackground: {
      flexDirection: "column",
      justifyContent: transformValue(itemsAlignment, "justifyContent"),
      flex: 1,
      alignItems: isDisplayTypeFixed ? itemsAlignmentInnerProp : undefined,
    },
    tabsListWrapper: {
      flexGrow: 0,
      flexShrink: 0,
      flex: 0,
      flexDirection: "row",
      ...platformSelect({
        default: {
          maxWidth: "auto",
        },
        tvos: {},
        android_tv: {},
      }),
    },
    tabsListContentContainer: {
      flex: 1,
      alignItems: "center",
      flexDirection: "row",
      ...componentPaddings,
      ...platformSelect({
        default: {
          maxWidth: isDisplayTypeFixed ? width : undefined,
        },
        tvos: {
          flex: 0,
          justifyContent: "flex-start",
        },
        android_tv: {
          flex: 0,
          justifyContent: "flex-start",
        },
      }),
    },
    item: {
      overflow: "hidden",
      borderWidth: valueOf("border_width") as number,
      borderRadius: valueOf("border_radius") as number,
      borderColor: valueOf("border_color", "default") as string,
      backgroundColor: valueOf("background_color", "default") as string,
      width: isItemSizeTypeFixed ? itemWidth : undefined,
      flex: 0,
      flexGrow: 0,
      flexShrink: 0,
      flexBasis: isItemSizeTypeFixed ? itemWidth : "auto",
      marginTop: valueOf("margin_top") as number,
      marginRight: valueOf("margin_right") as number,
      marginBottom: valueOf("margin_bottom") as number,
      marginLeft: valueOf("margin_left") as number,
      flexDirection: "column",
      alignItems: itemAlignmentProp("alignItems"),
    },
    selectedItem: {
      backgroundColor: valueOf("background_color", "selected") as string,
      borderColor: valueOf("border_color", "selected") as string,
    },
    focusedItem: {
      backgroundColor: valueOf("background_color", "focused") as string,
      borderColor: valueOf("border_color", "focused") as string,
    },
    selectedFocusedItem: {
      backgroundColor: valueOf(
        "background_color",
        "selected_focused"
      ) as string,
      borderColor: valueOf("border_color", "selected_focused") as string,
    },
    textContainer: {
      flex: 1,
      paddingLeft: valueOf("padding_left") as number,
      paddingRight: valueOf("padding_right") as number,
      paddingTop: valueOf("padding_top") as number,
      paddingBottom: valueOf("padding_bottom") as number,
    },
    selectedTextContainer: {},
    focusedTextContainer: {},
    selectedFocusedTextContainer: {},
    text: {
      color: valueOf("font_color", "default", "text_label") as string,
      fontFamily: config.font_family,
      fontSize: config.font_size,
      lineHeight: config.line_height,
      letterSpacing: config.letter_spacing,
    },
    selectedText: {
      color: valueOf("font_color", "selected", "text_label") as string,
    },
    focusedText: {
      color: valueOf("font_color", "focused", "text_label") as string,
    },
    selectedFocusedText: {
      color: valueOf("font_color", "selected_focused", "text_label") as string,
    },
    textUnderline: {
      width: "100%",
      borderColor: valueOf("underline_color", "default") as string,
      borderBottomWidth: valueOf("underline_thickness") as number,
      borderRadius: valueOf("underline_border_radius") as number,
    },
    selectedUnderline: {
      borderColor: valueOf("underline_color", "selected") as string,
    },
    focusedUnderline: {
      borderColor: valueOf("underline_color", "focused") as string,
    },
    selectedFocusedUnderline: {
      borderColor: valueOf("underline_color", "selected_focused") as string,
    },
  };

  return StyleSheet.create({ ...styles });
};