@applicaster/zapp-react-native-ui-components 12.0.0-alpha.6329273868 → 12.0.0-alpha.6393691216

package/Components/Screen/TV/hooks/index.ts

@@ -1 +1,3 @@
 export { useInitialFocus } from "./useInitialFocus";
+
+export { useRestoreFocus } from "./useRestoreFocus";

package/Components/Screen/TV/hooks/useRestoreFocus.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { isNil } from "ramda";
+import { useIsScreenActive } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
+import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
+
+export const useRestoreFocus = (): void => {
+  const isScreenActive = useIsScreenActive();
+  const previousIsScreenActive = usePrevious(isScreenActive);
+
+  React.useEffect(() => {
+    if (isNil(previousIsScreenActive)) {
+      // it's initial mounting of the screen, do nothing here
+      return;
+    }
+
+    if (!previousIsScreenActive && isScreenActive) {
+      // restore focus when we go back from next screen
+      focusManager.setInitialFocus();
+    }
+  }, [previousIsScreenActive, isScreenActive]);
+};

package/Components/Screen/TV/index.web.tsx

@@ -1,15 +1,12 @@
-import React from "react";
+import * as React from "react";
 import { last } from "ramda";
-import { StyleSheet, View } from "react-native";
+import { View, StyleSheet } from "react-native";
 import {
   findMenuPlugin,
   getNavigationProps,
   getPathAttributes,
 } from "@applicaster/zapp-react-native-utils/navigationUtils";
