@applicaster/zapp-react-native-ui-components 12.0.2-rc.1 → 12.0.3-alpha.5953460913

package/Components/BaseFocusable/index.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import * as R from "ramda";
 
 import {
   BaseFocusable as BaseFocusableInterface,
@@ -7,7 +8,6 @@ import {
 
 import { createReactRef } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
-import * as FOCUS_EVENTS from "@applicaster/zapp-react-native-utils/appUtils/focusManager/events";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 
 type ScrollDirection = FocusManager.IOS.Direction | FocusManager.Web.Direction;
@@ -131,12 +131,6 @@ export class BaseFocusable<
   willLoseFocus: FocusManager.FocusEventCB = (focusable, scrollDirection) => {
     const { willLoseFocus = noop } = this.props;
     willLoseFocus(focusable, scrollDirection);
-
-    focusManager.invokeHandler?.(
-      FOCUS_EVENTS.WILL_LOSE_FOCUS,
-      this,
-      scrollDirection
-    );
   };
 
   willReceiveFocus: FocusManager.FocusEventCB = (
@@ -145,12 +139,6 @@ export class BaseFocusable<
   ) => {
     const { willReceiveFocus = noop } = this.props;
     willReceiveFocus(focusable, scrollDirection);
-
-    focusManager.invokeHandler?.(
-      FOCUS_EVENTS.WILL_RECEIVE_FOCUS,
-      this,
-      scrollDirection
-    );
   };
 
   /**
@@ -163,8 +151,6 @@ export class BaseFocusable<
     const { onFocus = noop } = this.props;
     this.setFocusedState(true);
     onFocus(focusable, scrollDirection);
-
-    focusManager.invokeHandler?.(FOCUS_EVENTS.FOCUS, this, scrollDirection);
   };
 
   /**
@@ -179,12 +165,6 @@ export class BaseFocusable<
   ) => {
     const { hasReceivedFocus = noop } = this.props;
     hasReceivedFocus(focusable, scrollDirection);
-
-    focusManager.invokeHandler?.(
-      FOCUS_EVENTS.HAS_RECEIVED_FOCUS,
-      this,
-      scrollDirection
-    );
   };
 
   /**
@@ -196,12 +176,6 @@ export class BaseFocusable<
   hasLostFocus: FocusManager.FocusEventCB = (focusable, scrollDirection) => {
     const { hasLostFocus = noop } = this.props;
     hasLostFocus(focusable, scrollDirection);
-
-    focusManager.invokeHandler?.(
-      FOCUS_EVENTS.HAS_LOST_FOCUS,
-      this,
-      scrollDirection
-    );
   };
 
   /**
@@ -228,7 +202,6 @@ export class BaseFocusable<
     const { onBlur = noop } = this.props;
     this.setFocusedState(false);
     onBlur(focusable, scrollDirection);
-    focusManager.invokeHandler?.(FOCUS_EVENTS.BLUR, this, scrollDirection);
   };
 
   onPress = (keyEvent?: Nullable<React.MouseEvent>) => {
@@ -269,4 +242,68 @@ export class BaseFocusable<
       this.setState({ focused });
     }
   };
+
+  /**
+   * will invoke the underlying component's focus method
+   * @param {Object} scrollDirection
+   * @returns {Promise}
+   */
+  focus(_, scrollDirection) {
+    return this.onFocus(this, scrollDirection); // invokeComponentMethod(this, "onFocus", scrollDirection);
+  }
+
+  /**
+   * will invoke the underlying component's blur method
+   * @param {Object} scrollDirection
+   * @returns {Promise}
+   */
+  blur(
+    _,
+    scrollDirection?: FocusManager.Web.Direction | FocusManager.IOS.Direction
+  ) {
+    return this.onBlur(this, scrollDirection);
+  }
+
+  /**
+   * Sets the focus on this item. Will trigger sequentially a sequence of
+   * functions (willReceiveFocus, focus, hasReceivedFocus). If these functions (defined in the Focusable
+   * Item underlying component) return promises, execution will wait before it proceeds to the next. This
+   * is useful for triggering sequential operations that specifically require to fully run before or after
+   * focus is actually set on that item.
+   * @param {string} scrollDirection string representation of the direction of the navigation which landed
+   * to this item being focused
+   */
+  _executeFocusSequence(methodNames, scrollDirection) {
+    return R.reduce(
+      (sequence, methodName) => {
+        const method = this[methodName]; // Access the method by name
+
+        if (typeof method !== "function") {
+          throw new Error(
+            `Method '${methodName}' not found or not a function.`
+          );
+        }
+
+        return sequence
+          .then(() => method.call(this, scrollDirection))
+          .catch((e) => {
+            throw e; // Re-throw for consistent error handling
+          });
+      },
+      Promise.resolve(),
+      methodNames
+    );
+  }
+
+  setFocus(scrollDirection) {
+    const focusMethods = ["willReceiveFocus", "focus", "hasReceivedFocus"];
+
+    return this._executeFocusSequence(focusMethods, scrollDirection);
+  }
+
+  setBlur(scrollDirection) {
+    const blurMethods = ["willLoseFocus", "blur", "hasLostFocus"];
+
+    return this._executeFocusSequence(blurMethods, scrollDirection);
+  }
 }

package/Components/Cell/Cell.tsx

@@ -276,7 +276,12 @@ export class CellComponent extends React.Component<Props, State> {
 
             if (isFocused) {
               const accessibilityManager = AccessibilityManager.getInstance();
-              accessibilityManager.readText({ text: item.title });
+
+              accessibilityManager.readText({
+                text: String(
+                  item.extensions?.accessibility?.label || item.title
+                ),
+              });
             }
 
             return (

package/Components/Focusable/Focusable.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import * as R from "ramda";
 
 import { BaseFocusable } from "../BaseFocusable";
 import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
@@ -42,8 +41,6 @@ class Focusable extends BaseFocusable<Props> {
     this.resetLongPressTimeout = this.resetLongPressTimeout.bind(this);
     this.longPress = this.longPress.bind(this);
     this.press = this.press.bind(this);
-    this.focus = this.focus.bind(this);
-    this.blur = this.blur.bind(this);
   }
 
   /**
@@ -55,37 +52,6 @@ class Focusable extends BaseFocusable<Props> {
     return this.preferredFocus();
   }
 
-  /**
-   * Sets the focus on this item. Will trigger sequentially a sequence of
-   * functions (willReceiveFocus, focus, hasReceivedFocus). If these functions (defined in the Focusable
-   * Item underlying component) return promises, execution will wait before it proceeds to the next. This
-   * is useful for triggering sequential operations that specifically require to fully run before or after
-   * focus is actually set on that item.
-   * @param {string} scrollDirection string representation of the direction of the navigation which landed
-   * to this item being focused
-   */
-  setFocus(scrollDirection) {
-    const focusMethods = [
-      this.willReceiveFocus,
-      this.focus,
-      this.hasReceivedFocus,
-    ];
-
-    const self = this;
-
-    return R.reduce(
-      (sequence, method) => {
-        return sequence
-          .then(() => method.apply(self, [scrollDirection]))
-          .catch((e) => {
-            throw e;
-          });
-      },
-      Promise.resolve(),
-      focusMethods
-    );
-  }
-
   startLongPressTimeout() {
     this.longPressTimeout = setTimeout(() => {
       this.longPress(null);
@@ -102,26 +68,6 @@ class Focusable extends BaseFocusable<Props> {
     }
   }
 
-  /**
-   * will invoke the underlying component's focus method
-   * @param {Object} scrollDirection
-   * @returns {Promise}
-   */
-  focus(scrollDirection) {
-    return this.onFocus(this, scrollDirection); // invokeComponentMethod(this, "onFocus", scrollDirection);
-  }
-
-  /**
-   * will invoke the underlying component's blur method
-   * @param {Object} scrollDirection
-   * @returns {Promise}
-   */
-  blur(
-    scrollDirection?: FocusManager.Web.Direction | FocusManager.IOS.Direction
-  ) {
-    return this.onBlur(this, scrollDirection);
-  }
-
   /**
    * will invoke the underlying component's press method
    * @param {Object} keyEvent

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "12.0.2-rc.1",
+  "version": "12.0.3-alpha.5953460913",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -34,10 +34,10 @@
     "redux-mock-store": "^1.5.3"
   },
   "dependencies": {
-    "@applicaster/applicaster-types": "12.0.2-rc.1",
-    "@applicaster/zapp-react-native-bridge": "12.0.2-rc.1",
-    "@applicaster/zapp-react-native-redux": "12.0.2-rc.1",
-    "@applicaster/zapp-react-native-utils": "12.0.2-rc.1",
+    "@applicaster/applicaster-types": "12.0.3-alpha.5953460913",
+    "@applicaster/zapp-react-native-bridge": "12.0.3-alpha.5953460913",
+    "@applicaster/zapp-react-native-redux": "12.0.3-alpha.5953460913",
+    "@applicaster/zapp-react-native-utils": "12.0.3-alpha.5953460913",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",