@react-native-ama/lists 1.0.0

package/src/hooks/useDynamicFlatList.test.ts

@@ -0,0 +1,50 @@
+import * as UseChecks from '@react-native-ama/core/src/hooks/useChecks';
+import { renderHook } from '@testing-library/react-native';
+
+import { useDynamicList } from './useDynamicList';
+
+beforeEach(() => {
+  jest.clearAllMocks();
+});
+
+const logResult = jest.fn();
+
+describe('useDynamicFlatList', () => {
+  beforeEach(function () {
+    // @ts-ignore
+    jest.spyOn(UseChecks, 'useChecks').mockReturnValue({
+      logResult,
+    } as any);
+  });
+
+  it('checks that the singular message contains the word %count%', () => {
+    renderHook(() =>
+      useDynamicList({
+        data: [],
+        singularMessage: 'hello',
+        pluralMessage: '%count% me',
+      }),
+    );
+
+    expect(logResult).toHaveBeenCalledWith('useDynamicFlatList', {
+      extra: 'hello',
+      message: 'Special string %count% not found in singularMessage',
+      rule: 'FLATLIST_NO_COUNT_IN_SINGULAR_MESSAGE',
+    });
+  });
+
+  it('checks that the plural message contains the word %count%', () => {
+    renderHook(() =>
+      useDynamicList({
+        data: [],
+        accessibilitySingularMessage: '%count% ok',
+      } as any),
+    );
+
+    expect(logResult).toHaveBeenCalledWith('useDynamicFlatList', {
+      extra: undefined,
+      message: 'Special string %count% not found in pluralMessage',
+      rule: 'FLATLIST_NO_COUNT_IN_PLURAL_MESSAGE',
+    });
+  });
+});

package/src/hooks/useDynamicList.ts

@@ -0,0 +1,84 @@
+import { useChecks } from '@react-native-ama/core';
+import React from 'react';
+import { AccessibilityInfo } from 'react-native';
+
+export type UseDynamicList = {
+  data: ArrayLike<any>;
+  singularMessage: string;
+  pluralMessage: string;
+  isPlural?: (count: number) => boolean;
+  numColumns?: number;
+};
+
+export const useDynamicList = ({
+  data,
+  singularMessage,
+  pluralMessage,
+  isPlural = simpleIsPlural,
+  numColumns = 1,
+}: UseDynamicList) => {
+  const isFirstRender = React.useRef(true);
+  const initialCount = React.useRef(data?.length);
+  const lastItemsCount = React.useRef<null | number>(null);
+
+  const checks = __DEV__ ? useChecks?.() : null;
+
+  __DEV__ &&
+    React.useEffect(() => {
+      if (!singularMessage?.includes('%count%')) {
+        checks?.logResult('useDynamicFlatList', {
+          rule: 'FLATLIST_NO_COUNT_IN_SINGULAR_MESSAGE',
+          message: 'Special string %count% not found in singularMessage',
+          extra: singularMessage,
+        });
+      }
+
+      if (!pluralMessage?.includes('%count%')) {
+        checks?.logResult('useDynamicFlatList', {
+          rule: 'FLATLIST_NO_COUNT_IN_PLURAL_MESSAGE',
+          message: 'Special string %count% not found in pluralMessage',
+          extra: pluralMessage,
+        });
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [pluralMessage, singularMessage, checks?.logResult]);
+
+  React.useEffect(() => {
+    const itemsCount = data?.length || 0;
+
+    if (
+      isFirstRender.current ||
+      itemsCount === initialCount.current ||
+      itemsCount === lastItemsCount.current
+    ) {
+      isFirstRender.current = false;
+      lastItemsCount.current = null;
+
+      return;
+    }
+
+    const message = isPlural(itemsCount) ? pluralMessage : singularMessage;
+    const messageToAnnounce = message.replace('%count%', itemsCount.toString());
+
+    AccessibilityInfo.announceForAccessibility(messageToAnnounce);
+
+    lastItemsCount.current = itemsCount;
+  }, [pluralMessage, singularMessage, data, isPlural]);
+
+  const rowsCount = lastItemsCount.current || initialCount.current || 0;
+
+  return __DEV__
+    ? {
+        rowsCount: rowsCount / numColumns,
+        columnsCount: numColumns,
+        style: checks?.debugStyle,
+      }
+    : {
+        rowsCount: rowsCount / numColumns,
+        columnsCount: numColumns,
+      };
+};
+
+function simpleIsPlural(count: number) {
+  return count !== 1;
+}

package/src/index.ts

@@ -0,0 +1,8 @@
+// Components
+export { DynamicFlatList } from './components/DynamicFlatList';
+export { FlatList } from './components/FlatList';
+export { ListWrapper } from './components/ListWrapper';
+export { StaticFlatList } from './components/StaticFlatList';
+
+// Hooks
+export { useDynamicList } from './hooks/useDynamicList';