@hero-design/rn 8.30.3 → 8.30.4

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

@@ -1,8 +1,8 @@
 import '@testing-library/jest-native/extend-expect';
-import { fireEvent } from '@testing-library/react-native';
 import React from 'react';
-import ActionGroup from '..';
+import { fireEvent } from '@testing-library/react-native';
 import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+import ActionGroup from '..';
 
 describe('ActionGroup', () => {
   it.each`
@@ -40,16 +40,23 @@ 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 backdrop appears
+      // verify action group appears
+      expect(getByTestId('action-group')).toHaveStyle({
+        transform: [{ translateX: 0 }],
+      });
       expect(getByTestId('back-drop')).toHaveProp('pointerEvents', 'auto');
     } else {
-      // verify backdrop disappears
+      // verify action group disappears
+      expect(getByTestId('action-group')).toHaveStyle({
+        transform: [{ translateX: 400 }],
+      });
       expect(getByTestId('back-drop')).toHaveProp('pointerEvents', 'box-none');
     }
   });

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

@@ -1,29 +1,35 @@
-import React, {
-  forwardRef,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-} from 'react';
+import React, { useEffect, useRef } from 'react';
+import { Animated, Easing, Platform, View } from 'react-native';
 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';
 
-import Box from '../../Box';
-import { FABHandles } from '../FAB';
-
-export type ActionGroupHandles = {
-  showFAB: () => void;
-  collapseFAB: () => void;
-  hideFAB: () => void;
+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>
+  );
 };
 
 export interface ActionGroupProps {
@@ -60,137 +66,87 @@ export interface ActionGroupProps {
   /**
    * Action items of the action group.
    * */
-  items?: Array<ActionItemProps>;
 
+  items?: Array<ActionItemProps>;
   /**
    * Testing id of the component.
    */
+
   testID?: string;
 }
-
-const ActionGroup = forwardRef<ActionGroupHandles, ActionGroupProps>(
-  (
+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(
     {
-      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>
-    );
-  }
-);
+      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>
+  );
+};
 
 export default ActionGroup;

package/src/components/FAB/AnimatedFABIcon.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react';
-import { Animated, Platform, StyleSheet } from 'react-native';
-import type { IconProps } from '../Icon';
+import { Animated, Easing, Platform, StyleSheet } from 'react-native';
 import { StyledFABIcon } from './StyledFAB';
+import type { IconProps } from '../Icon';
 
 const AnimatedIcons = Animated.createAnimatedComponent(StyledFABIcon);
 
@@ -14,9 +14,11 @@ const AnimatedFABIcon = ({ active, ...iconProps }: Props) => {
     new Animated.Value(active ? 1 : 0)
   );
   useEffect(() => {
-    const animation = Animated.spring(rotateAnimation.current, {
+    const animation = Animated.timing(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,13 +1,5 @@
-import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
-import {
-  LayoutAnimation,
-  LayoutAnimationConfig,
-  Platform,
-  StyleProp,
-  StyleSheet,
-  UIManager,
-  ViewStyle,
-} from 'react-native';
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
 import { useTheme } from '../../theme';
 import type { IconName } from '../Icon';
 import { AnimatedFABIcon } from './AnimatedFABIcon';
@@ -18,18 +10,6 @@ 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.
@@ -74,6 +54,7 @@ const IconOnlyContent = ({
 }: {
   icon: IconName;
   animated?: boolean;
+
   active?: boolean;
 }) => {
   if (animated) {
@@ -104,96 +85,31 @@ const IconWithTextContent = ({
     <StyledFABText>{title}</StyledFABText>
   </>
 );
-
-const defaultAnimation: LayoutAnimationConfig = {
-  create: {
-    type: 'easeInEaseOut',
-    property: 'opacity',
-  },
-  update: { type: 'spring', springDamping: 1 },
-  duration: 400,
+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 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,7 +5,6 @@ exports[`FAB when animated is false renders StyledFABIcon 1`] = `
   accessible={true}
   focusable={false}
   onClick={[Function]}
-  onLayout={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
   onResponderRelease={[Function]}
@@ -31,14 +30,9 @@ exports[`FAB when animated is false renders StyledFABIcon 1`] = `
         "shadowOpacity": 0.12,
         "shadowRadius": 8,
       },
-      Array [
-        Object {
-          "backgroundColor": "#001f23",
-        },
-        Object {
-          "bottom": undefined,
-        },
-      ],
+      Object {
+        "backgroundColor": "#001f23",
+      },
     ]
   }
 >
@@ -73,7 +67,6 @@ exports[`FAB when animated is true renders animatedFABIcon 1`] = `
   accessible={true}
   focusable={false}
   onClick={[Function]}
-  onLayout={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
   onResponderRelease={[Function]}
@@ -99,14 +92,9 @@ exports[`FAB when animated is true renders animatedFABIcon 1`] = `
         "shadowOpacity": 0.12,
         "shadowRadius": 8,
       },
-      Array [
-        Object {
-          "backgroundColor": "#001f23",
-        },
-        Object {
-          "bottom": undefined,
-        },
-      ],
+      Object {
+        "backgroundColor": "#001f23",
+      },
     ]
   }
 >
@@ -171,7 +159,6 @@ exports[`FAB when title has value renders correctly 1`] = `
   accessible={true}
   focusable={false}
   onClick={[Function]}
-  onLayout={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
   onResponderRelease={[Function]}
@@ -197,14 +184,9 @@ exports[`FAB when title has value renders correctly 1`] = `
         "shadowOpacity": 0.12,
         "shadowRadius": 8,
       },
-      Array [
-        Object {
-          "backgroundColor": "#001f23",
-        },
-        Object {
-          "bottom": undefined,
-        },
-      ],
+      Object {
+        "backgroundColor": "#001f23",
+      },
     ]
   }
 >

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

@@ -1,7 +1,7 @@
-import React, { createRef } from 'react';
+import React from 'react';
 import { fireEvent } from '@testing-library/react-native';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
-import { FABHandles, theme } from '../../../index';
+import { theme } from '../../../index';
 import FAB from '..';
 
 describe('FAB', () => {
@@ -66,24 +66,4 @@ 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();
-    });
-  });
 });