@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 "./index";

export function defaultItemProps(
  config: PluginConfiguration,
  maxWidth: number
) {
  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_focusected_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,
    focusectedBackgroundColor:
      modal_bottom_sheet_item_focusected_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
) {
  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) {
  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,
  };
}