@applicaster/zapp-react-native-ui-components 16.0.0-rc.85 → 16.0.0-rc.87

package/Components/River/__tests__/__snapshots__/componentsMap.test.js.snap

@@ -14,95 +14,125 @@ exports[`componentsMap renders renders components map correctly 1`] = `
   >
     <RCTScrollView
       ListFooterComponent={
-        <Memo(RiverFooterComponent)
-          flatListHeight={null}
-          loadingState={
-            BehaviorSubject {
-              "_value": {
-                "done": false,
-                "index": -1,
-                "waitForAllComponents": false,
-              },
-              "closed": false,
-              "currentObservers": null,
-              "hasError": false,
-              "isStopped": false,
-              "observers": [
-                SafeSubscriber {
-                  "_finalizers": [
-                    Subscription {
-                      "_finalizers": null,
-                      "_parentage": [Circular],
-                      "closed": false,
-                      "initialTeardown": [Function],
-                    },
-                  ],
-                  "_parentage": null,
-                  "closed": false,
-                  "destination": ConsumerObserver {
-                    "partialObserver": {
-                      "complete": undefined,
-                      "error": undefined,
-                      "next": [Function],
-                    },
-                  },
-                  "initialTeardown": undefined,
-                  "isStopped": false,
+        <React.Fragment>
+          <Memo(RiverFooterComponent)
+            flatListHeight={null}
+            loadingState={
+              BehaviorSubject {
+                "_value": {
+                  "done": false,
+                  "index": -1,
+                  "waitForAllComponents": false,
                 },
-                SafeSubscriber {
-                  "_finalizers": [
-                    Subscription {
-                      "_finalizers": null,
-                      "_parentage": [Circular],
-                      "closed": false,
-                      "initialTeardown": [Function],
-                    },
-                  ],
-                  "_parentage": null,
-                  "closed": false,
-                  "destination": ConsumerObserver {
-                    "partialObserver": {
-                      "complete": undefined,
-                      "error": undefined,
-                      "next": [Function],
+                "closed": false,
+                "currentObservers": null,
+                "hasError": false,
+                "isStopped": false,
+                "observers": [
+                  SafeSubscriber {
+                    "_finalizers": [
+                      Subscription {
+                        "_finalizers": null,
+                        "_parentage": [Circular],
+                        "closed": false,
+                        "initialTeardown": [Function],
+                      },
+                    ],
+                    "_parentage": null,
+                    "closed": false,
+                    "destination": ConsumerObserver {
+                      "partialObserver": {
+                        "complete": undefined,
+                        "error": undefined,
+                        "next": [Function],
+                      },
                     },
+                    "initialTeardown": undefined,
+                    "isStopped": false,
                   },
-                  "initialTeardown": undefined,
-                  "isStopped": false,
-                },
-                SafeSubscriber {
-                  "_finalizers": [
-                    Subscription {
-                      "_finalizers": null,
-                      "_parentage": [Circular],
-                      "closed": false,
-                      "initialTeardown": [Function],
+                  SafeSubscriber {
+                    "_finalizers": [
+                      Subscription {
+                        "_finalizers": null,
+                        "_parentage": [Circular],
+                        "closed": false,
+                        "initialTeardown": [Function],
+                      },
+                    ],
+                    "_parentage": null,
+                    "closed": false,
+                    "destination": ConsumerObserver {
+                      "partialObserver": {
+                        "complete": undefined,
+                        "error": undefined,
+                        "next": [Function],
+                      },
                     },
-                  ],
-                  "_parentage": null,
-                  "closed": false,
-                  "destination": ConsumerObserver {
-                    "partialObserver": {
-                      "complete": undefined,
-                      "error": undefined,
-                      "next": [Function],
+                    "initialTeardown": undefined,
+                    "isStopped": false,
+                  },
+                  SafeSubscriber {
+                    "_finalizers": [
+                      Subscription {
+                        "_finalizers": null,
+                        "_parentage": [Circular],
+                        "closed": false,
+                        "initialTeardown": [Function],
+                      },
+                    ],
+                    "_parentage": null,
+                    "closed": false,
+                    "destination": ConsumerObserver {
+                      "partialObserver": {
+                        "complete": undefined,
+                        "error": undefined,
+                        "next": [Function],
+                      },
                     },
+                    "initialTeardown": undefined,
+                    "isStopped": false,
                   },
-                  "initialTeardown": undefined,
-                  "isStopped": false,
-                },
-              ],
-              "thrownError": null,
+                ],
+                "thrownError": null,
+              }
+            }
+          />
+          <View
+            edges={
+              {
+                "bottom": "off",
+              }
+            }
+            mode="margin"
+            style={
+              {
+                "height": 0.5,
+                "paddingBottom": undefined,
+              }
+            }
+          />
+        </React.Fragment>
+      }
+      ListHeaderComponent={
+        <View
+          edges={
+            {
+              "top": "off",
+            }
+          }
+          mode="margin"
+          style={
+            {
+              "height": 0.5,
+              "paddingTop": undefined,
             }
           }
         />
       }
       contentContainerStyle={
         {
-          "paddingBottom": undefined,
           "paddingLeft": undefined,
           "paddingRight": undefined,
-          "paddingTop": undefined,
         }
       }
       data={
@@ -156,6 +186,25 @@ exports[`componentsMap renders renders components map correctly 1`] = `
       windowSize={12}
     >
       <View>
