@hero-design/rn 8.55.1 → 8.56.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.55.1",
+  "version": "8.56.1",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/components/AnimatedScroller/AnimatedFAB.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { Animated } from 'react-native';
+import FAB from '../FAB';
+import ActionGroup, {
+  ActionGroupHandles,
+  ActionGroupProps,
+} from '../FAB/ActionGroup';
+import { FABHandles, FABProps } from '../FAB/FAB';
+
+const COLLAPSE_BREAKPOINT = 10;
+const SHOW_AND_HIDE_BREAKPOINT = 200;
+const REF_ACTIONS_BY_COMPONENT = {
+  FAB: {
+    show: 'show',
+    hide: 'hide',
+    collapse: 'collapse',
+  },
+  ActionGroup: {
+    show: 'showFAB',
+    hide: 'hideFAB',
+    collapse: 'collapseFAB',
+  },
+} as const;
+
+interface AnimatedFABProps {
+  fabProps: FABProps | ActionGroupProps;
+  contentOffsetY: Animated.Value;
+}
+
+const AnimatedFAB = ({ fabProps, contentOffsetY }: AnimatedFABProps) => {
+  const component = 'items' in fabProps ? 'ActionGroup' : 'FAB';
+  const [currentScrollDirection, setCurrentScrollDirection] = React.useState<
+    'up' | 'down'
+  >('down');
+  const [lastScrollY, setLastScrollY] = React.useState(0);
+  const [fabState, setFabState] = React.useState<'show' | 'hide' | 'collapse'>(
+    'show'
+  );
+  const [remainingScrollOffset, setRemainingScrollOffset] = React.useState(
+    SHOW_AND_HIDE_BREAKPOINT
+  );
+  const ref = React.useRef<FABHandles & ActionGroupHandles>(null);
+
+  const animateFab = React.useCallback(
+    (newState: 'show' | 'hide' | 'collapse') => {
+      if (fabState !== newState) {
+        if (newState === 'show') {
+          ref.current?.[REF_ACTIONS_BY_COMPONENT[component].show]();
+        } else if (newState === 'hide') {
+          ref.current?.[REF_ACTIONS_BY_COMPONENT[component].hide]();
+        } else {
+          ref.current?.[REF_ACTIONS_BY_COMPONENT[component].collapse]();
+        }
+        setFabState(newState);
+      }
+    },
+    [fabState, component]
+  );
+
+  // Listen to ScrollView's contentOffsetY value
+  contentOffsetY.addListener(({ value }) => {
+    if (value < 0) {
+      return;
+    }
+
+    const newScrollDirection = value > lastScrollY ? 'down' : 'up';
+    const isScrollingDown = newScrollDirection === 'down';
+
+    if (newScrollDirection !== currentScrollDirection || lastScrollY === 0) {
+      setLastScrollY(value);
+      setCurrentScrollDirection(newScrollDirection);
+    }
+    const offsetFromLastDirection = Math.abs(value - lastScrollY);
+    const offsetDiff = Math.round(
+      Math.max(remainingScrollOffset - offsetFromLastDirection, 0)
+    );
+
+    if (remainingScrollOffset > 0) {
+      if (offsetDiff === SHOW_AND_HIDE_BREAKPOINT) {
+        animateFab(isScrollingDown ? 'show' : 'hide');
+      } else if (
+        offsetDiff <= SHOW_AND_HIDE_BREAKPOINT &&
+        offsetDiff > COLLAPSE_BREAKPOINT
+      ) {
+        animateFab('collapse');
+      } else if (offsetDiff <= COLLAPSE_BREAKPOINT) {
+        animateFab(isScrollingDown ? 'hide' : 'show');
+      }
+
+      setRemainingScrollOffset(offsetDiff);
+    }
+  });
+
+  React.useEffect(() => {
+    setRemainingScrollOffset(SHOW_AND_HIDE_BREAKPOINT);
+  }, [currentScrollDirection]);
+
+  return component === 'FAB' ? (
+    <FAB ref={ref} {...(fabProps as FABProps)} />
+  ) : (
+    <ActionGroup ref={ref} {...(fabProps as ActionGroupHandles)} />
+  );
+};
+
+export default AnimatedFAB;

