@applicaster/zapp-react-native-ui-components 14.0.0-rc.61 → 14.0.0-rc.62

package/Components/Focusable/Touchable.tsx

@@ -9,7 +9,8 @@ type Props = {
   onLongPress?: (ref: FocusManager.TouchableRef) => void;
   onFocus?: (
     ref: FocusManager.TouchableRef,
-    options: FocusManager.Android.CallbackOptions
+    options: FocusManager.Android.CallbackOptions,
+    context: Option<FocusManager.FocusContext>
   ) => void;
   onBlur?: (
     ref: FocusManager.TouchableRef,
@@ -39,9 +40,10 @@ export class Touchable extends React.Component<Props> {
 
   onFocus(
     focusableRef: FocusManager.TouchableRef,
-    options: FocusManager.Android.CallbackOptions
+    options: FocusManager.Android.CallbackOptions,
+    context: Option<FocusManager.FocusContext>
   ): void {
-    this.props?.onFocus?.(focusableRef, options);
+    this.props?.onFocus?.(focusableRef, options, context);
   }
 
   onBlur(

package/Components/Focusable/index.android.tsx

@@ -22,7 +22,8 @@ type Props = {
   onPress?: (ref: FocusManager.FocusableRef) => void;
   onFocus?: (
     ref: FocusManager.FocusableRef,
-    options: FocusManager.Android.CallbackOptions
+    options: FocusManager.Android.CallbackOptions,
+    context?: FocusManager.FocusContext
   ) => void;
   onBlur?: (
     ref: FocusManager.FocusableRef,
@@ -32,6 +33,7 @@ type Props = {
   onPressOut?: (ref: FocusManager.FocusableRef) => void;
   onLongPress?: (ref: FocusManager.FocusableRef) => void;
   onRegister?: () => void;
+  onUnregister?: () => void;
   isFocusableCell?: boolean;
   /** only for FocusableScrollView */
   onSetIsFocusable?: (isFocusable: boolean) => void;
@@ -70,6 +72,7 @@ function FocusableComponent(props: Props, forwardedRef) {
     onPressOut,
     onLongPress,
     onRegister = noop,
+    onUnregister = noop,
     isFocusableCell = true,
     onSetIsFocusable,
   } = props;
@@ -113,9 +116,10 @@ function FocusableComponent(props: Props, forwardedRef) {
 
       return () => {
         unregister();
+        onUnregister();
       };
     }
-  }, [id, onRegister, isFocusableCell, parentFocusableId]);
+  }, [id, onRegister, onUnregister, isFocusableCell, parentFocusableId]);
 
   if (R.isNil(id)) {
     // eslint-disable-next-line no-console
@@ -125,9 +129,9 @@ function FocusableComponent(props: Props, forwardedRef) {
   }
 
   const _onFocus = React.useCallback(
-    (ref, options) => {
+    (ref, options, context) => {
       setFocused(true);
-      onFocus?.(ref, options);
+      onFocus?.(ref, options, context);
     },
     [onFocus]
   );

package/Components/FocusableList/FocusableItem.tsx

@@ -10,7 +10,8 @@ type FocusableItemComponentProps = {
   onFocus: (
     element: FocusManager.FocusableRef,
     renderArgs: { item: FocusableItemComponentProps["item"]; index: number },
-    direction: FocusManager.Android.FocusNavigationDirections
+    options: FocusManager.Android.CallbackOptions,
+    context: Option<FocusManager.FocusContext>
   ) => void;
   onListElementFocus?: (any, RenderItemProps, Direction) => void;
   onListElementBlur?: (any, RenderItemProps, Direction) => void;
@@ -45,8 +46,8 @@ const FocusableItemComponent = ({
   const renderArgs = { item, index };
 
   const onFocusHandler = React.useCallback(
-    (element, direction) => {
-      onFocus?.(element, renderArgs, direction);
+    (element, options, context) => {
+      onFocus?.(element, renderArgs, options, context);
     },
     [item, onFocus]
   );

package/Components/FocusableList/FocusableListItemWrapper.tsx

@@ -17,7 +17,8 @@ type Props = {
   onFocus: (
     element: FocusManager.FocusableRef,
     renderArgs: { item: Item; index: number },
-    direction: FocusManager.Android.FocusNavigationDirections
+    options: FocusManager.Android.CallbackOptions,
+    context: FocusManager.FocusContext
   ) => void;
   onListElementBlur?: (any, RenderItemProps, Direction) => void;
   onListElementPress?: (any, RenderItemProps) => void;

package/Components/FocusableList/hooks/useCellState.android.ts

@@ -10,15 +10,25 @@ export const useCellState = (id: string) => {
   );
 
   React.useEffect(() => {
-    const handler = (focusable) => {
+    const focusHandler = (focusable) => {
       const isChildren = focusManager.isFocusableChildOf(focusable, id);
+
       setCurrentCellFocused(isChildren);
     };
 
-    focusManager.on(FOCUS_EVENTS.FOCUS, handler);
+    focusManager.on(FOCUS_EVENTS.FOCUS, focusHandler);
+
+    const resetHandler = ({ focusedId }) => {
+      if (id === focusedId) {
+        setCurrentCellFocused(false);
+      }
+    };
+
+    focusManager.on(FOCUS_EVENTS.RESET, resetHandler);
 
     return () => {
-      focusManager.removeHandler(FOCUS_EVENTS.FOCUS, handler);
+      focusManager.removeHandler(FOCUS_EVENTS.FOCUS, focusHandler);
+      focusManager.removeHandler(FOCUS_EVENTS.RESET, resetHandler);
     };
   }, [id]);
 

package/Components/FocusableList/index.tsx

@@ -30,17 +30,24 @@ export type IListRenderItem<ItemT> = (
 export const getFocusableId = (parentId, index) =>
   `${parentId}___index:${index}`;
 
+type Item = ZappEntry | ZappUIComponent | any;
+
 export type Props<ItemT> = FlatListProps<ItemT> & {
   id?: number | string;
   horizontal?: boolean;
   loop?: boolean;
   numColumns?: number;
   data: ZappEntry[] | ZappUIComponent[] | any[];
-  onListElementFocus?: (any, RenderItemProps, Direction) => void;
-  onListElementBlur?: (any, RenderItemProps, Direction) => void;
-  onListElementPress?: (any, RenderItemProps) => void;
-  onListElementPressOut?: (any, RenderItemProps) => void;
-  onListElementLongPress?: (any, RenderItemProps) => void;
+  onListElementFocus?: (
+    element: FocusManager.FocusableRef,
+    renderItemProps: { item: Item; index: number },
+    options: FocusManager.Android.CallbackOptions,
+    context: FocusManager.FocusContext
+  ) => void;
+  onListElementBlur?: (element, renderItemProps, direction) => void;
+  onListElementPress?: (element, renderItemProps) => void;
+  onListElementPressOut?: (element, renderItemProps) => void;
+  onListElementLongPress?: (element, renderItemProps) => void;
   focusableItemProps?: any;
   focused?: boolean;
   initialScrollIndex?: number;
@@ -138,11 +145,11 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
   );
 
   const onFocus = React.useCallback(
-    (element, renderArgs, direction) => {
+    (element, renderArgs, options, context) => {
       const { index } = renderArgs;
 
       updateFocusedIndex?.(index);
-      onListElementFocus?.(element, renderArgs, direction);
+      onListElementFocus?.(element, renderArgs, options, context);
     },
     [onListElementFocus, updateFocusedIndex]
   );

package/Components/ScreenRevealManager/__tests__/ScreenRevealManager.test.ts

@@ -19,9 +19,9 @@ describe("ScreenRevealManager", () => {
 
     const manager = new ScreenRevealManager(componentsToRender, mockCallback);
 
-    expect(manager["numberOfComponentsWaitToLoadBeforePresent"]).toBe(3);
+    expect(manager.numberOfComponentsWaitToLoadBeforePresent).toBe(3);
 
-    expect(manager["renderingState"]).toEqual([
+    expect(manager.renderingState).toEqual([
       COMPONENT_LOADING_STATE.UNKNOWN,
       COMPONENT_LOADING_STATE.UNKNOWN,
       COMPONENT_LOADING_STATE.UNKNOWN,

package/events/index.ts

@@ -3,4 +3,6 @@ export enum QBUIComponentEvents {
   topMenuBarTV_onFocus = "topMenuBarTV_onFocus",
   navigatorReplaceItem = "navigatorReplaceItem",
   scrollVerticallyToInitialOffset = "scrollVerticallyToInitialOffset",
+  focusOnSelectedTab = "focusOnSelectedTab",
+  focusOnSelectedTopMenuItem = "focusOnSelectedTopMenuItem",
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "14.0.0-rc.61",
+  "version": "14.0.0-rc.62",
   "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": "14.0.0-rc.61",
-    "@applicaster/zapp-react-native-bridge": "14.0.0-rc.61",
-    "@applicaster/zapp-react-native-redux": "14.0.0-rc.61",
-    "@applicaster/zapp-react-native-utils": "14.0.0-rc.61",
+    "@applicaster/applicaster-types": "14.0.0-rc.62",
+    "@applicaster/zapp-react-native-bridge": "14.0.0-rc.62",
+    "@applicaster/zapp-react-native-redux": "14.0.0-rc.62",
+    "@applicaster/zapp-react-native-utils": "14.0.0-rc.62",
     "promise": "^8.3.0",
     "url": "^0.11.0",
     "uuid": "^3.3.2"