+        <View
+          collapsable={false}
+          onLayout={[Function]}
+        >
+          <View
+            edges={
+              {
+                "top": "off",
+              }
+            }
+            mode="margin"
+            style={
+              {
+                "height": 0.5,
+                "paddingTop": undefined,
+              }
+            }
+          />
+        </View>
         <View
           onFocusCapture={[Function]}
           onLayout={[Function]}
@@ -200,6 +249,20 @@ exports[`componentsMap renders renders components map correctly 1`] = `
               size="large"
             />
           </View>
+          <View
+            edges={
+              {
+                "bottom": "off",
+              }
+            }
+            mode="margin"
+            style={
+              {
+                "height": 0.5,
+                "paddingBottom": undefined,
+              }
+            }
+          />
         </View>
       </View>
     </RCTScrollView>

package/Components/River/__tests__/componentsMap.test.js

@@ -11,9 +11,14 @@ jest.mock(
   () => () => null
 );
 
-jest.mock("react-native-safe-area-context", () => ({
-  useSafeAreaInsets: () => ({ top: 50 }),
-}));
+jest.mock("react-native-safe-area-context", () => {
+  const { View } = jest.requireActual("react-native");
+
+  return {
+    SafeAreaView: View,
+    useSafeAreaInsets: () => ({ top: 50 }),
+  };
+});
 
 jest.mock("react-native", () => {
   const RN = jest.genMockFromModule("react-native");

package/Components/Screen/navigationHandler.ts

@@ -18,10 +18,9 @@ function shouldShowNavigation(route, screenData) {
     return false;
   }
 
-  if (
-    screenData.type === "qb_search_screen" ||
-    screenData?.targetScreen?.type === "qb_search_screen"
-  ) {
+  const currentScreenData = screenData?.targetScreen || screenData;
+
+  if (currentScreenData.type === "qb_search_screen") {
     return false;
   }
 
@@ -31,10 +30,11 @@ function shouldShowNavigation(route, screenData) {
     return hookPlugin?.showNavBar || hookPlugin?.presentFullScreen !== true;
   }
 
-  if (
-    screenData?.general?.allow_screen_plugin_presentation ||
-    screenData?.targetScreen?.general?.allow_screen_plugin_presentation
-  ) {
+  if (currentScreenData?.general?.hide_menu) {
+    return false;
+  }
+
+  if (currentScreenData?.general?.allow_screen_plugin_presentation) {
     return false;
   }
 

package/Contexts/ModalNavigationContext/__tests__/index.test.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { withModalNavigationContextProvider } from "../";
+
+describe("withModalNavigationContextProvider", () => {
+  it("does not re-render the wrapped component when props are unchanged", () => {
+    const Component = jest.fn(() => null);
+    const WrappedComponent = withModalNavigationContextProvider(Component);
+    const { rerender } = render(<WrappedComponent title="Modal" />);
+
+    rerender(<WrappedComponent title="Modal" />);
+
+    expect(Component).toHaveBeenCalledTimes(1);
+  });
+});

package/Contexts/ModalNavigationContext/index.tsx

@@ -6,11 +6,11 @@ export function useModalNavigationContext() {
 }
 
 export function withModalNavigationContextProvider(Component) {
-  return function WrappedWithModalNavigationContextProvider(props) {
+  return React.memo(function WrappedWithModalNavigationContextProvider(props) {
     return (
       <ModalNavigationContext.Provider value={true}>
         <Component {...props} />
       </ModalNavigationContext.Provider>
     );
-  };
+  });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "16.0.0-rc.85",
+  "version": "16.0.0-rc.87",
   "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": "16.0.0-rc.85",
-    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.85",
-    "@applicaster/zapp-react-native-redux": "16.0.0-rc.85",
-    "@applicaster/zapp-react-native-utils": "16.0.0-rc.85",
+    "@applicaster/applicaster-types": "16.0.0-rc.87",
+    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.87",
+    "@applicaster/zapp-react-native-redux": "16.0.0-rc.87",
+    "@applicaster/zapp-react-native-utils": "16.0.0-rc.87",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "react-native-sortables": "1.7.1",

package/Components/ModalComponent/AudioPlayer/Components/Action.tsx

@@ -1,314 +0,0 @@
-/**
- * Modal Building Block — Action
- *
- * Single-file Expo Snack demo for the Action list item building block spec.
- * Three forms (text only / leading icon + text / leading + text + trailing)
- * are driven by data — no separate variants.
- *
- * Green (configurable): background, title, trailingIcon.chevronAsset
- * White (hardcoded): container padding/gutter, icon size, leading icon assets,
- *   leading/trailing visibility logic from data
- */
-
-import React from "react";
-import {
-  Image,
-  Platform,
-  Pressable,
-  StyleSheet,
-  Text,
-  View,
-} from "react-native";
-
-const styles = StyleSheet.create({
-  row: {
-    flexDirection: "row",
-    alignItems: "center",
-  },
-});
-
-// ---------------------------------------------------------------------------
-// Configuration (green / editable fields from spec)
-// ---------------------------------------------------------------------------
-
-export type TextTransform =
-  | "default"
-  | "lowercase"
-  | "uppercase"
-  | "capitalize";
-
-export type BackgroundConfiguration = {
-  defaultColor: string;
-  focusedColor: string;
-  cornerRadius: number;
-};
-
-export type TitleConfiguration = {
-  fontColor: string;
-  focusedFontColor: string;
-  iosFontFamily: string;
-  androidFontFamily: string;
-  fontSize: number;
-  lineHeight: number;
-  iosLetterSpacing: number;
-  androidLetterSpacing: number;
-  textTransform: TextTransform;
-};
-
-export type TrailingIconConfiguration = {
-  chevronAsset?: string;
-};
-
-export type ActionConfiguration = {
-  background: BackgroundConfiguration;
-  title: TitleConfiguration;
-  trailingIcon: TrailingIconConfiguration;
-};
-
-export const DEFAULT_BACKGROUND_CONFIGURATION: BackgroundConfiguration = {
-  defaultColor: "transparent",
-  focusedColor: "rgba(62, 62, 62, 1)",
-  cornerRadius: 12,
-};
-
-export const DEFAULT_TITLE_CONFIGURATION: TitleConfiguration = {
-  fontColor: "#FFFFFF",
-  focusedFontColor: "#FFFFFF",
-  iosFontFamily: "SFProText-Semibold",
-  androidFontFamily: "Roboto-Medium",
-  fontSize: 15,
-  lineHeight: 24,
-  iosLetterSpacing: -0.2,
-  androidLetterSpacing: 0,
-  textTransform: "default",
-};
-
-export const DEFAULT_TRAILING_ICON_CONFIGURATION: TrailingIconConfiguration =
-  {};
-
-export const DEFAULT_ACTION_CONFIGURATION: ActionConfiguration = {
-  background: DEFAULT_BACKGROUND_CONFIGURATION,
-  title: DEFAULT_TITLE_CONFIGURATION,
-  trailingIcon: DEFAULT_TRAILING_ICON_CONFIGURATION,
-};
-
-// ---------------------------------------------------------------------------
-// Data (runtime — controls which elements are shown)
-// ---------------------------------------------------------------------------
-
-export type LeadingActionType =
-  | "addToQueue"
-  | "addToPlaylist"
-  | "favorite"
-  | "share"
-  | "sleepTimer"
-  | "playbackSpeed";
-
-export type ActionData = {
-  title: string;
-  /** When set, leading icon is shown (Enable: On). */
-  leadingActionType?: LeadingActionType;
-  /** When true, trailing chevron is shown (Enable: On). */
-  showTrailingChevron?: boolean;
-};
-
-export type AudioPlayerActionProps = {
-  configuration: ActionConfiguration;
-  data: ActionData;
-  focused?: boolean;
-  onPress?: () => void;
-};
-
-// ---------------------------------------------------------------------------
-// Hardcoded spec values (white fields)
-// ---------------------------------------------------------------------------
-
-const CONTAINER_SPEC = {
-  paddingTop: 13,
-  paddingRight: 10,
-  paddingBottom: 13,
-  paddingLeft: 10,
-  horizontalGutter: 12,
-};
-
-const ICON_SPEC = {
-  width: 24,
-  height: 24,
-};
-
-const DEFAULT_CHEVRON_ASSET =
-  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAALElEQVR42mNgGAXUBlu2bPmPjIeWBeiGDy0Lhrbrh1/qGXqZaxSMglEw0gEA4c+IpUrpYX4AAAAASUVORK5CYII=";
-
-/** Hardcoded: action type → leading icon asset (base64 PNG). */
-const LEADING_ICON_ASSETS: Record<LeadingActionType, string> = {
-  addToQueue:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAALElEQVR42mNgGAUjE/xHAzS3gFgweC0Y+nEwGslkBRFFwTj8LBjNyaNgmAMAJTf+EEEZcS0AAAAASUVORK5CYII=",
-  addToPlaylist:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAKUlEQVR42mNgGAVDBvxHA6MWjFpAvEGkglELKLdgNJmOWkA7C0YBzQAAivu+UKRR1ZIAAAAASUVORK5CYII=",
-  favorite:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAKklEQVR42mNgGAWjYBTgBP+xAGLkRi0YQhbgM4wqBo9aMHgsGAWjgCAAALyAZqh4yyZZAAAAAElFTkSuQmCC",
-  share:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAK0lEQVR42mNgGAVDDvxHAqMWjFowUiz4TwQYgRYQYxBFlo1aMPAWjAK6AgD2g7pUUT7VeAAAAABJRU5ErkJggg==",
-  sleepTimer:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAYUlEQVR42tWUSQ4AIAgD+f+n8eJRliIQ6MmEZTSxJZokvipdXgZpAbzOO17AglIXI7XULxmCoEMwRGuWam6AdRsN4IJYTRH4PIDkhxTA92zUPNBcFDDHaOVR0RJ2LXG9QgemFVK8tpo4PwAAAABJRU5ErkJggg==",
-  playbackSpeed:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAK0lEQVR42mNgGAVDDvxHAqMWjFowUiz4TwQYgRYQYxBFlo1aMPAWjAK6AgD2g7pUUT7VeAAAAABJRU5ErkJggg==",
-};
-
-function getTextTransformStyle(
-  textTransform: TextTransform
-): "none" | "lowercase" | "uppercase" | "capitalize" {
-  return textTransform === "default" ? "none" : textTransform;
-}
-
-function shouldShowLeadingIcon(leadingActionType?: LeadingActionType) {
-  return !!leadingActionType;
-}
-
-function shouldShowTrailingIcon(showTrailingChevron?: boolean) {
-  return !!showTrailingChevron;
-}
-
-// ---------------------------------------------------------------------------
-// Inner components
-// ---------------------------------------------------------------------------
-
-type ActionContainerProps = {
-  configuration: BackgroundConfiguration;
-  focused: boolean;
-  children: React.ReactNode;
-  onPress?: () => void;
-};
-
-function ActionContainer({
-  configuration,
-  focused,
-  children,
-  onPress,
-}: ActionContainerProps) {
-  return (
-    <Pressable
-      onPress={onPress}
-      style={({ pressed }) => ({
-        backgroundColor:
-          pressed || focused
-            ? configuration.focusedColor
-            : configuration.defaultColor,
-        borderRadius: configuration.cornerRadius,
-        paddingTop: CONTAINER_SPEC.paddingTop,
-        paddingRight: CONTAINER_SPEC.paddingRight,
-        paddingBottom: CONTAINER_SPEC.paddingBottom,
-        paddingLeft: CONTAINER_SPEC.paddingLeft,
-      })}
-    >
-      {children}
-    </Pressable>
-  );
-}
-
-type ActionTitleProps = {
-  title: string;
-  configuration: TitleConfiguration;
-  focused: boolean;
-};
-
-function ActionTitle({ title, configuration, focused }: ActionTitleProps) {
-  const letterSpacing =
-    Platform.OS === "ios"
-      ? configuration.iosLetterSpacing
-      : configuration.androidLetterSpacing;
-
-  return (
-    <Text
-      style={{
-        flex: 1,
-        color: focused
-          ? configuration.focusedFontColor
-          : configuration.fontColor,
-        fontSize: configuration.fontSize,
-        lineHeight: configuration.lineHeight,
-        letterSpacing,
-        fontFamily: Platform.select({
-          ios: configuration.iosFontFamily,
-          android: configuration.androidFontFamily,
-          default: configuration.androidFontFamily,
-        }),
-        textTransform: getTextTransformStyle(configuration.textTransform),
-      }}
-      numberOfLines={1}
-    >
-      {title}
-    </Text>
-  );
-}
-
-type ActionLeadingIconProps = {
-  actionType: LeadingActionType;
-};
-
-function ActionLeadingIcon({ actionType }: ActionLeadingIconProps) {
-  return (
-    <Image
-      source={{ uri: LEADING_ICON_ASSETS[actionType] }}
-      style={{ width: ICON_SPEC.width, height: ICON_SPEC.height }}
-      resizeMode="contain"
-    />
-  );
-}
-
-type ActionTrailingIconProps = {
-  configuration: TrailingIconConfiguration;
-};
-
-function ActionTrailingIcon({ configuration }: ActionTrailingIconProps) {
-  const asset = configuration.chevronAsset ?? DEFAULT_CHEVRON_ASSET;
-
-  return (
-    <Image
-      source={{ uri: asset }}
-      style={{ width: ICON_SPEC.width, height: ICON_SPEC.height }}
-      resizeMode="contain"
-    />
-  );
-}
-
-// ---------------------------------------------------------------------------
-// AudioPlayerAction
-// ---------------------------------------------------------------------------
-
-export function AudioPlayerAction({
-  configuration,
-  data,
-  focused = false,
-  onPress,
-}: AudioPlayerActionProps) {
-  const { background, title, trailingIcon } = configuration;
-  const { title: label, leadingActionType, showTrailingChevron } = data;
-
-  const showLeading = shouldShowLeadingIcon(leadingActionType);
-  const showTrailing = shouldShowTrailingIcon(showTrailingChevron);
-
-  return (
-    <ActionContainer
-      configuration={background}
-      focused={focused}
-      onPress={onPress}
-    >
-      <View style={styles.row}>
-        {showLeading ? (
-          <>
-            <ActionLeadingIcon actionType={leadingActionType} />
-            <View style={{ width: CONTAINER_SPEC.horizontalGutter }} />
-          </>
-        ) : null}
-        <ActionTitle title={label} configuration={title} focused={focused} />
-        {showTrailing ? (
-          <>
-            <View style={{ width: CONTAINER_SPEC.horizontalGutter }} />
-            <ActionTrailingIcon configuration={trailingIcon} />
-          </>
-        ) : null}
-      </View>
-    </ActionContainer>
-  );
-}