@applicaster/zapp-react-native-ui-components 12.0.0-alpha.4584840011 → 12.0.0-alpha.4620237415

package/Components/Cell/Cell.tsx

@@ -276,13 +276,20 @@ export class CellComponent extends React.Component<Props, State> {
           skipFocusManagerRegistration={skipFocusManagerRegistration}
         >
           {(focused, event) => {
+            const isFocused = this.isCellFocused(focused);
+
+            if (isFocused) {
+              const accessibilityManager = AccessibilityManager.getInstance();
+              accessibilityManager.readText({ text: item.title });
+            }
+
             return (
               <FocusableCell
                 {...{
                   index,
                   CellRenderer,
                   item,
-                  focused: this.isCellFocused(focused),
+                  focused: isFocused,
                   scrollTo: this.scrollToIndex(event),
                   behavior,
                 }}

package/Components/Focusable/__tests__/index.android.test.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import { render, act } from "@testing-library/react-native";
+import { Touchable } from "../../Touchable";
+
+const mockUseIsRTL = jest.fn();
+
+jest.mock("@applicaster/zapp-react-native-utils/localizationUtils", () => ({
+  useIsRTL: mockUseIsRTL,
+}));
+
+const mockUseFocusManager = jest.fn();
+
+jest.mock("@applicaster/zapp-react-native-utils/focusManager", () => ({
+  useFocusManager: mockUseFocusManager,
+}));
+
+const mockUsePrevious = jest.fn();
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/utils", () => ({
+  usePrevious: mockUsePrevious,
+}));
+
+const { Focusable } = require("../index.android");
+
+describe("Focusable", () => {
+  const mockFocusManager = {
+    isFocused: jest.fn(),
+    onDisableFocusChange: jest.fn(),
+    registerFocusable: jest.fn(),
+    focusedId: "test-id",
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockUseIsRTL.mockReturnValue(false);
+    mockUseFocusManager.mockReturnValue(mockFocusManager);
+    mockUsePrevious.mockReturnValue(false);
+  });
+
+  it("updates disableFocus state when disableFocus prop changes", () => {
+    const { rerender } = render(
+      <Focusable id="test-id" disableFocus={false}>
+        <Touchable testID="touchable" />
+      </Focusable>
+    );
+
+    rerender(
+      <Focusable id="test-id" disableFocus={true}>
+        <Touchable testID="touchable" />
+      </Focusable>
+    );
+
+    expect(mockFocusManager.onDisableFocusChange).toHaveBeenCalledWith(
+      "test-id"
+    );
+  });
+
+  it("calls focusManager.registerFocusable on mount and unregisters on unmount", () => {
+    const unregister = jest.fn();
+    mockFocusManager.registerFocusable.mockReturnValue(unregister);
+
+    const { unmount } = render(
+      <Focusable id="test-id">
+        <Touchable testID="touchable" />
+      </Focusable>
+    );
+
+    expect(mockFocusManager.registerFocusable).toHaveBeenCalled();
+    act(() => unmount());
+    expect(unregister).toHaveBeenCalled();
+  });
+});

package/Components/Focusable/index.android.tsx

