@applicaster/zapp-react-native-utils 12.0.0-alpha.3631152042 → 12.0.0-alpha.4433422595

package/appUtils/focusManager/index.ts

@@ -224,6 +224,12 @@ export const focusManager = (function () {
       lastAddedParentNode?.children || focusableTree.root.children
     );
 
+    // console.log("debug_2", "FM setInitialFocus", {
+    //   preferredFocus,
+    //   lastAddedParentNode,
+    //   focusableTree,
+    // });
+
     logger.log({ message: "setInitialFocus", data: { preferredFocus } });
 
     if (preferredFocus && preferredFocus.length > 0) {
@@ -323,6 +329,8 @@ export const focusManager = (function () {
    * @returns {React.Component} the registered component
    */
   function registerGroup(id, component) {
+    // console.log("debug_2", "FM registerGroup", { id, component });
+
     focusableTree.addNode({ id, component });
 
     return component;
@@ -338,6 +346,8 @@ export const focusManager = (function () {
    * @returns {React.Component} the registered component
    */
   function registerItem(id, component) {
+    // console.log("debug_2", "FM registerItem", { id, component });
+
     focusableTree.addNode({ id, component });
 
     if (!currentFocusNode && id === lastFocusedId && !id.includes("menu")) {
@@ -354,6 +364,8 @@ export const focusManager = (function () {
    * @param {String} id of the group to unregister
    */
   function unregisterGroup(id) {
+    // console.log("debug_2", "FM unregisterGroup", { id });
+
     focusableTree.findAndRemoveNode(id);
   }
 
@@ -365,6 +377,8 @@ export const focusManager = (function () {
    * @param {String} id of the Focusable to unregister
    */
   function unregisterItem(id) {
+    // console.log("debug_2", "FM unregisterItem", { id });
+
     focusableTree.findAndRemoveNode(id);
 
     if (currentFocusNode && currentFocusNode.id === id) {
@@ -422,6 +436,13 @@ export const focusManager = (function () {
       currentFocusNode.component.willLoseFocus(currentFocusNode, direction);
       const nextFocusable = findFocusableNode(direction, currentFocusNode);
 
+      // console.log("debug_2", "FM moveFocus", {
+      //   direction: direction?.value,
+      //   currentFocusNode,
+      //   focusableTree,
+      //   nextFocusable,
+      // });
+
       if (nextFocusable?.component?.isMounted?.()) {
         const nextRect = nextFocusable.component.getRect();
 

package/appUtils/focusManager/treeDataStructure/Utils/index.js

@@ -1,4 +1,4 @@
-import * as R from "ramda";
+import { allPass, pathOr, startsWith } from "ramda";
 import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 
 import { rejectItemByPath } from "../../../../objectUtils";
@@ -143,7 +143,47 @@ const hasChildren = (target) =>
 
 const hasComponent = (target) => !!target?.component;
 
-const hasComponentAndChildren = R.allPass([hasComponent, hasChildren]);
+const hasComponentAndChildren = allPass([hasComponent, hasChildren]);
+
+const positiveOrZero = (value) => value >= 0;
+
+const excludeFromFocusSearching = pathOr(false, [
+  "component",
+  "props",
+  "excludeFromFocusSearching",
+]);
+
+const isNavBar = (target) => startsWith("navbar", target?.id);
+
+const ignoreMenuIfMultipleTargets = (nodes) => {
+  if (nodes.length > 1 && nodes.map((n) => n?.target?.id).includes("navbar")) {
+    return nodes.filter((n) => !isNavBar(n?.target));
+  }
+
+  return nodes;
+};
+
+const toDistance = ({ target, direction, comparisonRect }) => {
+  const componentRect = target.component?.getRect();
+
+  const orientationDistance = measureDistance(
+    direction,
+    comparisonRect,
+    componentRect
+  );
+
+  if (orientationDistance === -1) {
+    // ignores offscreen targets when moving up/down
+    return null;
+  }
+
+  const euclidDistance = measureEuclidianDistanceToCenter(
+    comparisonRect,
+    componentRect
+  );
+
+  return orientationDistance > 0 ? euclidDistance : orientationDistance;
+};
 
 /**
  * Get target in shortest distance in specified direction
@@ -173,52 +213,28 @@ export function getTargetInDirection(
 
   const distances = targets
     .filter(hasComponentAndChildren)
-    .map((target) => {
-      const componentRect = target.component?.getRect();
-
-      const distance = measureDistance(
-        direction,
-        comparisonRect,
-        componentRect
-      );
-
-      if (distance === -1) {
-        // ignores offscreen targets when moving up/down
-        return null;
-      }
-
-      const orientationDistance = measureDistance(
-        direction,
-        comparisonRect,
-        componentRect
-      );
-
-      const euclidDistance = measureEuclidianDistanceToCenter(
-        comparisonRect,
-        componentRect
-      );
-
-      return {
-        distance:
-          orientationDistance > 0 ? euclidDistance : orientationDistance,
-        target,
-      };
-    })
-    .filter((obj) => obj && obj.distance >= 0);
+    .filter((target) => !excludeFromFocusSearching(target))
+    .map((target) => ({
+      distance: toDistance({ target, direction, comparisonRect }),
+      target,
+    }))
+    .filter(({ distance }) => positiveOrZero(distance));
 
   const match = distances
     .sort((a, b) => a.distance - b.distance) // sorts the distances
     .filter(ignoreMenuIfMultipleTargets)[0]; // filters out multiple targets if necessary // gets the first element
 
-  return distances && distances.length > 0 ? match.target : null;
-}
-
-function ignoreMenuIfMultipleTargets(nodes) {
-  if (nodes.length > 1 && nodes.map((n) => n?.target?.id).includes("navbar")) {
-    return nodes.filter((n) => n?.target?.id !== "navbar");
-  }
-
-  return nodes;
+  // console.log("debug_2", "FM getTargetInDirection", {
+  //   direction: direction?.value,
+  //   currentNode,
+  //   targetNodes,
+  //   targets,
+  //   comparisonRect,
+  //   distances,
+  //   match,
+  // });
+
+  return match.target;
 }
 
 /**

package/cellUtils/index.ts

@@ -460,7 +460,9 @@ export const getColorFromData = ({
 }: GetColorFromData): string => {
   const value = getValue(key);
 
-  if (validateColor(value)) {
+  // Temporary hack to fix color validation when alpha is floating point number
+  // https://github.com/dreamyguy/validate-color/issues/44
+  if (validateColor(value.replace(".00", ""))) {
     return value;
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "12.0.0-alpha.3631152042",
+  "version": "12.0.0-alpha.4433422595",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,7 +28,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "12.0.0-alpha.3631152042",
+    "@applicaster/applicaster-types": "12.0.0-alpha.4433422595",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "create-react-context": "^0.2.3",

package/reactHooks/navigation/index.ts

@@ -491,3 +491,18 @@ export const useIsScreenActive = () => {
 
   return pathname === currentRoute;
 };
+
+type Return = (prefix: string) => string;
+
+export const useUniqueRouteSuffix = (): Return => {
+  const pathname = usePathname();
+  const { currentRoute } = useNavigation();
+
+  const suffix = `currentRoute:${currentRoute}_pathname:${pathname}`;
+
+  const withUniqueRouteSuffix = React.useCallback((prefix: string) => {
+    return `${prefix}___${suffix}`;
+  }, []);
+
+  return withUniqueRouteSuffix;
+};