@hero-design/rn 8.59.0 → 8.60.1-alpha.0

package/src/components/AnimatedScroller/AnimatedFAB.tsx

@@ -7,8 +7,9 @@ import ActionGroup, {
 } from '../FAB/ActionGroup';
 import { FABHandles, FABProps } from '../FAB/FAB';
 
-const COLLAPSE_BREAKPOINT = 10;
-const SHOW_AND_HIDE_BREAKPOINT = 200;
+const LAST_BREAKPOINT = 100;
+const MIDDLE_BREAKPOINT = 250;
+const MAX_ANIMATABLE_SCROLL_DISTANCE = 400;
 const REF_ACTIONS_BY_COMPONENT = {
   FAB: {
     show: 'show',
@@ -25,25 +26,36 @@ const REF_ACTIONS_BY_COMPONENT = {
 interface AnimatedFABProps {
   fabProps: FABProps | ActionGroupProps;
   contentOffsetY: Animated.Value;
+  contentHeight: Animated.Value;
+  layoutHeight: Animated.Value;
 }
 
-const AnimatedFAB = ({ fabProps, contentOffsetY }: AnimatedFABProps) => {
+const AnimatedFAB = ({
+  fabProps,
+  contentOffsetY,
+  contentHeight,
+  layoutHeight,
+}: 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 currentContentHeight = React.useRef(0);
+  const currentLayoutHeight = React.useRef(0);
+
+  /** fabState is used to avoid calling duplicated animations. */
+  const fabState = React.useRef<'show' | 'hide' | 'collapse'>('show');
+
+  /** remainingScrollOffset determines whether to animate the FAB. */
+  const remainingScrollOffset = React.useRef(MAX_ANIMATABLE_SCROLL_DISTANCE);
+
+  /** currentScrollDirection is used to determine the scroll direction. */
+  const currentScrollDirection = React.useRef<'up' | 'down'>('down');
+
+  /** lastScrollY is the scrollY from the preview scroll event. */
+  const lastScrollY = React.useRef(0);
 
   const animateFab = React.useCallback(
     (newState: 'show' | 'hide' | 'collapse') => {
-      if (fabState !== newState) {
+      if (fabState.current !== newState) {
         if (newState === 'show') {
           ref.current?.[REF_ACTIONS_BY_COMPONENT[component].show]();
         } else if (newState === 'hide') {
@@ -51,49 +63,87 @@ const AnimatedFAB = ({ fabProps, contentOffsetY }: AnimatedFABProps) => {
         } else {
           ref.current?.[REF_ACTIONS_BY_COMPONENT[component].collapse]();
         }
-        setFabState(newState);
+        fabState.current = newState;
       }
     },
-    [fabState, component]
+    [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
+  React.useEffect(() => {
+    contentHeight.addListener(({ value }) => {
+      if (value > 0 && value !== currentContentHeight.current) {
+        currentContentHeight.current = value;
+      }
+    });
+
+    layoutHeight.addListener(({ value }) => {
+      if (value > 0 && value !== currentLayoutHeight.current) {
+        currentLayoutHeight.current = value;
+      }
+    });
+
+    // Listen to ScrollView's contentOffsetY value
+    contentOffsetY.addListener(({ value }) => {
+      if (
+        value < 0 ||
+        // Prevent calling the function if the scroll is not significant
+        (value > 0 && Math.abs(value - lastScrollY.current) < 5)
       ) {
-        animateFab('collapse');
-      } else if (offsetDiff <= COLLAPSE_BREAKPOINT) {
-        animateFab(isScrollingDown ? 'hide' : 'show');
+        return;
       }
 
-      setRemainingScrollOffset(offsetDiff);
-    }
-  });
+      // Scroll up to top, bouncing included.
+      if (value === 0 && lastScrollY.current !== 0) {
+        animateFab('show');
+      }
 
-  React.useEffect(() => {
-    setRemainingScrollOffset(SHOW_AND_HIDE_BREAKPOINT);
-  }, [currentScrollDirection]);
+      const newScrollDirection = value >= lastScrollY.current ? 'down' : 'up';
+
+      if (newScrollDirection !== currentScrollDirection.current) {
+        // If scroll direction changes, reset all values
+        currentScrollDirection.current = newScrollDirection;
+        remainingScrollOffset.current = MAX_ANIMATABLE_SCROLL_DISTANCE;
+      }
+
+      const hasReachedBottom =
+        value + currentLayoutHeight.current >= currentContentHeight.current;
+
+      // Scroll down to bottom, bouncing included.
+      if (hasReachedBottom) {
+        animateFab('hide');
+        return;
+      }
+
+      if (remainingScrollOffset.current) {
+        const offsetDiff = Math.round(
+          Math.max(Math.abs(value - lastScrollY.current), 0)
+        );
+
+        const newRemainingScrollOffset = Math.max(
+          remainingScrollOffset.current - offsetDiff,
+          0
+        );
+
+        if (newRemainingScrollOffset <= LAST_BREAKPOINT) {
+          animateFab(
+            currentScrollDirection.current === 'down' ? 'hide' : 'show'
+          );
+        } else if (newRemainingScrollOffset <= MIDDLE_BREAKPOINT) {
+          animateFab('collapse');
+        }
+
+        remainingScrollOffset.current = newRemainingScrollOffset;
+      }
+
+      lastScrollY.current = value;
+    });
+
+    return () => {
+      contentOffsetY.removeAllListeners();
+      contentHeight.removeAllListeners();
+      layoutHeight.removeAllListeners();
+    };
+  }, [contentHeight, contentOffsetY, layoutHeight]);
 
   return component === 'FAB' ? (
     <FAB ref={ref} {...(fabProps as FABProps)} />

package/src/components/AnimatedScroller/AnimatedScrollable.tsx

@@ -5,9 +5,9 @@ import {
   ScrollViewProps as RnScrollViewProps,
   SectionListProps,
 } from 'react-native';
+import { ActionGroupProps } from '../FAB/ActionGroup';
 import { FABProps } from '../FAB/FAB';
 import AnimatedFAB from './AnimatedFAB';
-import { ActionGroupProps } from '../FAB/ActionGroup';
 
 export interface AnimatedScrollerProps<T> {
   /**
@@ -27,6 +27,8 @@ function AnimatedScroller<T>({
   fabProps,
 }: AnimatedScrollerProps<T>) {
   const contentOffsetY = React.useRef(new Animated.Value(0)).current;
+  const contentHeight = React.useRef(new Animated.Value(0)).current;
+  const layoutHeight = React.useRef(new Animated.Value(0)).current;
 
   // Common props for all ScrollView, FlatList and SectionList.
   const { onScroll, scrollEventThrottle } = ScrollComponent.props;
@@ -37,7 +39,15 @@ function AnimatedScroller<T>({
         ...ScrollComponent.props,
         scrollEventThrottle: scrollEventThrottle || 100,
         onScroll: Animated.event(
-          [{ nativeEvent: { contentOffset: { y: contentOffsetY } } }],
+          [
+            {
+              nativeEvent: {
+                contentOffset: { y: contentOffsetY },
+                contentSize: { height: contentHeight },
+                layoutMeasurement: { height: layoutHeight },
+              },
+            },
+          ],
           {
             useNativeDriver: false,
             listener: onScroll,
@@ -46,7 +56,12 @@ function AnimatedScroller<T>({
       })}
 
       {!!fabProps && (
-        <AnimatedFAB fabProps={fabProps} contentOffsetY={contentOffsetY} />
+        <AnimatedFAB
+          fabProps={fabProps}
+          contentOffsetY={contentOffsetY}
+          contentHeight={contentHeight}
+          layoutHeight={layoutHeight}
+        />
       )}
     </>
   );

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

@@ -125,17 +125,28 @@ describe('Scrollables With FAB', () => {
       const fabProps =
         fabComponent === 'FAB' ? defaultFabProps : defaultActionGroupProps;
 
+      const scrollConfig = {
+        contentSize: { height: 2000 },
+        layoutMeasurement: { height: 700, width: 400 },
+      };
+
       const { getByText, queryByText, getByTestId, queryByTestId } =
         renderWithTheme(<ScrollComponent fabProps={fabProps} />);
 
+      fireEvent.scroll(getByTestId('scrollable-with-fab'), {
+        nativeEvent: {
+          ...scrollConfig,
+          contentOffset: { y: 50 },
+        },
+      });
+
       // 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 },
+          ...scrollConfig,
+          contentOffset: { y: 150 },
         },
       });
 
@@ -145,9 +156,8 @@ describe('Scrollables With FAB', () => {
 
       fireEvent.scroll(getByTestId('scrollable-with-fab'), {
         nativeEvent: {
-          contentSize: { height: 1000 },
-          contentOffset: { y: 400 },
-          layoutMeasurement: { height: 2000, width: 400 },
+          ...scrollConfig,
+          contentOffset: { y: 500 },
         },
       });
 
@@ -158,15 +168,26 @@ describe('Scrollables With FAB', () => {
       // Scrolling up
       fireEvent.scroll(getByTestId('scrollable-with-fab'), {
         nativeEvent: {
-          contentSize: { height: 1000 },
-          contentOffset: { y: -10 },
-          layoutMeasurement: { height: 2000, width: 400 },
+          ...scrollConfig,
+          contentOffset: { y: -150 },
         },
       });
 
       // Collapsed
       expect(queryByText('Shout out')).toBeNull();
       expect(getByTestId('animated-fab-icon')).toBeDefined();
+
+      // Scrolling up to top
+      fireEvent.scroll(getByTestId('scrollable-with-fab'), {
+        nativeEvent: {
+          ...scrollConfig,
+          contentOffset: { y: 0 },
+        },
+      });
+
+      // Expanded
+      expect(getByText('Shout out')).toBeDefined();
+      expect(getByTestId('styled-fab-icon')).toBeDefined();
     }
   );
 });