@applicaster/zapp-react-native-utils 13.0.0-rc.1 → 13.0.0-rc.100

package/reactUtils/createContext/__tests__/provider.test.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 import * as React from "react";
-import { shallow } from "enzyme";
-import toJson from "enzyme-to-json";
+import { render } from "@testing-library/react-native";
+
 import { View } from "react-native";
 
 import { createProvider } from "../provider";
@@ -29,14 +29,12 @@ describe("createProvider", () => {
   it("creates a context Provider component", () => {
     const MockChild = (props) => <View>{props.context}</View>;
 
-    const wrapper = shallow(
+    const wrapper = render(
       <Provider>
         <MockChild context={"context"} />
       </Provider>
     );
 
-    expect(toJson(wrapper)).toMatchSnapshot();
-
-    expect(wrapper.find(ReactContext.Provider).props()).toMatchSnapshot();
+    expect(wrapper.toJSON()).toMatchSnapshot();
   });
 });

package/reactUtils/createContext/__tests__/withConsumer.test.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 import * as React from "react";
-import { shallow } from "enzyme";
-import toJson from "enzyme-to-json";
+import { render } from "@testing-library/react-native";
+
 import { View } from "react-native";
 
 import { createWithConsumerDecorator } from "../withConsumer";
@@ -11,21 +11,21 @@ describe("createConsumer", () => {
   const { Consumer } = ReactContext;
   const withConsumer = createWithConsumerDecorator(Consumer);
 
-  it("returns a function", () => {
-    expect(withConsumer).toBeFunction();
-  });
-
   it("creates a context consumer function", () => {
-    const Child = (props) => <View>{props.context}</View>;
-    const DecoratedChild = withConsumer(Child);
+    expect(withConsumer).toBeFunction();
     const newContextValue = "newValue";
 
-    const wrapper = shallow(<DecoratedChild />);
+    const Child = (props) => {
+      props.setContext(newContextValue);
+
+      return <View>{props.context}</View>;
+    };
+
+    const DecoratedChild = withConsumer(Child);
 
-    const childWrapper = wrapper.dive();
+    const wrapper = render(<DecoratedChild />);
 
-    expect(toJson(childWrapper)).toMatchSnapshot();
-    childWrapper.props().setContext(newContextValue);
+    expect(wrapper.toJSON()).toMatchSnapshot();
 
     expect(mockContextData.setContext).toHaveBeenCalledWith(newContextValue);
   });

package/reactUtils/createContext/__tests__/withProvider.test.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 import * as React from "react";
-import { shallow } from "enzyme";
-import toJson from "enzyme-to-json";
+import { render } from "@testing-library/react-native";
+
 import { View, Text } from "react-native";
 
 import { createWithProviderDecorator } from "../withProvider";
@@ -19,8 +19,8 @@ describe("withProvider", () => {
 
     const DecoratedComponent = withProvider(Component);
 
-    const wrapper = shallow(<DecoratedComponent />);
+    const wrapper = render(<DecoratedComponent />);
 
-    expect(toJson(wrapper)).toMatchSnapshot();
+    expect(wrapper.toJSON()).toMatchSnapshot();
   });
 });

package/reactUtils/createContext/helpers.ts

@@ -33,7 +33,12 @@ export const getSetterName: (property: string) => string = R.compose(
 export function createContextSetters(
   properties: string[],
   component: any,
-  options: any = {}
+  options: {
+    stateValidator?: (
+      obj: { property: string; value: unknown },
+      oldValue: unknown
+    ) => boolean;
+  } = {}
 ) {
   const { stateValidator = R.T } = options;
 

package/reactUtils/createContext/index.ts

@@ -1,5 +1,4 @@
 import * as React from "react";
-import createReactContext from "create-react-context";
 import * as R from "ramda";
 
 import { getSetterName, NOOP } from "./helpers";
@@ -7,33 +6,20 @@ import { createProvider } from "./provider";
 import { createWithConsumerDecorator } from "./withConsumer";
 import { createWithProviderDecorator } from "./withProvider";
 
-const reactContextCreator = React.createContext;
-
-// Depending on the version of React used, the `createContext` function may not be available
-// if this is the case, we fall back to a polyfill library
-const contextCreatorFn =
-  reactContextCreator && typeof reactContextCreator === "function"
-    ? reactContextCreator
-    : createReactContext;
-
-/**
- * @typedef Context
- * @property {Object} Context.Provider react class component to use as context provider
- * @property {Function} Context.Consumer react functional component to use as context consumer
- * @property {Function} Context.withProvider HOC to apply the context provider
- * @property {function} Context.withConsumer HOC to apply the context consumer. passes the context as props
- * @property {React.Context} Context.ReactContext React context object
- * to the wrapped component
- */
-
 /**
  * Creates a React Context and returns consumer & providers components & decorators to interact
  * with this context.
- * @param {Object} initialContext map of context properties and their initial values
- * @param {Function} stateValidator optional predicate to tell whether the state update is valid or not
- * @returns {Context} Object containing the context components & decorators {@link Context}
+ * @param initialContext map of context properties and their initial values
+ * @param stateValidator optional predicate to tell whether the state update is valid or not
+ * @returns Object containing the context components & decorators
  */
-export function createContext(initialContext, stateValidator = R.T) {
+export function createContext(
+  initialContext: Record<string, any>,
+  stateValidator: (
+    obj: { property: string; value: unknown },
+    oldValue: unknown
+  ) => boolean = R.T
+) {
   // first we extract the properties name, and create setters name for those
   const contextPropertiesNames = R.keys(initialContext);
   const contextSettersNames = R.map(getSetterName, contextPropertiesNames);
@@ -41,7 +27,7 @@ export function createContext(initialContext, stateValidator = R.T) {
   // we create a React Context with the properties & their setters, assigning a noop function
   // temporarily (will be overriden by proper setters in the provider component)
   const ReactContext = R.compose(
-    contextCreatorFn,
+    React.createContext,
     R.merge(initialContext),
     R.zipObj(contextSettersNames),
     R.map(R.always(NOOP))

package/reactUtils/index.ts

@@ -2,7 +2,6 @@
 import * as R from "ramda";
 import * as React from "react";
 import { Platform } from "react-native";
-import createRef from "create-react-ref/lib/createRef";
 
 import { addLifeCycleMethods, wrapInClass, isClassComponent } from "./helpers";
 
@@ -19,16 +18,6 @@ export function attachLifeCycleMethods(lifecycleMethods) {
   );
 }
 
-/**
- * creates a React Ref. if the version of React doesn't
- * have this API, will use a polyfill instead
- */
-export function createReactRef() {
-  return React.createRef && typeof React.createRef === "function"
-    ? React.createRef()
-    : createRef();
-}
-
 /**
  * Clone the children and merge each of the cloned elements with otherProps.
  * @param {React.Children} children to clone
@@ -109,20 +98,6 @@ export const isTvOSPlatform = () => getPlatform() === "tvos";
 
 export const isAndroidTVPlatform = () => getPlatform() === "android_tv";
 
-declare global {
-  interface Window {
-    VIZIO?: {
-      Chromevox: {
-        play: (text: string) => void;
-      };
-      exitApplication: () => void;
-      setClosedCaptionHandler: (
-        callback: (isCCEnabled: boolean) => void
-      ) => void;
-    };
-  }
-}
-
 /**
  * Platforms found in userAgent string, please note that simulators
  * might not have the same agents that the devices have

package/screenState/index.ts

@@ -1,6 +1,8 @@
 import { create } from "zustand";
 import { produce } from "immer";
 import { path } from "ramda";
+import React from "react";
+import { useShallow } from "zustand/react/shallow";
 
 type ScreenState = {
   selectedEntry: {
@@ -18,6 +20,8 @@ type ScreenStore = {
   setSelectedEntry: (screenId: string, entryId: string) => void;
 };
 
+type SetSelectedEntry = (screenId: string, entryId: string) => void;
+
 const useScreenStore = create<ScreenStore>((set) => ({
   screens: screensInitialState,
   setSelectedEntry: (screenId, entryId) =>
@@ -35,17 +39,27 @@ const useScreenStore = create<ScreenStore>((set) => ({
 export function useScreenState(
   screenId: ScreenId
 ): null | { screen: ScreenState; setSelectedEntry: (entryId: string) => void } {
-  // const state = useState(screenState);
-  const screenState = useScreenStore(
-    path(["screens", screenId])
-  ) as ScreenState;
+  const screenState = useScreenStore<ScreenState>(
+    useShallow(path(["screens", screenId]))
+  );
 
-  const setSelectedEntry = useScreenStore((state) => state.setSelectedEntry);
+  const setSelectedEntry = useScreenStore<SetSelectedEntry>(
+    useShallow(path(["setSelectedEntry"]))
+  );
 
-  if (!screenId) return null;
+  const memoizedSetSelectedEntry = React.useCallback(
+    (entryId) => setSelectedEntry(screenId, entryId),
+    [screenId, setSelectedEntry]
+  );
 
-  return {
-    screen: screenState,
-    setSelectedEntry: (entryId) => setSelectedEntry(screenId, entryId),
-  };
+  return React.useMemo(
+    () =>
+      !screenId
+        ? null
+        : {
+            screen: screenState,
+            setSelectedEntry: memoizedSetSelectedEntry,
+          },
+    [screenId, screenState]
+  );
 }