@applicaster/zapp-react-native-ui-components/Components/ModalComponent/utils.ts

Applicaster Zapp React Native ui components for the Quick Brick App

import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
import { PluginConfiguration } from "./";
import { ItemIconProps } from "./Button/ItemIcon";
import { ItemLabelProps } from "./Button/ItemLabel";
import { ItemProps } from "./Button/Item";

export function defaultItemProps(
  config: PluginConfiguration,
  maxWidth: number
): ItemProps {
  const {
    modal_bottom_sheet_item_background_color,
    modal_bottom_sheet_item_focus_background_color,
    modal_bottom_sheet_item_selected_background_color,
    modal_bottom_sheet_item_focused_selected_background_color,
    modal_bottom_sheet_item_corner_radius,
    modal_bottom_sheet_item_margin_bottom,
    modal_bottom_sheet_item_margin_left,
    modal_bottom_sheet_item_margin_right,
    modal_bottom_sheet_item_margin_top,
    modal_bottom_sheet_item_padding_bottom,
    modal_bottom_sheet_item_padding_left,
    modal_bottom_sheet_item_padding_right,
    modal_bottom_sheet_item_padding_top,
  } = config;

  return {
    backgroundColor: modal_bottom_sheet_item_background_color,
    focusedBackgroundColor: modal_bottom_sheet_item_focus_background_color,
    selectedBackgroundColor: modal_bottom_sheet_item_selected_background_color,
    focusedSelectedBackgroundColor:
      modal_bottom_sheet_item_focused_selected_background_color,
    borderRadius: modal_bottom_sheet_item_corner_radius,
    marginBottom: modal_bottom_sheet_item_margin_bottom,
    marginTop: modal_bottom_sheet_item_margin_top,
    marginLeft: modal_bottom_sheet_item_margin_left,
    marginRight: modal_bottom_sheet_item_margin_right,
    paddingTop: modal_bottom_sheet_item_padding_top,
    paddingBottom: modal_bottom_sheet_item_padding_bottom,
    paddingRight: modal_bottom_sheet_item_padding_right,
    paddingLeft: modal_bottom_sheet_item_padding_left,
    maxWidth,
  };
}

export function defaultItemLabelProps(
  config: PluginConfiguration,
  sheetWidth: number
): ItemLabelProps {
  const {
    modal_bottom_sheet_item_label_android_letter_spacing,
    modal_bottom_sheet_item_label_ios_letter_spacing,
    modal_bottom_sheet_item_label_family_ios_font_selector,
    modal_bottom_sheet_item_label_family_android_font_selector,
    modal_bottom_sheet_item_label_focus_font_color,
    modal_bottom_sheet_item_label_font_color,
    modal_bottom_sheet_item_label_selected_font_color,
    modal_bottom_sheet_item_label_hover_selected_font_color,
    modal_bottom_sheet_item_label_font_size,
    modal_bottom_sheet_item_label_line_height,
    modal_bottom_sheet_item_label_margin_bottom,
    modal_bottom_sheet_item_label_margin_top,
    modal_bottom_sheet_item_label_margin_left,
    modal_bottom_sheet_item_label_margin_right,
    modal_bottom_sheet_item_label_transform,
    modal_bottom_sheet_item_icon_width,
    modal_bottom_sheet_item_icon_margin_left,
    modal_bottom_sheet_item_icon_margin_right,
    modal_bottom_sheet_item_margin_left,
    modal_bottom_sheet_item_margin_right,
    modal_bottom_sheet_item_padding_left,
    modal_bottom_sheet_item_padding_right,
  } = config;

  const maxWidth =
    sheetWidth -
    (modal_bottom_sheet_item_icon_width +
      modal_bottom_sheet_item_icon_margin_left +
      modal_bottom_sheet_item_icon_margin_right +
      modal_bottom_sheet_item_margin_left +
      modal_bottom_sheet_item_margin_right +
      modal_bottom_sheet_item_padding_left +
      modal_bottom_sheet_item_padding_right);

  return {
    fontFamily: platformSelect({
      ios: modal_bottom_sheet_item_label_family_ios_font_selector,
      android: modal_bottom_sheet_item_label_family_android_font_selector,
    }),
    letterSpacing: platformSelect({
      ios: modal_bottom_sheet_item_label_ios_letter_spacing,
      android: modal_bottom_sheet_item_label_android_letter_spacing,
    }),
    fontSize: modal_bottom_sheet_item_label_font_size,
    color: modal_bottom_sheet_item_label_font_color,
    focusColor: modal_bottom_sheet_item_label_focus_font_color,
    hoverSelectedColor: modal_bottom_sheet_item_label_hover_selected_font_color,
    selectedColor: modal_bottom_sheet_item_label_selected_font_color,
    lineHeight: modal_bottom_sheet_item_label_line_height,
    marginBottom: modal_bottom_sheet_item_label_margin_bottom,
    marginTop: modal_bottom_sheet_item_label_margin_top,
    marginLeft: modal_bottom_sheet_item_label_margin_left,
    marginRight: modal_bottom_sheet_item_label_margin_right,
    transform: modal_bottom_sheet_item_label_transform,
    maxWidth,
  };
}

export function defaultItemIconProps(
  config: PluginConfiguration
): ItemIconProps {
  const {
    modal_bottom_sheet_item_icon_height,
    modal_bottom_sheet_item_icon_width,
    modal_bottom_sheet_item_icon_margin_bottom,
    modal_bottom_sheet_item_icon_margin_left,
    modal_bottom_sheet_item_icon_margin_right,
    modal_bottom_sheet_item_icon_margin_top,
    modal_bottom_sheet_item_icon_flavour,
  } = config;

  return {
    width: modal_bottom_sheet_item_icon_width,
    height: modal_bottom_sheet_item_icon_height,
    flavour: modal_bottom_sheet_item_icon_flavour,
    marginTop: modal_bottom_sheet_item_icon_margin_top,
    marginBottom: modal_bottom_sheet_item_icon_margin_bottom,
    marginLeft: modal_bottom_sheet_item_icon_margin_left,
    marginRight: modal_bottom_sheet_item_icon_margin_right,
  };
}

export function getItemIconProps(
  theme: PluginConfiguration,
  iconProps?: ((theme: PluginConfiguration) => ItemIconProps) | ItemIconProps
) {
  if (iconProps) {
    return typeof iconProps === "function" ? iconProps(theme) : iconProps;
  }

  return defaultItemIconProps(theme);
}

export function getItemLabelProps(
  theme: PluginConfiguration,
  width: number,
  labelProps?:
    | ((theme: PluginConfiguration, width: number) => ItemLabelProps)
    | ItemLabelProps
) {
  if (labelProps) {
    return typeof labelProps === "function"
      ? labelProps(theme, width)
      : labelProps;
  }

  return defaultItemLabelProps(theme, width);
}

export function getItemProps(
  theme: PluginConfiguration,
  width: number,
  itemProps?:
    | ((theme: PluginConfiguration, width: number) => ItemProps)
    | ItemProps
) {
  if (itemProps) {
    return typeof itemProps === "function"
      ? itemProps(theme, width)
      : itemProps;
  }

  return defaultItemProps(theme, width);
}