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

Applicaster Zapp React Native ui components for the Quick Brick App

import { equals, cond } from "ramda";

type Position =
  | "top_left"
  | "top_right"
  | "bottom_left"
  | "bottom_right"
  | "center"
  | "cell_right";

/**
 *
 * This function returns the styles for positioning the badge in the right place.
 * Element is positioned absolute by default (except from "cell_right")
 * @param {Position} position of the badge
 * @returns {Object} styles
 */
export const getPositionStyles = (position: Position, { width, height }) => {
  const isTopLeft = equals("top_left");
  const isTopRight = equals("top_right");
  const isBottomLeft = equals("bottom_left");
  const isBottomRight = equals("bottom_right");
  const isCenter = equals("center");
  const isCellRight = equals("cell_right");

  const getTopLeftStyles = () => ({
    top: 0,
    left: 0,
  });

  const getTopRightStyles = () => ({
    top: 0,
    right: 0,
  });

  const getBottomLeftStyles = () => ({
    bottom: 0,
    left: 0,
  });

  const getBottomRightStyles = () => ({
    bottom: 0,
    right: 0,
  });

  const getCenterStyles = () => ({
    top: "50%",
    left: "50%",
    transform: [{ translateX: -(width / 2) }, { translateY: -(height / 2) }],
  });

  const getCellRightStyles = () => ({
    position: "relative",
  });

  return cond([
    [isTopLeft, getTopLeftStyles],
    [isTopRight, getTopRightStyles],
    [isBottomLeft, getBottomLeftStyles],
    [isBottomRight, getBottomRightStyles],
    [isCenter, getCenterStyles],
    [isCellRight, getCellRightStyles],
  ])(position);
};

/**
 *
 * Cell badge width used for cell 2 with "cell_right" position only
 * @param {value} value function
 */
export const getCellBadgeWidth = (value) => {
  if (!value("cell_badge_switch")) {
    return 0;
  }

  return (
    value("cell_badge_margin_left") +
    value("cell_badge_margin_right") +
    value("cell_badge_width")
  );
};