@hero-design/rn 8.58.0 → 8.60.0

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

@@ -15,6 +15,7 @@ import {
 import Box from '../../Box';
 import { FABHandles } from '../FAB';
 import { useDeprecation } from '../../../utils/hooks';
+import { useTheme } from '../../../theme';
 
 export type ActionGroupHandles = {
   showFAB: () => void;
@@ -88,8 +89,9 @@ const ActionGroup = forwardRef<ActionGroupHandles, ActionGroupProps>(
       headerTitle !== undefined
     );
 
+    const theme = useTheme();
     const fabRef = useRef<FABHandles>(null);
-    const tranlateXAnimation = useRef<Animated.Value>(
+    const animatedValue = useRef<Animated.Value>(
       new Animated.Value(active ? 1 : 0)
     );
 
@@ -104,30 +106,27 @@ const ActionGroup = forwardRef<ActionGroupHandles, ActionGroupProps>(
     );
 
     React.useEffect(() => {
-      Animated.spring(tranlateXAnimation.current, {
+      Animated.spring(animatedValue.current, {
         toValue: active ? 1 : 0,
+        delay: 100,
         useNativeDriver: Platform.OS !== 'web',
       }).start();
+
+      if (active) {
+        fabRef.current?.collapse();
+      } else {
+        fabRef.current?.show();
+      }
     }, [active]);
-    const interpolatedActionGroupOpacityAnimation =
-      tranlateXAnimation.current.interpolate({
-        inputRange: [0, 1],
-        outputRange: [0, 1],
-      });
-
-    const interpolatedFABOpacityAnimation =
-      tranlateXAnimation.current.interpolate({
-        inputRange: [0, 1],
-        outputRange: [1, 0],
-      });
+
+    const actionGroupOpacity = animatedValue.current.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, 1],
+    });
 
     return (
       <StyledContainer testID={testID} pointerEvents="box-none" style={style}>
-        <Animated.View
-          style={{
-            opacity: interpolatedFABOpacityAnimation,
-          }}
-        >
+        <Animated.View>
           <StyledFAB
             key="fab"
             testID="fab"
@@ -151,7 +150,7 @@ const ActionGroup = forwardRef<ActionGroupHandles, ActionGroupProps>(
               testID="action-group"
               pointerEvents="box-none"
               style={{
-                opacity: interpolatedActionGroupOpacityAnimation,
+                opacity: actionGroupOpacity,
               }}
             >
               <Box style={[style, { paddingBottom: 0 }]}>
@@ -166,15 +165,22 @@ const ActionGroup = forwardRef<ActionGroupHandles, ActionGroupProps>(
               </Box>
             </StyledActionGroupContainer>
 
-            <StyledFAB
-              key="fab-in-portal"
-              testID="fab-in-portal"
-              icon={fabIcon}
-              onPress={onPress}
-              animated
-              active={active}
-              title={fabTitle}
-            />
+            {active && (
+              <StyledFAB
+                // This FAB is moved up a bit compared to the original FAB,
+                // set marginBottom to negative value to compensate for it
+                style={{
+                  marginBottom: -theme.space.xxsmall,
+                }}
+                key="fab-in-portal"
+                testID="fab-in-portal"
+                icon={fabIcon}
+                onPress={onPress}
+                animated
+                active={active}
+                title={fabTitle}
+              />
+            )}
           </StyledContainerInModal>
         </Modal>
       </StyledContainer>

package/src/components/FAB/FAB.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import {
+  Animated,
   LayoutAnimation,
-  LayoutAnimationConfig,
   Platform,
   StyleProp,
   StyleSheet,
@@ -18,18 +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;
 };
 
+if (Platform.OS === 'android') {
+  if (UIManager.setLayoutAnimationEnabledExperimental) {
+    UIManager.setLayoutAnimationEnabledExperimental(true);
+  }
+}
+
 export interface FABProps {
   /**
    * Name of the Icon.
@@ -105,65 +105,104 @@ const IconWithTextContent = ({
   </>
 );
 
-const defaultAnimation: LayoutAnimationConfig = {
-  create: {
-    type: 'easeInEaseOut',
-    property: 'opacity',
-  },
-  update: {
-    type: 'spring',
-    springDamping: Platform.OS === 'ios' ? 0.7 : 1.2,
-  },
-  duration: Platform.OS === 'ios' ? 300 : 400,
+const animateWidth = () => {
+  LayoutAnimation.configureNext({
+    duration: Platform.OS === 'ios' ? 200 : 400,
+    update: {
+      type: 'spring',
+      springDamping: Platform.OS === 'ios' ? 1 : 1.5,
+    },
+  });
 };
 
 const FAB = forwardRef<FABHandles, FABProps>(
   ({ onPress, title, icon, animated, testID, active, style }, ref) => {
     const theme = useTheme();
-    const [canAnimate, setCanAnimate] = React.useState(false);
     const [displayState, setDisplayState] = React.useState({
       hideTitle: false,
       hideButton: false,
     });
     const isIconOnly = displayState.hideTitle || active || !title;
 
+    const animatedValues = {
+      opacity: React.useRef(new Animated.Value(1)).current,
+      width: React.useRef(new Animated.Value(1)).current,
+      translateY: React.useRef(new Animated.Value(0)).current,
+    };
+
+    const marginBottom = Number(StyleSheet.flatten(style)?.marginBottom) || 0;
+    const [buttonWidth, setButtonWidth] = React.useState(0);
+    const hasSetButtonWidth = buttonWidth > 0;
+
     React.useImperativeHandle(
       ref,
       () => ({
         show: () => {
+          Animated.spring(animatedValues.translateY, {
+            toValue: 0,
+            useNativeDriver: true,
+          }).start();
+
           setDisplayState({
             hideButton: false,
             hideTitle: false,
           });
+
+          animateWidth();
+
+          Animated.spring(animatedValues.opacity, {
+            toValue: 1,
+            useNativeDriver: true,
+          }).start();
         },
         collapse: () => {
+          Animated.parallel([
+            Animated.spring(animatedValues.opacity, {
+              toValue: 1,
+              useNativeDriver: true,
+            }),
+            Animated.spring(animatedValues.translateY, {
+              toValue: 0,
+              useNativeDriver: true,
+            }),
+          ]).start();
+
+          animateWidth();
+
           setDisplayState({
             hideButton: false,
             hideTitle: true,
           });
         },
         hide: () => {
-          setDisplayState((previousState) => ({
-            ...previousState,
-            hideButton: true,
-          }));
+          Animated.stagger(20, [
+            Animated.spring(animatedValues.opacity, {
+              toValue: 0,
+              useNativeDriver: true,
+            }),
+            Animated.spring(animatedValues.translateY, {
+              toValue: 1,
+              useNativeDriver: true,
+            }),
+          ]).start(() => {
+            animateWidth();
+            setDisplayState((previousState) => ({
+              ...previousState,
+              hideButton: true,
+            }));
+          });
         },
       }),
       []
     );
 
-    React.useEffect(() => {
-      if (canAnimate) {
-        LayoutAnimation.configureNext(defaultAnimation);
-      }
-    }, [isIconOnly, displayState.hideButton, canAnimate]);
-
-    const marginBottom = Number(StyleSheet.flatten(style)?.marginBottom) || 0;
-
     return (
       <StyledFAB
-        /** Add a small timeout before executing animation to prevent flakiness */
-        onLayout={() => setTimeout(() => setCanAnimate(true), 500)}
+        onLayout={(event) =>
+          !hasSetButtonWidth &&
+          !active &&
+          setButtonWidth(event.nativeEvent.layout.width)
+        }
         underlayColor={theme.__hd__.fab.colors.buttonPressedBackground}
         onPress={onPress}
         style={[
@@ -172,20 +211,42 @@ const FAB = forwardRef<FABHandles, FABProps>(
             bottom: displayState.hideButton
               ? -(marginBottom + theme.__hd__.fab.sizes.height * 2)
               : StyleSheet.flatten(style)?.bottom,
+
+            transform: [
+              {
+                translateY: animatedValues.translateY.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: [
+                    0,
+                    marginBottom + theme.__hd__.fab.sizes.height * 2,
+                  ],
+                }),
+              },
+            ],
           },
         ]}
         testID={testID}
         themeActive={active}
       >
-        {isIconOnly ? (
-          <IconOnlyContent
-            animated={animated}
-            active={active}
-            icon={active ? 'add' : icon}
-          />
-        ) : (
-          <IconWithTextContent icon={icon} title={title} />
-        )}
+        <Animated.View
+          style={{
+            flexDirection: 'row',
+            opacity: animatedValues.opacity.interpolate({
+              inputRange: [0, 1],
+              outputRange: [0, 1],
+            }),
+          }}
+        >
+          {isIconOnly ? (
+            <IconOnlyContent
+              animated={animated}
+              active={active}
+              icon={active ? 'add' : icon}
+            />
+          ) : (
+            <IconWithTextContent icon={icon} title={title} />
+          )}
+        </Animated.View>
       </StyledFAB>
     );
   }

package/src/components/FAB/StyledFAB.tsx

@@ -1,16 +1,17 @@
 import styled from '@emotion/native';
-import type { TextProps, TouchableHighlightProps } from 'react-native';
-import { TouchableHighlight } from 'react-native';
+import type { TextProps } from 'react-native';
+import { Animated, TouchableHighlight } from 'react-native';
+import Box from '../Box';
 import type { IconProps } from '../Icon';
 import Icon from '../Icon';
 import Typography from '../Typography';
-import Box from '../Box';
 
-const StyledFAB = styled(TouchableHighlight)<
-  TouchableHighlightProps & {
-    themeActive?: boolean;
-  }
->(({ theme, themeActive }) => ({
+const AnimatedTouchableHighlight =
+  Animated.createAnimatedComponent(TouchableHighlight);
+
+const StyledFAB = styled(AnimatedTouchableHighlight)<{
+  themeActive?: boolean;
+}>(({ theme, themeActive }) => ({
   backgroundColor: themeActive
     ? theme.__hd__.fab.colors.buttonActiveBackground
     : theme.__hd__.fab.colors.buttonBackground,
@@ -25,6 +26,7 @@ const StyledFAB = styled(TouchableHighlight)<
   shadowOffset: theme.__hd__.fab.shadows.offset,
   shadowRadius: theme.__hd__.fab.shadows.radius,
   shadowOpacity: theme.__hd__.fab.shadows.opacity,
+  height: theme.__hd__.fab.sizes.height,
 }));
 
 const StyledFABIcon = styled(Icon)<IconProps>(({ theme }) => ({

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

@@ -27,26 +27,24 @@ exports[`StyledFAB renders correctly 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      [
-        {
-          "alignItems": "center",
-          "alignSelf": "flex-start",
-          "backgroundColor": "#401960",
-          "borderRadius": 999,
-          "elevation": 3,
-          "flexDirection": "row",
-          "justifyContent": "center",
-          "padding": 20,
-          "shadowColor": "#001f23",
-          "shadowOffset": {
-            "height": 2,
-            "width": 0,
-          },
-          "shadowOpacity": 0.12,
-          "shadowRadius": 4,
+      {
+        "alignItems": "center",
+        "alignSelf": "flex-start",
+        "backgroundColor": "#401960",
+        "borderRadius": 999,
+        "elevation": 3,
+        "flexDirection": "row",
+        "height": 64,
+        "justifyContent": "center",
+        "padding": 20,
+        "shadowColor": "#001f23",
+        "shadowOffset": {
+          "height": 2,
+          "width": 0,
         },
-        undefined,
-      ]
+        "shadowOpacity": 0.12,
+        "shadowRadius": 4,
+      }
     }
   >
     <Text
@@ -120,26 +118,24 @@ exports[`StyledFAB renders correctly 2`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      [
-        {
-          "alignItems": "center",
-          "alignSelf": "flex-start",
-          "backgroundColor": "#33144d",
-          "borderRadius": 999,
-          "elevation": 3,
-          "flexDirection": "row",
-          "justifyContent": "center",
-          "padding": 20,
-          "shadowColor": "#001f23",
-          "shadowOffset": {
-            "height": 2,
-            "width": 0,
-          },
-          "shadowOpacity": 0.12,
-          "shadowRadius": 4,
+      {
+        "alignItems": "center",
+        "alignSelf": "flex-start",
+        "backgroundColor": "#33144d",
+        "borderRadius": 999,
+        "elevation": 3,
+        "flexDirection": "row",
+        "height": 64,
+        "justifyContent": "center",
+        "padding": 20,
+        "shadowColor": "#001f23",
+        "shadowOffset": {
+          "height": 2,
+          "width": 0,
         },
-        undefined,
-      ]
+        "shadowOpacity": 0.12,
+        "shadowRadius": 4,
+      }
     }
   >
     <Text