@applicaster/zapp-react-native-ui-components 14.0.0-rc.9 → 15.0.0-alpha.2239032089

package/Components/MasterCell/DefaultComponents/SecondaryImage/Image.tsx

@@ -28,17 +28,10 @@ interface Props {
   onAsyncRender: () => void;
 }
 
-const SecondaryImageComponent = (props: Props) => {
-  const {
-    uri,
-    style,
-    displayMode,
-    imageSizing,
-    fitPosition,
-    fixedHeight,
-    fixedWidth,
-    onAsyncRender,
-  } = props;
+/** Secondary Image Dynamic does not render until the image is loaded */
+const SecondaryImageDynamic = (props: Props) => {
+  const { uri, style, displayMode, imageSizing, fitPosition, onAsyncRender } =
+    props;
 
   const imageDimension = useGetImageDimensions(
     uri,
@@ -46,13 +39,9 @@ const SecondaryImageComponent = (props: Props) => {
     isImageSizingFit(imageSizing) ? undefined : (style.height as number)
   );
 
-  const containerHeight = isDisplayModeFixed(displayMode)
-    ? fixedHeight
-    : imageDimension?.height;
+  const containerHeight = imageDimension?.height;
 
-  const containerWidth = isDisplayModeFixed(displayMode)
-    ? fixedWidth
-    : style?.width;
+  const containerWidth = style?.width;
 
   if (isNil(imageDimension?.aspectRatio)) {
     return null;
@@ -80,4 +69,63 @@ const SecondaryImageComponent = (props: Props) => {
   );
 };
 
+/** Secondary Image Fixed does not render  the image until the image is loaded, but keep container rendered */
+const SecondaryImageFixed = (props: Props) => {
+  const {
+    uri,
+    style,
+    displayMode,
+    imageSizing,
+    fitPosition,
+    fixedHeight,
+    fixedWidth,
+    onAsyncRender,
+  } = props;
+
+  const imageDimension = useGetImageDimensions(
+    uri,
+    style.width as number,
+    isImageSizingFit(imageSizing) ? undefined : (style.height as number)
+  );
+
+  return (
+    <View style={style} onLayout={onAsyncRender}>
+      {isNil(imageDimension?.aspectRatio) ? null : (
+        <Image
+          {...props}
+          source={{ uri }}
+          style={{
+            ...getStyle({
+              imageSizing,
+              fitPosition,
+              displayMode,
+              imageDimension,
+              containerHeight: fixedHeight,
+              containerWidth: fixedWidth,
+            }),
+            borderRadius: style.borderRadius,
+            aspectRatio: imageDimension.aspectRatio,
+          }}
+        />
+      )}
+    </View>
+  );
+};
+
+const SecondaryImageComponent = (props: Props) => {
+  const { uri, displayMode } = props;
+
+  if (!uri) {
+    return null;
+  }
+
+  const isFixed = isDisplayModeFixed(displayMode);
+
+  return isFixed ? (
+    <SecondaryImageFixed {...props} />
+  ) : (
+    <SecondaryImageDynamic {...props} />
+  );
+};
+
 export const SecondaryImage = withAsyncRenderHOC(SecondaryImageComponent);

package/Components/MasterCell/DefaultComponents/SecondaryImage/__tests__/Image.test.tsx

@@ -4,9 +4,26 @@ import { render } from "@testing-library/react-native";
 import { SecondaryImage } from "../Image";
 
 describe("SecondaryImage - Image", () => {
-  it("SecondaryImage should not render if no aspect ratio", async () => {
+  it("SecondaryImage should not render if no uri", async () => {
     const wrapper = await render(
-      <SecondaryImage uri="" style={{ width: 100 }} />
+      <SecondaryImage
+        displayMode="dynamic"
+        uri={undefined}
+        style={{ width: 100 }}
+      />
+    );
+
+    expect(wrapper.toJSON()).toEqual(null);
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it("SecondaryImage should not render if no aspect ratio (dynamic)", async () => {
+    const wrapper = await render(
+      <SecondaryImage
+        displayMode="dynamic"
+        uri="someurl"
+        style={{ width: 100 }}
+      />
     );
 
     expect(wrapper.toJSON()).toEqual(null);
@@ -16,7 +33,8 @@ describe("SecondaryImage - Image", () => {
   it("SecondaryImage should render if known dimensions", async () => {
     const wrapper = await render(
       <SecondaryImage
-        uri=""
+        uri="someUrl"
+        displayMode="dynamic"
         style={{ width: 100, height: 100, borderRadius: 10 }}
       />
     );

package/Components/MasterCell/DefaultComponents/SecondaryImage/__tests__/__snapshots__/Image.test.tsx.snap

@@ -1,6 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SecondaryImage - Image SecondaryImage should not render if no aspect ratio 1`] = `null`;
+exports[`SecondaryImage - Image SecondaryImage should not render if no aspect ratio (dynamic) 1`] = `null`;
+
+exports[`SecondaryImage - Image SecondaryImage should not render if no uri 1`] = `null`;
 
 exports[`SecondaryImage - Image SecondaryImage should render if known dimensions 1`] = `
 <View
@@ -14,10 +16,11 @@ exports[`SecondaryImage - Image SecondaryImage should render if known dimensions
   }
 >
   <Image
+    displayMode="dynamic"
     onAsyncRender={[Function]}
     source={
       {
-        "uri": "",
+        "uri": "someUrl",
       }
     }
     style={
@@ -28,7 +31,7 @@ exports[`SecondaryImage - Image SecondaryImage should render if known dimensions
         "width": 100,
       }
     }
-    uri=""
+    uri="someUrl"
   />
 </View>
 `;

package/Components/MasterCell/DefaultComponents/Text/index.tsx

@@ -11,6 +11,8 @@ import { withScaledLineHeight } from "./utils";
 import { toNumber } from "@applicaster/zapp-react-native-utils/numberUtils";
 import { MeasurementPortalContext } from "../../../MeasurmentsPortal";
 import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
+import { CellFocusedStateContext } from "@applicaster/zapp-react-native-ui-components/Contexts/CellFocusedStateContext";
+import { useAccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks";
 
 type Props = {
   style: any;
@@ -35,10 +37,9 @@ const _Text = ({
 }: Props) => {
   const _label = useTextLabel({ label, entry });
   const isMeasurement = React.useContext(MeasurementPortalContext);
+  const cellFocused = React.useContext(CellFocusedStateContext);
 
-  if (isNilOrEmpty(_label)) {
-    return null;
-  }
+  const accessibilityManager = useAccessibilityManager({});
 
   // set maximum possible height for the text in case of measurement
   const height =
@@ -46,6 +47,27 @@ const _Text = ({
       ? toNumber(otherProps.numberOfLines) * toNumber(style.lineHeight)
       : undefined;
 
+  const textLabel = dateTransformEnabled
+    ? dateFormat(dateTransform, label)
+    : textTransform(transformText, _label);
+
+  React.useLayoutEffect(() => {
+    // For FocusableCells with action buttons
+    if (otherProps.state) {
+      if (otherProps.state === "focused" && cellFocused === true) {
+        accessibilityManager.addHeading(textLabel);
+      }
+    } else {
+      if (cellFocused === true) {
+        accessibilityManager.addHeading(textLabel);
+      }
+    }
+  }, [cellFocused, otherProps.state, textLabel]);
+
+  if (isNilOrEmpty(_label)) {
+    return null;
+  }
+
   return (
     <Text
       style={[
@@ -55,9 +77,7 @@ const _Text = ({
       allowFontScaling={false}
       {...withoutLabel(otherProps)}
     >
-      {dateTransformEnabled
-        ? dateFormat(dateTransform, label)
-        : textTransform(transformText, _label)}
+      {textLabel}
     </Text>
   );
 };

package/Components/MasterCell/DefaultComponents/__tests__/image.test.js

@@ -1,5 +1,5 @@
 import React from "react";
-import TestRenderer from "react-test-renderer";
+import { render } from "@testing-library/react-native";
 import { Image } from "react-native";
 
 jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
@@ -10,35 +10,35 @@ const CustomImage = require("../Image").default;
 
 describe("image with no source", () => {
   it("Uses provided placeholder image string", () => {
-    const testRenderer = TestRenderer.create(
+    const { UNSAFE_getByType } = render(
       <CustomImage placeholderImage={"foo"} />
     );
 
-    const testInstance = testRenderer.root;
+    const imageComponent = UNSAFE_getByType(Image);
 
-    expect(testInstance.findByType(Image).props.source).toEqual({
+    expect(imageComponent.props.source).toEqual({
       uri: "foo",
     });
   });
 
   it("Uses provided placeholder image object", () => {
-    const testRenderer = TestRenderer.create(
+    const { UNSAFE_getByType } = render(
       <CustomImage placeholderImage={"foo"} />
     );
 
-    const testInstance = testRenderer.root;
+    const imageComponent = UNSAFE_getByType(Image);
 
-    expect(testInstance.findByType(Image).props.source).toEqual({
+    expect(imageComponent.props.source).toEqual({
       uri: "foo",
     });
   });
 
   it("Returns empty string if no image or placeholder defined", () => {
-    const testRenderer = TestRenderer.create(
+    const { UNSAFE_getByType } = render(
       <CustomImage placeholderImage={null} />
     );
 
-    const testInstance = testRenderer.root;
-    expect(testInstance.findByType(Image).props.source).toBeUndefined();
+    const imageComponent = UNSAFE_getByType(Image);
+    expect(imageComponent.props.source).toBeUndefined();
   });
 });

package/Components/MasterCell/DefaultComponents/__tests__/text.test.tsx

@@ -1,8 +1,6 @@
 import React from "react";
 import RN from "react-native";
-import { Provider } from "react-redux";
-import TestRenderer from "react-test-renderer";
-import configureStoreFn from "redux-mock-store";
+import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
 
 const mockUseIsRTL = jest.fn(() => true);
 const mockGetIsRTL = jest.fn(() => true);
@@ -17,7 +15,6 @@ jest.mock("@applicaster/zapp-react-native-utils/localizationUtils", () => ({
 }));
 
 const CustomText = require("../Text").default;
-const mockStore = configureStoreFn();
 
 const defaultProps = {
   entry: {},
@@ -25,16 +22,15 @@ const defaultProps = {
   transformText: "default",
 };
 
-const getRenderedText = (label: string, store: any) => {
+const getRenderedText = (label: string, storeConfig: any) => {
   const props = { ...{ ...defaultProps, label } };
 
-  const testRenderer = TestRenderer.create(
-    <Provider store={store}>
-      <CustomText {...props} />
-    </Provider>
+  const { UNSAFE_getByType } = renderWithProviders(
+    <CustomText {...props} />,
+    storeConfig
   );
 
-  return testRenderer.root.findByType(RN.Text).props.children;
+  return UNSAFE_getByType(RN.Text).props.children;
 };
 
 describe("RTL app: Hebrew text contains english word", () => {
@@ -42,28 +38,32 @@ describe("RTL app: Hebrew text contains english word", () => {
   const textWithNotFirstEnglishWord = "השיר של נועה נועה קירל באירוויזיון Word";
   const textWithoutEnglishWord = "השיר של נועה נועה קירל באירוויזיון";
 
-  const store = mockStore({
+  const storeConfig = {
     remoteConfigurations: { localizations: { he: {} } },
     appData: {
       languageCode: "he",
       countryCode: "IL",
     },
-  });
+  };
 
   it("Hebrew text contains first english word", () => {
-    const renderedText = getRenderedText(textWithFirstEnglishWord, store);
+    const renderedText = getRenderedText(textWithFirstEnglishWord, storeConfig);
     const desiredText = "\u200fWord\u202c השיר של נועה נועה קירל באירוויזיון";
 
     expect(renderedText).toEqual(desiredText);
   });
 
   it("Hebrew text contains not first english word", () => {
-    const renderedText = getRenderedText(textWithNotFirstEnglishWord, store);
+    const renderedText = getRenderedText(
+      textWithNotFirstEnglishWord,
+      storeConfig
+    );
+
     expect(renderedText).toEqual(textWithNotFirstEnglishWord);
   });
 
   it("Hebrew text doesn't contain english word", () => {
-    const renderedText = getRenderedText(textWithoutEnglishWord, store);
+    const renderedText = getRenderedText(textWithoutEnglishWord, storeConfig);
     expect(renderedText).toEqual(textWithoutEnglishWord);
   });
 });
@@ -77,16 +77,16 @@ describe("LTR app: English text", () => {
 
   const englishText = "Test sentence";
 
-  const store = mockStore({
+  const storeConfig = {
     remoteConfigurations: { localizations: { en: {} } },
     appData: {
       languageCode: "en",
       countryCode: "US",
     },
-  });
+  };
 
   it("English text", () => {
-    const renderedText = getRenderedText(englishText, store);
+    const renderedText = getRenderedText(englishText, storeConfig);
     expect(renderedText).toEqual(englishText);
   });
 });

package/Components/MasterCell/SharedUI/CollapsibleTextContainer/__tests__/index.test.tsx

@@ -1,12 +1,12 @@
 import * as React from "react";
 import { View } from "react-native";
-import ReactTestRenderer from "react-test-renderer";
+import { render } from "@testing-library/react-native";
 
 import { CollapsibleTextContainer } from "../CollapsibleTextContainer";
 
 describe("CollapsibleTextContainer", () => {
   it("render container+children when label is presented", () => {
-    const renderer = ReactTestRenderer.create(
+    const { toJSON } = render(
       <CollapsibleTextContainer
         backgroundColor="#000000"
         label={"label"}
@@ -16,36 +16,36 @@ describe("CollapsibleTextContainer", () => {
       </CollapsibleTextContainer>
     );
 
-    const result = renderer.toJSON();
+    const result = toJSON();
 
     expect(result).not.toBeNull();
-    expect(renderer.toJSON()).toMatchSnapshot();
+    expect(toJSON()).toMatchSnapshot();
   });
 
   it("render nothing when label is empty", () => {
-    const renderer = ReactTestRenderer.create(
+    const { toJSON } = render(
       <CollapsibleTextContainer backgroundColor="#000000" label={""} style={{}}>
         <View />
       </CollapsibleTextContainer>
     );
 
-    const result = renderer.toJSON();
+    const result = toJSON();
     expect(result).toBeNull();
   });
 
   it("render nothing when label is not passed", () => {
-    const renderer = ReactTestRenderer.create(
+    const { toJSON } = render(
       <CollapsibleTextContainer backgroundColor="#000000" label={""} style={{}}>
         <View />
       </CollapsibleTextContainer>
     );
 
-    const result = renderer.toJSON();
+    const result = toJSON();
     expect(result).toBeNull();
   });
 
   it("render nothing when label is undefined", () => {
-    const renderer = ReactTestRenderer.create(
+    const { toJSON } = render(
       <CollapsibleTextContainer
         backgroundColor="#000000"
         label={undefined}
@@ -55,7 +55,7 @@ describe("CollapsibleTextContainer", () => {
       </CollapsibleTextContainer>
     );
 
-    const result = renderer.toJSON();
+    const result = toJSON();
     expect(result).toBeNull();
   });
 });

package/Components/MasterCell/elementMapper.tsx

@@ -73,7 +73,6 @@ export function elementMapper(
       : {};
 
     const componentProps = {
-      key,
       style,
       skipButtons: otherProps?.skipButtons,
       emitAsyncElementRegistrate: otherProps?.emitAsyncElementRegistrate,
@@ -91,7 +90,7 @@ export function elementMapper(
     const fn = mapElementWithKey(elementMapper(components, otherProps));
 
     return (
-      <Component {...componentProps}>
+      <Component key={key} {...componentProps}>
         {focusableTypes.has(type) && elements.length > 0
           ? elements.map(fn)
           : null}

package/Components/MasterCell/index.tsx

@@ -86,7 +86,7 @@ export function masterCellBuilder({
           entry: item,
           state: getEntryState(state, entryIsSelected),
         }),
-      [state, item?.id, entryIsSelected] // Assuming that item won't mutate
+      [state, item, entryIsSelected] // Assuming that item won't mutate
     );
 
     const wrapperRef = React.useRef(null);

package/Components/MasterCell/utils/behaviorProvider.ts

@@ -1,28 +1,58 @@
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
-import { StorageSingleValueProvider } from "@applicaster/zapp-react-native-bridge/ZappStorage/StorageSingleSelectProvider";
+import { StorageSingleValueProvider } from "@applicaster/zapp-react-native-utils/storage/StorageSingleSelectProvider";
 import { PushTopicManager } from "@applicaster/zapp-react-native-bridge/PushNotifications/PushTopicManager";
-import { StorageMultiSelectProvider } from "@applicaster/zapp-react-native-bridge/ZappStorage/StorageMultiSelectProvider";
+import { StorageMultiSelectProvider } from "@applicaster/zapp-react-native-utils/storage/StorageMultiSelectProvider";
 import React, { useEffect } from "react";
 import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer";
 import { BehaviorSubject } from "rxjs";
 import { masterCellLogger } from "../logger";
 import get from "lodash/get";
-
-const parseContextKey = (key: string): string | null => {
-  if (!key?.startsWith("@{ctx/")) return null;
-
-  return key.substring("@{ctx/".length, key.length - 1);
+import { ScreenMultiSelectProvider } from "@applicaster/zapp-react-native-utils/storage/ScreenStateMultiSelectProvider";
+import { ScreenSingleValueProvider } from "@applicaster/zapp-react-native-utils/storage/ScreenSingleValueProvider";
+import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useScreenStateStore } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useScreenStateStore";
+
+const parseContextKey = (
+  key: string,
+  context: string = "ctx"
+): string | null => {
+  if (!key?.startsWith(`@{${context}/`)) return null;
+
+  return key.substring(`@{${context}/`.length, key.length - 1);
 };
 
 const getDataSourceProvider = (
-  behavior: Behavior
+  behavior: Behavior,
+  screenRoute: string,
+  screenStateStore: ReturnType<typeof useScreenStateStore>
 ): BehaviorSubject<string[] | string> | null => {
   if (!behavior) return null;
 
   const selection = String(behavior.current_selection);
+  const screenKey = parseContextKey(selection, "screen");
+
+  if (screenKey) {
+    if (behavior.select_mode === "multi") {
+      return ScreenMultiSelectProvider.getProvider(
+        screenKey,
+        screenRoute,
+        screenStateStore
+      ).getObservable();
+    }
+
+    if (behavior.select_mode === "single") {
+      return ScreenSingleValueProvider.getProvider(
+        screenKey,
+        screenRoute,
+        screenStateStore
+      ).getObservable();
+    }
+  }
+
   const contextKey = parseContextKey(selection);
 
   if (contextKey) {
+    // TODO: Add storage scope to behavior
     if (behavior.select_mode === "multi") {
       return StorageMultiSelectProvider.getProvider(contextKey).getObservable();
     }
@@ -41,6 +71,8 @@ const getDataSourceProvider = (
 
 export const useBehaviorUpdate = (behavior: Behavior) => {
   const [lastUpdate, setLastUpdate] = React.useState<number | null>(null);
+  const screenRoute = useRoute()?.pathname || "";
+  const screenStateStore = useScreenStateStore();
   const player = usePlayer();
 
   const triggerUpdate = () => setLastUpdate(Date.now());
@@ -48,7 +80,11 @@ export const useBehaviorUpdate = (behavior: Behavior) => {
   useEffect(() => {
     if (!behavior) return;
 
-    const dataSource = getDataSourceProvider(behavior);
+    const dataSource = getDataSourceProvider(
+      behavior,
+      screenRoute,
+      screenStateStore
+    );
 
     if (dataSource) {
       const subscription = dataSource.subscribe(triggerUpdate);
@@ -72,10 +108,17 @@ export const useBehaviorUpdate = (behavior: Behavior) => {
 
 // We cant use async in this function (its inside render),
 // so we rely on useBehaviorUpdate to update current value and trigger re-render
-export const isCellSelected = (
-  item: ZappEntry,
-  behavior?: Behavior
-): boolean => {
+export const isCellSelected = ({
+  item,
+  screenRoute,
+  screenStateStore,
+  behavior,
+}: {
+  item: ZappEntry;
+  screenRoute: string;
+  screenStateStore: ReturnType<typeof useScreenStateStore>;
+  behavior?: Behavior;
+}): boolean => {
   if (!behavior) return false;
 
   const id = behavior.selector ? get(item, behavior.selector) : item.id;
@@ -99,7 +142,32 @@ export const isCellSelected = (
   }
 
   const selection = String(behavior.current_selection);
-  const contextKey = parseContextKey(selection);
+
+  const screenKey = parseContextKey(selection, "screen");
+
+  if (screenKey) {
+    if (behavior.select_mode === "single") {
+      const selectedItem = ScreenSingleValueProvider.getProvider(
+        screenKey,
+        screenRoute,
+        screenStateStore
+      ).getValue();
+
+      return selectedItem === String(id);
+    }
+
+    if (behavior.select_mode === "multi") {
+      const selectedItems = ScreenMultiSelectProvider.getProvider(
+        screenKey,
+        screenRoute,
+        screenStateStore
+      ).getSelectedItems();
+
+      return selectedItems?.includes(String(id));
+    }
+  }
+
+  const contextKey = parseContextKey(selection, "ctx");
 
   if (contextKey) {
     if (behavior.select_mode === "single") {

package/Components/MasterCell/utils/index.ts

@@ -8,6 +8,8 @@ import { masterCellLogger } from "../logger";
 import { getCellState } from "../../Cell/utils";
 import { getColorFromData } from "@applicaster/zapp-react-native-utils/cellUtils";
 import { isCellSelected, useBehaviorUpdate } from "./behaviorProvider";
+import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useScreenStateStore } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useScreenStateStore";
 
 const hasElementSpecificViewType = (viewType) => (element) => {
   if (R.isNil(element)) {
@@ -190,10 +192,6 @@ export const getFocusedButtonId = (focusable) => {
   });
 };
 
-export const isSelected = (item: ZappEntry, behavior?: Behavior) => {
-  return isCellSelected(item, behavior);
-};
-
 export const useCellState = ({
   item,
   behavior,
@@ -204,9 +202,17 @@ export const useCellState = ({
   focused: boolean;
 }): CellState => {
   const lastUpdate = useBehaviorUpdate(behavior);
+  const router = useRoute();
+  const screenStateStore = useScreenStateStore();
 
   const _isSelected = useMemo(
-    () => isSelected(item, behavior),
+    () =>
+      isCellSelected({
+        item,
+        screenRoute: router?.pathname,
+        screenStateStore,
+        behavior,
+      }),
     [behavior, item, lastUpdate]
   );