@hero-design/rn 8.26.0 → 8.26.1

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

@@ -10,7 +10,7 @@ describe('ActionGroup', () => {
     ${true}
     ${false}
   `('has active $active', ({ active }) => {
-    const { toJSON, getByTestId, getByText } = renderWithTheme(
+    const { toJSON, queryByTestId, queryByText } = renderWithTheme(
       <ActionGroup
         fabTitle="Shout out"
         active={active}
@@ -39,25 +39,19 @@ 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();
+    expect(queryByText('What would you like to create?')).toBeDefined();
+    expect(queryByText('Shout out')).toBeDefined();
+    expect(queryByTestId('speaker-action-item')).toBeDefined();
+    expect(queryByTestId('target-action-item')).toBeDefined();
+    expect(queryByTestId('plane-action-item')).toBeDefined();
+    expect(queryByTestId('health-bag-action-item')).toBeDefined();
 
     if (active) {
       // verify action group appears
-      expect(getByTestId('action-group')).toHaveStyle({
+      expect(queryByTestId('action-group')).toHaveStyle({
         transform: [{ translateX: 0 }],
       });
-      expect(getByTestId('back-drop')).toHaveProp('pointerEvents', 'auto');
-    } else {
-      // verify action group disappears
-      expect(getByTestId('action-group')).toHaveStyle({
-        transform: [{ translateX: 400 }],
-      });
-      expect(getByTestId('back-drop')).toHaveProp('pointerEvents', 'box-none');
+      expect(queryByTestId('back-drop')).toHaveProp('pointerEvents', 'auto');
     }
   });
 

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

@@ -1,16 +1,18 @@
-import React, { useEffect, useRef } from 'react';
-import { Animated, Easing, Platform, View } from 'react-native';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
+import { Animated, Easing, Modal, Platform, View } from 'react-native';
+import { useTheme } from '../../../theme';
+import type { IconName } from '../../Icon';
+import type { ActionItemProps } from './ActionItem';
 import ActionItem from './ActionItem';
 import {
+  StyledActionGroupContainer,
   StyledBackdrop,
   StyledContainer,
   StyledFAB,
   StyledHeaderText,
-  StyledActionGroupContainer,
+  StyledModalView,
 } from './StyledActionGroup';
-import type { IconName } from '../../Icon';
-import type { ActionItemProps } from './ActionItem';
 
 type ActionItemsContainerProps = {
   style?: StyleProp<ViewStyle>;
@@ -74,6 +76,7 @@ export interface ActionGroupProps {
 
   testID?: string;
 }
+
 const ActionGroup = ({
   headerTitle,
   onPress,
@@ -84,18 +87,48 @@ const ActionGroup = ({
   fabTitle,
   fabIcon = 'add',
 }: ActionGroupProps) => {
+  const theme = useTheme();
+  // Internal state to control the animation of the action group
+  const [visible, setVisibility] = useState(active);
   const tranlateXAnimation = useRef<Animated.Value>(
     new Animated.Value(active ? 1 : 0)
   );
+
+  useEffect(() => {
+    if (active && !visible) {
+      setVisibility(true);
+    }
+  }, [active]);
+
   useEffect(() => {
+    if (active) {
+      const animation = Animated.timing(tranlateXAnimation.current, {
+        toValue: 1,
+        useNativeDriver: Platform.OS === 'ios' || Platform.OS === 'android',
+        easing: Easing.inOut(Easing.cubic),
+      });
+
+      animation.start();
+    }
+  }, [active]);
+
+  //  Make sure the animation finishes running before closing the modal
+  const onInternalFABPress = useCallback(() => {
+    if (!onPress) {
+      return;
+    }
+
     const animation = Animated.timing(tranlateXAnimation.current, {
-      toValue: active ? 1 : 0,
+      toValue: 0,
       useNativeDriver: Platform.OS === 'ios' || Platform.OS === 'android',
       easing: Easing.inOut(Easing.cubic),
     });
 
-    animation.start();
-  }, [active]);
+    animation.start(() => {
+      setVisibility(false);
+      onPress();
+    });
+  }, [visible]);
 
   const interpolatedTranlateXAnimation = tranlateXAnimation.current.interpolate(
     {
@@ -117,34 +150,63 @@ const ActionGroup = ({
 
   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 }],
-        }}
+      <Modal
+        visible={visible}
+        transparent
+        statusBarTranslucent
+        animationType="none"
       >
-        {!!headerTitle && (
-          <StyledHeaderText testID="header-text">
-            {headerTitle}
-          </StyledHeaderText>
-        )}
-        <ActionItemsListComponent items={items} />
-      </StyledActionGroupContainer>
-      <StyledFAB
-        testID="fab"
-        icon={fabIcon}
-        onPress={onPress}
-        animated
-        active={active}
-        title={fabTitle}
-      />
+        <StyledBackdrop
+          style={{
+            opacity: interpolatedBackdropOpacityAnimation,
+          }}
+          testID="back-drop"
+          pointerEvents={active ? 'auto' : 'box-none'}
+        />
+
+        <StyledModalView>
+          <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>
+
+          {active && (
+            <StyledFAB
+              testID="fab"
+              icon={fabIcon}
+              onPress={onInternalFABPress}
+              animated
+              active={active}
+              title={fabTitle}
+              style={{
+                marginBottom: theme.__hd__.fab.space.internalFABMarginBottom,
+              }}
+            />
+          )}
+        </StyledModalView>
+      </Modal>
+
+      {!active && (
+        <StyledFAB
+          testID="fab"
+          icon={fabIcon}
+          onPress={onPress}
+          animated
+          active={active}
+          title={fabTitle}
+        />
+      )}
     </StyledContainer>
   );
 };

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -512,6 +512,7 @@ Object {
         "containerPadding": 20,
         "headerTextMarginBottom": 24,
         "headerTextMarginRight": 24,
+        "internalFABMarginBottom": 24,
         "titleMarginHorizontal": 8,
       },
     },

package/src/theme/components/fab.ts

@@ -58,6 +58,7 @@ const getFABTheme = (theme: GlobalTheme) => {
     headerTextMarginBottom: theme.space.large,
     containerPadding: theme.space.large - theme.space.xsmall,
     titleMarginHorizontal: theme.space.small,
+    internalFABMarginBottom: theme.space.large,
   };
 
   const radii = {

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

@@ -28,4 +28,10 @@ declare const StyledHeaderText: import("@emotion/native").StyledComponent<TextPr
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {}>;
-export { StyledHeaderText, StyledBackdrop, StyledContainer, StyledActionGroupContainer, StyledFAB, };
+declare const StyledModalView: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export { StyledHeaderText, StyledBackdrop, StyledContainer, StyledActionGroupContainer, StyledFAB, StyledModalView, };

package/types/theme/components/fab.d.ts

@@ -57,6 +57,7 @@ declare const getFABTheme: (theme: GlobalTheme) => {
         headerTextMarginBottom: number;
         containerPadding: number;
         titleMarginHorizontal: number;
+        internalFABMarginBottom: number;
     };
 };
 export default getFABTheme;