@react-native-ama/lists 1.0.0

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@react-native-ama/lists",
+  "version": "1.0.0",
+  "private": false,
+  "react-native": "src/index",
+  "types": "dist/index.d.ts",
+  "main": "dist/index.js",
+  "exports": {
+    ".": [
+      {
+        "imports": "./dist/index.js",
+        "types": "./dist/index.d.ts"
+      },
+      "./dist/index.js"
+    ]
+  },
+  "files": [
+    "src",
+    "dist"
+  ],
+  "scripts": {
+    "build": "rm -rf dist && tsc -p ./tsconfig.build.json",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@react-native-ama/internal": "*",
+    "@react-native-ama/core": "*"
+  },
+  "peerDependencies": {
+    "expo": ">=47.0.0",
+    "react": "*",
+    "react-native": "*"
+  },
+  "peerDependenciesMeta": {
+    "expo": {
+      "optional": true
+    }
+  },
+  "keywords": [
+    "react-native",
+    "a11y",
+    "accessibility"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/FormidableLabs/react-native-ama",
+    "directory": "packages/lists"
+  },
+  "bugs": {
+    "url": "https://github.com/FormidableLabs/react-native-ama/issues"
+  },
+  "homepage": "https://github.com/FormidableLabs/react-native-ama#readme",
+  "publishConfig": {
+    "provenance": true
+  },
+  "author": "",
+  "license": "MIT"
+}

package/src/components/DynamicFlatList.test.tsx

@@ -0,0 +1,58 @@
+import { render } from '@testing-library/react-native';
+import * as React from 'react';
+
+import * as UseDynamicList from '../hooks/useDynamicList';
+import { DynamicFlatList } from './DynamicFlatList';
+
+beforeEach(() => {
+  jest.clearAllMocks();
+});
+
+describe('DynamicFlatList', () => {
+  it('uses the style provided by useDynamicFlatList when __DEV__ is true', () => {
+    jest.spyOn(UseDynamicList, 'useDynamicList').mockReturnValue({
+      style: { backgroundColor: 'formidable' },
+    } as any);
+
+    const { getByTestId } = render(
+      <DynamicFlatList
+        data={[]}
+        singularMessage="%count% singular"
+        pluralMessage="%count% plurarl"
+        renderItem={() => null}
+        testID={'test-id'}
+      />,
+    );
+
+    expect(getByTestId('test-id').props.style).toEqual({
+      backgroundColor: 'formidable',
+    });
+  });
+
+  it('does not uses the style provided by useDynamicFlatList when __DEV__ is false', () => {
+    // @ts-ignore
+    global.__DEV__ = false;
+
+    jest.spyOn(UseDynamicList, 'useDynamicList').mockReturnValue({
+      style: { backgroundColor: 'formidable' },
+    } as any);
+
+    const {
+      DynamicFlatList: OriginalDynamicFlatList,
+    } = require('./DynamicFlatList');
+
+    const { getByTestId } = render(
+      <OriginalDynamicFlatList
+        data={[]}
+        singularMessage="%count% singular"
+        pluralMessage="%count% plurarl"
+        renderItem={() => null}
+        testID={'test-id'}
+      />,
+    );
+
+    expect(getByTestId('test-id').props.style).toEqual(undefined);
+  });
+});
+
+jest.mock('../hooks/useDynamicList');

