@applicaster/zapp-react-native-ui-components 15.0.0-rc.135 → 15.0.0-rc.136

package/Components/MasterCell/DefaultComponents/PressableView.tsx

@@ -13,8 +13,8 @@ import {
 type ChildElementProps = {
   children?: React.ReactNode;
   mobileActionRole?: string;
-  state?: string;
-  [key: string]: unknown;
+  uri?: string;
+  state?: "default" | "focused";
 };
 
 type Props = {
@@ -22,6 +22,7 @@ type Props = {
   item: ZappEntry | ZappFeed;
   action?: {
     identifier?: string;
+    flavour?: "flavour_1" | "flavour_2";
   };
   style?: Record<string, unknown>;
   focusedStyles?: Record<string, unknown>;
@@ -35,6 +36,62 @@ const isValidElement = (
 ): child is React.ReactElement<ChildElementProps> =>
   React.isValidElement(child);
 
+/** retrieves asset uri for a given flavour,
+ * if flavour is not provided, returns the default asset from `asset` or selected state asset (if available)
+ * asset can be:
+ *  provided as asset path,
+ *  provided as [default || flavour_1, alternative || flavour_2] array.
+ * mobileButtonAssets asset can be:
+ *  provided as asset path,
+ *  provided as [default || flavour_1, alternative || flavour_2] array,
+ *  provided as [[] as flavour_1, [] as flavour_2] array for multiple flavours, where each flavour can be either a path or [default, alternative] array.
+ *
+ * isActive reflect the state of the action and can be used to render different asset for active/inactive state if asset is provided as array
+ *
+ * */
+const selectByAssetFlavour = (
+  actionState: {
+    asset?: string | [string, string];
+    mobileButtonAssets?: [string, string] | [string, string][];
+  },
+  flavour?: "flavour_1" | "flavour_2",
+  isActive?: boolean
+) => {
+  if (actionState.mobileButtonAssets) {
+    if (flavour) {
+      if (flavour === "flavour_1") {
+        if (typeof actionState.mobileButtonAssets[0] === "string") {
+          return actionState.mobileButtonAssets[0];
+        }
+
+        if (Array.isArray(actionState.mobileButtonAssets[0])) {
+          return actionState.mobileButtonAssets[0][isActive ? 1 : 0];
+        }
+
+        return actionState.mobileButtonAssets[0];
+      } else if (flavour === "flavour_2") {
+        if (typeof actionState.mobileButtonAssets[1] === "string") {
+          return actionState.mobileButtonAssets[1];
+        }
+
+        if (Array.isArray(actionState.mobileButtonAssets[1])) {
+          return actionState.mobileButtonAssets[1][isActive ? 1 : 0];
+        }
+
+        return actionState.mobileButtonAssets[1];
+      }
+    }
+
+    return Array.isArray(actionState.mobileButtonAssets[0])
+      ? actionState.mobileButtonAssets[0][isActive ? 1 : 0]
+      : actionState.mobileButtonAssets[0];
+  } else {
+    return typeof actionState?.asset === "string"
+      ? actionState.asset
+      : actionState.asset[isActive ? 1 : 0];
+  }
+};
+
 export function PressableView({
   children,
   item,
@@ -97,7 +154,9 @@ export function PressableView({
     : "";
 
   const shouldRenderAsset = Boolean(
-    supportsEntryState ? actionState?.asset : false
+    supportsEntryState
+      ? actionState?.asset && actionState?.mobileButtonAssets
+      : false
   );
 
   const shouldRenderLabel = Boolean(labelText);
@@ -129,7 +188,13 @@ export function PressableView({
       const nextProps: Partial<ChildElementProps> = {};
 
       if (role === "asset") {
-        nextProps.state = isActive ? "active" : "inactive";
+        if (action.flavour) {
+          nextProps.uri = selectByAssetFlavour(
+            actionState,
+            action.flavour,
+            isActive
+          );
+        }
       }
 
       if (role === "label") {

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/Asset.ts

@@ -3,11 +3,11 @@ import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/nu
 type Props = {
   prefix: string;
   value: Function;
-  actionIdentifier: string;
   testID?: string;
 };
 
-export const Asset = ({ prefix, value, actionIdentifier, testID }: Props) => {
+/** Asset used in conjunction with PressableView inside mobile action buttons, uri is provided by PressableView  */
+export const Asset = ({ prefix, value, testID }: Props) => {
   if (!value(`${prefix}_asset_enabled`)) {
     return null;
   }
@@ -35,10 +35,6 @@ export const Asset = ({ prefix, value, actionIdentifier, testID }: Props) => {
       },
     ],
     additionalProps: {
-      source: {
-        context: actionIdentifier,
-      },
-      state: "inactive",
       mobileActionRole: "asset",
       testID: testID ? `${testID}-asset` : undefined,
     },

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/Button.ts

@@ -49,6 +49,7 @@ export const Button = ({
   const testID = `mobile_action_button_${index + 1}`;
   const actionIdentifier = value(`${specificPrefix}_assign_action`);
   const assetAlignment = value(`${stylePrefix}_asset_alignment`) || "left";
+  const actionAssetFlavour = value(`${stylePrefix}_action_asset_flavour`);
 
   const contentsAlignment =
     value(`${stylePrefix}_contents_alignment`) || "center";
@@ -93,6 +94,7 @@ export const Button = ({
     additionalProps: {
       action: {
         identifier: actionIdentifier,
+        flavour: actionAssetFlavour,
       },
       focusedStyles: {
         backgroundColor: value(`${stylePrefix}_focused_background_color`),
@@ -104,7 +106,6 @@ export const Button = ({
       Asset({
         prefix: stylePrefix,
         value,
-        actionIdentifier,
         testID,
       }),
       Spacer(),

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/__tests__/PressableView.test.tsx

@@ -57,6 +57,10 @@ const buildActionContext = (entryState = {}) => ({
       inactive: "https://example.com/image-inactive.png",
       active: "https://example.com/image-active.png",
     },
+    mobileButtonAssets: [
+      "https://example.com/image-inactive.png",
+      "https://example.com/image-active.png",
+    ],
     label: {
       label_1: "Play",
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "15.0.0-rc.135",
+  "version": "15.0.0-rc.136",
   "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-rc.135",
-    "@applicaster/zapp-react-native-bridge": "15.0.0-rc.135",
-    "@applicaster/zapp-react-native-redux": "15.0.0-rc.135",
-    "@applicaster/zapp-react-native-utils": "15.0.0-rc.135",
+    "@applicaster/applicaster-types": "15.0.0-rc.136",
+    "@applicaster/zapp-react-native-bridge": "15.0.0-rc.136",
+    "@applicaster/zapp-react-native-redux": "15.0.0-rc.136",
+    "@applicaster/zapp-react-native-utils": "15.0.0-rc.136",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "url": "^0.11.0",