@applicaster/zapp-react-native-ui-components 15.0.0-rc.13 → 15.0.0-rc.132

package/Helpers/DataSourceHelper/__tests__/itemLimitForData.test.ts

@@ -0,0 +1,80 @@
+import { itemLimitForData } from "..";
+
+describe("itemLimitForData (no mocks)", () => {
+  test("returns full array when item_limit is undefined (default Infinity)", () => {
+    // @ts-ignore
+    const result = itemLimitForData([1, 2, 3], {
+      rules: { item_limit: undefined },
+    });
+
+    expect(result).toEqual([1, 2, 3]);
+  });
+
+  test("enforces positive numeric item_limit", () => {
+    // @ts-ignore
+    const result = itemLimitForData([1, 2, 3, 4], {
+      rules: { item_limit: 2 },
+    });
+
+    expect(result).toEqual([1, 2]);
+  });
+
+  test("returns empty array when entry is empty", () => {
+    const result = itemLimitForData([], {
+      rules: { item_limit: 3 },
+    });
+
+    expect(result).toEqual([]);
+  });
+
+  test("defaults entry to empty array when it is undefined", () => {
+    const result = itemLimitForData(undefined, {
+      rules: { item_limit: 5 },
+    });
+
+    expect(result).toEqual([]);
+  });
+
+  test("handles missing component", () => {
+    // @ts-ignore
+    const result = itemLimitForData([10, 20, 30], undefined);
+    // missing component → item_limit = undefined → fallback to Infinity
+    expect(result).toEqual([10, 20, 30]);
+  });
+
+  test("handles missing rules object", () => {
+    // @ts-ignore
+    const result = itemLimitForData([10, 20, 30], {});
+
+    expect(result).toEqual([10, 20, 30]);
+  });
+
+  test("non-positive item_limit should fall back to Infinity", () => {
+    // @ts-ignore
+    const result = itemLimitForData([1, 2, 3], {
+      rules: { item_limit: -10 },
+    });
+
+    // -10 → invalid → fallback to Infinity → no limit
+    expect(result).toEqual([1, 2, 3]);
+  });
+
+  test("zero item_limit should fall back to Infinity", () => {
+    // @ts-ignore
+    const result = itemLimitForData([1, 2, 3], {
+      rules: { item_limit: 0 },
+    });
+
+    // 0 → invalid → fallback to Infinity
+    expect(result).toEqual([1, 2, 3]);
+  });
+
+  test("NaN item_limit should fall back to Infinity", () => {
+    // @ts-ignore
+    const result = itemLimitForData([1, 2, 3], {
+      rules: { item_limit: NaN },
+    });
+
+    expect(result).toEqual([1, 2, 3]);
+  });
+});

package/Helpers/DataSourceHelper/index.ts