package/src/components/DynamicFlatList.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { FlatList, FlatListProps } from 'react-native';
+
+import { useDynamicList } from '../hooks/useDynamicList';
+import { ListWrapper } from './ListWrapper';
+
+type DynamicFlatListProps<T> = FlatListProps<T> & {
+  singularMessage: string;
+  pluralMessage: string;
+  isPlural?: (count: number) => boolean;
+};
+
+export const DynamicFlatList = React.forwardRef<
+  FlatList,
+  DynamicFlatListProps<any>
+>(
+  (
+    { data, singularMessage, pluralMessage, isPlural, ...rest },
+    forwardedRef,
+  ) => {
+    const dynamicList = useDynamicList({
+      data: data ?? [],
+      pluralMessage,
+      singularMessage,
+      numColumns: rest.numColumns,
+      isPlural,
+    });
+
+    return __DEV__ ? (
+      <ListWrapper
+        rowsCount={dynamicList.rowsCount}
+        columnsCount={dynamicList.columnsCount}>
+        <FlatList
+          data={data}
+          {...rest}
+          ref={forwardedRef}
+          style={dynamicList.style}
+        />
+      </ListWrapper>
+    ) : (
+      <ListWrapper
+        rowsCount={dynamicList.rowsCount}
+        columnsCount={dynamicList.columnsCount}>
+        <FlatList data={data} {...rest} ref={forwardedRef} />
+      </ListWrapper>
+    );
+  },
+);

package/src/components/FlatList.test.tsx

