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

package/Components/Cell/CellWithFocusable.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
+import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 import { useCellState } from "../MasterCell/utils";
 import { FocusableGroup } from "../FocusableGroup";
@@ -26,6 +27,13 @@ type Props = {
 
 const addPrefix = (id: string) => `focusable-cell-wrapper-${id}`;
 
+const wrapperStyles = {
+  flex: platformSelect({
+    tvos: 1,
+    default: undefined,
+  }),
+};
+
 export function CellWithFocusable(props: Props) {
   const {
     index,
@@ -94,6 +102,7 @@ export function CellWithFocusable(props: Props) {
       onFocus={onGroupFocus}
       onBlur={onGroupBlur}
       skipFocusManagerRegistration={skipFocusManagerRegistration}
+      style={wrapperStyles}
     >
       <CellWrapper style={styles.cellWrapper}>
         <CellRenderer

package/Components/Focusable/FocusableTvOS.tsx

@@ -13,7 +13,7 @@ import { findNodeHandle, ViewStyle } from "react-native";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 
 import {
-  emitDidFocused,
+  emitFocused,
   emitNativeRegistered,
 } from "@applicaster/zapp-react-native-utils/appUtils/focusManagerAux/utils/utils.ios";
 
@@ -91,7 +91,7 @@ export class Focusable extends BaseFocusable<Props> {
     }
 
     const id: string = nativeEvent.itemID;
-    emitDidFocused(id);
+    emitFocused(id);
 
     onFocus(nativeEvent);
   }

package/Components/FocusableGroup/FocusableTvOS.tsx

@@ -1,5 +1,4 @@
 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";
@@ -7,9 +6,6 @@ import { LayoutContext } from "@applicaster/zapp-react-native-tvos-app/Context/L
 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",
@@ -91,8 +87,8 @@ class FocusableGroupComponent extends BaseFocusable<Props> {
   }
 }
 
-export const withFocusDisabledHOC = (Component) => {
-  return function WithFocusDisabledHOC(props) {
+export const withFocusDisabled = (Component) => {
+  return function WithFocusDisabled(props) {
     // @ts-ignore
     const { screenFocusBlocked } = React.useContext(LayoutContext.ReactContext);
 
@@ -102,27 +98,8 @@ export const withFocusDisabledHOC = (Component) => {
 
     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} />;
+    return <Component {...props} isFocusDisabled={blockScreenFocus} />;
   };
 };
 
-export const FocusableGroup = compose(
-  withAboveTabsScreenContextConsumer,
-  withAboveTabsScreenHOC,
-  withFocusDisabledHOC
-)(FocusableGroupComponent);
+export const FocusableGroup = withFocusDisabled(FocusableGroupComponent);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "15.0.0-alpha.3564837831",
+  "version": "15.0.0-alpha.4043532513",
   "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-alpha.3564837831",
-    "@applicaster/zapp-react-native-bridge": "15.0.0-alpha.3564837831",
-    "@applicaster/zapp-react-native-redux": "15.0.0-alpha.3564837831",
-    "@applicaster/zapp-react-native-utils": "15.0.0-alpha.3564837831",
+    "@applicaster/applicaster-types": "15.0.0-alpha.4043532513",
+    "@applicaster/zapp-react-native-bridge": "15.0.0-alpha.4043532513",
+    "@applicaster/zapp-react-native-redux": "15.0.0-alpha.4043532513",
+    "@applicaster/zapp-react-native-utils": "15.0.0-alpha.4043532513",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "url": "^0.11.0",

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

@@ -1,113 +0,0 @@
-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

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

package/Components/FocusableGroup/hooks/useIsFocusEnabled.ts

@@ -1,68 +0,0 @@
-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;
-};

package/Contexts/AboveTabsScreenContext/index.tsx

@@ -1,33 +0,0 @@
-import React, { useMemo } from "react";
-import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
-
-export const AboveTabsScreenContext = React.createContext({
-  aboveTabsScreen: false,
-});
-
-export const withAboveTabsScreenContext = (Component) =>
-  function AbovetabsScreenContextProviderWrapper(props) {
-    const aboveTabsScreen = toBooleanWithDefaultFalse(
-      props?.item?.above_tabs_screen
-    );
-
-    const contextValue = useMemo(
-      () => ({
-        aboveTabsScreen,
-      }),
-      [aboveTabsScreen]
-    );
-
-    return (
-      <AboveTabsScreenContext.Provider value={contextValue}>
-        <Component {...props} />
-      </AboveTabsScreenContext.Provider>
-    );
-  };
-
-export const withAboveTabsScreenContextConsumer = (Component) =>
-  function AboveTabsScreenContextConsumerWrapper(props) {
-    const { aboveTabsScreen } = React.useContext(AboveTabsScreenContext);
-
-    return <Component {...props} aboveTabsScreen={aboveTabsScreen} />;
-  };