package/src/components/AnimatedScroller/AnimatedScrollable.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import {
+  Animated,
+  FlatListProps,
+  ScrollViewProps as RnScrollViewProps,
+  SectionListProps,
+} from 'react-native';
+import { FABProps } from '../FAB/FAB';
+import AnimatedFAB from './AnimatedFAB';
+import { ActionGroupProps } from '../FAB/ActionGroup';
+
+export interface AnimatedScrollerProps<T> {
+  /**
+   * Scroll component, it can be ScrollView, FlatList or SectionList.
+   */
+  ScrollComponent: React.ReactElement<
+    RnScrollViewProps | FlatListProps<T> | SectionListProps<T>
+  >;
+  /**
+   * FAB or FAB.ActionGroup props.
+   */
+  fabProps: FABProps | ActionGroupProps;
+}
+
+function AnimatedScroller<T>({
+  ScrollComponent,
+  fabProps,
+}: AnimatedScrollerProps<T>) {
+  const contentOffsetY = React.useRef(new Animated.Value(0)).current;
+
+  // Common props for all ScrollView, FlatList and SectionList.
+  const { onScroll, scrollEventThrottle } = ScrollComponent.props;
+
+  return (
+    <>
+      {React.cloneElement(ScrollComponent, {
+        ...ScrollComponent.props,
+        scrollEventThrottle: scrollEventThrottle || 100,
+        onScroll: Animated.event(
+          [{ nativeEvent: { contentOffset: { y: contentOffsetY } } }],
+          {
+            useNativeDriver: false,
+            listener: onScroll,
+          }
+        ),
+      })}
+
+      {!!fabProps && (
+        <AnimatedFAB fabProps={fabProps} contentOffsetY={contentOffsetY} />
+      )}
+    </>
+  );
+}
+
+export default AnimatedScroller;

package/src/components/AnimatedScroller/FlatListWithFAB.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { FlatList, FlatListProps } from 'react-native';
+import { FABProps } from '../FAB/FAB';
+import AnimatedScroller from './AnimatedScrollable';
+import { ActionGroupProps } from '../FAB/ActionGroup';
+
+export interface FlatListWithFABProps<T> extends FlatListProps<T> {
+  /**
+   * FAB or FAB.ActionGroup props props.
+   */
+  fabProps: FABProps | ActionGroupProps;
+}
+
+function FlatListWithFAB<T>({ fabProps, ...props }: FlatListWithFABProps<T>) {
+  return (
+    <AnimatedScroller
+      ScrollComponent={<FlatList {...props} />}
+      fabProps={fabProps}
+    />
+  );
+}
+
+export default FlatListWithFAB;

package/src/components/AnimatedScroller/ScrollViewWithFAB.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ScrollView, ScrollViewProps } from 'react-native';
+import AnimatedScroller from './AnimatedScrollable';
+import { ActionGroupProps } from '../FAB/ActionGroup';
+import { FABProps } from '../FAB/FAB';
+
+export interface ScrollViewWithFABProps extends ScrollViewProps {
+  /**
+   * FAB or FAB.ActionGroup props props.
+   */
+  fabProps: FABProps | ActionGroupProps;
+}
+
+const ScrollViewWithFAB = ({ fabProps, ...props }: ScrollViewWithFABProps) => (
+  <AnimatedScroller
+    ScrollComponent={<ScrollView {...props} />}
+    fabProps={fabProps}
+  />
+);
+
+export default ScrollViewWithFAB;

package/src/components/AnimatedScroller/SectionListWithFAB.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { SectionList, SectionListProps } from 'react-native';
+import AnimatedScroller from './AnimatedScrollable';
+import { ActionGroupProps } from '../FAB/ActionGroup';
+import { FABProps } from '../FAB/FAB';
+
+export interface SectionListWithFABProps<T> extends SectionListProps<T> {
+  /**
+   * FAB or FAB.ActionGroup props props.
+   */
+  fabProps: FABProps | ActionGroupProps;
+}
+
+function SectionListWithFAB<T>({
+  fabProps,
+  ...props
+}: SectionListWithFABProps<T>) {
+  return (
+    <AnimatedScroller
+      ScrollComponent={<SectionList {...props} />}
+      fabProps={fabProps}
+    />
+  );
+}
+
+export default SectionListWithFAB;

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();
+    }
+  );
+});