@hero-design/rn 8.59.0 → 8.60.0

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