@@ -0,0 +1,378 @@
+import { render, waitFor } from '@testing-library/react-native';
+import * as React from 'react';
+import { AccessibilityInfo, Platform } from 'react-native';
+
+import { FlatList } from './FlatList';
+
+beforeEach(() => {
+  jest.clearAllMocks();
+
+  AccessibilityInfo.announceForAccessibility = jest.fn();
+});
+
+Platform.OS = 'android';
+
+describe('FlatList', () => {
+  describe('listType "dynamic"', () => {
+    it('does not announce the number of items on first render', async () => {
+      render(
+        <FlatList
+          data={DATA}
+          listType="dynamic"
+          singularMessage={'%count% item found'}
+          pluralMessage={'%count% items found'}
+          renderItem={() => null}
+        />,
+      );
+
+      await waitFor(() => {
+        expect(
+          AccessibilityInfo.announceForAccessibility,
+        ).not.toHaveBeenCalled();
+      });
+    });
+
+    it.each`
+      sliceStart | sliceEnd | count | type
+      ${0}       | ${2}     | ${2}  | ${'plural'}
+      ${1}       | ${2}     | ${1}  | ${'singular'}
+    `(
+      'announce the number of items displayed when the data changes',
+      ({ sliceStart, sliceEnd, count, type }) => {
+        const messages: Record<string, string> = {
+          singular: '%count% item found',
+          plural: '%count% items found',
+        };
+
+        const renderAPI = render(
+          <FlatList
+            data={DATA}
+            listType="dynamic"
+            singularMessage={messages.singular}
+            pluralMessage={messages.plural}
+            renderItem={() => null}
+          />,
+        );
+
+        renderAPI.update(
+          <FlatList
+            data={DATA.slice(sliceStart, sliceEnd)}
+            listType="dynamic"
+            singularMessage={messages.singular}
+            pluralMessage={messages.plural}
+            renderItem={() => null}
+          />,
+        );
+
+        expect(AccessibilityInfo.announceForAccessibility).toHaveBeenCalledWith(
+          messages[type].replace('%count%', count),
+        );
+      },
+    );
+
+    it.each`
+      sliceStart | sliceEnd
+      ${0}       | ${2}
+      ${1}       | ${2}
+    `('resets the count of announced items', ({ sliceStart, sliceEnd }) => {
+      const messages: Record<string, string> = {
+        singular: '%count% item found',
+        plural: '%count% items found',
+      };
+
+      const renderAPI = render(
+        <FlatList
+          data={DATA}
+          listType="dynamic"
+          singularMessage={messages.singular}
+          pluralMessage={messages.plural}
+          renderItem={() => null}
+        />,
+      );
+
+      renderAPI.update(
+        <FlatList
+          data={DATA.slice(sliceStart, sliceEnd)}
+          listType="dynamic"
+          singularMessage={messages.singular}
+          pluralMessage={messages.plural}
+          renderItem={() => null}
+        />,
+      );
+
+      renderAPI.update(
+        <FlatList
+          data={DATA}
+          listType="dynamic"
+          singularMessage={messages.singular}
+          pluralMessage={messages.plural}
+          renderItem={() => null}
+        />,
+      );
+
+      renderAPI.update(
+        <FlatList
+          data={DATA.slice(sliceStart, sliceEnd)}
+          listType="dynamic"
+          singularMessage={messages.singular}
+          pluralMessage={messages.plural}
+          renderItem={() => null}
+        />,
+      );
+
+      expect(AccessibilityInfo.announceForAccessibility).toHaveBeenCalledTimes(
+        2,
+      );
+    });
+
+    it('does not announce if the list shows again all the items', () => {
+      const { update } = render(
+        <FlatList
+          data={DATA}
+          listType="dynamic"
+          singularMessage={'%count% item found'}
+          pluralMessage={'%count% items found'}
+          renderItem={() => null}
+        />,
+      );
+
+      update(
+        <FlatList
+          data={DATA}
+          listType="dynamic"
+          singularMessage={'%count% item found'}
+          pluralMessage={'%count% items found'}
+          renderItem={() => null}
+        />,
+      );
+
+      expect(AccessibilityInfo.announceForAccessibility).not.toHaveBeenCalled();
+    });
+
+    it('allows using a custom function to detect if the number of items displayed is plural', () => {
+      const isPlural = jest.fn().mockReturnValue(false);
+
+      const { update } = render(
+        <FlatList
+          data={DATA}
+          listType="dynamic"
+          singularMessage={'%count% item found'}
+          pluralMessage={'%count% items found'}
+          isPlural={isPlural}
+          renderItem={() => null}
+        />,
+      );
+
+      update(
+        <FlatList
+          data={DATA.slice(1)}
+          listType="dynamic"
+          singularMessage={'%count% item found'}
+          pluralMessage={'%count% items found'}
+          isPlural={isPlural}
+          renderItem={() => null}
+        />,
+      );
+
+      expect(isPlural).toHaveBeenCalledWith(2);
+      expect(AccessibilityInfo.announceForAccessibility).toHaveBeenCalledWith(
+        '2 item found',
+      );
+    });
+  });
+
+  describe('listType="static"', () => {
+    it.each`
+      sliceStart | sliceEnd | count | type
+      ${0}       | ${2}     | ${2}  | ${'plural'}
+      ${1}       | ${2}     | ${1}  | ${'singular'}
+    `(
+      'does not announce the number of items displayed when the data changes',
+      ({ sliceStart, sliceEnd }) => {
+        const renderAPI = render(
+          <FlatList data={DATA} listType="static" renderItem={() => null} />,
+        );
+
+        renderAPI.update(
+          <FlatList
+            data={DATA.slice(sliceStart, sliceEnd)}
+            listType="static"
+            renderItem={() => null}
+          />,
+        );
+
+        expect(
+          AccessibilityInfo.announceForAccessibility,
+        ).not.toHaveBeenCalled();
+      },
+    );
+
+    it('uses the given rowCount when specified', () => {
+      const { toJSON } = render(
+        <FlatList
+          data={[]}
+          listType="static"
+          rowsCount={42}
+          renderItem={() => null}
+        />,
+      );
+
+      expect(toJSON()).toMatchInlineSnapshot(`
+        <View
+          columnsCount={1}
+          rowsCount={42}
+        >
+          <RCTScrollView
+            data={Array []}
+            getItem={[Function]}
+            getItemCount={[Function]}
+            keyExtractor={[Function]}
+            onContentSizeChange={[Function]}
+            onLayout={[Function]}
+            onMomentumScrollBegin={[Function]}
+            onMomentumScrollEnd={[Function]}
+            onScroll={[Function]}
+            onScrollBeginDrag={[Function]}
+            onScrollEndDrag={[Function]}
+            removeClippedSubviews={true}
+            renderItem={[Function]}
+            scrollEventThrottle={50}
+            stickyHeaderIndices={Array []}
+            viewabilityConfigCallbackPairs={Array []}
+          >
+            <View />
+          </RCTScrollView>
+        </View>
+      `);
+    });
+
+    it('divides the number of items by the number of columns', () => {
+      const { toJSON } = render(
+        <FlatList
+          data={DATA}
+          listType="static"
+          numColumns={2}
+          renderItem={() => null}
+        />,
+      );
+
+      expect(toJSON()).toMatchInlineSnapshot(`
+        <View
+          columnsCount={2}
+          rowsCount={2}
+        >
+          <RCTScrollView
+            data={
+              Array [
+                Object {
+                  "id": "bd7acbea-c1b1-46c2-aed5-3ad53abb28ba",
+                  "title": "Formidable",
+                },
+                Object {
+                  "id": "3ac68afc-c605-48d3-a4f8-fbd91aa97f63",
+                  "title": "React Native",
+                },
+                Object {
+                  "id": "58694a0f-3da1-471f-bd96-145571e29d72",
+                  "title": "Typescript",
+                },
+              ]
+            }
+            getItem={[Function]}
+            getItemCount={[Function]}
+            keyExtractor={[Function]}
+            onContentSizeChange={[Function]}
+            onLayout={[Function]}
+            onMomentumScrollBegin={[Function]}
+            onMomentumScrollEnd={[Function]}
+            onScroll={[Function]}
+            onScrollBeginDrag={[Function]}
+            onScrollEndDrag={[Function]}
+            removeClippedSubviews={true}
+            renderItem={[Function]}
+            scrollEventThrottle={50}
+            stickyHeaderIndices={Array []}
+            viewabilityConfigCallbackPairs={Array []}
+          >
+            <View>
+              <View
+                onLayout={[Function]}
+                style={null}
+              />
+              <View
+                onLayout={[Function]}
+                style={null}
+              />
+              <View
+                onLayout={[Function]}
+                style={null}
+              />
+            </View>
+          </RCTScrollView>
+        </View>
+      `);
+    });
+
+    it('sets rowsCount to 0 if the data is undefined', () => {
+      const { toJSON } = render(
+        <FlatList
+          data={undefined}
+          listType="static"
+          numColumns={2}
+          renderItem={() => null}
+        />,
+      );
+
+      expect(toJSON()).toMatchInlineSnapshot(`
+        <View
+          columnsCount={2}
+          rowsCount={0}
+        >
+          <RCTScrollView
+            getItem={[Function]}
+            getItemCount={[Function]}
+            keyExtractor={[Function]}
+            onContentSizeChange={[Function]}
+            onLayout={[Function]}
+            onMomentumScrollBegin={[Function]}
+            onMomentumScrollEnd={[Function]}
+            onScroll={[Function]}
+            onScrollBeginDrag={[Function]}
+            onScrollEndDrag={[Function]}
+            removeClippedSubviews={true}
+            renderItem={[Function]}
+            scrollEventThrottle={50}
+            stickyHeaderIndices={Array []}
+            viewabilityConfigCallbackPairs={Array []}
+          >
+            <View />
+          </RCTScrollView>
+        </View>
+      `);
+    });
+  });
+});
+
+jest.mock('./ListWrapper', () => {
+  const { View } = jest.requireActual('react-native');
+
+  return {
+    // @ts-ignore
+    ListWrapper: props => <View {...props} />,
+  };
+});
+
+const DATA = [
+  {
+    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
+    title: 'Formidable',
+  },
+  {
+    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
+    title: 'React Native',
+  },
+  {
+    id: '58694a0f-3da1-471f-bd96-145571e29d72',
+    title: 'Typescript',
+  },
+];

