@applicaster/zapp-react-native-utils/manifestUtils/secondaryImage/index.js

Applicaster Zapp React Native utilities package

const { flatten } = require("ramda");
const { fieldsGroup } = require("../utils");

const {
  generateFieldsFromDefaults,
  toSnakeCase,
  compact,
  replaceUnderscoreToSpace,
} = require("../_internals");

const { secondaryImageFields } = require("../keys");

const DISPLAY_MODE_FIXED = "fixed";
const DISPLAY_MODE_DYNAMIC = "dynamic";

const IMAGE_SIZING_FIT = "fit";
const IMAGE_SIZING_FILL = "fill";

const VISIBILITY_ALWAYS = "always";
const VISIBILITY_DEFAULT = "default";
const VISIBILITY_FOCUSED = "focused";

const position_over_image = "over image";

const ALIGN_LEFT = "left";
const ALIGN_CENTER = "center";
const ALIGN_RIGHT = "right";

const IMAGE_POSITION = {
  CENTER: "center",
  TOP_LEFT: "top_left",
  TOP_RIGHT: "top_right",
  BOTTOM_LEFT: "bottom_left",
  BOTTOM_RIGHT: "bottom_right",
};

const FIT_POSITION = {
  CENTER: "center",
  CENTER_LEFT: "center_left",
  CENTER_RIGHT: "center_right",

  BOTTOM_CENTER: "bottom_center",
  BOTTOM_LEFT: "bottom_left",
  BOTTOM_RIGHT: "bottom_right",

  TOP_CENTER: "top_center",
  TOP_LEFT: "top_left",
  TOP_RIGHT: "top_right",
};

function secondaryImage({
  enable,
  imageKey,
  visibility,
  displayMode,
  fixedHeight,
  fixedWidth,
  imageSizing,
  fitPosition,
  dynamicWidth,
  position,
  align,
  imagePosition,
  cornerRadius,
  marginTop,
  marginRight,
  marginBottom,
  marginLeft,
}) {
  const label = "secondary_image";

  const fields = generateFieldsFromDefaults(
    label,
    {
      enable,
      imageKey,
      visibility,
      displayMode: displayMode.default,
      fixedHeight,
      fixedWidth,
      imageSizing,
      fitPosition,
      dynamicWidth,
      position: toSnakeCase(position.default),
      align,
      imagePosition,
      cornerRadius,
      marginTop,
      marginRight,
      marginBottom,
      marginLeft,
    },
    secondaryImageFields({
      displayModes: displayMode.availableModes,
      imageSizings: [IMAGE_SIZING_FIT, IMAGE_SIZING_FILL],
      visibilities: [VISIBILITY_ALWAYS, VISIBILITY_DEFAULT, VISIBILITY_FOCUSED],
      positions: compact([
        position_over_image,
        ...flatten(
          (position.textLabels || []).map((textLabel) => [
            `above ${replaceUnderscoreToSpace(textLabel)}`,
            `below ${replaceUnderscoreToSpace(textLabel)}`,
          ])
        ),
      ]),
      aligns: [ALIGN_LEFT, ALIGN_CENTER, ALIGN_RIGHT],
      imagePositions: [
        IMAGE_POSITION.CENTER,
        IMAGE_POSITION.TOP_LEFT,
        IMAGE_POSITION.TOP_RIGHT,
        IMAGE_POSITION.BOTTOM_LEFT,
        IMAGE_POSITION.BOTTOM_RIGHT,
      ].map(replaceUnderscoreToSpace),
      fitPositions: [
        FIT_POSITION.CENTER,
        FIT_POSITION.CENTER_LEFT,
        FIT_POSITION.CENTER_RIGHT,
        FIT_POSITION.BOTTOM_CENTER,
        FIT_POSITION.BOTTOM_LEFT,
        FIT_POSITION.BOTTOM_RIGHT,
        FIT_POSITION.TOP_CENTER,
        FIT_POSITION.TOP_LEFT,
        FIT_POSITION.TOP_RIGHT,
      ].map(replaceUnderscoreToSpace),
    })
  );

  const folded = false;

  return fieldsGroup("Secondary Image", "", fields, folded);
}

const POSITION_OVER_IMAGE = toSnakeCase(position_over_image);

const getUpdatedSecondaryImageKeys = (secondaryImageManifest) =>
  secondaryImageManifest.fields.reduce((acc, item) => {
    const key = item.key;

    const conditionalFields = (item.conditional_fields || []).map(
      (field) => field.key
    );

    const updatedConditionalFields = conditionalFields.reduce((acc, field) => {
      const updatedKey = field.replace("secondary_image_", "nested_image_");

      return {
        ...acc,
        [updatedKey]: field,
      };
    }, {});

    const updatedKey = key.replace("secondary_image_", "nested_image_");

    return {
      ...acc,
      ...updatedConditionalFields,
      [updatedKey]: key,
    };
  }, {});

module.exports = {
  secondaryImage,
  getUpdatedSecondaryImageKeys,
  DISPLAY_MODE_FIXED,
  DISPLAY_MODE_DYNAMIC,
  IMAGE_SIZING_FIT,
  IMAGE_SIZING_FILL,
  VISIBILITY_ALWAYS,
  VISIBILITY_DEFAULT,
  VISIBILITY_FOCUSED,
  POSITION_OVER_IMAGE,
  ALIGN_LEFT,
  ALIGN_CENTER,
  ALIGN_RIGHT,
  IMAGE_POSITION,
  FIT_POSITION,
};