@applicaster/zapp-react-native-ui-components 16.0.0-rc.91 → 16.0.0-rc.92

package/Components/ModalComponent/AudioPlayer/Components/Item.tsx

@@ -54,6 +54,8 @@ export type BackgroundConfiguration = {
   paddingRight?: number;
   paddingBottom?: number;
   paddingLeft?: number;
+  highlightInsetLeft?: number;
+  highlightInsetRight?: number;
 };
 
 export type ImageConfiguration = {
@@ -203,9 +205,9 @@ const CONTAINER_SPEC_LARGE_IMAGE: ContainerSpec = {
 
 const CONTAINER_SPEC_DEFAULT: ContainerSpec = {
   paddingTop: 8,
-  paddingRight: 20,
+  paddingRight: 10,
   paddingBottom: 8,
-  paddingLeft: 20,
+  paddingLeft: 10,
   horizontalGutter: 12,
   verticalGutter: 2,
 };
@@ -350,21 +352,30 @@ function ItemContainer({
   onPress,
 }: ItemContainerProps) {
   const container = resolveContainerSpec(image);
-  const bg = focused ? background.focusedColor : background.defaultColor;
+  const insetLeft = background.highlightInsetLeft ?? 0;
+  const insetRight = background.highlightInsetRight ?? 0;
 
   return (
-    <Pressable
-      onPress={onPress}
-      style={({ pressed }) => ({
-        backgroundColor: pressed ? background.focusedColor : bg,
-        borderRadius: background.cornerRadius,
-        paddingTop: background.paddingTop ?? container.paddingTop,
-        paddingRight: background.paddingRight ?? container.paddingRight,
-        paddingBottom: background.paddingBottom ?? container.paddingBottom,
-        paddingLeft: background.paddingLeft ?? container.paddingLeft,
-      })}
-    >
-      {children}
+    <Pressable onPress={onPress}>
+      {({ pressed }) => (
+        <View
+          style={{
+            marginLeft: insetLeft,
+            marginRight: insetRight,
+            backgroundColor:
+              pressed || focused
+                ? background.focusedColor
+                : background.defaultColor,
+            borderRadius: background.cornerRadius,
+            paddingTop: background.paddingTop ?? container.paddingTop,
+            paddingRight: background.paddingRight ?? container.paddingRight,
+            paddingBottom: background.paddingBottom ?? container.paddingBottom,
+            paddingLeft: background.paddingLeft ?? container.paddingLeft,
+          }}
+        >
+          {children}
+        </View>
+      )}
     </Pressable>
   );
 }
@@ -927,6 +938,10 @@ export const VARIANT_NOW_PLAYING: ItemConfiguration = {
     defaultColor: "transparent",
     focusedColor: "transparent",
     cornerRadius: 0,
+    paddingTop: 8,
+    paddingRight: 20,
+    paddingBottom: 8,
+    paddingLeft: 20,
   },
   image: {
     width: 72,
@@ -947,6 +962,12 @@ export const VARIANT_QUEUED_ITEM: ItemConfiguration = {
     defaultColor: "transparent",
     focusedColor: "rgba(62, 62, 62, 1)",
     cornerRadius: 12,
+    paddingTop: 8,
+    paddingRight: 10,
+    paddingBottom: 8,
+    paddingLeft: 10,
+    highlightInsetLeft: 10,
+    highlightInsetRight: 10,
   },
   image: {
     width: 48,
@@ -967,6 +988,10 @@ export const VARIANT_PLAYLIST_ITEM: ItemConfiguration = {
     defaultColor: "transparent",
     focusedColor: "rgba(62, 62, 62, 1)",
     cornerRadius: 12,
+    paddingTop: 8,
+    paddingRight: 10,
+    paddingBottom: 8,
+    paddingLeft: 10,
   },
   image: {
     width: 48,

package/Components/ModalComponent/AudioPlayer/Components/NowPlayingHeaderSection.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { StyleSheet, View } from "react-native";
+import { View } from "react-native";
 import {
   AudioPlayerTrackItem,
   VARIANT_NOW_PLAYING,
@@ -10,15 +10,6 @@ import type { MenuItem } from "@applicaster/zapp-react-native-utils/modalState/t
 import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer";
 import { usePlayerState } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerState";
 
-const styles = StyleSheet.create({
-  divider: {
-    height: StyleSheet.hairlineWidth,
-    backgroundColor: "rgba(255, 255, 255, 0.1)",
-    marginHorizontal: 20,
-    marginVertical: 8,
-  },
-});
-
 type NowPlayingHeaderSectionProps = {
   onClear?: () => void;
   nextUpTitle?: string;
@@ -70,14 +61,11 @@ export function NowPlayingHeaderSection({
     };
 
     return (
-      <View>
-        <AudioPlayerTrackItem
-          configuration={VARIANT_NOW_PLAYING}
-          data={data}
-          onTrailingButtonPress={handlePlayPause}
-        />
-        <View style={styles.divider} />
-      </View>
+      <AudioPlayerTrackItem
+        configuration={VARIANT_NOW_PLAYING}
+        data={data}
+        onTrailingButtonPress={handlePlayPause}
+      />
     );
   };
 

package/Components/ModalComponent/AudioPlayer/utils/__tests__/mergeStyles.test.ts

@@ -57,7 +57,7 @@ describe("mergeItemConfiguration background", () => {
     expect(merged.textLabel1.lineHeight).toBe(40);
   });
 
-  it("merges background padding from Studio keys", () => {
+  it("does not merge Studio item background padding (white spec field)", () => {
     const merged = mergeItemConfiguration(base as any, {
       background: {
         default: {
@@ -70,11 +70,11 @@ describe("mergeItemConfiguration background", () => {
       },
     });
 
-    expect(merged.background.paddingTop).toBe(32);
-    expect(merged.background.paddingBottom).toBe(32);
-    expect(merged.background.paddingLeft).toBe(40);
-    expect(merged.background.paddingRight).toBe(40);
-    // Default-only override must not steal the base focused highlight color.
+    expect(merged.background.defaultColor).toBe("#2E7D32");
+    expect(merged.background.paddingTop).toBeUndefined();
+    expect(merged.background.paddingBottom).toBeUndefined();
+    expect(merged.background.paddingLeft).toBeUndefined();
+    expect(merged.background.paddingRight).toBeUndefined();
     expect(merged.background.focusedColor).toBe("rgba(62, 62, 62, 1)");
   });
 

package/Components/ModalComponent/AudioPlayer/utils/mergeStyles.ts

@@ -45,18 +45,6 @@ function mergeItemBackground(
     ...(defaultOverride?.borderRadius !== undefined
       ? { cornerRadius: defaultOverride.borderRadius }
       : {}),
-    ...(defaultOverride?.paddingTop !== undefined
-      ? { paddingTop: defaultOverride.paddingTop }
-      : {}),
-    ...(defaultOverride?.paddingRight !== undefined
-      ? { paddingRight: defaultOverride.paddingRight }
-      : {}),
-    ...(defaultOverride?.paddingBottom !== undefined
-      ? { paddingBottom: defaultOverride.paddingBottom }
-      : {}),
-    ...(defaultOverride?.paddingLeft !== undefined
-      ? { paddingLeft: defaultOverride.paddingLeft }
-      : {}),
   };
 }
 

package/package.json

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