@applicaster/zapp-react-native-ui-components 15.0.0-rc.12 → 15.0.0-rc.13

package/Components/Cell/FocusableWrapper.tsx

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { Focusable } from "@applicaster/zapp-react-native-ui-components/Components/Focusable/FocusableTvOS";
+import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
+
+type Props = {
+  id: string;
+  groupId: string;
+  isParallaxDisabled: boolean;
+  applyWrapper: boolean;
+  children: (focused: boolean) => React.ReactNode;
+  onFocus: (arg1: any, index?: number) => void;
+  onBlur: Callback;
+};
+
+export const FocusableWrapper = ({
+  id,
+  groupId,
+  isParallaxDisabled,
+  children,
+  applyWrapper,
+  onFocus,
+  onBlur,
+}: Props) => {
+  if (applyWrapper) {
+    return (
+      <Focusable
+        id={id}
+        groupId={groupId}
+        isParallaxDisabled={isParallaxDisabled}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        willReceiveFocus={noop}
+        hasReceivedFocus={noop}
+        // @ts-ignore
+        offsetUpdater={noop}
+        isFocusable
+      >
+        {(focused) => children(focused)}
+      </Focusable>
+    );
+  }
+
+  return <>{children(false)}</>;
+};

package/Components/Cell/TvOSCellComponent.tsx

@@ -1,6 +1,9 @@
 import * as React from "react";
 import * as R from "ramda";
 import { View, StyleSheet } from "react-native";
+import { first, filter } from "rxjs/operators";
+
+import { compose } from "@applicaster/zapp-react-native-utils/utils";
 
 import { Focusable } from "@applicaster/zapp-react-native-ui-components/Components/Focusable/FocusableTvOS";
 import { FocusableCell } from "@applicaster/zapp-react-native-ui-components/Components/FocusableCell";
@@ -10,6 +13,9 @@ import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focu
 import { sendSelectCellEvent } from "@applicaster/zapp-react-native-utils/analyticsUtils";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 import { CellWithFocusable } from "./CellWithFocusable";
+import { FocusableWrapper } from "./FocusableWrapper";
+
+import { focusableButtonsRegistration$ } from "@applicaster/zapp-react-native-utils/appUtils/focusManagerAux/utils/utils.ios";
 
 type Props = {
   item: ZappEntry;
@@ -66,6 +72,8 @@ type Props = {
   shouldUpdate: boolean;
   behavior: Behavior;
   componentsMapOffset: number;
+  applyFocusableWrapper: boolean;
+  hasFocusableInside: boolean;
 };
 
 type State = {
@@ -82,7 +90,7 @@ const baseCellStyles = {
   flex: 1,
 } as const;
 
-export class TvOSCellComponent extends React.Component<Props, State> {
+class TvOSCell extends React.Component<Props, State> {
   cell: any;
   target: any;
   layout: any;
@@ -239,6 +247,8 @@ export class TvOSCellComponent extends React.Component<Props, State> {
       groupId,
       isFocusable,
       behavior,
+      applyFocusableWrapper,
+      hasFocusableInside,
     } = this.props;
 
     const { id } = item;
@@ -254,24 +264,33 @@ export class TvOSCellComponent extends React.Component<Props, State> {
       this.onFocus(arg1, index);
     };
 
-    const hasFocusableInside = CellRenderer.hasFocusableInside?.(item);
-
     if (hasFocusableInside) {
       return (
         <View onLayout={this.onLayout}>
-          <CellWithFocusable
-            CellRenderer={CellRenderer}
-            item={item}
+          <FocusableWrapper
             id={focusableId}
-            groupId={(groupId || component?.id).toString()}
+            groupId={String(groupId || component?.id)}
+            isParallaxDisabled={this.layout?.width > 1740}
             onFocus={handleFocus}
-            index={index}
-            scrollTo={this.scrollTo}
-            preferredFocus={preferredFocus}
-            focused={this.props.focused}
-            behavior={behavior}
-            isFocusable={isFocusable}
-          />
+            onBlur={onBlur || this.onBlur}
+            applyWrapper={applyFocusableWrapper}
+          >
+            {(focused) => (
+              <CellWithFocusable
+                CellRenderer={CellRenderer}
+                item={item}
+                id={focusableId}
+                groupId={(groupId || component?.id).toString()}
+                onFocus={handleFocus}
+                index={index}
+                scrollTo={this.scrollTo}
+                preferredFocus={preferredFocus}
+                focused={focused || this.props.focused}
+                behavior={behavior}
+                isFocusable={isFocusable}
+              />
+            )}
+          </FocusableWrapper>
         </View>
       );
     }
@@ -309,3 +328,47 @@ export class TvOSCellComponent extends React.Component<Props, State> {
     );
   }
 }
+
+export function withFocusableWrapperHOC(Component) {
+  return function WrappedComponent(props) {
+    const [focusableViewIsRendered, setFocusableViewIsRendered] =
+      React.useState(false);
+
+    const { CellRenderer, item, isFocusable, groupId, component } = props;
+
+    const focusableGroupId = String(groupId || component?.id);
+
+    const hasFocusableInside = CellRenderer.hasFocusableInside?.(item);
+
+    React.useEffect(() => {
+      // start waiting any first registration of FocusableButton inside this focusableGroup
+      // after it we could get rid of applying focusable-wrapper
+      const subscription = focusableButtonsRegistration$(focusableGroupId)
+        .pipe(
+          filter(() => isFocusable),
+          first()
+        )
+        .subscribe(() => {
+          setFocusableViewIsRendered(true);
+        });
+
+      return () => {
+        subscription.unsubscribe();
+      };
+    }, [isFocusable, focusableGroupId]);
+
+    const applyFocusableWrapper = React.useMemo(() => {
+      return isFocusable && hasFocusableInside && !focusableViewIsRendered;
+    }, [isFocusable, hasFocusableInside, focusableViewIsRendered]);
+
+    return (
+      <Component
+        {...props}
+        applyFocusableWrapper={applyFocusableWrapper}
+        hasFocusableInside={hasFocusableInside}
+      />
+    );
+  };
+}
+
+export const TvOSCellComponent = compose(withFocusableWrapperHOC)(TvOSCell);

package/package.json

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