@applicaster/zapp-react-native-ui-components/Components/MasterCell/DefaultComponents/ImageBorderContainer/index.ts

Applicaster Zapp React Native ui components for the Quick Brick App

import { ImageStyle } from "react-native";

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

export const ImageBorderContainer = ({
  value,
  state,
  imageStyles,
}: {
  value: (key: string) => string;
  state: CellState;
  imageStyles: ImageStyle;
}) => {
  const imageMargins = getImageContainerMarginStyles({ value });

  return {
    type: "BorderContainerView",
    style: {
      position: "absolute",
      // Image border now separated from the image, so cell padding affects the border position
      marginTop:
        toNumberWithDefaultZero(imageMargins.marginTop) +
        toNumberWithDefaultZero(value("cell_padding_top")),
      marginLeft:
        toNumberWithDefaultZero(imageMargins.marginLeft) +
        toNumberWithDefaultZero(value("cell_padding_left")),
      marginRight:
        toNumberWithDefaultZero(imageMargins.marginRight) +
        toNumberWithDefaultZero(value("cell_padding_right")),
      marginBottom:
        toNumberWithDefaultZero(imageMargins.marginBottom) +
        toNumberWithDefaultZero(value("cell_padding_bottom")),
      zIndex: 1,
      borderWidth: value("image_border_size"),
      borderColor: ifElseFocusedSelected(
        state,
        value("image_focused_border_color"),
        value("image_selected_border_color"),
        value("image_focused_selected_border_color"),
        value("image_border_color")
      ),
      borderRadius: toNumberWithDefaultZero(value("image_corner_radius")),
    },
    additionalProps: {
      pointerEvents: "none",
      borderPosition: value("image_border_position"),
      borderPaddingTop: toNumberWithDefaultZero(
        value("image_border_padding_top")
      ),
      borderPaddingRight: toNumberWithDefaultZero(
        value("image_border_padding_right")
      ),
      borderPaddingBottom: toNumberWithDefaultZero(
        value("image_border_padding_bottom")
      ),
      borderPaddingLeft: toNumberWithDefaultZero(
        value("image_border_padding_left")
      ),
    },
    elements: [
      {
        type: "View",
        style: imageStyles,
      },
    ],
  };
};