@applicaster/zapp-react-native-ui-components/Components/MasterCell/SharedUI/ProgressBar/index.ts

Applicaster Zapp React Native ui components for the Quick Brick App

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

const PREFIX = "progress_bar";

export const ON_TOP_OF_IMAGE = "on_top_of_image";

export const BOTTOM_OF_CELL = "bottom_of_cell";

const containerStyles = ({ position, getValue }) => {
  if (position === ON_TOP_OF_IMAGE) {
    return {
      position: "absolute",
      right: toNumberWithDefaultZero(getValue("margin_right")),
      bottom: toNumberWithDefaultZero(getValue("margin_bottom")),
      left: toNumberWithDefaultZero(getValue("margin_left")),
    };
  }

  return {
    marginRight: toNumberWithDefaultZero(getValue("margin_right")),
    marginBottom: toNumberWithDefaultZero(getValue("margin_bottom")),
    marginLeft: toNumberWithDefaultZero(getValue("margin_left")),
    marginTop: toNumberWithDefaultZero(getValue("margin_top")),
  };
};

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

export const ProgressBar = ({ value, currentPosition }: Props) => {
  const getValue = (key) => value(`${PREFIX}_${key}`);

  if (!getValue("switch")) {
    return null;
  }

  const position = getValue("position"); // position for progress-bar according configuration

  // we are able to place progress-bar in several points, like:
  // over_image, on_bottom_of_cell, above and below of different text-labels
  // 'position' here is place where progress-bar should be according configuration
  // 'currentPosition' is place where one of multiple progress-bars is currently placed:
  // over_image, on_bottom_of_cell, ...
  if (position !== currentPosition) {
    return null;
  }

  return {
    type: "ProgressBar", // Progress bar
    style: {
      height: "100%",
      backgroundColor: getValue("progress_bar_color"),
      borderRadius: getValue("progress_bar_corner_radius"),
    },
    data: [
      {
        func: (entry) => entry,
        args: [],
        propName: "item",
      },
    ],
    additionalProps: {
      containerStyles: {
        backgroundColor: getValue("total_bar_color"),
        borderRadius: getValue("total_bar_corner_radius"),
        height: toNumberWithDefaultZero(getValue("height")),

        ...containerStyles({ position, getValue }),
      },
      hideUnwatched: getValue("hide_unwatched"),
    },
  };
};