@hero-design/rn 8.56.0 → 8.57.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.56.0",
+  "version": "8.57.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -73,6 +73,7 @@
     "jest-junit": "^16.0.0",
     "prettier-config-hd": "8.42.4",
     "react": "18.2.0",
+    "react-dom": "^18.2.0",
     "react-native": "0.71.14",
     "react-native-gesture-handler": "~2.5.0",
     "react-native-linear-gradient": "^2.6.2",

package/src/components/AnimatedScroller/__tests__/ScrollablesWithFAB.spec.tsx

@@ -0,0 +1,172 @@
+import React from 'react';
+import { useTheme } from '@emotion/react';
+import { fireEvent } from '@testing-library/react-native';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import { FlatListWithFAB, ScrollViewWithFAB, SectionListWithFAB } from '..';
+import Box from '../../Box';
+import { ActionGroupProps } from '../../FAB/ActionGroup';
+import { FABProps } from '../../FAB/FAB';
+import Typography from '../../Typography';
+import { ScrollViewWithFABProps } from '../ScrollViewWithFAB';
+import { FlatListWithFABProps } from '../FlatListWithFAB';
+import SectionHeading from '../../SectionHeading';
+
+const ExampleScrollViewWithFAB = ({ fabProps }: ScrollViewWithFABProps) => (
+  <ScrollViewWithFAB fabProps={fabProps} testID="scrollable-with-fab">
+    <Box style={{ height: 2000 }} justifyContent="space-between">
+      <Typography.Body>Content 1</Typography.Body>
+      <Typography.Body>Content 2</Typography.Body>
+      <Typography.Body>Content 3</Typography.Body>
+    </Box>
+  </ScrollViewWithFAB>
+);
+
+function ExampleFlatListWithFAB<T>({ fabProps }: FlatListWithFABProps<T>) {
+  return (
+    <FlatListWithFAB
+      testID="scrollable-with-fab"
+      fabProps={fabProps}
+      data={Array.from({ length: 30 }, (_, i) => ({
+        id: i,
+        title: `Content ${i}`,
+      }))}
+      renderItem={({ item }) => (
+        <Box marginBottom="xxxxlarge">
+          <Typography.Title level="h5">{item.title}</Typography.Title>
+          <Typography.Body>Item {item.id}</Typography.Body>
+        </Box>
+      )}
+    />
+  );
+}
+
+function ExampleSectionListWithFAB<T>({ fabProps }: FlatListWithFABProps<T>) {
+  const theme = useTheme();
+
+  return (
+    <SectionListWithFAB
+      testID="scrollable-with-fab"
+      fabProps={fabProps}
+      sections={[
+        {
+          title: 'Title 1',
+          data: ['Content 1', 'Content 2', 'Content 3', 'Content 4'],
+        },
+        {
+          title: 'Title 2',
+          data: ['Content 5', 'Content 6', 'Content 7'],
+        },
+      ]}
+      renderSectionHeader={({ section: { title } }) => (
+        <SectionHeading text={title} />
+      )}
+      renderItem={({ item }) => (
+        <Typography.Title style={{ marginBottom: theme.space.xxxxlarge }}>
+          {item}
+        </Typography.Title>
+      )}
+    />
+  );
+}
+
+const defaultFabProps: FABProps = {
+  icon: 'speaker',
+  title: 'Shout out',
+  animated: true,
+};
+
+const defaultActionGroupProps: ActionGroupProps = {
+  fabTitle: 'Shout out',
+  items: [
+    { icon: 'speaker', title: 'Announcements' },
+    { icon: 'target', title: 'Goal' },
+  ],
+  active: false,
+};
+
+describe('Scrollables With FAB', () => {
+  it.each`
+    fabComponent     | ScrollComponent
+    ${'FAB'}         | ${ExampleScrollViewWithFAB}
+    ${'ActionGroup'} | ${ExampleScrollViewWithFAB}
+    ${'FAB'}         | ${ExampleFlatListWithFAB}
+    ${'ActionGroup'} | ${ExampleFlatListWithFAB}
+    ${'FAB'}         | ${ExampleSectionListWithFAB}
+    ${'ActionGroup'} | ${ExampleSectionListWithFAB}
+  `(
+    '$ScrollComponent renders $fabComponent correctly',
+    ({ fabComponent, ScrollComponent }) => {
+      const fabProps =
+        fabComponent === 'FAB' ? defaultFabProps : defaultActionGroupProps;
+
+      const { getByText, toJSON } = renderWithTheme(
+        <ScrollComponent fabProps={fabProps} />
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+      expect(getByText('Content 1')).toBeDefined();
+      expect(getByText('Content 2')).toBeDefined();
+      expect(getByText('Content 3')).toBeDefined();
+      expect(getByText('Shout out')).toBeDefined();
+    }
+  );
+
+  it.each`
+    fabComponent     | ScrollComponent
+    ${'FAB'}         | ${ExampleScrollViewWithFAB}
+    ${'ActionGroup'} | ${ExampleScrollViewWithFAB}
+    ${'FAB'}         | ${ExampleFlatListWithFAB}
+    ${'ActionGroup'} | ${ExampleFlatListWithFAB}
+    ${'FAB'}         | ${ExampleSectionListWithFAB}
+    ${'ActionGroup'} | ${ExampleSectionListWithFAB}
+  `(
+    '$ScrollComponent animates $fabComponent correctly',
+    ({ fabComponent, ScrollComponent }) => {
+      const fabProps =
+        fabComponent === 'FAB' ? defaultFabProps : defaultActionGroupProps;
+
+      const { getByText, queryByText, getByTestId, queryByTestId } =
+        renderWithTheme(<ScrollComponent fabProps={fabProps} />);
+
+      // Scrolling down
+      expect(getByText('Shout out')).toBeDefined();
+
+      fireEvent.scroll(getByTestId('scrollable-with-fab'), {
+        nativeEvent: {
+          contentSize: { height: 1000 },
+          contentOffset: { y: 10 },
+          layoutMeasurement: { height: 2000, width: 400 },
+        },
+      });
+
+      // Collapsed
+      expect(queryByText('Shout out')).toBeNull();
+      expect(getByTestId('animated-fab-icon')).toBeDefined();
+
+      fireEvent.scroll(getByTestId('scrollable-with-fab'), {
+        nativeEvent: {
+          contentSize: { height: 1000 },
+          contentOffset: { y: 400 },
+          layoutMeasurement: { height: 2000, width: 400 },
+        },
+      });
+
+      // Hidden
+      expect(queryByText('Shout out')).toBeNull();
+      expect(queryByTestId('styled-fab-icon')).toBeNull();
+
+      // Scrolling up
+      fireEvent.scroll(getByTestId('scrollable-with-fab'), {
+        nativeEvent: {
+          contentSize: { height: 1000 },
+          contentOffset: { y: -10 },
+          layoutMeasurement: { height: 2000, width: 400 },
+        },
+      });
+
+      // Collapsed
+      expect(queryByText('Shout out')).toBeNull();
+      expect(getByTestId('animated-fab-icon')).toBeDefined();
+    }
+  );
+});