@applicaster/zapp-react-native-utils/configurationUtils/manifestKeyParser.ts

Applicaster Zapp React Native utilities package

import { platformSelect } from "../reactUtils";
import { toCamelCase } from "@applicaster/zapp-react-native-utils/stringUtils";

const currentPlatform = platformSelect({
  ios: "ios",
  tvos: "tvos",
  samsung_tv: "samsung",
  lg_tv: "lg",
  web: "samsung",
  android: "android",
  android_tv: "android",
});

const stateSuffixes = ["pressed", "focused"];
const platformSuffixes = ["ios", "tvos", "samsung", "lg", "android"];

export type GetAllSpecificStylesProps = {
  componentName: string;
  subComponentName: string;
  configuration: Record<string, any>;
  outStyles: Record<string, any>;
};

/*
 * Style name format: <component_name>_style_<sub_component_name>_[platform_][state_]<style_name>
 * Platform: ios, tvos, samsung, lg, android. Declared in platformKeyMapper.tsx
 * State: missing (default state), pressed, focused
 * Example: player_controls_style_button_background_color
 * */
export const getAllSpecificStyles = ({
  configuration,
  componentName,
  subComponentName,
  outStyles,
}: GetAllSpecificStylesProps) => {
  if (!outStyles) {
    throw new Error("outStyles is required");
  }

  // Pressed, platform specific styles are not supported
  const prefix = `${componentName}_style_${subComponentName}_`;

  const defaultKey = "default";

  if (!outStyles[defaultKey]) {
    outStyles[defaultKey] = {};
  }

  Object.keys(configuration).forEach((key) => {
    if (!key.startsWith(prefix)) {
      return;
    }

    let styleName = key.slice(prefix.length);

    const platform = platformSuffixes.find((suffix) =>
      styleName.startsWith(suffix)
    );

    if (platform) {
      if (currentPlatform !== platform) {
        return; // Continue
      }

      styleName = styleName.slice(platform.length + 1);
    }

    let state = stateSuffixes.find((suffix) => styleName.startsWith(suffix));

    if (state) {
      styleName = styleName.slice(state.length + 1);
    } else {
      state = defaultKey;
    }

    const camelCaseKey = toCamelCase(styleName);

    let stateOverrides = outStyles[state];

    if (!stateOverrides) {
      stateOverrides = {};
      outStyles[state] = stateOverrides;
    }

    if (stateOverrides[camelCaseKey]) {
      // Add warning, key is already defined
    }

    stateOverrides[camelCaseKey] = configuration[key];
  });

  // Merge default styles with state specific styles
  if (Object.keys(outStyles).length > 1) {
    Object.keys(outStyles).forEach((key) => {
      if (key === defaultKey) {
        return;
      }

      outStyles[key] = Object.assign({}, outStyles[defaultKey], outStyles[key]);
    });
  }
};