@applicaster/zapp-react-native-ui-components 15.0.0-alpha.3514407021 → 15.0.0-alpha.3564837831

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.ios.ts

@@ -22,6 +22,7 @@ type Props = {
   onFocus?: FocusManager.FocusEventCB;
   onBlur?: FocusManager.FocusEventCB;
   selected?: boolean;
+  skipFocusManagerRegistration?: boolean;
 };
 
 export class BaseFocusable<
@@ -61,10 +62,14 @@ export class BaseFocusable<
   }
 
   componentDidMount() {
-    const { id } = this.props;
+    const { id, skipFocusManagerRegistration } = this.props;
     const component = this;
     this.node = this.ref.current;
 
+    if (skipFocusManagerRegistration) {
+      return;
+    }
+
     focusManager.register({
       id,
       component: component,
@@ -118,7 +123,12 @@ export class BaseFocusable<
 
   componentWillUnmount() {
     this._isMounted = false;
-    const { id } = this.props;
+    const { id, skipFocusManagerRegistration } = this.props;
+
+    if (skipFocusManagerRegistration) {
+      return;
+    }
+
     focusManager.unregister(id, { group: this.isGroup || false });
   }
 

package/Components/Cell/Cell.tsx

@@ -208,14 +208,14 @@ export class CellComponent extends React.Component<Props, State> {
       this.accessibilityManager.readText({
         text: " ",
       });
-    } else {
+    } else if (this.state.cellFocused) {
       this.accessibilityManager.readText({
         text: `${positionLabel}`,
       });
     }
   }
 
-  componentDidUpdate(prevProps: Readonly<Props>) {
+  componentDidUpdate(prevProps: Readonly<Props>, prevState: Readonly<State>) {
     if (prevProps.item !== this.props.item) {
       this.setState({
         hasFocusableInside: this.props.CellRenderer.hasFocusableInside?.(
@@ -224,7 +224,12 @@ export class CellComponent extends React.Component<Props, State> {
       });
     }
 
-    this.handleAccessibilityFocus(this.props.index, this.props.dataLength);
+    if (
+      prevState.cellFocused !== this.state.cellFocused ||
+      this.state.hasFocusableInside
+    ) {
+      this.handleAccessibilityFocus(this.props.index, this.props.dataLength);
+    }
   }
 
   render() {

package/Components/Cell/FocusableWrapper.tsx

@@ -10,6 +10,7 @@ type Props = {
   children: (focused: boolean) => React.ReactNode;
   onFocus: (arg1: any, index?: number) => void;
   onBlur: Callback;
+  skipFocusManagerRegistration?: boolean;
 };
 
 export const FocusableWrapper = ({
@@ -20,6 +21,7 @@ export const FocusableWrapper = ({
   applyWrapper,
   onFocus,
   onBlur,
+  skipFocusManagerRegistration,
 }: Props) => {
   if (applyWrapper) {
     return (
@@ -34,6 +36,7 @@ export const FocusableWrapper = ({
         // @ts-ignore
         offsetUpdater={noop}
         isFocusable
+        skipFocusManagerRegistration={skipFocusManagerRegistration}
       >
         {(focused) => children(focused)}
       </Focusable>

package/Components/Cell/TvOSCellComponent.tsx

@@ -17,6 +17,7 @@ import { CellWithFocusable } from "./CellWithFocusable";
 import { FocusableWrapper } from "./FocusableWrapper";
 
 import { focusableButtonsRegistration$ } from "@applicaster/zapp-react-native-utils/appUtils/focusManagerAux/utils/utils.ios";
+import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
 
 type Props = {
   item: ZappEntry;
@@ -37,6 +38,10 @@ type Props = {
   component: {
     id: number | string;
     component_type: string;
+    styles?: {
+      component_margin_top?: number;
+      component_padding_top?: number;
+    };
   };
   selected: boolean;
   CellRenderer: React.FunctionComponent<any> & {
@@ -75,6 +80,7 @@ type Props = {
   componentsMapOffset: number;
   applyFocusableWrapper: boolean;
   hasFocusableInside: boolean;
+  skipFocusManagerRegistration?: boolean;
 };
 
 type State = {
@@ -201,14 +207,25 @@ class TvOSCell extends React.Component<Props, State> {
     ) {
       const { headerOffset } = getHeaderOffset();
 
-      const extraAnchorPointYOffset =
-        screenLayout?.extraAnchorPointYOffset || 0;
+      const extraAnchorPointYOffset = toNumberWithDefaultZero(
+        screenLayout?.extraAnchorPointYOffset
+      );
+
+      const componentMarginTop = toNumberWithDefaultZero(
+        component?.styles?.component_margin_top
+      );
+
+      const componentPaddingTop = toNumberWithDefaultZero(
+        component?.styles?.component_padding_top
+      );
 
       const totalOffset =
         headerOffset +
-          (componentAnchorPointY || 0) +
-          extraAnchorPointYOffset -
-          componentsMapOffset || 0;
+        toNumberWithDefaultZero(componentAnchorPointY) +
+        extraAnchorPointYOffset -
+        toNumberWithDefaultZero(componentsMapOffset) +
+        componentMarginTop +
+        componentPaddingTop;
 
       mainOffsetUpdater?.(
         { tag: this.target },
@@ -250,6 +267,7 @@ class TvOSCell extends React.Component<Props, State> {
       behavior,
       applyFocusableWrapper,
       hasFocusableInside,
+      skipFocusManagerRegistration,
     } = this.props;
 
     const { id } = item;
@@ -275,6 +293,7 @@ class TvOSCell extends React.Component<Props, State> {
             onFocus={handleFocus}
             onBlur={onBlur || this.onBlur}
             applyWrapper={applyFocusableWrapper}
+            skipFocusManagerRegistration={skipFocusManagerRegistration}
           >
             {(focused) => (
               <CellWithFocusable
@@ -289,6 +308,7 @@ class TvOSCell extends React.Component<Props, State> {
                 focused={focused || this.props.focused}
                 behavior={behavior}
                 isFocusable={isFocusable}
+                skipFocusManagerRegistration={skipFocusManagerRegistration}
               />
             )}
           </FocusableWrapper>
@@ -311,6 +331,7 @@ class TvOSCell extends React.Component<Props, State> {
           offsetUpdater={offsetUpdater}
           style={baseCellStyles}
           isFocusable={isFocusable}
+          skipFocusManagerRegistration={skipFocusManagerRegistration}
         >
           {(focused) => (
             <FocusableCell

package/Components/Focusable/Focusable.tsx

@@ -8,6 +8,8 @@ import { withFocusableContext } from "../../Contexts/FocusableGroupContext/withF
 import { StyleSheet, ViewStyle } from "react-native";
 import { AccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager";
 
+import { isSearchInputId } from "@applicaster/zapp-react-native-utils/searchUtils";
+
 type Props = {
   initialFocus?: boolean;
   id: string;
@@ -106,7 +108,7 @@ class Focusable extends BaseFocusable<Props> {
   onMouseEnter() {
     const { id } = this.props;
 
-    if (id !== "search_input_group_id") {
+    if (!isSearchInputId(id)) {
       this.mouse = true;
       this.props?.handleFocus?.({ mouse: true });
 
@@ -120,7 +122,7 @@ class Focusable extends BaseFocusable<Props> {
   onMouseLeave() {
     const { id } = this.props;
 
-    if (id !== "search_input_group_id") {
+    if (!isSearchInputId(id)) {
       this.mouse = false;
       this.blur(null);
     }

package/Components/Focusable/FocusableTvOS.tsx

@@ -10,8 +10,12 @@ import {
   forceFocusableFocus,
 } from "@applicaster/zapp-react-native-utils/appUtils/focusManager/index.ios";
 import { findNodeHandle, ViewStyle } from "react-native";
+import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 
-function noop() {}
+import {
+  emitDidFocused,
+  emitNativeRegistered,
+} from "@applicaster/zapp-react-native-utils/appUtils/focusManagerAux/utils/utils.ios";
 
 type Props = {
   id: string;
@@ -39,6 +43,7 @@ type Props = {
   hasReceivedFocus: () => void;
   offsetUpdater: (arg1: string, arg2: number) => number;
   style: ViewStyle;
+  skipFocusManagerRegistration?: boolean;
 };
 
 export class Focusable extends BaseFocusable<Props> {
@@ -53,6 +58,7 @@ export class Focusable extends BaseFocusable<Props> {
     this.nextFocusableReactTags = {};
     this.preferredFocus = this.preferredFocus.bind(this);
     this.measureView = this.measureView.bind(this);
+    this.onRegistered = this.onRegistered.bind(this);
   }
 
   /**
@@ -84,6 +90,9 @@ export class Focusable extends BaseFocusable<Props> {
       });
     }
 
+    const id: string = nativeEvent.itemID;
+    emitDidFocused(id);
+
     onFocus(nativeEvent);
   }
 
@@ -169,6 +178,13 @@ export class Focusable extends BaseFocusable<Props> {
     });
   }
 
+  onRegistered({ nativeEvent }) {
+    const groupId = nativeEvent?.groupId;
+    const id = nativeEvent?.itemId;
+
+    emitNativeRegistered({ id, groupId, isGroup: false });
+  }
+
   render() {
     const {
       children,
@@ -203,6 +219,7 @@ export class Focusable extends BaseFocusable<Props> {
         focusable={isFocusable}
         {...this.nextFocusableReactTags}
         {...otherProps}
+        onRegistered={this.onRegistered}
       >
         {typeof children === "function" ? children(focused) : children}
       </FocusableItemNative>

package/Components/Focusable/__tests__/__snapshots__/FocusableTvOS.test.tsx.snap

@@ -5,6 +5,7 @@ exports[`FocusableTvOS should render correctly 1`] = `
   groupId={null}
   itemId={null}
   onLayout={[Function]}
+  onRegistered={[Function]}
   onViewBlur={[Function]}
   onViewFocus={[Function]}
   onViewPress={[Function]}

package/Components/FocusableGroup/FocusableTvOS.tsx

@@ -1,7 +1,15 @@
 import * as React from "react";
+import { compose } from "@applicaster/zapp-react-native-utils/utils";
 import { FocusableGroupNative } from "@applicaster/zapp-react-native-ui-components/Components/NativeFocusables";
 import { BaseFocusable } from "@applicaster/zapp-react-native-ui-components/Components/BaseFocusable";
 import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
+import { LayoutContext } from "@applicaster/zapp-react-native-tvos-app/Context/LayoutContext";
+import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useRoute";
+import { isScreenPlayable } from "@applicaster/zapp-react-native-utils/navigationUtils/itemTypes";
+import { emitNativeRegistered } from "@applicaster/zapp-react-native-utils/appUtils/focusManagerAux/utils/utils.ios";
+import { withAboveTabsScreenContextConsumer } from "@applicaster/zapp-react-native-ui-components/Contexts/AboveTabsScreenContext";
+
+import { useIsFocusEnabled } from "./hooks";
 
 const { log_verbose } = createLogger({
   subsystem: "General",
@@ -33,7 +41,16 @@ type Props = {
   screenData: { screenId: string; parentScreenId: string };
 };
 
-export class FocusableGroup extends BaseFocusable<Props> {
+class FocusableGroupComponent extends BaseFocusable<Props> {
+  public readonly isGroup: boolean = true;
+
+  onRegistered = ({ nativeEvent }) => {
+    const groupId = nativeEvent?.groupId;
+    const id = nativeEvent?.itemId;
+
+    emitNativeRegistered({ id, groupId, isGroup: true });
+  };
+
   render() {
     const {
       children,
@@ -66,9 +83,46 @@ export class FocusableGroup extends BaseFocusable<Props> {
         onGroupBlur={onGroupBlur}
         style={style}
         {...otherProps}
+        onRegistered={this.onRegistered}
       >
         {children}
       </FocusableGroupNative>
     );
   }
 }
+
+export const withFocusDisabledHOC = (Component) => {
+  return function WithFocusDisabledHOC(props) {
+    // @ts-ignore
+    const { screenFocusBlocked } = React.useContext(LayoutContext.ReactContext);
+
+    const { pathname } = useRoute();
+
+    const isPlayerPresented = isScreenPlayable(pathname);
+
+    const blockScreenFocus = isPlayerPresented === false && screenFocusBlocked;
+
+    return (
+      <Component
+        {...props}
+        isFocusDisabled={blockScreenFocus || props.isFocusDisabled}
+      />
+    );
+  };
+};
+
+const withAboveTabsScreenHOC = (Component) => {
+  return function WithAboveTabsScreenHOC(props) {
+    const { aboveTabsScreen } = props;
+
+    const isFocusEnabled = useIsFocusEnabled(aboveTabsScreen);
+
+    return <Component {...props} isFocusDisabled={!isFocusEnabled} />;
+  };
+};
+
+export const FocusableGroup = compose(
+  withAboveTabsScreenContextConsumer,
+  withAboveTabsScreenHOC,
+  withFocusDisabledHOC
+)(FocusableGroupComponent);

package/Components/FocusableGroup/hooks/__tests__/useIsFocusEnabled.test.ts

@@ -0,0 +1,113 @@
+import { act, renderHook } from "@testing-library/react-native";
+
+import { useIsFocusEnabled } from "../useIsFocusEnabled";
+
+// ----------------- MOCKS -----------------
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/focusManager/index.ios",
+  () => ({
+    focusManager: {
+      isFocusOnMenu: jest.fn(),
+      isFocusOnTabsScreen: jest.fn(),
+    },
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/focusManagerAux/utils/utils.ios",
+  () => {
+    const { Subject } = require("rxjs");
+
+    return {
+      willFocused$: new Subject<void>(),
+      didFocused$: new Subject<void>(),
+      TabsScreenScreenSelectorContainerRegistry: {
+        observable$: new Subject<string>(),
+      },
+    };
+  }
+);
+
+import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager/index.ios";
+import {
+  willFocused$,
+  didFocused$,
+  TabsScreenScreenSelectorContainerRegistry,
+} from "@applicaster/zapp-react-native-utils/appUtils/focusManagerAux/utils/utils.ios";
+
+// ----------------- TESTS -----------------
+describe("useIsFocusEnabled", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("returns true by default", () => {
+    const { result } = renderHook(() => useIsFocusEnabled(true));
+
+    expect(result.current).toBe(true);
+  });
+
+  it("disables focus when focus moves to menu", () => {
+    (focusManager.isFocusOnMenu as jest.Mock).mockReturnValue(true);
+
+    const { result } = renderHook(() => useIsFocusEnabled(true));
+
+    act(() => {
+      willFocused$.next();
+      didFocused$.next();
+    });
+
+    expect(result.current).toBe(false);
+  });
+
+  it("re-enables focus when focus lands on tabs screen", () => {
+    (focusManager.isFocusOnMenu as jest.Mock).mockReturnValue(true);
+    (focusManager.isFocusOnTabsScreen as jest.Mock).mockReturnValue(true);
+
+    const { result } = renderHook(() => useIsFocusEnabled(true));
+
+    // Disable focus first
+    act(() => {
+      willFocused$.next();
+      didFocused$.next();
+    });
+
+    expect(result.current).toBe(false);
+
+    // Enable focus again
+    act(() => {
+      didFocused$.next();
+      TabsScreenScreenSelectorContainerRegistry.observable$.next("tabs-id");
+    });
+
+    expect(result.current).toBe(true);
+  });
+
+  it("does nothing when not above tabs screen", () => {
+    const { result } = renderHook(() => useIsFocusEnabled(false));
+
+    act(() => {
+      willFocused$.next();
+      didFocused$.next();
+      TabsScreenScreenSelectorContainerRegistry.observable$.next("id");
+    });
+
+    expect(result.current).toBe(true);
+  });
+
+  it("cleans up subscriptions on unmount", () => {
+    (focusManager.isFocusOnMenu as jest.Mock).mockReturnValue(true);
+
+    const { unmount, result } = renderHook(() => useIsFocusEnabled(true));
+
+    unmount();
+
+    act(() => {
+      willFocused$.next();
+      didFocused$.next();
+    });
+
+    // State should not change after unmount
+    expect(result.current).toBe(true);
+  });
+});

package/Components/FocusableGroup/hooks/index.ts

@@ -0,0 +1 @@
+export { useIsFocusEnabled } from "./useIsFocusEnabled";

package/Components/FocusableGroup/hooks/useIsFocusEnabled.ts

@@ -0,0 +1,68 @@
+import * as React from "react";
+import { switchMap, first, filter, repeat } from "rxjs/operators";
+import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager/index.ios";
+
+import {
+  willFocused$,
+  didFocused$,
+  TabsScreenScreenSelectorContainerRegistry,
+} from "@applicaster/zapp-react-native-utils/appUtils/focusManagerAux/utils/utils.ios";
+
+export const useIsFocusEnabled = (isAboveTabsScreen: boolean): boolean => {
+  const [isFocusEnabled, setIsFocusedEnabled] = React.useState(true);
+
+  const enableFocus = React.useCallback(() => {
+    setIsFocusedEnabled(true);
+  }, []);
+
+  const disableFocus = React.useCallback(() => {
+    setIsFocusedEnabled(false);
+  }, []);
+
+  React.useEffect(() => {
+    const subscription = didFocused$
+      .pipe(
+        filter(() => isAboveTabsScreen && !isFocusEnabled),
+
+        switchMap(() => TabsScreenScreenSelectorContainerRegistry.observable$),
+        filter((id) => id && focusManager.isFocusOnTabsScreen(id)),
+
+        // run only once, then re-subscribe on didFocused$ again
+        first(),
+        repeat()
+      )
+      .subscribe(() => {
+        enableFocus();
+      });
+
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [enableFocus, isFocusEnabled, isAboveTabsScreen]);
+
+  React.useEffect(() => {
+    const subscription = willFocused$
+      .pipe(
+        filter(() => isAboveTabsScreen && isFocusEnabled),
+
+        // start waiting onFocus event
+        switchMap(() => didFocused$),
+
+        // focus is landed on top-menu
+        filter(() => focusManager.isFocusOnMenu()),
+
+        // run only once, then re-subscribe on willFocused$ again
+        first(),
+        repeat()
+      )
+      .subscribe(() => {
+        disableFocus();
+      });
+
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [disableFocus, isFocusEnabled, isAboveTabsScreen]);
+
+  return isFocusEnabled;
+};