@aws-amplify/ui-react-native 0.0.0-in-app-messaging-20220826014803

package/src/primitives/Carousel/Carousel.tsx

@@ -0,0 +1,115 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  Dimensions,
+  EventSubscription,
+  FlatList,
+  ListRenderItemInfo,
+  ScaledSize,
+  View,
+  ViewToken,
+} from 'react-native';
+
+import CarouselPageIndicator from './CarouselPageIndicator';
+import { VIEWABILITY_CONFIG } from './constants';
+import { styles } from './styles';
+import { CarouselProps } from './types';
+
+export default function Carousel<T>(
+  props: CarouselProps<T>
+): JSX.Element | null {
+  const {
+    data,
+    indicatorActiveStyle,
+    indicatorInactiveStyle,
+    renderItem,
+    style,
+  } = props;
+  const flatListRef = useRef<FlatList>(null);
+  const indexRef = useRef<ViewToken['index']>(0);
+  const [currentIndex, setCurrentIndex] = useState<ViewToken['index']>(0);
+  const windowWidthRef = useRef(Dimensions.get('window').width);
+  const [width, setWidth] = useState(windowWidthRef.current);
+
+  const onViewableItemsChanged = useRef(
+    ({ viewableItems }: { viewableItems: ViewToken[] }) => {
+      if (viewableItems.length !== 1) {
+        return;
+      }
+      const [item] = viewableItems;
+      indexRef.current = item.index;
+      setCurrentIndex(indexRef.current);
+    }
+  );
+
+  const updateOrientation = useCallback((updatedWidth: number) => {
+    if (windowWidthRef.current !== updatedWidth) {
+      windowWidthRef.current = updatedWidth;
+      setWidth(updatedWidth);
+    }
+  }, []);
+
+  useEffect(() => {
+    // on width change (due to orientation change), jump to the new index offset
+    flatListRef?.current?.scrollToOffset({
+      offset: width * indexRef.current!,
+      animated: false,
+    });
+  }, [width]);
+
+  useEffect(() => {
+    const orientationHandler = ({ window }: { window: ScaledSize }) => {
+      updateOrientation(window.width);
+    };
+    const subscription = Dimensions.addEventListener(
+      'change',
+      orientationHandler
+    ) as unknown as EventSubscription;
+
+    // Clean up listener. Dimensions.removeEventListener is deprecated as of React Native 0.65 but it is technically
+    // available so try to remove via a `EmitterSubscription` first before falling back to `removeEventListener`
+    return () => {
+      if (typeof subscription?.remove === 'function') {
+        subscription?.remove();
+      } else {
+        Dimensions.removeEventListener('change', orientationHandler);
+      }
+    };
+  }, [updateOrientation]);
+
+  const carouselRenderItem = (renderInfo: ListRenderItemInfo<T>) => (
+    <View style={{ width }}>{renderItem(renderInfo)}</View>
+  );
+
+  if (!data?.length) {
+    return null;
+  }
+
+  return (
+    <>
+      <FlatList
+        bounces={false}
+        data={data}
+        decelerationRate="fast"
+        disableIntervalMomentum
+        horizontal
+        onViewableItemsChanged={onViewableItemsChanged.current}
+        ref={flatListRef}
+        renderItem={carouselRenderItem}
+        renderToHardwareTextureAndroid
+        showsHorizontalScrollIndicator={false}
+        showsVerticalScrollIndicator={false}
+        snapToAlignment="start"
+        snapToInterval={width}
+        style={style}
+        viewabilityConfig={VIEWABILITY_CONFIG}
+      />
+      <CarouselPageIndicator
+        activeStyle={indicatorActiveStyle}
+        currentIndex={currentIndex}
+        inactiveStyle={indicatorInactiveStyle}
+        numberOfItems={data.length}
+        style={styles.indicator}
+      />
+    </>
+  );
+}

package/src/primitives/Carousel/CarouselPageIndicator.tsx

