@applicaster/zapp-react-native-ui-components/Components/River/useScreenConfiguration.ts

Applicaster Zapp React Native ui components for the Quick Brick App

import * as R from "ramda";

import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
import { toCamelCase } from "@applicaster/zapp-react-native-utils/stringUtils";
import { useMemo } from "react";
import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
import { useRivers } from "@applicaster/zapp-react-native-utils/reactHooks/state";

type GeneralContentScreen = ZappRiver & {
  styles: {
    screen_background_color?: string;
    screen_margin_top?: number | string;
    screen_margin_bottom?: number | string;
    screen_padding_top?: number | string;
    screen_padding_bottom?: number | string;
    screen_padding_left?: number | string;
    screen_padding_right?: number | string;
    tablet_theme?: boolean;
    tablet_screen_padding_top?: number | string;
    tablet_screen_padding_bottom?: number | string;
    tablet_screen_padding_left?: number | string;
    tablet_screen_padding_right?: number | string;
  };
};

type ScreenConfiguration = {
  backgroundColor: string;
  paddingTop?: number;
  paddingBottom?: number;
  paddingLeft?: number;
  paddingRight?: number;
  marginTop?: number;
  marginBottom?: number;
};

const castIfDefined = R.unless(isNilOrEmpty, Number);

const stylingKeys = [
  ["screen_background_color", R.identity],
  ["screen_margin_top", castIfDefined],
  ["screen_margin_bottom", castIfDefined],
  ["screen_padding_top", castIfDefined],
  ["screen_padding_bottom", castIfDefined],
  ["screen_padding_right", castIfDefined],
  ["screen_padding_left", castIfDefined],
];

export function useScreenConfiguration(screenId: string): ScreenConfiguration {
  const rivers = useRivers();
  const isTablet = useIsTablet();

  return useMemo(() => {
    const config = {} as ScreenConfiguration;
    const screenData = rivers?.[screenId] as GeneralContentScreen;

    if (screenData) {
      const { styles } = screenData;

      const keyPrefix = isTablet && styles?.tablet_theme ? "tablet_" : "";

      stylingKeys.forEach(([key, castFn]) => {
        const styleKey = `${keyPrefix}${key}`;
        const styleValue = styles?.[styleKey];

        if (!R.isEmpty(styleValue)) {
          const style = castFn(
            typeof styleValue !== "undefined" ? styleValue : null
          );

          if (
            typeof style !== "undefined" &&
            style !== null &&
            !Number.isNaN(style)
          ) {
            const configKey = R.compose(
              toCamelCase,
              R.replace("screen_", ""),
              R.replace("tablet_", "")
            )(styleKey);

            config[configKey] = style;
          }
        }
      });
    }

    return config;
  }, [screenId]);
}