-import {
-  useIsScreenActive,
-  useNavigation,
-} from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import {
@@ -20,10 +17,8 @@ import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/he
 
 import { NavBarContainer } from "../../Layout/TV/NavBarContainer";
 import { ScreenResolver } from "../../ScreenResolver";
-import { useInitialFocus } from "./hooks";
+import { useInitialFocus, useRestoreFocus } from "./hooks";
 import { isPlayerPlugin } from "@applicaster/zapp-react-native-utils/pluginUtils";
-import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils";
-import { FreezeWithCallback } from "../../FreezeWithCallback";
 
 const styles = StyleSheet.create({
   container: {
@@ -108,6 +103,7 @@ export const Screen = ({ route, Components }: Props) => {
   const backgroundColor = useScreenBackgroundColor(screenId);
 
   useInitialFocus();
+  useRestoreFocus();
 
   const activeRiver = getActiveRiver({
     screenId,
@@ -149,30 +145,21 @@ export const Screen = ({ route, Components }: Props) => {
       ? routeState?.state?.entry
       : routeState?.state?.screen;
 
-  const isScreenActive = useIsScreenActive();
-
   return (
-    <FreezeWithCallback
-      freeze={!isScreenActive}
-      onRelease={() => {
-        focusManager.setInitialFocus();
-      }}
-    >
-      <View style={[styles.container, { backgroundColor }]}>
-        <NavBarContainer isVisible={isNavBarVisible} onReady={noop}>
-          <NavBar
-            isVisible={isNavBarVisible}
-            menuPlugin={menuPlugin}
-            navigationProps={navigationProps}
-          />
-        </NavBarContainer>
-        <ScreenResolver
-          screenType={screenType}
-          screenId={screenId}
-          screenData={screenData}
-          groupId={route}
+    <View style={[styles.container, { backgroundColor }]}>
+      <NavBarContainer isVisible={isNavBarVisible} onReady={noop}>
+        <NavBar
+          isVisible={isNavBarVisible}
+          menuPlugin={menuPlugin}
+          navigationProps={navigationProps}
         />
-      </View>
-    </FreezeWithCallback>
+      </NavBarContainer>
+      <ScreenResolver
+        screenType={screenType}
+        screenId={screenId}
+        screenData={screenData}
+        groupId={route}
+      />
+    </View>
   );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "12.0.0-alpha.6329273868",
+  "version": "12.0.0-alpha.6393691216",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -34,10 +34,10 @@
     "redux-mock-store": "^1.5.3"
   },
   "dependencies": {
-    "@applicaster/applicaster-types": "12.0.0-alpha.6329273868",
-    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.6329273868",
-    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.6329273868",
-    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.6329273868",
+    "@applicaster/applicaster-types": "12.0.0-alpha.6393691216",
+    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.6393691216",
+    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.6393691216",
+    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.6393691216",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",

package/Components/FreezeWithCallback/Freeze.tsx

@@ -1,31 +0,0 @@
-import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
-import React, { Suspense, useEffect } from "react";
-import { Suspender } from "./Suspender";
-
-interface Props {
-  freeze: boolean;
-  children: React.ReactNode;
-  placeholder?: React.ReactNode;
-  onRelease?: () => void;
-}
-
-export function Freeze({
-  freeze,
-  children,
-  placeholder = null,
-  onRelease,
-}: Props) {
-  const prevFreeze = usePrevious(freeze);
-
-  useEffect(() => {
-    if (prevFreeze && !freeze && onRelease) {
-      onRelease();
-    }
-  }, [freeze, onRelease, prevFreeze]);
-
-  return (
-    <Suspense fallback={placeholder}>
-      <Suspender freeze={freeze}>{children}</Suspender>
-    </Suspense>
-  );
-}

package/Components/FreezeWithCallback/LICENSE

@@ -1,21 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2021 Software Mansion
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/Components/FreezeWithCallback/Suspender.tsx

@@ -1,17 +0,0 @@
-import React, { Fragment } from "react";
-
-const infiniteThenable = { then() {} };
-
-export const Suspender = ({
-  freeze,
-  children,
-}: {
-  freeze: boolean;
-  children: React.ReactNode;
-}) => {
-  if (freeze) {
-    throw infiniteThenable;
-  }
-
-  return <Fragment>{children}</Fragment>;
-};

package/Components/FreezeWithCallback/__tests__/index.test.tsx

@@ -1,170 +0,0 @@
-import React, { Dispatch, useEffect, useState } from "react";
-import {
-  act,
-  create,
-  ReactTestRenderer,
-  ReactTestRendererJSON,
-} from "react-test-renderer";
-import { FreezeWithCallback } from "../index";
-
-const SimpleContent = () => <div />;
-
-interface InnerProps {
-  value: number;
-}
-// eslint-disable-next-line unused-imports/no-unused-vars
-const Inner = ({ value }: InnerProps) => <div />;
-
-interface TestSubscriber {
-  renderCount: number;
-  subscription: Dispatch<number>;
-}
-
-function createSubscriberComponent(): [React.FC, TestSubscriber] {
-  const testState: TestSubscriber = {
-    renderCount: 0,
-    subscription: () => {},
-  };
-
-  const Subscriber: React.FC = () => {
-    const [value, setValue] = useState(0);
-
-    useEffect(() => {
-      testState.subscription = setValue;
-    }, []);
-
-    testState.renderCount += 1;
-
-    return <Inner value={value} />;
-  };
-
-  return [Subscriber, testState];
-}
-
-interface ContainerProps {
-  freeze: boolean;
-  children: React.ReactNode;
-}
-
-const Container = ({ freeze, children }: ContainerProps) => (
-  <FreezeWithCallback freeze={freeze}>{children}</FreezeWithCallback>
-);
-
-function setupTest(initialFreeze: boolean = false) {
-  let testRenderer: ReactTestRenderer | undefined;
-  const [Subscriber, subscriberState] = createSubscriberComponent();
-
-  act(() => {
-    testRenderer = create(
-      <Container freeze={initialFreeze}>
-        <Subscriber />
-      </Container>
-    );
-  });
-
-  return {
-    testRenderer,
-    testInstance: testRenderer?.root,
-    subscriberState,
-    updateFreeze: (freeze: boolean) => {
-      act(() =>
-        testRenderer?.update(
-          <Container freeze={freeze}>
-            <Subscriber />
-          </Container>
-        )
-      );
-    },
-  };
-}
-
-describe("FreezeWithCallback", () => {
-  test("Renders stuff not frozen", () => {
-    const testRenderer = create(
-      <Container freeze={false}>
-        <SimpleContent />
-      </Container>
-    );
-
-    expect(testRenderer.root.findByType(SimpleContent)).toBeTruthy();
-  });
-
-  test("Does not render stuff when frozen", () => {
-    const testRenderer = create(
-      <Container freeze>
-        <SimpleContent />
-      </Container>
-    );
-
-    expect(testRenderer.root.findAllByType(SimpleContent)).toHaveLength(0);
-  });
-
-  test("Stuff is gone after freeze", () => {
-    const testRenderer = create(
-      <Container freeze={false}>
-        <SimpleContent />
-      </Container>
-    );
-
-    expect(testRenderer.root.findByType(SimpleContent)).toBeTruthy();
-
-    act(() =>
-      testRenderer.update(
-        <Container freeze>
-          <SimpleContent />
-        </Container>
-      )
-    );
-
-    expect(testRenderer.toJSON()).toBe(null);
-  });
-
-  test("Updates work when not frozen", () => {
-    const { testInstance, subscriberState } = setupTest();
-
-    expect(testInstance?.findByType(Inner).props.value).toEqual(0);
-    act(() => subscriberState.subscription(1));
-    expect(testInstance?.findByType(Inner).props.value).toEqual(1);
-    expect(subscriberState.renderCount).toBe(2);
-  });
-
-  test("Updates does not propagate when frozen", () => {
-    const { testInstance, subscriberState, updateFreeze } = setupTest();
-
-    expect(testInstance?.findByType(Inner).props.value).toEqual(0);
-    updateFreeze(true);
-    act(() => subscriberState.subscription(1));
-    expect(testInstance?.findByType(Inner).props.value).toEqual(0);
-    expect(subscriberState.renderCount).toBe(1);
-  });
-
-  test("State persists after defrost", () => {
-    const { testInstance, subscriberState, updateFreeze, testRenderer } =
-      setupTest();
-
-    expect(testInstance?.findByType(Inner).props.value).toEqual(0);
-    act(() => subscriberState.subscription(1));
-    expect(testInstance?.findByType(Inner).props.value).toEqual(1);
-
-    updateFreeze(true);
-    expect(testRenderer?.toJSON()).toBe(null);
-
-    updateFreeze(false);
-    expect((testRenderer?.toJSON() as ReactTestRendererJSON).type).toBe("div");
-    expect(testInstance?.findByType(Inner).props.value).toEqual(1);
-  });
-
-  test("Update propagate after defrost", () => {
-    const { testInstance, subscriberState, updateFreeze } = setupTest();
-
-    updateFreeze(true);
-    act(() => subscriberState.subscription(1));
-    act(() => subscriberState.subscription(2));
-    act(() => subscriberState.subscription(3));
-    expect(testInstance?.findByType(Inner).props.value).toEqual(0);
-
-    updateFreeze(false);
-    expect(testInstance?.findByType(Inner).props.value).toEqual(3);
-    expect(subscriberState.renderCount).toBe(2);
-  });
-});

package/Components/FreezeWithCallback/index.tsx

@@ -1,3 +0,0 @@
-import { Freeze } from "./Freeze";
-
-export const FreezeWithCallback = Freeze;