@hero-design/rn 8.30.2 → 8.30.3

package/src/components/FAB/ActionGroup/__tests__/index.spec.tsx

@@ -1,8 +1,8 @@
 import '@testing-library/jest-native/extend-expect';
-import React from 'react';
 import { fireEvent } from '@testing-library/react-native';
-import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+import React from 'react';
 import ActionGroup from '..';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
 
 describe('ActionGroup', () => {
   it.each`
@@ -40,23 +40,16 @@ describe('ActionGroup', () => {
     expect(toJSON()).toMatchSnapshot();
 
     expect(getByText('What would you like to create?')).toBeDefined();
-    expect(getByText('Shout out')).toBeDefined();
     expect(getByTestId('speaker-action-item')).toBeDefined();
     expect(getByTestId('target-action-item')).toBeDefined();
     expect(getByTestId('plane-action-item')).toBeDefined();
     expect(getByTestId('health-bag-action-item')).toBeDefined();
 
     if (active) {
-      // verify action group appears
-      expect(getByTestId('action-group')).toHaveStyle({
-        transform: [{ translateX: 0 }],
-      });
+      // verify backdrop appears
       expect(getByTestId('back-drop')).toHaveProp('pointerEvents', 'auto');
     } else {
-      // verify action group disappears
-      expect(getByTestId('action-group')).toHaveStyle({
-        transform: [{ translateX: 400 }],
-      });
+      // verify backdrop disappears
       expect(getByTestId('back-drop')).toHaveProp('pointerEvents', 'box-none');
     }
   });

package/src/components/FAB/ActionGroup/index.tsx

@@ -1,35 +1,29 @@
-import React, { useEffect, useRef } from 'react';
-import { Animated, Easing, Platform, View } from 'react-native';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+} from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
+import { Animated, Platform } from 'react-native';
+import type { IconName } from '../../Icon';
+import type { ActionItemProps } from './ActionItem';
 import ActionItem from './ActionItem';
 import {
+  StyledActionGroupContainer,
   StyledBackdrop,
   StyledContainer,
   StyledFAB,
   StyledHeaderText,
-  StyledActionGroupContainer,
 } from './StyledActionGroup';
-import type { IconName } from '../../Icon';
-import type { ActionItemProps } from './ActionItem';
 
-type ActionItemsContainerProps = {
-  style?: StyleProp<ViewStyle>;
-  items?: Array<ActionItemProps>;
-};
-const ActionItemsListComponent = ({
-  style,
-  items,
-}: ActionItemsContainerProps) => {
-  return (
-    <View style={style}>
-      {items?.map((itemProp) => (
-        <ActionItem
-          key={itemProp.key || `${itemProp.icon}_${itemProp.title}`}
-          {...itemProp}
-        />
-      ))}
-    </View>
-  );
+import Box from '../../Box';
+import { FABHandles } from '../FAB';
+
+export type ActionGroupHandles = {
+  showFAB: () => void;
+  collapseFAB: () => void;
+  hideFAB: () => void;
 };
 
 export interface ActionGroupProps {
@@ -66,87 +60,137 @@ export interface ActionGroupProps {
   /**
    * Action items of the action group.
    * */
-
   items?: Array<ActionItemProps>;
+
   /**
    * Testing id of the component.
    */
-
   testID?: string;
 }
-const ActionGroup = ({
-  headerTitle,
-  onPress,
-  active,
-  style,
-  items,
-  testID,
-  fabTitle,
-  fabIcon = 'add',
-}: ActionGroupProps) => {
-  const tranlateXAnimation = useRef<Animated.Value>(
-    new Animated.Value(active ? 1 : 0)
-  );
-  useEffect(() => {
-    const animation = Animated.timing(tranlateXAnimation.current, {
-      toValue: active ? 1 : 0,
-      useNativeDriver: Platform.OS === 'ios' || Platform.OS === 'android',
-      easing: Easing.inOut(Easing.cubic),
-    });
-
-    animation.start();
-  }, [active]);
-
-  const interpolatedTranlateXAnimation = tranlateXAnimation.current.interpolate(
+
+const ActionGroup = forwardRef<ActionGroupHandles, ActionGroupProps>(
+  (
     {
-      inputRange: [0, 1],
-      outputRange: [400, 0],
-    }
-  );
-  const interpolatedBackdropOpacityAnimation =
-    tranlateXAnimation.current.interpolate({
-      inputRange: [0, 1],
-      outputRange: [0, 0.4],
-    });
-
-  const interpolatedActionGroupOpacityAnimation =
-    tranlateXAnimation.current.interpolate({
-      inputRange: [0, 1],
-      outputRange: [0, 1],
-    });
-
-  return (
-    <StyledContainer testID={testID} pointerEvents="box-none" style={style}>
-      <StyledBackdrop
-        pointerEvents={active ? 'auto' : 'box-none'}
-        testID="back-drop"
-        style={{ opacity: interpolatedBackdropOpacityAnimation }}
-      />
-      <StyledActionGroupContainer
-        pointerEvents={active ? 'auto' : 'none'}
-        testID="action-group"
-        style={{
-          opacity: interpolatedActionGroupOpacityAnimation,
-          transform: [{ translateX: interpolatedTranlateXAnimation }],
-        }}
-      >
-        {!!headerTitle && (
-          <StyledHeaderText testID="header-text">
-            {headerTitle}
-          </StyledHeaderText>
-        )}
-        <ActionItemsListComponent items={items} />
-      </StyledActionGroupContainer>
-      <StyledFAB
-        testID="fab"
-        icon={fabIcon}
-        onPress={onPress}
-        animated
-        active={active}
-        title={fabTitle}
-      />
-    </StyledContainer>
-  );
-};
+      headerTitle,
+      onPress,
+      active,
+      style,
+      items,
+      testID,
+      fabTitle,
+      fabIcon = 'add',
+    },
+    ref
+  ) => {
+    const fabRef = useRef<FABHandles>(null);
+    const tranlateXAnimation = useRef<Animated.Value>(
+      new Animated.Value(active ? 1 : 0)
+    );
+
+    const animatedValues = useRef(
+      items?.map(() => new Animated.Value(0)) || []
+    ).current;
+
+    const translateYAnimations = animatedValues?.map((value) =>
+      value.interpolate({
+        inputRange: [0, 1],
+        outputRange: active ? [100, 0] : [40, 0],
+      })
+    );
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        showFAB: () => fabRef.current?.show(),
+        collapseFAB: () => fabRef.current?.collapse(),
+        hideFAB: () => fabRef.current?.hide(),
+      }),
+      [fabRef]
+    );
+
+    useEffect(() => {
+      Animated.spring(tranlateXAnimation.current, {
+        toValue: active ? 1 : 0,
+        useNativeDriver: Platform.OS !== 'web',
+      }).start();
+
+      Animated.stagger(
+        20,
+        animatedValues
+          .map((value) =>
+            Animated.spring(value, {
+              toValue: active ? 1 : 0,
+              useNativeDriver: Platform.OS !== 'web',
+            })
+          )
+          .reverse()
+      ).start();
+    }, [active, animatedValues]);
+
+    const interpolatedBackdropOpacityAnimation =
+      tranlateXAnimation.current.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, 0.4],
+      });
+
+    const interpolatedActionGroupOpacityAnimation =
+      tranlateXAnimation.current.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, 1],
+      });
+
+    return (
+      <StyledContainer testID={testID} pointerEvents="box-none" style={style}>
+        <StyledBackdrop
+          pointerEvents={active ? 'auto' : 'box-none'}
+          testID="back-drop"
+          style={{ opacity: interpolatedBackdropOpacityAnimation }}
+        />
+        <StyledActionGroupContainer
+          pointerEvents={active ? 'auto' : 'none'}
+          testID="action-group"
+          style={{
+            opacity: interpolatedActionGroupOpacityAnimation,
+          }}
+        >
+          {!!headerTitle && (
+            <Animated.View
+              style={{
+                transform: [{ translateY: translateYAnimations[0] }],
+              }}
+            >
+              <StyledHeaderText testID="header-text">
+                {headerTitle}
+              </StyledHeaderText>
+            </Animated.View>
+          )}
+
+          <Box style={[style, { paddingBottom: 0 }]}>
+            {items?.map((itemProp, index) => (
+              <Animated.View
+                key={itemProp.key || `${itemProp.icon}_${itemProp.title}`}
+                style={{
+                  transform: [{ translateY: translateYAnimations[index] }],
+                }}
+              >
+                <ActionItem {...itemProp} />
+              </Animated.View>
+            ))}
+          </Box>
+        </StyledActionGroupContainer>
+
+        <StyledFAB
+          testID="fab"
+          icon={fabIcon}
+          onPress={onPress}
+          animated
+          active={active}
+          title={fabTitle}
+          ref={fabRef}
+        />
+      </StyledContainer>
+    );
+  }
+);
 
 export default ActionGroup;

package/src/components/FAB/AnimatedFABIcon.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react';
-import { Animated, Easing, Platform, StyleSheet } from 'react-native';
-import { StyledFABIcon } from './StyledFAB';
+import { Animated, Platform, StyleSheet } from 'react-native';
 import type { IconProps } from '../Icon';
+import { StyledFABIcon } from './StyledFAB';
 
 const AnimatedIcons = Animated.createAnimatedComponent(StyledFABIcon);
 
@@ -14,11 +14,9 @@ const AnimatedFABIcon = ({ active, ...iconProps }: Props) => {
     new Animated.Value(active ? 1 : 0)
   );
   useEffect(() => {
-    const animation = Animated.timing(rotateAnimation.current, {
+    const animation = Animated.spring(rotateAnimation.current, {
       toValue: active ? 1 : 0,
       useNativeDriver: Platform.OS === 'ios' || Platform.OS === 'android',
-      easing: Easing.inOut(Easing.ease),
-      duration: 300,
     });
 
     animation.start();

package/src/components/FAB/FAB.tsx

@@ -1,5 +1,13 @@
-import React from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
+import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
+import {
+  LayoutAnimation,
+  LayoutAnimationConfig,
+  Platform,
+  StyleProp,
+  StyleSheet,
+  UIManager,
+  ViewStyle,
+} from 'react-native';
 import { useTheme } from '../../theme';
 import type { IconName } from '../Icon';
 import { AnimatedFABIcon } from './AnimatedFABIcon';
@@ -10,6 +18,18 @@ import {
   StyledIconContainer,
 } from './StyledFAB';
 
+if (Platform.OS === 'android') {
+  if (UIManager.setLayoutAnimationEnabledExperimental) {
+    UIManager.setLayoutAnimationEnabledExperimental(true);
+  }
+}
+
+export type FABHandles = {
+  show: () => void;
+  collapse: () => void;
+  hide: () => void;
+};
+
 export interface FABProps {
   /**
    * Name of the Icon.
@@ -54,7 +74,6 @@ const IconOnlyContent = ({
 }: {
   icon: IconName;
   animated?: boolean;
-
   active?: boolean;
 }) => {
   if (animated) {
@@ -85,31 +104,96 @@ const IconWithTextContent = ({
     <StyledFABText>{title}</StyledFABText>
   </>
 );
-const FAB = ({
-  onPress,
-  title,
-  icon,
-  animated,
-  testID,
-  active,
-  style,
-}: FABProps): JSX.Element => {
-  const isIconOnly = !title;
-  const theme = useTheme();
-  return (
-    <StyledFAB
-      underlayColor={theme.__hd__.fab.colors.buttonPressedBackground}
-      onPress={onPress}
-      style={style}
-      testID={testID}
-    >
-      {isIconOnly ? (
-        <IconOnlyContent animated={animated} active={active} icon={icon} />
-      ) : (
-        <IconWithTextContent icon={icon} title={title} />
-      )}
-    </StyledFAB>
-  );
+
+const defaultAnimation: LayoutAnimationConfig = {
+  create: {
+    type: 'easeInEaseOut',
+    property: 'opacity',
+  },
+  update: { type: 'spring', springDamping: 1 },
+  duration: 400,
 };
 
+const FAB = forwardRef<FABHandles, FABProps>(
+  ({ onPress, title, icon, animated, testID, active, style }, ref) => {
+    const theme = useTheme();
+
+    const [displayState, setDisplayState] = React.useState({
+      hideTitle: false,
+      hideButton: false,
+    });
+
+    const [canAnimate, setCanAnimate] = React.useState(false);
+
+    const isIconOnly = displayState.hideTitle || active || !title;
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        show: () => {
+          setDisplayState({
+            hideButton: false,
+            hideTitle: false,
+          });
+        },
+        collapse: () => {
+          setDisplayState({
+            hideButton: false,
+            hideTitle: true,
+          });
+        },
+        hide: () => {
+          setDisplayState((previousState) => ({
+            ...previousState,
+            hideButton: true,
+          }));
+        },
+      }),
+      [displayState]
+    );
+
+    useEffect(() => {
+      if (canAnimate) {
+        LayoutAnimation.configureNext(defaultAnimation);
+      }
+    }, [isIconOnly]);
+
+    useEffect(() => {
+      if (canAnimate) {
+        LayoutAnimation.configureNext(defaultAnimation);
+      }
+    }, [displayState.hideButton]);
+
+    const marginBottom = Number(StyleSheet.flatten(style)?.marginBottom) || 0;
+
+    return (
+      <StyledFAB
+        /** Add a small timeout before executing animation to prevent flakiness on android */
+        onLayout={() => setTimeout(() => setCanAnimate(true), 200)}
+        underlayColor={theme.__hd__.fab.colors.buttonPressedBackground}
+        onPress={onPress}
+        style={[
+          style,
+          {
+            bottom: displayState.hideButton
+              ? -(marginBottom + theme.__hd__.fab.sizes.height * 2)
+              : StyleSheet.flatten(style)?.bottom,
+          },
+        ]}
+        testID={testID}
+      >
+        {isIconOnly ? (
+          <IconOnlyContent
+            animated={animated}
+            active={active}
+            icon={active ? 'add' : icon}
+          />
+        ) : (
+          <IconWithTextContent icon={icon} title={title} />
+        )}
+      </StyledFAB>
+    );
+  }
+);
+
 export default FAB;

package/src/components/FAB/__tests__/__snapshots__/index.spec.tsx.snap

@@ -5,6 +5,7 @@ exports[`FAB when animated is false renders StyledFABIcon 1`] = `
   accessible={true}
   focusable={false}
   onClick={[Function]}
+  onLayout={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
   onResponderRelease={[Function]}
@@ -30,9 +31,14 @@ exports[`FAB when animated is false renders StyledFABIcon 1`] = `
         "shadowOpacity": 0.12,
         "shadowRadius": 8,
       },
-      Object {
-        "backgroundColor": "#001f23",
-      },
+      Array [
+        Object {
+          "backgroundColor": "#001f23",
+        },
+        Object {
+          "bottom": undefined,
+        },
+      ],
     ]
   }
 >
@@ -67,6 +73,7 @@ exports[`FAB when animated is true renders animatedFABIcon 1`] = `
   accessible={true}
   focusable={false}
   onClick={[Function]}
+  onLayout={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
   onResponderRelease={[Function]}
@@ -92,9 +99,14 @@ exports[`FAB when animated is true renders animatedFABIcon 1`] = `
         "shadowOpacity": 0.12,
         "shadowRadius": 8,
       },
-      Object {
-        "backgroundColor": "#001f23",
-      },
+      Array [
+        Object {
+          "backgroundColor": "#001f23",
+        },
+        Object {
+          "bottom": undefined,
+        },
+      ],
     ]
   }
 >
@@ -159,6 +171,7 @@ exports[`FAB when title has value renders correctly 1`] = `
   accessible={true}
   focusable={false}
   onClick={[Function]}
+  onLayout={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
   onResponderRelease={[Function]}
@@ -184,9 +197,14 @@ exports[`FAB when title has value renders correctly 1`] = `
         "shadowOpacity": 0.12,
         "shadowRadius": 8,
       },
-      Object {
-        "backgroundColor": "#001f23",
-      },
+      Array [
+        Object {
+          "backgroundColor": "#001f23",
+        },
+        Object {
+          "bottom": undefined,
+        },
+      ],
     ]
   }
 >

package/src/components/FAB/__tests__/index.spec.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { createRef } from 'react';
 import { fireEvent } from '@testing-library/react-native';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
-import { theme } from '../../../index';
+import { FABHandles, theme } from '../../../index';
 import FAB from '..';
 
 describe('FAB', () => {
@@ -66,4 +66,24 @@ describe('FAB', () => {
       expect(onPressSpy).toBeCalledTimes(1);
     });
   });
+
+  describe('usage with ref', () => {
+    it('allow controlling inner fab states by ref', () => {
+      const fabRef = createRef<FABHandles>();
+
+      const { queryByText } = renderWithTheme(
+        <FAB ref={fabRef} title="Shout out" icon="speaker" />
+      );
+
+      expect(queryByText('Shout out')).toBeDefined();
+      fabRef.current!.collapse();
+      expect(queryByText('Shout out')).toBeFalsy();
+
+      fabRef.current!.show();
+      expect(queryByText('Shout out')).toBeDefined();
+
+      fabRef.current!.hide();
+      expect(queryByText('Shout out')).toBeDefined();
+    });
+  });
 });

package/src/types.ts

@@ -15,6 +15,8 @@ import type {
 import { SwipeableProps } from './components/Swipeable';
 import { TextProps } from './components/Typography/Text';
 import { CardCarouselHandles } from './components/Carousel/CardCarousel';
+import { FABHandles } from './components/FAB/FAB';
+import { ActionGroupHandles } from './components/FAB/ActionGroup';
 
 export type {
   BottomNavigationTabType,
@@ -32,4 +34,6 @@ export type {
   TextInputHandles,
   Theme,
   CardCarouselHandles,
+  FABHandles,
+  ActionGroupHandles,
 };

package/testUtils/setup.tsx

@@ -11,6 +11,7 @@ jest.mock('react-native', () => {
   const RN = jest.requireActual('react-native');
 
   const mockedAnimatedFunctions = {
+    setImmediate: () => jest.fn(),
     start: () => jest.fn(),
     stop: () => jest.fn(),
     _isUsingNativeDriver: () => jest.fn(),
@@ -19,6 +20,7 @@ jest.mock('react-native', () => {
 
   RN.Animated.timing = () => mockedAnimatedFunctions;
   RN.Animated.spring = () => mockedAnimatedFunctions;
+  RN.Animated.stagger = () => mockedAnimatedFunctions;
 
   return RN;
 });

package/types/components/FAB/ActionGroup/StyledActionGroup.d.ts

@@ -14,7 +14,7 @@ declare const StyledActionGroupContainer: import("@emotion/native").StyledCompon
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {}>;
-declare const StyledFAB: import("@emotion/native").StyledComponent<import("../FAB").FABProps & {
+declare const StyledFAB: import("@emotion/native").StyledComponent<import("../FAB").FABProps & import("react").RefAttributes<import("../FAB").FABHandles> & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {}>;

package/types/components/FAB/ActionGroup/index.d.ts

@@ -1,6 +1,12 @@
+import React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { IconName } from '../../Icon';
 import type { ActionItemProps } from './ActionItem';
+export declare type ActionGroupHandles = {
+    showFAB: () => void;
+    collapseFAB: () => void;
+    hideFAB: () => void;
+};
 export interface ActionGroupProps {
     /**
      * Title of the action group header.
@@ -35,5 +41,5 @@ export interface ActionGroupProps {
      */
     testID?: string;
 }
-declare const ActionGroup: ({ headerTitle, onPress, active, style, items, testID, fabTitle, fabIcon, }: ActionGroupProps) => JSX.Element;
+declare const ActionGroup: React.ForwardRefExoticComponent<ActionGroupProps & React.RefAttributes<ActionGroupHandles>>;
 export default ActionGroup;

package/types/components/FAB/FAB.d.ts

@@ -1,5 +1,11 @@
-import type { StyleProp, ViewStyle } from 'react-native';
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
 import type { IconName } from '../Icon';
+export declare type FABHandles = {
+    show: () => void;
+    collapse: () => void;
+    hide: () => void;
+};
 export interface FABProps {
     /**
      * Name of the Icon.
@@ -30,5 +36,5 @@ export interface FABProps {
      */
     testID?: string;
 }
-declare const FAB: ({ onPress, title, icon, animated, testID, active, style, }: FABProps) => JSX.Element;
+declare const FAB: React.ForwardRefExoticComponent<FABProps & React.RefAttributes<FABHandles>>;
 export default FAB;