@@ -128,7 +128,10 @@ function FocusableComponent(props: Props, forwardedRef) {
 
   const _onBlur = React.useCallback(
     (ref, options = {}) => {
-      setFocused(false);
+      if (ref.props.id !== focusManager.focusedId) {
+        setFocused(false);
+      }
+
       onBlur?.(ref, options);
     },
     [onBlur]
@@ -148,15 +151,14 @@ function FocusableComponent(props: Props, forwardedRef) {
     [isRTL, nextFocusDown, nextFocusUp, nextFocusLeft, nextFocusRight]
   );
 
-  const contextState = React.useMemo(
-    () => ({
+  const contextState = React.useMemo(() => {
+    return {
       focused,
       ...parentFocus,
       ref: touchableRef,
       setIsFocusable,
-    }),
-    [parentFocus, focused]
-  );
+    };
+  }, [parentFocus, focused]);
 
   return (
     <Touchable
@@ -173,9 +175,13 @@ function FocusableComponent(props: Props, forwardedRef) {
       {...parentFocus}
     >
       <FocusableContext.Provider value={contextState}>
-        {typeof children === "function"
-          ? children(focused, parentFocus, touchableRef)
-          : children}
+        {React.useMemo(
+          () =>
+            typeof children === "function"
+              ? children(focused, parentFocus, touchableRef)
+              : children,
+          [children, focused, parentFocus]
+        )}
       </FocusableContext.Provider>
     </Touchable>
   );

package/Components/FocusableList/FocusableChild.ts

@@ -31,14 +31,14 @@ const useParentFocus = (
 
 function FocusableChildComponent(props) {
   const { setIsFocusable, ...focusableContext } = useFocusable();
+  const focused = useCellState(props.id);
+
   const parentFocus = useParentFocus(props, focusableContext);
 
   const onLoadFailed = React.useCallback(() => {
     setIsFocusable(false);
   }, []);
 
-  const focused = useCellState(props.id);
-
   return props.renderItem({
     ...props,
     focused,

package/Components/FocusableList/index.tsx

@@ -88,6 +88,7 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
     data = [],
     // eslint-disable-next-line unused-imports/no-unused-vars
     onAllComponentsLoaded, // TODO: re-implement it
+    omitPropsPropagation = [],
   } = props;
 
   useCheckItemIdsForUnique({ componentId: props.id, items: data });
@@ -252,9 +253,9 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
     ]
   );
 
-  const flatListProps = React.useMemo(
-    () =>
-      R.omit([
+  const getFlatListProps = React.useCallback(
+    R.omit(
+      [
         "onListElementFocus",
         "onListElementPress",
         "onListElementPressOut",
@@ -267,17 +268,17 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
         "focusableItemProps",
         "renderItem",
         "extraChildrenData",
-        "extraData",
-        "keyExtractor",
         "onAllComponentsLoaded",
         "focused",
         "id",
         "initialFocusDirection",
         "withStateMemory",
         "useSequentialLoading",
-        ...(props.omitPropsPropagation || []),
-      ])(props),
-    [props]
+        ...omitPropsPropagation,
+      ],
+      R.__
+    ),
+    [omitPropsPropagation]
   );
 
   const onEndReached = React.useCallback(
@@ -289,7 +290,7 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
 
   const initialNumToRender = toFiniteNumberWithDefault(
     10,
-    flatListProps.initialNumToRender
+    props.initialNumToRender
   );
 
   return (
@@ -298,12 +299,10 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
       <FlatList
         focusable={false}
         scrollEnabled={false}
-        extraData={props.extraData}
         ref={ref}
-        {...flatListProps}
+        {...getFlatListProps(props)}
         renderItem={renderItem}
         onEndReached={onEndReached}
-        keyExtractor={props.keyExtractor}
         initialNumToRender={initialNumToRender}
       />
     </ChildrenFocusDeactivatorView>

package/Components/FocusableScrollView/index.tsx

@@ -284,7 +284,7 @@ function FocusableScrollViewComponent(props: Props, ref) {
       };
 
       return (
-        <View onLayout={onItemLayout}>
+        <View key={id} onLayout={onItemLayout}>
           <Focusable
             {...nextFocus}
             onFocus={(element, direction) =>

package/Components/FreezeWithCallback/Freeze.tsx

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

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

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

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

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

package/Components/Image/Image.android.tsx

@@ -8,5 +8,5 @@ import { useImageSource } from "./utils";
 export const QBImage = (props: FastImageProps) => {
   const source = useImageSource(props.source);
 
-  return <FastImage {...props} source={source} />;
+  return <FastImage useLastImageAsDefaultSource {...props} source={source} />;
 };

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

@@ -117,9 +117,6 @@ export const BorderContainerView = (props: Props) => {
     children,
   } = props;
 
-  const borderStyleForMissingBorder =
-    style?.borderWidth === 0 || !style?.borderColor ? { borderRadius: 0 } : {};
-
   const padding =
     borderPosition === "outside"
       ? {
@@ -131,10 +128,7 @@ export const BorderContainerView = (props: Props) => {
       : {};
 
   return (
-    <View
-      {...props}
-      style={[style, styles.container, borderStyleForMissingBorder]}
-    >
+    <View pointerEvents="box-none" {...props} style={[style, styles.container]}>
       <Border style={style} padding={padding} borderPosition={borderPosition} />
       {children}
     </View>

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

@@ -3,6 +3,7 @@ import {
   ifElseFocusedSelected,
   ifElseSelected,
 } from "@applicaster/zapp-react-native-utils/cellUtils";
+import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 import { getPositionStyles } from "./utils";
 
@@ -31,7 +32,11 @@ export const CellBadge = ({
   return {
     type: View, // Cell badge view
     style: {
-      flex: 1,
+      flex: platformSelect({
+        tvos: 0,
+        android_tv: 0,
+        default: 1,
+      }),
       position: "absolute",
       ...getPositionStyles(position, {
         width: value("cell_badge_width"),

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

@@ -5,6 +5,7 @@ import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/acti
 import * as R from "ramda";
 import { getXray } from "@applicaster/zapp-react-native-utils/logger";
 import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
+import { useAccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks";
 
 const { Logger } = getXray();
 
@@ -44,6 +45,11 @@ export function FocusableView({ style, children, item, ...otherProps }: Props) {
 
   const actionContext = useActions(pluginIdentifier);
 
+  const accessibilityManager = useAccessibilityManager({});
+
+  const { ttsLabel = "" } =
+    actionContext?.initialEntryState(item)?.getAccessibility?.(item) || {};
+
   const onPress = (event) => {
     event?.preventDefault?.();
 
@@ -88,6 +94,12 @@ export function FocusableView({ style, children, item, ...otherProps }: Props) {
         mouse: focusable.mouse,
       });
     });
+
+    if (ttsLabel) {
+      accessibilityManager.readText({
+        text: ttsLabel,
+      });
+    }
   };
 
   const handleBlur = (_focusable, _direction) => {

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

@@ -38,21 +38,22 @@ function Image({
 
   const shouldRenderImg = source && !error;
 
+  // Default placeholder image fallback is empty string because it won't rerender
+  // in case of undefined or {uri: undefined} source
+  // https://github.com/facebook/react-native/issues/9195
   const defaultPlaceHolderImage = React.useMemo(
     () => ({ uri: placeholderImage || "" }),
     [source, error]
   );
 
-  const _source = shouldRenderImg
-    ? withDimensions(source)
-    : defaultPlaceHolderImage;
-
   return (
     // @ts-ignore
     <MemoizedImage
       style={style as ImageStyle}
       onError={() => setErrorState(true)}
-      source={_source?.uri ? _source : undefined}
+      source={
+        shouldRenderImg ? withDimensions(source) : defaultPlaceHolderImage
+      }
       {...R.omit(["source"], otherProps)}
     />
   );

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

@@ -31,10 +31,10 @@ function Image({
 
   return (
     <RnImage
-      defaultSource={placeholderImage || ""}
+      defaultSource={placeholderImage || null}
       style={style}
       source={updatedSource}
-      {...R.omit(["source"], otherProps)}
+      {...R.omit(["source", "placeholderImage"], otherProps)}
     />
   );
 }

package/Components/MasterCell/DefaultComponents/ImageBorderContainer/index.ts

@@ -0,0 +1,71 @@
+import { ImageStyle } from "react-native";
+
+import {
+  getImageContainerMarginStyles,
+  ifElseFocusedSelected,
+} from "@applicaster/zapp-react-native-utils/cellUtils";
+import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
+
+export const ImageBorderContainer = ({
+  value,
+  state,
+  imageStyles,
+}: {
+  value: (key: string) => string;
+  state: CellState;
+  imageStyles: ImageStyle;
+}) => {
+  const imageMargins = getImageContainerMarginStyles({ value });
+
+  return {
+    type: "BorderContainerView",
+    style: {
+      position: "absolute",
+      // Image border now separated from the image, so cell padding affects the border position
+      marginTop:
+        toNumberWithDefaultZero(imageMargins.marginTop) +
+        toNumberWithDefaultZero(value("cell_padding_top")),
+      marginLeft:
+        toNumberWithDefaultZero(imageMargins.marginLeft) +
+        toNumberWithDefaultZero(value("cell_padding_left")),
+      marginRight:
+        toNumberWithDefaultZero(imageMargins.marginRight) +
+        toNumberWithDefaultZero(value("cell_padding_right")),
+      marginBottom:
+        toNumberWithDefaultZero(imageMargins.marginBottom) +
+        toNumberWithDefaultZero(value("cell_padding_bottom")),
+      zIndex: 1,
+      borderWidth: value("image_border_size"),
+      borderColor: ifElseFocusedSelected(
+        state,
+        value("image_focused_border_color"),
+        value("image_selected_border_color"),
+        value("image_focused_selected_border_color"),
+        value("image_border_color")
+      ),
+      borderRadius: toNumberWithDefaultZero(value("image_corner_radius")),
+    },
+    additionalProps: {
+      pointerEvents: "none",
+      borderPosition: value("image_border_position"),
+      borderPaddingTop: toNumberWithDefaultZero(
+        value("image_border_padding_top")
+      ),
+      borderPaddingRight: toNumberWithDefaultZero(
+        value("image_border_padding_right")
+      ),
+      borderPaddingBottom: toNumberWithDefaultZero(
+        value("image_border_padding_bottom")
+      ),
+      borderPaddingLeft: toNumberWithDefaultZero(
+        value("image_border_padding_left")
+      ),
+    },
+    elements: [
+      {
+        type: "View",
+        style: imageStyles,
+      },
+    ],
+  };
+};