@@ -0,0 +1,39 @@
+import React, { useMemo } from 'react';
+import { View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import { CarouselPageIndicatorProps } from './types';
+import {
+  DEFAULT_CAROUSEL_INDICATOR_ACTIVE_STYLE,
+  DEFAULT_CAROUSEL_INDICATOR_INACTIVE_STYLE,
+} from './constants';
+
+export default function CarouselPageIndicator({
+  activeStyle,
+  currentIndex,
+  inactiveStyle,
+  numberOfItems,
+  style,
+}: CarouselPageIndicatorProps): JSX.Element {
+  const items = useMemo(
+    () =>
+      new Array(numberOfItems ?? 0)
+        .fill(null)
+        .map((_, index) =>
+          (currentIndex ?? 0) === index ? (
+            <View
+              style={[DEFAULT_CAROUSEL_INDICATOR_ACTIVE_STYLE, activeStyle]}
+              key={`indicator-item-${index}`}
+            />
+          ) : (
+            <View
+              style={[DEFAULT_CAROUSEL_INDICATOR_INACTIVE_STYLE, inactiveStyle]}
+              key={`indicator-item-${index}`}
+            />
+          )
+        ),
+    [activeStyle, currentIndex, inactiveStyle, numberOfItems]
+  );
+
+  return <SafeAreaView style={style}>{items}</SafeAreaView>;
+}

package/src/primitives/Carousel/__tests__/Carousel.spec.tsx

@@ -0,0 +1,185 @@
+import React from 'react';
+import {
+  Dimensions,
+  EmitterSubscription,
+  FlatList,
+  ListRenderItem,
+  Text,
+  ViewToken,
+} from 'react-native';
+import { act, create, ReactTestRenderer } from 'react-test-renderer';
+
+import Carousel from '../Carousel';
+import CarouselPageIndicator from '../CarouselPageIndicator';
+
+jest.mock('../CarouselPageIndicator', () => 'CarouselPageIndicator');
+
+type ItemProps = { str?: string };
+
+const Item = ({ str }: ItemProps) => <Text>{str}</Text>;
+const renderItem: ListRenderItem<ItemProps> = ({ item }) => (
+  <Item str={item.str} />
+);
+
+describe('Carousel', () => {
+  let carousel: ReactTestRenderer;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  /* eslint-disable no-console */
+  // turn off console errors during tests, can be safely removed once React Native v0.64 is no longer supported
+  const consoleWarn = console.warn;
+  console.warn = jest.fn();
+  afterAll(() => {
+    console.warn = consoleWarn;
+    /* eslint-enable no-console */
+  });
+
+  it('renders with multiple items in the data', () => {
+    const data = [
+      { key: 1, str: 'foo' },
+      { key: 2, str: 'bar' },
+    ];
+    act(() => {
+      carousel = create(<Carousel data={data} renderItem={renderItem} />);
+    });
+    const instance = carousel.root;
+
+    expect(carousel.toJSON()).toMatchSnapshot();
+    expect(instance.findAllByType(Text)).toHaveLength(2);
+    expect(instance.findByType(CarouselPageIndicator).props.numberOfItems).toBe(
+      2
+    );
+  });
+
+  it('renders with just one item in the data', () => {
+    const data = [{ key: 1, str: 'qux' }];
+    act(() => {
+      carousel = create(<Carousel data={data} renderItem={renderItem} />);
+    });
+    const instance = carousel.root;
+
+    expect(carousel.toJSON()).toMatchSnapshot();
+    expect(instance.findAllByType(Text)).toHaveLength(1);
+    expect(instance.findByType(CarouselPageIndicator).props.numberOfItems).toBe(
+      1
+    );
+  });
+
+  it('returns null if data is null', () => {
+    // Ideally, this should not happen but, if it does, we should be able to handle gracefully
+    act(() => {
+      carousel = create(
+        <Carousel data={null as any} renderItem={renderItem} />
+      );
+    });
+
+    expect(carousel.toJSON()).toBeNull();
+  });
+
+  it('returns null if there are no items in the data', () => {
+    // Ideally, this should not happen but, if it does, we should be able to handle gracefully
+    act(() => {
+      carousel = create(<Carousel data={[]} renderItem={renderItem} />);
+    });
+
+    expect(carousel.toJSON()).toBeNull();
+  });
+
+  it('calls the orientation handler on orientation change', () => {
+    let orientationHandler: Function;
+    const data = [{ key: 1, str: 'qux' }];
+    const window = { width: 350 };
+    const addEventListenerSpy = jest.spyOn(Dimensions, 'addEventListener');
+    // Get a reference to the orientation handler by spying on the `addEventListener` call
+    addEventListenerSpy.mockImplementation(((_, handler) => {
+      orientationHandler = handler;
+    }) as Dimensions['addEventListener']);
+    act(() => {
+      carousel = create(<Carousel data={data} renderItem={renderItem} />);
+    });
+    const instance = carousel.root;
+
+    expect(
+      instance.findByType(Text).parent!.parent!.props.style
+    ).not.toStrictEqual(window);
+
+    // Call the orientation handler with an arbitrary `ScaledSize`
+    act(() => {
+      orientationHandler({ window });
+    });
+
+    expect(instance.findByType(Text).parent!.parent!.props.style).toStrictEqual(
+      window
+    );
+  });
+
+  it('cleans up the orientation change listener (React Native < v0.65)', () => {
+    // ensure that `addEventListener` returns `undefined`
+    jest
+      .spyOn(Dimensions, 'addEventListener')
+      .mockReturnValue(undefined as unknown as EmitterSubscription);
+
+    const removeEventListener = jest.spyOn(Dimensions, 'removeEventListener');
+
+    act(() => {
+      carousel = create(<Carousel data={[]} renderItem={renderItem} />);
+    });
+    act(() => {
+      carousel.unmount();
+    });
+
+    expect(removeEventListener).toBeCalled();
+  });
+
+  it('cleans up the orientation change listener (React Native v0.65+)', () => {
+    const mockSubscription = { remove: jest.fn() };
+    const addEventListenerSpy = jest.spyOn(Dimensions, 'addEventListener');
+    (addEventListenerSpy as jest.Mock).mockReturnValue(mockSubscription);
+    act(() => {
+      carousel = create(<Carousel data={[]} renderItem={renderItem} />);
+    });
+    act(() => {
+      carousel.unmount();
+    });
+    expect(mockSubscription.remove).toBeCalled();
+  });
+
+  it('sets the index when viewable items change', () => {
+    const data = [
+      { key: 1, str: 'foo' },
+      { key: 2, str: 'bar' },
+    ];
+    act(() => {
+      carousel = create(<Carousel data={data} renderItem={renderItem} />);
+    });
+    const instance = carousel.root;
+    const flatList = instance.findByType(FlatList);
+    const { onViewableItemsChanged } = flatList.props as FlatList['props'];
+
+    expect(instance.findByType(CarouselPageIndicator).props.currentIndex).toBe(
+      0
+    );
+
+    act(() => {
+      const info = { viewableItems: [{ index: 1 } as ViewToken], changed: [] };
+      onViewableItemsChanged!(info);
+    });
+
+    expect(instance.findByType(CarouselPageIndicator).props.currentIndex).toBe(
+      1
+    );
+
+    // should not update the index if `viewableItems` is empty
+    act(() => {
+      const info = { viewableItems: [], changed: [] };
+      onViewableItemsChanged!(info);
+    });
+
+    expect(instance.findByType(CarouselPageIndicator).props.currentIndex).toBe(
+      1
+    );
+  });
+});

package/src/primitives/Carousel/__tests__/CarouselPageIndicator.spec.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { View } from 'react-native';
+import { act, create, ReactTestRenderer } from 'react-test-renderer';
+
+import CarouselPageIndicator from '../CarouselPageIndicator';
+
+describe('CarouselPageIndicator', () => {
+  let carouselPageIndicator: ReactTestRenderer;
+
+  it('renders with multiple items', () => {
+    act(() => {
+      carouselPageIndicator = create(
+        <CarouselPageIndicator currentIndex={0} numberOfItems={3} />
+      );
+    });
+    const instance = carouselPageIndicator.root;
+
+    expect(carouselPageIndicator.toJSON()).toMatchSnapshot();
+    expect(instance.findAllByType(View)).toHaveLength(3);
+  });
+
+  it('renders with just one item', () => {
+    act(() => {
+      carouselPageIndicator = create(
+        <CarouselPageIndicator currentIndex={0} numberOfItems={1} />
+      );
+    });
+    const instance = carouselPageIndicator.root;
+
+    expect(carouselPageIndicator.toJSON()).toMatchSnapshot();
+    expect(instance.findAllByType(View)).toHaveLength(1);
+  });
+
+  it('handles null numberOfItems value', () => {
+    // Ideally, this should not happen but, if it does, we should be able to handle gracefully
+    act(() => {
+      carouselPageIndicator = create(
+        <CarouselPageIndicator currentIndex={0} numberOfItems={null as any} />
+      );
+    });
+
+    expect(carouselPageIndicator.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders indicator styles based on current index', () => {
+    act(() => {
+      carouselPageIndicator = create(
+        <CarouselPageIndicator currentIndex={1} numberOfItems={3} />
+      );
+    });
+    const instance = carouselPageIndicator.root;
+    const indicators = instance.findAllByType(View);
+    const activeIndicator = indicators[1];
+
+    expect(carouselPageIndicator.toJSON()).toMatchSnapshot();
+    expect(indicators[0].props).toStrictEqual(indicators[2].props);
+    expect(indicators[0].props).not.toStrictEqual(activeIndicator.props);
+    expect(indicators[2].props).not.toStrictEqual(activeIndicator.props);
+  });
+
+  it('handles null index value', () => {
+    // Ideally, this should not happen but, if it does, we should be able to handle gracefully
+    act(() => {
+      carouselPageIndicator = create(
+        <CarouselPageIndicator currentIndex={null} numberOfItems={5} />
+      );
+    });
+
+    expect(carouselPageIndicator.toJSON()).toMatchSnapshot();
+  });
+});

package/src/primitives/Carousel/__tests__/__snapshots__/Carousel.spec.tsx.snap

@@ -0,0 +1,216 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Carousel renders with just one item in the data 1`] = `
+Array [
+  <RCTScrollView
+    bounces={false}
+    data={
+      Array [
+        Object {
+          "key": 1,
+          "str": "qux",
+        },
+      ]
+    }
+    decelerationRate="fast"
+    disableIntervalMomentum={true}
+    getItem={[Function]}
+    getItemCount={[Function]}
+    horizontal={true}
+    keyExtractor={[Function]}
+    onContentSizeChange={[Function]}
+    onLayout={[Function]}
+    onMomentumScrollBegin={[Function]}
+    onMomentumScrollEnd={[Function]}
+    onScroll={[Function]}
+    onScrollBeginDrag={[Function]}
+    onScrollEndDrag={[Function]}
+    onViewableItemsChanged={[Function]}
+    removeClippedSubviews={false}
+    renderItem={[Function]}
+    renderToHardwareTextureAndroid={true}
+    scrollEventThrottle={50}
+    showsHorizontalScrollIndicator={false}
+    showsVerticalScrollIndicator={false}
+    snapToAlignment="start"
+    snapToInterval={750}
+    stickyHeaderIndices={Array []}
+    viewabilityConfig={
+      Object {
+        "itemVisiblePercentThreshold": 60,
+      }
+    }
+    viewabilityConfigCallbackPairs={
+      Array [
+        Object {
+          "onViewableItemsChanged": [Function],
+          "viewabilityConfig": Object {
+            "itemVisiblePercentThreshold": 60,
+          },
+        },
+      ]
+    }
+  >
+    <View>
+      <View
+        onLayout={[Function]}
+        style={
+          Array [
+            Object {
+              "flexDirection": "row",
+            },
+            null,
+          ]
+        }
+      >
+        <View
+          style={
+            Object {
+              "width": 750,
+            }
+          }
+        >
+          <Text>
+            qux
+          </Text>
+        </View>
+      </View>
+    </View>
+  </RCTScrollView>,
+  <CarouselPageIndicator
+    currentIndex={0}
+    numberOfItems={1}
+    style={
+      Object {
+        "bottom": 0,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+      }
+    }
+  />,
+]
+`;
+
+exports[`Carousel renders with multiple items in the data 1`] = `
+Array [
+  <RCTScrollView
+    bounces={false}
+    data={
+      Array [
+        Object {
+          "key": 1,
+          "str": "foo",
+        },
+        Object {
+          "key": 2,
+          "str": "bar",
+        },
+      ]
+    }
+    decelerationRate="fast"
+    disableIntervalMomentum={true}
+    getItem={[Function]}
+    getItemCount={[Function]}
+    horizontal={true}
+    keyExtractor={[Function]}
+    onContentSizeChange={[Function]}
+    onLayout={[Function]}
+    onMomentumScrollBegin={[Function]}
+    onMomentumScrollEnd={[Function]}
+    onScroll={[Function]}
+    onScrollBeginDrag={[Function]}
+    onScrollEndDrag={[Function]}
+    onViewableItemsChanged={[Function]}
+    removeClippedSubviews={false}
+    renderItem={[Function]}
+    renderToHardwareTextureAndroid={true}
+    scrollEventThrottle={50}
+    showsHorizontalScrollIndicator={false}
+    showsVerticalScrollIndicator={false}
+    snapToAlignment="start"
+    snapToInterval={750}
+    stickyHeaderIndices={Array []}
+    viewabilityConfig={
+      Object {
+        "itemVisiblePercentThreshold": 60,
+      }
+    }
+    viewabilityConfigCallbackPairs={
+      Array [
+        Object {
+          "onViewableItemsChanged": [Function],
+          "viewabilityConfig": Object {
+            "itemVisiblePercentThreshold": 60,
+          },
+        },
+      ]
+    }
+  >
+    <View>
+      <View
+        onLayout={[Function]}
+        style={
+          Array [
+            Object {
+              "flexDirection": "row",
+            },
+            null,
+          ]
+        }
+      >
+        <View
+          style={
+            Object {
+              "width": 750,
+            }
+          }
+        >
+          <Text>
+            foo
+          </Text>
+        </View>
+      </View>
+      <View
+        onLayout={[Function]}
+        style={
+          Array [
+            Object {
+              "flexDirection": "row",
+            },
+            null,
+          ]
+        }
+      >
+        <View
+          style={
+            Object {
+              "width": 750,
+            }
+          }
+        >
+          <Text>
+            bar
+          </Text>
+        </View>
+      </View>
+    </View>
+  </RCTScrollView>,
+  <CarouselPageIndicator
+    currentIndex={0}
+    numberOfItems={2}
+    style={
+      Object {
+        "bottom": 0,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+      }
+    }
+  />,
+]
+`;