package/src/components/FlatList.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import type {
+  FlatList as RNFlatList,
+  FlatListProps as RNFlatListProps,
+} from 'react-native';
+
+import type { UseDynamicList } from '../hooks/useDynamicList';
+import { DynamicFlatList } from './DynamicFlatList';
+import { StaticFlatList, StaticFlatListProps } from './StaticFlatList';
+
+export type FlatListProps<T> = RNFlatListProps<T> &
+  (
+    | ({
+        listType: 'static';
+      } & StaticFlatListProps)
+    | ({
+        listType: 'dynamic';
+      } & UseDynamicList)
+  );
+
+export const FlatList = React.forwardRef<RNFlatList, FlatListProps<any>>(
+  ({ listType, ...rest }, forwardRef) => {
+    return listType === 'dynamic' ? (
+      <DynamicFlatList ref={forwardRef} {...(rest as any)} />
+    ) : (
+      <StaticFlatList ref={forwardRef} {...(rest as any)} />
+    );
+  },
+);

package/src/components/ListWrapper.android.test.tsx

@@ -0,0 +1,20 @@
+import { render } from '@testing-library/react-native';
+import * as React from 'react';
+import { Platform } from 'react-native';
+
+describe('ListWrapper', () => {
+  it('renders the AMAFlatListWrapper is the Platform is Android', () => {
+    Platform.OS = 'android';
+
+    const { ListWrapper } = require('./ListWrapper');
+
+    const result = render(<ListWrapper rowsCount={1} />);
+
+    expect(result.toJSON()).toMatchInlineSnapshot(`
+      <AmaFlatListWrapper
+        columnsCount={1}
+        rowsCount={1}
+      />
+    `);
+  });
+});

