@applicaster/zapp-react-native-ui-components 15.0.0-alpha.1283350001 → 15.0.0-alpha.1305114721

package/Components/default-cell-renderer/viewTrees/mobile/index.ts

@@ -1,7 +1,6 @@
 import { DefaultCell } from "./DefaultCell";
 import { GridCell } from "./GridCell";
 import { HeroCell } from "./HeroCell";
-// import { ScreenSelectorLabel } from "./ScreenSelectorLabel";
 
 /**
  * Return a view tree ready to be injected with styles etc. Mapping is done
@@ -15,8 +14,6 @@ export function viewTreeResolver({ component_type }) {
   switch (component_type) {
     case "hero":
       return HeroCell;
-    // case "screen_picker":
-    //   return ScreenSelectorLabel;
     case "grid":
       return GridCell;
     case "horizontal_list":

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "15.0.0-alpha.1283350001",
+  "version": "15.0.0-alpha.1305114721",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,10 +28,10 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "15.0.0-alpha.1283350001",
-    "@applicaster/zapp-react-native-bridge": "15.0.0-alpha.1283350001",
-    "@applicaster/zapp-react-native-redux": "15.0.0-alpha.1283350001",
-    "@applicaster/zapp-react-native-utils": "15.0.0-alpha.1283350001",
+    "@applicaster/applicaster-types": "15.0.0-alpha.1305114721",
+    "@applicaster/zapp-react-native-bridge": "15.0.0-alpha.1305114721",
+    "@applicaster/zapp-react-native-redux": "15.0.0-alpha.1305114721",
+    "@applicaster/zapp-react-native-utils": "15.0.0-alpha.1305114721",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "url": "^0.11.0",

package/Components/MasterCell/DefaultComponents/Text/utils/__tests__/withAdjustedLineHeight.test.ts

@@ -1,46 +0,0 @@
-import { PixelRatio } from "react-native";
-import { withAdjustedLineHeight } from "..";
-
-const FONT_SCALE = 1.118;
-jest.spyOn(PixelRatio, "getFontScale").mockReturnValue(FONT_SCALE);
-
-describe("withAdjustedLineHeight", () => {
-  it("with provided fontScale and styles", () => {
-    // setup
-    const styles = {
-      lineHeight: 10,
-    };
-
-    // run
-    const result = withAdjustedLineHeight(styles);
-
-    // verify
-    expect(result).toEqual({
-      lineHeight: styles.lineHeight * FONT_SCALE,
-    });
-  });
-
-  it("with provided fontScale and empty styles", () => {
-    // setup
-    const styles = {};
-
-    // run
-    const result = withAdjustedLineHeight(styles);
-
-    // verify
-    expect(result).toEqual(styles);
-  });
-
-  it("with non-number lineHeight", () => {
-    // setup
-    const styles = {
-      lineHeight: NaN,
-    };
-
-    // run
-    const result = withAdjustedLineHeight(styles);
-
-    // verify
-    expect(result).toEqual(styles);
-  });
-});

package/Components/MasterCell/DefaultComponents/Text/utils/index.ts

@@ -1,21 +0,0 @@
-import { PixelRatio } from "react-native";
-import { isNil, identity } from "ramda";
-import { toNumber } from "@applicaster/zapp-react-native-utils/numberUtils";
-import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
-
-// HACK - to prevent text flickering
-export const withAdjustedLineHeight = (styles) => {
-  const fontScale = PixelRatio.getFontScale();
-  const lineHeight = toNumber(styles.lineHeight);
-
-  if (isNil(lineHeight)) {
-    return styles;
-  }
-
-  return { ...styles, lineHeight: lineHeight * fontScale };
-};
-
-export const withScaledLineHeight = platformSelect({
-  ios: withAdjustedLineHeight,
-  default: identity,
-});

package/Components/TopMarginApplicator/TopMarginApplicator.ios.tsx

@@ -1,52 +0,0 @@
-import React from "react";
-import { View, StyleSheet } from "react-native";
-import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
-
-import { useMarginTop } from "./index";
-
-interface IProps {
-  targetScreenId?: string;
-  children?: React.ReactNode;
-  applyTopCuttoff?: boolean;
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    minHeight: 1,
-    minWidth: "100%",
-  },
-});
-
-export const TopMarginApplicator: React.FC<IProps> = ({
-  targetScreenId,
-  children,
-  applyTopCuttoff = true,
-}: IProps) => {
-  const cutoffHeight = useMarginTop(targetScreenId);
-
-  const theme = useTheme();
-  const backgroundColor = theme.app_background_color;
-
-  if (!applyTopCuttoff) {
-    return children;
-  }
-
-  return (
-    <View style={styles.container}>
-      {children}
-
-      <View
-        style={{
-          position: "absolute",
-          top: 0,
-          left: 0,
-          right: 0,
-          height: cutoffHeight,
-
-          backgroundColor,
-        }}
-      />
-    </View>
-  );
-};

package/Components/TopMarginApplicator/index.tsx

@@ -1,68 +0,0 @@
-import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
-import { useCurrentScreenData } from "@applicaster/zapp-react-native-utils/reactHooks";
-import { isFirstComponentScreenPicker } from "@applicaster/zapp-react-native-utils/componentsUtils";
-import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
-import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
-
-import { TopMarginApplicator as TopMarginApplicator_tvos } from "./TopMarginApplicator.ios";
-import { TopMarginApplicator as TopMarginApplicator_default } from "./TopMarginApplicator";
-
-/**
- * The MarginTop is essentially a feature used for managing the visibility of components on your screen.
- * A more accurate term for this might be something like a 'component visibility threshold' or 'cut-off point'.
- * In practical terms, MarginTop determines a specific vertical position (given in the 'y' coordinate)
- * on your screen above which components aren't shown.
- * You might visualize this as a horizontal line across your screen, and any component crossing this line becomes invisible.
- *
- * Classic use case for this feature is making sure that component aren't displayed underneath the navigation bar.
- */
-
-export const useMarginTop = (targetScreenId: string): number => {
-  const theme = useTheme<BaseThemePropertiesTV>();
-  const screenData = useCurrentScreenData(targetScreenId);
-  const isGeneralContentScreen = screenData?.plugin_type === "general_content";
-  const supportsUiComponents = screenData?.ui_components;
-
-  /**
-   * ScreenPicker is a component but should really be a screen.
-   * We need to skip margin top for it as it's already applied to the target screen
-   **/
-
-  // ignore margin on screenPicker
-  if (isFirstComponentScreenPicker(screenData?.ui_components)) {
-    return 0;
-  }
-
-  const isPlayer = screenData?.plugin_type === "player";
-
-  // ignore margin on inlinePlayer (remove if better way of identifying cases for plugins that don't have marginTop)
-  if (isPlayer) {
-    return 0;
-  }
-
-  // Empty string means that value is blank in the CMS. Fallback to theme
-  if (String(screenData?.styles?.screen_margin_top) === "") {
-    return toNumberWithDefaultZero(theme.screen_margin_top);
-  }
-
-  /**
-   *  If value is undefined it means one of three things
-   *  1. Screen is not a general content screen and it doesn't handle ui components (return 0)
-   *  2. Screen is a general content screen but it doesn't have a margin top value (return theme value)
-   *  3. Screen isn't general content screen but it handles the ui components (return theme value)
-   */
-  if (screenData?.styles?.screen_margin_top === undefined) {
-    if (isGeneralContentScreen || supportsUiComponents) {
-      return toNumberWithDefaultZero(theme.screen_margin_top);
-    }
-
-    return 0;
-  }
-
-  return toNumberWithDefaultZero(screenData?.styles?.screen_margin_top);
-};
-
-export const TopMarginApplicator = platformSelect({
-  tvos: TopMarginApplicator_tvos,
-  default: TopMarginApplicator_default,
-});