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

Applicaster Zapp React Native ui components for the Quick Brick App

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

export { POSITION_OVER_IMAGE } from "@applicaster/zapp-react-native-utils/manifestUtils/secondaryImage";

import {
  toSize,
  isVisible,
  isPositionOverImage,
  getSecondaryImageStylesFor,
  SecondaryImageStyleKeys,
  isDisplayModeFixed,
  getImageContainerStyles,
} from "./utils";

const View = "View";

type Props = {
  value: Function;
  currentPosition: string;
  state: string;
};

export const SecondaryImage = ({ value, currentPosition, state }: Props) => {
  const config = getSecondaryImageStylesFor(value);

  if (!config(SecondaryImageStyleKeys.ENABLE)) return null;

  // we are able to place secondary-image in several points, like:
  // over_image, above and below of different text-labels
  // 'position' here is place where secondary-image should be according configuration
  // 'currentPosition' is place where one of multiple secondary-images are currently placed:
  // over_image, above_text_label_1, below_text_label_1, ...
  const position = config(SecondaryImageStyleKeys.POSITION); // position for secondary-image according configuration
  if (position !== currentPosition) return null;

  const visibility = config(SecondaryImageStyleKeys.VISIBILITY);
  if (!isVisible(visibility, state)) return null;

  const imageKey = config(SecondaryImageStyleKeys.IMAGE_KEY);
  const imageSizing = config(SecondaryImageStyleKeys.IMAGE_SIZING);
  const fitPosition = config(SecondaryImageStyleKeys.FIT_POSITION);

  const isOverImage = isPositionOverImage(position);

  const alignSelf = config(SecondaryImageStyleKeys.ALIGN, mapSelfAlignment);
  const imagePosition = config(SecondaryImageStyleKeys.IMAGE_POSITION);

  const displayMode = config(SecondaryImageStyleKeys.DISPLAY_MODE);

  const { width, height } = toSize({
    displayMode,
    fixedWidth: config(
      SecondaryImageStyleKeys.FIXED_WIDTH,
      toNumberWithDefaultZero
    ),
    fixedHeight: config(
      SecondaryImageStyleKeys.FIXED_HEIGHT,
      toNumberWithDefaultZero
    ),
    dynamicWidth: config(
      SecondaryImageStyleKeys.DYNAMIC_WIDTH,
      toNumberWithDefaultZero
    ),
  });

  return {
    type: View, // image container
    style: isOverImage ? getImageContainerStyles(imagePosition) : {},
    elements: [
      {
        type: "SecondaryImage",
        style: {
          alignSelf: isOverImage ? undefined : alignSelf,
          width,
          height,
          justifyContent: "center",
          alignItems: "center",
          borderRadius: config(
            SecondaryImageStyleKeys.CORNER_RADIUS,
            toNumberWithDefaultZero
          ),
          marginTop: config(
            SecondaryImageStyleKeys.MARGIN_TOP,
            toNumberWithDefaultZero
          ),
          marginLeft: config(
            SecondaryImageStyleKeys.MARGIN_LEFT,
            toNumberWithDefaultZero
          ),
          marginRight: config(
            SecondaryImageStyleKeys.MARGIN_RIGHT,
            toNumberWithDefaultZero
          ),
          marginBottom: config(
            SecondaryImageStyleKeys.MARGIN_BOTTOM,
            toNumberWithDefaultZero
          ),
        },
        data: [
          {
            func: "image_src_from_media_item",
            args: [imageKey],
            propName: "uri",
          },
        ],
        additionalProps: {
          displayMode,
          ...toResizeMode(imageSizing, isDisplayModeFixed(displayMode)),
          imageSizing,
          fitPosition,
          fixedWidth: config(
            SecondaryImageStyleKeys.FIXED_WIDTH,
            toNumberWithDefaultZero
          ),
          fixedHeight: config(
            SecondaryImageStyleKeys.FIXED_HEIGHT,
            toNumberWithDefaultZero
          ),
        },
      },
    ],
  };
};