package/src/components/ListWrapper.ios.test.tsx

@@ -0,0 +1,15 @@
+import { render } from '@testing-library/react-native';
+import * as React from 'react';
+import { Platform } from 'react-native';
+
+describe('ListWrapper', () => {
+  it('renders an empty wrapper is the Platform is iOS', () => {
+    Platform.OS = 'ios';
+
+    const { ListWrapper } = require('./ListWrapper');
+
+    const result = render(<ListWrapper rowsCount={1} />);
+
+    expect(result.toJSON()).toMatchInlineSnapshot('null');
+  });
+});

package/src/components/ListWrapper.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { Platform, requireNativeComponent } from 'react-native';
+
+type FlatListWrapperProps = React.PropsWithChildren<{
+  rowsCount: number;
+  columnsCount?: number;
+}>;
+
+const isAndroid = Platform.OS === 'android';
+
+export const ListWrapper = ({
+  children,
+  rowsCount,
+  columnsCount = 1,
+}: FlatListWrapperProps) => {
+  return (
+    <AMAFlatListWrapper rowsCount={rowsCount} columnsCount={columnsCount}>
+      {children}
+    </AMAFlatListWrapper>
+  );
+};
+
+/*
+ * Used instead of React.Fragment to avoid the warning:
+ *  ...React.Fragment can only have `key` and `children` props.
+ */
+const EmptyComponent: React.FC = ({
+  children,
+}: React.PropsWithChildren<{}>) => {
+  return <>{children}</>;
+};
+
+const AMAFlatListWrapper = isAndroid
+  ? requireNativeComponent<FlatListWrapperProps>('AmaFlatListWrapper')
+  : EmptyComponent;

package/src/components/StaticFlatList.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { FlatList, FlatListProps } from 'react-native';
+
+import { ListWrapper } from './ListWrapper';
+
+export type StaticFlatListProps = {
+  rowsCount?: number;
+  numColumns?: number;
+};
+
+export const StaticFlatList = React.forwardRef<
+  FlatList,
+  FlatListProps<any> & StaticFlatListProps
+>(({ data, numColumns, rowsCount, ...rest }, ref) => {
+  const columns = numColumns || 1;
+
+  const rows = React.useMemo(() => {
+    if (rowsCount) {
+      return rowsCount;
+    }
+
+    const length = data?.length || 0;
+
+    return Math.ceil(columns > 1 && length > 0 ? length / columns : length);
+  }, [columns, data?.length, rowsCount]);
+
+  return (
+    <ListWrapper rowsCount={rows} columnsCount={columns}>
+      <FlatList data={data} {...rest} ref={ref} />
+    </ListWrapper>
+  );
+});