@@ -0,0 +1,19 @@
+import { toPositiveNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
+
+export function itemLimitForData(
+  entry: ZappEntry[],
+  component: {
+    rules?: { item_limit?: number | string };
+  }
+) {
+  if (!component?.rules?.item_limit) {
+    return entry;
+  }
+
+  const itemLimit = toPositiveNumberWithDefault(
+    Infinity,
+    component?.rules?.item_limit
+  );
+
+  return (entry || []).slice(0, itemLimit);
+}

package/events/index.ts

@@ -5,4 +5,7 @@ export enum QBUIComponentEvents {
   scrollVerticallyToInitialOffset = "scrollVerticallyToInitialOffset",
   focusOnSelectedTab = "focusOnSelectedTab",
   focusOnSelectedTopMenuItem = "focusOnSelectedTopMenuItem",
+  scrollToTopForScreenWrappedInContainer = "scrollToTopForScreenWrappedInContainer",
 }
+
+export { scrollEndReached$, emitScrollEndReached } from "./scrollEndReached";

package/events/scrollEndReached.ts

@@ -0,0 +1,15 @@
+import { Subject } from "rxjs";
+import { throttleTime } from "rxjs/operators";
+
+const SCROLL_END_THROTTLE_MS = 1000;
+const scrollEndReachedSubject = new Subject<void>();
+
+/* Throttle so we only emit at most once per second; RN often fires onEndReached repeatedly (e.g. on Android) when near the bottom. */
+export const scrollEndReached$ = scrollEndReachedSubject.pipe(
+  throttleTime(SCROLL_END_THROTTLE_MS)
+);
+
+/* Call from scroll container (ComponentsMap or Tabs) when scroll reaches end. */
+export const emitScrollEndReached = (): void => {
+  scrollEndReachedSubject.next();
+};

package/index.d.ts

@@ -228,6 +228,12 @@ declare type TabsSelectionContextType = {
   selectedEntryIndex: number;
 };
 
+declare type TabsAccessibility = {
+  announcement?: string;
+  selectedHint?: string;
+  hint?: string;
+};
+
 declare type TabsProps = {
   entry: ZappEntry[];
   groupId: string;
@@ -235,6 +241,7 @@ declare type TabsProps = {
   focused?: boolean;
   parentFocus?: ParentFocus;
   style?: ReactViewStyle;
+  accessibility?: TabsAccessibility;
 };
 
 declare type TabContentProps = {

package/package.json

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

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/PlayerContainer/ErrorDisplay/ErrorDisplay.tsx

@@ -1,57 +0,0 @@
-import * as React from "react";
-import * as R from "ramda";
-import { Text, TextStyle, View, ViewStyle } from "react-native";
-
-import { getLocalizations } from "@applicaster/zapp-react-native-utils/localizationUtils";
-import { getAppStylesColor } from "@applicaster/zapp-react-native-utils/stylesUtils";
-import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
-import { styleKeys } from "@applicaster/zapp-react-native-utils/styleKeysUtils";
-
-type Props = {
-  styles: {};
-  error: {};
-  remoteConfigurations: { localizations: {} };
-};
-
-const defaultAppStyles = {
-  loading_error_label: {
-    color: "#aaa",
-  },
-};
-
-const textStyles = (appStyles = defaultAppStyles): TextStyle => ({
-  color: getAppStylesColor("loading_error_label", appStyles),
-  fontSize: 36,
-  textAlign: "center",
-});
-
-const errorStyles = ({ backgroundColor }): ViewStyle => ({
-  flex: 1,
-  width: "100%",
-  height: "100%",
-  justifyContent: "center",
-  alignItems: "center",
-  position: "absolute",
-  zIndex: 100,
-  backgroundColor,
-});
-
-export function ErrorDisplayComponent({
-  styles,
-  remoteConfigurations: { localizations },
-}: Props) {
-  const theme = useTheme();
-  const backgroundColor = theme?.app_background_color;
-
-  const { stream_error_message = "Cannot play stream" } = getLocalizations({
-    localizations,
-  });
-
-  const appStyles = R.prop(styleKeys.style_namespace, styles);
-
-  return (
-    <View style={errorStyles({ backgroundColor })}>
-      <Text style={textStyles(appStyles)}>{stream_error_message}</Text>
-    </View>
-  );
-}

package/Components/PlayerContainer/ErrorDisplay/index.ts

@@ -1,9 +0,0 @@
-import * as R from "ramda";
-
-import { connectToStore } from "@applicaster/zapp-react-native-redux/utils/connectToStore";
-
-import { ErrorDisplayComponent } from "./ErrorDisplay";
-
-export const ErrorDisplay = R.compose(
-  connectToStore(R.pick(["remoteConfigurations"]))
-)(ErrorDisplayComponent);

package/Components/River/TV/withTVEventHandler.tsx

@@ -1,27 +0,0 @@
-/* eslint max-len: off */
-
-import React from "react";
-import { TVEventHandlerComponent } from "@applicaster/zapp-react-native-tvos-ui-components/Components/TVEventHandlerComponent";
-import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
-
-export const withTvEventHandler = (Component) => {
-  return function WithTVEventHandler(props) {
-    const navigator = useNavigation();
-
-    const remoteHandler = (event) => {
-      const { eventType } = event;
-
-      const canGoBack = navigator.canGoBack();
-
-      if (eventType === "menu" && canGoBack) {
-        navigator.goBack();
-      }
-    };
-
-    return (
-      <TVEventHandlerComponent tvEventHandler={remoteHandler}>
-        <Component {...props} />
-      </TVEventHandlerComponent>
-    );
-  };
-};

package/Components/VideoModal/ModalAnimation/AnimatedPlayerModalWrapper.tsx

@@ -1,60 +0,0 @@
-import React from "react";
-import { Animated, ViewStyle } from "react-native";
-
-import {
-  useModalAnimationContext,
-  PlayerAnimationStateEnum,
-} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
-
-type Props = {
-  style: ViewStyle[];
-  children: React.ReactNode;
-};
-
-export const AnimatedPlayerModalWrapper = (props: Props) => {
-  const {
-    playerAnimationState,
-    animatedValues: { lastScrollY, dragScrollY, translateYOffset },
-    modalSnapPoints,
-    setStartComponentsAnimation,
-  } = useModalAnimationContext();
-
-  const interpolateConfig: Animated.InterpolationConfigType = React.useMemo(
-    () => ({
-      inputRange: modalSnapPoints,
-      outputRange: modalSnapPoints,
-      extrapolate: "clamp",
-    }),
-    [modalSnapPoints]
-  );
-
-  let translateY;
-
-  if (playerAnimationState === PlayerAnimationStateEnum.drag_player) {
-    translateY = translateYOffset.interpolate(interpolateConfig);
-  } else {
-    const reverseLastScrollY = Animated.multiply(
-      new Animated.Value(-1),
-      lastScrollY
-    );
-
-    translateY = Animated.add(
-      translateYOffset,
-      Animated.add(dragScrollY, reverseLastScrollY)
-    ).interpolate(interpolateConfig);
-  }
-
-  React.useEffect(() => {
-    (playerAnimationState === PlayerAnimationStateEnum.minimize ||
-      playerAnimationState === PlayerAnimationStateEnum.maximize) &&
-      setStartComponentsAnimation(true);
-  }, [playerAnimationState]);
-
-  return (
-    <Animated.View
-      style={[props.style, { transform: [{ translateY: translateY }] }]}
-    >
-      {props.children}
-    </Animated.View>
-  );
-};