@applicaster/zapp-react-native-ui-components 14.0.0-alpha.5974411329 → 14.0.0-alpha.6000342231

package/Components/AnimatedInOut/index.tsx

@@ -6,10 +6,6 @@ import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 
 type AnimatedInterpolatedStyle = any;
 
-// type AnimatedInterpolatedStyle =
-//   | Animated.AnimatedInterpolation
-//   | [{ [Key: string]: Animated.AnimatedInterpolation }];
-
 type AnimationConfig = {
   duration: number;
   easing: EasingFunction;
@@ -45,32 +41,57 @@ export function AnimatedInOut({
   children,
 }: Props) {
   const [animatedValue] = React.useState(new Animated.Value(visible ? 1 : 0));
-  const [animating, setAnimating] = React.useState(undefined);
+  const animationRef = React.useRef<Animated.CompositeAnimation | null>(null);
+  const delayTimerRef = React.useRef<NodeJS.Timeout | null>(null);
 
   const previousVisible = usePrevious(toBooleanWithDefaultFalse(visible));
 
-  function startAnimation(toValue, config) {
-    if (animating) {
-      animating.reset();
-    }
-
-    const { duration, easing, delay = 0, onAnimationEnd = noop } = config;
+  const startAnimation = React.useCallback(
+    (toValue: number, config: AnimationConfig) => {
+      if (delayTimerRef.current) {
+        clearTimeout(delayTimerRef.current);
+        delayTimerRef.current = null;
+      }
+
+      if (animationRef.current) {
+        animationRef.current.stop();
+        animationRef.current = null;
+      }
+
+      const { duration, easing, delay = 0, onAnimationEnd = noop } = config;
+
+      const runAnimation = () => {
+        animationRef.current = Animated.timing(animatedValue, {
+          duration,
+          toValue,
+          easing,
+          useNativeDriver: true,
+        });
+
+        animationRef.current.start(({ finished }) => {
+          if (finished) {
+            animationRef.current = null;
+            onAnimationEnd();
+          }
+        });
+      };
+
+      if (delay > 0) {
+        delayTimerRef.current = setTimeout(runAnimation, delay);
+      } else {
+        runAnimation();
+      }
+    },
+    [animatedValue]
+  );
 
-    const compositeAnimation = Animated.timing(animatedValue, {
-      duration,
-      toValue,
-      easing,
-      delay,
-      useNativeDriver: true,
-    }).start(() => {
-      setAnimating(undefined);
-      onAnimationEnd();
-    });
+  React.useEffect(() => {
+    if (previousVisible === undefined) {
+      animatedValue.setValue(visible ? 1 : 0);
 
-    setAnimating(compositeAnimation);
-  }
+      return;
+    }
 
-  React.useEffect(() => {
     if (!previousVisible && visible) {
       startAnimation(1.0, getAnimation(animationConfig, "in"));
     }
@@ -78,7 +99,29 @@ export function AnimatedInOut({
     if (previousVisible && !visible) {
       startAnimation(0.0, getAnimation(animationConfig, "out"));
     }
-  }, [visible, previousVisible]);
+  }, [
+    visible,
+    previousVisible,
+    animatedValue,
+    startAnimation,
+    animationConfig,
+  ]);
+
+  React.useEffect(() => {
+    return () => {
+      if (delayTimerRef.current) {
+        clearTimeout(delayTimerRef.current);
+        delayTimerRef.current = null;
+      }
+
+      if (animationRef.current) {
+        animationRef.current.stop();
+        animationRef.current = null;
+      }
+
+      animatedValue.stopAnimation();
+    };
+  }, [animatedValue]);
 
   const styles = visible
     ? getAnimation(animationConfig, "in").styles
@@ -86,7 +129,7 @@ export function AnimatedInOut({
 
   return (
     <Animated.View
-      renderToHardwareTextureAndroid={animating}
+      renderToHardwareTextureAndroid={!!animationRef.current}
       style={[styles(animatedValue), staticStyles]}
     >
       {children}

package/Components/BaseFocusable/index.tsx

@@ -146,10 +146,14 @@ export class BaseFocusable<
    * @param {Object} scrollDirection
    * @returns {Promise}
    */
-  onFocus: FocusManager.FocusEventCB = (focusable, scrollDirection) => {
+  onFocus: FocusManager.FocusEventCB = (
+    focusable,
+    scrollDirection,
+    context
+  ) => {
     const { onFocus = noop } = this.props;
     this.setFocusedState(true);
-    onFocus(focusable, scrollDirection);
+    onFocus(focusable, scrollDirection, context);
   };
 
   /**
@@ -247,8 +251,8 @@ export class BaseFocusable<
    * @param {Object} scrollDirection
    * @returns {Promise}
    */
-  focus(_, scrollDirection) {
-    return this.onFocus(this, scrollDirection); // invokeComponentMethod(this, "onFocus", scrollDirection);
+  focus(_, scrollDirection, context?: FocusManager.FocusContext) {
+    return this.onFocus(this, scrollDirection, context); // invokeComponentMethod(this, "onFocus", scrollDirection, context);
   }
 
   /**
@@ -258,9 +262,10 @@ export class BaseFocusable<
    */
   blur(
     _,
-    scrollDirection?: FocusManager.Web.Direction | FocusManager.IOS.Direction
+    scrollDirection?: FocusManager.Web.Direction | FocusManager.IOS.Direction,
+    context?: FocusManager.FocusContext
   ) {
-    return this.onBlur(this, scrollDirection);
+    return this.onBlur(this, scrollDirection, context);
   }
 
   /**
@@ -272,7 +277,7 @@ export class BaseFocusable<
    * @param {string} scrollDirection string representation of the direction of the navigation which landed
    * to this item being focused
    */
-  _executeFocusSequence(methodNames, scrollDirection) {
+  _executeFocusSequence(methodNames, scrollDirection, context) {
     return R.reduce(
       (sequence, methodName) => {
         const method = this[methodName]; // Access the method by name
@@ -284,7 +289,7 @@ export class BaseFocusable<
         }
 
         return sequence
-          .then(() => method.call(this, scrollDirection))
+          .then(() => method.call(this, this, scrollDirection, context))
           .catch((e) => {
             throw e; // Re-throw for consistent error handling
           });
@@ -294,15 +299,21 @@ export class BaseFocusable<
     );
   }
 
-  setFocus(scrollDirection) {
+  setFocus(
+    scrollDirection?: ScrollDirection,
+    context?: FocusManager.FocusContext
+  ) {
     const focusMethods = ["willReceiveFocus", "focus", "hasReceivedFocus"];
 
-    return this._executeFocusSequence(focusMethods, scrollDirection);
+    return this._executeFocusSequence(focusMethods, scrollDirection, context);
   }
 
-  setBlur(scrollDirection) {
+  setBlur(
+    scrollDirection?: ScrollDirection,
+    context?: FocusManager.FocusContext
+  ) {
     const blurMethods = ["willLoseFocus", "blur", "hasLostFocus"];
 
-    return this._executeFocusSequence(blurMethods, scrollDirection);
+    return this._executeFocusSequence(blurMethods, scrollDirection, context);
   }
 }

package/Components/Cell/Cell.tsx

@@ -8,6 +8,7 @@ import { getItemType } from "@applicaster/zapp-react-native-utils/navigationUtil
 import { SCREEN_TYPES } from "@applicaster/zapp-react-native-utils/navigationUtils/itemTypes";
 import { sendSelectCellEvent } from "@applicaster/zapp-react-native-utils/analyticsUtils";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
+import { CellFocusedStateContextProvider } from "@applicaster/zapp-react-native-ui-components/Contexts/CellFocusedStateContext";
 
 import { CellWithFocusable } from "./CellWithFocusable";
 import { BaseFocusable } from "../BaseFocusable";
@@ -15,6 +16,7 @@ import { AccessibilityManager } from "@applicaster/zapp-react-native-utils/appUt
 import { styles } from "./styles";
 
 type Props = {
+  dataLength: number;
   item: ZappEntry;
   index: number;
   shouldScrollHorizontally: (arg1: [any]) => boolean | null | undefined;
@@ -67,9 +69,12 @@ type Props = {
 
 type State = {
   hasFocusableInside: boolean;
+  cellFocused: boolean;
 };
 
 export class CellComponent extends React.Component<Props, State> {
+  accessibilityManager: AccessibilityManager;
+
   constructor(props) {
     super(props);
     this.onPress = this.onPress.bind(this);
@@ -79,10 +84,14 @@ export class CellComponent extends React.Component<Props, State> {
     this.hasReceivedFocus = this.hasReceivedFocus.bind(this);
     this.scrollVertically = this.scrollVertically.bind(this);
     this.scrollToIndex = this.scrollToIndex.bind(this);
+    this.handleAccessibilityFocus = this.handleAccessibilityFocus.bind(this);
 
     this.state = {
       hasFocusableInside: props.CellRenderer.hasFocusableInside?.(props.item),
+      cellFocused: false,
     };
+
+    this.accessibilityManager = AccessibilityManager.getInstance();
   }
 
   setScreenLayout(componentAnchorPointY, screenLayout) {
@@ -130,6 +139,8 @@ export class CellComponent extends React.Component<Props, State> {
     } = this.props;
 
     if (isFocusable) {
+      this.setState({ cellFocused: true });
+
       if (
         shouldUpdate &&
         shouldScrollVertically?.(mouse, focusable, id, title)
@@ -139,7 +150,9 @@ export class CellComponent extends React.Component<Props, State> {
     }
   }
 
-  onBlur() {}
+  onBlur() {
+    this.setState({ cellFocused: false });
+  }
 
   willReceiveFocus() {}
 
@@ -183,6 +196,25 @@ export class CellComponent extends React.Component<Props, State> {
     return !isFocusable ? false : focused || focusableFocused;
   }
 
+  handleAccessibilityFocus(index, dataLength) {
+    // For loop scrolling, calculate the correct logical index
+    const logicalIndex = dataLength ? index % dataLength : index;
+
+    const positionLabel = dataLength
+      ? `item ${logicalIndex + 1} of ${dataLength}`
+      : "";
+
+    if (this.state.hasFocusableInside) {
+      this.accessibilityManager.readText({
+        text: " ",
+      });
+    } else {
+      this.accessibilityManager.readText({
+        text: `${positionLabel}`,
+      });
+    }
+  }
+
   componentDidUpdate(prevProps: Readonly<Props>) {
     if (prevProps.item !== this.props.item) {
       this.setState({
@@ -191,6 +223,8 @@ export class CellComponent extends React.Component<Props, State> {
         ),
       });
     }
+
+    this.handleAccessibilityFocus(this.props.index, this.props.dataLength);
   }
 
   render() {
@@ -212,7 +246,6 @@ export class CellComponent extends React.Component<Props, State> {
     } = this.props;
 
     const { id } = item;
-
     const focusableId = join("-", [component?.id, id, index]);
 
     const handleFocus = (focusable, mouse) => {
@@ -223,73 +256,67 @@ export class CellComponent extends React.Component<Props, State> {
 
     if (this.state.hasFocusableInside) {
       return (
-        <CellWithFocusable
-          CellRenderer={CellRenderer}
-          item={item}
-          id={focusableId}
-          groupId={groupId || component?.id}
-          onFocus={handleFocus}
-          index={index}
-          scrollTo={this.scrollToIndex()}
-          isFocusable={isFocusable}
-          skipFocusManagerRegistration={skipFocusManagerRegistration}
-          behavior={behavior}
-        />
+        <CellFocusedStateContextProvider cellFocused={this.state.cellFocused}>
+          <CellWithFocusable
+            CellRenderer={CellRenderer}
+            item={item}
+            id={focusableId}
+            groupId={groupId || component?.id}
+            onFocus={handleFocus}
+            onBlur={onBlur || this.onBlur}
+            index={index}
+            scrollTo={this.scrollToIndex()}
+            isFocusable={isFocusable}
+            skipFocusManagerRegistration={skipFocusManagerRegistration}
+            behavior={behavior}
+          />
+        </CellFocusedStateContextProvider>
       );
     }
 
     return (
-      <View
-        testID={`${component?.id}-${id}`}
-        accessible={false}
-        style={styles.touchableCell}
-      >
-        <Focusable
-          id={focusableId}
-          groupId={groupId || component?.id}
-          onFocus={handleFocus}
-          onBlur={onBlur || this.onBlur}
-          onPress={this.onPress}
-          willReceiveFocus={willReceiveFocus || this.willReceiveFocus}
-          hasReceivedFocus={hasReceivedFocus || this.hasReceivedFocus}
-          preferredFocus={preferredFocus}
-          offsetUpdater={offsetUpdater}
-          style={styles.baseCell}
-          isFocusable={isFocusable}
-          skipFocusManagerRegistration={skipFocusManagerRegistration}
+      <CellFocusedStateContextProvider cellFocused={this.state.cellFocused}>
+        <View
+          testID={`${component?.id}-${id}`}
+          accessible={false}
+          style={styles.touchableCell}
         >
-          {(focused, event) => {
-            const isFocused = this.isCellFocused(focused);
-
-            if (isFocused) {
-              const accessibilityManager = AccessibilityManager.getInstance();
-
-              const accessibilityTitle =
-                item?.extensions?.accessibility?.label || item?.title || "";
-
-              const accessibilityHint =
-                item?.extensions?.accessibility?.hint || "";
-
-              accessibilityManager.readText({
-                text: `${accessibilityTitle} ${accessibilityHint}`,
-              });
-            }
-
-            return (
-              <FocusableCell
-                {...{
-                  index,
-                  CellRenderer,
-                  item,
-                  focused: isFocused,
-                  scrollTo: this.scrollToIndex(event),
-                  behavior,
-                }}
-              />
-            );
-          }}
-        </Focusable>
-      </View>
+          <Focusable
+            id={focusableId}
+            groupId={groupId || component?.id}
+            onFocus={handleFocus}
+            onBlur={onBlur || this.onBlur}
+            onPress={this.onPress}
+            willReceiveFocus={willReceiveFocus || this.willReceiveFocus}
+            hasReceivedFocus={hasReceivedFocus || this.hasReceivedFocus}
+            preferredFocus={preferredFocus}
+            offsetUpdater={offsetUpdater}
+            style={styles.baseCell}
+            isFocusable={isFocusable}
+            skipFocusManagerRegistration={skipFocusManagerRegistration}
+            {...this.accessibilityManager.getButtonAccessibilityProps(
+              item?.extensions?.accessibility?.label || item?.title
+            )}
+          >
+            {(focused, event) => {
+              const isFocused = this.isCellFocused(focused);
+
+              return (
+                <FocusableCell
+                  {...{
+                    index,
+                    CellRenderer,
+                    item,
+                    focused: isFocused,
+                    scrollTo: this.scrollToIndex(event),
+                    behavior,
+                  }}
+                />
+              );
+            }}
+          </Focusable>
+        </View>
+      </CellFocusedStateContextProvider>
     );
   }
 }

package/Components/Cell/CellWithFocusable.tsx

@@ -14,6 +14,7 @@ type Props = {
   id: string;
   groupId: string;
   onFocus: Function;
+  onBlur?: Function;
   index: number;
   scrollTo: Function;
   preferredFocus?: boolean;
@@ -33,6 +34,7 @@ export function CellWithFocusable(props: Props) {
     id,
     groupId,
     onFocus,
+    onBlur = noop,
     scrollTo = noop,
     preferredFocus,
     skipFocusManagerRegistration,
@@ -78,6 +80,7 @@ export function CellWithFocusable(props: Props) {
   const onGroupBlur = React.useCallback(() => {
     if (!skipFocusManagerRegistration) {
       setIsFocused(false);
+      onBlur?.();
     }
   }, [skipFocusManagerRegistration]);
 

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";
@@ -9,7 +12,11 @@ import { SCREEN_TYPES } from "@applicaster/zapp-react-native-utils/navigationUti
 import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
 import { sendSelectCellEvent } from "@applicaster/zapp-react-native-utils/analyticsUtils";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
+import { toBooleanWithDefaultTrue } from "@applicaster/zapp-react-native-utils/booleanUtils";
 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 +73,8 @@ type Props = {
   shouldUpdate: boolean;
   behavior: Behavior;
   componentsMapOffset: number;
+  applyFocusableWrapper: boolean;
+  hasFocusableInside: boolean;
 };
 
 type State = {
@@ -82,7 +91,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 +248,8 @@ export class TvOSCellComponent extends React.Component<Props, State> {
       groupId,
       isFocusable,
       behavior,
+      applyFocusableWrapper,
+      hasFocusableInside,
     } = this.props;
 
     const { id } = item;
@@ -254,24 +265,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 +329,49 @@ 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, groupId, component } = props;
+
+    const isFocusable = toBooleanWithDefaultTrue(props?.isFocusable);
+
+    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/Components/Cell/__tests__/CellWIthFocusable.test.js

@@ -1,12 +1,13 @@
 import { View } from "react-native";
 import React from "react";
-import { act, render } from "@testing-library/react-native";
+import { act } from "@testing-library/react-native";
 import { CellWithFocusable } from "../CellWithFocusable.tsx";
 
 import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
+import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils/index.tsx";
 
 const renderWith = (props) => {
-  return render(<CellWithFocusable {...props} />);
+  return renderWithProviders(<CellWithFocusable {...props} />);
 };
 
 describe("CellWithFocusable", () => {