@hero-design/rn 9.0.0-0 → 9.0.0-alpha.0

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`
@@ -10,11 +10,10 @@ describe('ActionGroup', () => {
     ${true}
     ${false}
   `('has active $active', ({ active }) => {
-    const { toJSON, getByTestId, getByText } = renderWithTheme(
+    const { toJSON, getByTestId, queryByTestId } = renderWithTheme(
       <ActionGroup
         fabTitle="Shout out"
         active={active}
-        headerTitle="What would you like to create?"
         items={[
           {
             icon: 'speaker',
@@ -39,30 +38,21 @@ 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 }],
-      });
-      expect(getByTestId('back-drop')).toHaveProp('pointerEvents', 'auto');
+      // verify backdrop appears
+      expect(queryByTestId('back-drop')).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();
     } else {
-      // verify action group disappears
-      expect(getByTestId('action-group')).toHaveStyle({
-        transform: [{ translateX: 400 }],
-      });
-      expect(getByTestId('back-drop')).toHaveProp('pointerEvents', 'box-none');
+      // verify backdrop disappears
+      expect(queryByTestId('back-drop')).toBeNull();
     }
   });
 
   describe('when user presses', () => {
-    it('calls onPress', () => {
+    it('calls onPress when active = false', () => {
       const onPressSpy = jest.fn();
       const { getByTestId } = renderWithTheme(
         <ActionGroup onPress={onPressSpy} />
@@ -70,5 +60,25 @@ describe('ActionGroup', () => {
       fireEvent(getByTestId('fab'), 'press');
       expect(onPressSpy).toBeCalledTimes(1);
     });
+
+    it('calls onPress when active = true', () => {
+      const onPressSpy = jest.fn();
+      const { getByTestId } = renderWithTheme(
+        <ActionGroup onPress={onPressSpy} active />
+      );
+      fireEvent(getByTestId('fab-in-portal'), 'press');
+      expect(onPressSpy).toBeCalledTimes(1);
+    });
+  });
+
+  describe('when user presses backdrop', () => {
+    it('calls onBackdropPress when active = true', () => {
+      const onBackdropPressSpy = jest.fn();
+      const { getByTestId } = renderWithTheme(
+        <ActionGroup onBackdropPress={onBackdropPressSpy} active />
+      );
+      fireEvent(getByTestId('back-drop'), 'press');
+      expect(onBackdropPressSpy).toBeCalledTimes(1);
+    });
   });
 });

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

@@ -1,39 +1,31 @@
-import React, { useEffect, useRef } from 'react';
-import { Animated, Easing, Platform, View } from 'react-native';
+import React, { forwardRef, useRef } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
+import { Animated, Platform, Modal } from 'react-native';
+import type { IconName } from '../../Icon';
+import type { ActionItemProps } from './ActionItem';
 import ActionItem from './ActionItem';
 import {
+  StyledActionGroupContainer,
   StyledBackdrop,
   StyledContainer,
+  StyledContainerInModal,
   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';
+import { useDeprecation } from '../../../utils/hooks';
+import { useTheme } from '../../../theme';
+
+export type ActionGroupHandles = {
+  showFAB: () => void;
+  collapseFAB: () => void;
+  hideFAB: () => void;
 };
 
 export interface ActionGroupProps {
   /**
+   * @deprecated headerTitle will be removed in the next major release.
    * Title of the action group header.
    */
   headerTitle?: string;
@@ -42,7 +34,10 @@ export interface ActionGroupProps {
    * This function is called on pressing the FAB button.
    * */
   onPress?: () => void;
-
+  /**
+   * This function is called on pressing the FAB backdrop.
+   * */
+  onBackdropPress?: () => void;
   /**
    * Specify if the FAB button is in active state and the action group is shown.
    * */
@@ -66,87 +61,133 @@ 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],
-    });
+      headerTitle,
+      onPress,
+      active,
+      style,
+      items,
+      testID,
+      fabTitle,
+      onBackdropPress,
+      fabIcon = 'add',
+    },
+    ref
+  ) => {
+    useDeprecation(
+      `FAB.ActionGroup's headerTitle prop will be removed in the next major release. Please remove it.`,
+      headerTitle !== undefined
+    );
 
-  const interpolatedActionGroupOpacityAnimation =
-    tranlateXAnimation.current.interpolate({
+    const theme = useTheme();
+    const fabRef = useRef<FABHandles>(null);
+    const animatedValue = useRef<Animated.Value>(
+      new Animated.Value(active ? 1 : 0)
+    );
+
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        showFAB: () => fabRef.current?.show(),
+        collapseFAB: () => fabRef.current?.collapse(),
+        hideFAB: () => fabRef.current?.hide(),
+      }),
+      [fabRef]
+    );
+
+    React.useEffect(() => {
+      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 actionGroupOpacity = animatedValue.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>
-  );
-};
+    return (
+      <StyledContainer testID={testID} pointerEvents="box-none" style={style}>
+        <Animated.View>
+          <StyledFAB
+            key="fab"
+            testID="fab"
+            icon={fabIcon}
+            onPress={onPress}
+            animated
+            active={active}
+            title={fabTitle}
+            ref={fabRef}
+          />
+        </Animated.View>
+        <Modal
+          visible={active}
+          animationType="fade"
+          transparent
+          statusBarTranslucent
+        >
+          <StyledContainerInModal testID={testID} style={[style]}>
+            <StyledBackdrop testID="back-drop" onPress={onBackdropPress} />
+            <StyledActionGroupContainer
+              testID="action-group"
+              pointerEvents="box-none"
+              style={{
+                opacity: actionGroupOpacity,
+              }}
+            >
+              <Box style={[style, { paddingBottom: 0 }]}>
+                {items?.map((itemProp, index) => (
+                  <ActionItem
+                    key={itemProp.key || `${itemProp.icon}_${itemProp.title}`}
+                    {...itemProp}
+                    index={active ? index : items.length - index}
+                    active={active}
+                  />
+                ))}
+              </Box>
+            </StyledActionGroupContainer>
+
+            {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>
+    );
+  }
+);
+
+ActionGroup.displayName = 'FAB.ActionGroup';
 
 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 } from 'react';
+import {
+  Animated,
+  LayoutAnimation,
+  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';
 
+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.
@@ -54,7 +74,6 @@ const IconOnlyContent = ({
 }: {
   icon: IconName;
   animated?: boolean;
-
   active?: boolean;
 }) => {
   if (animated) {
@@ -85,31 +104,154 @@ 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 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 [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: () => {
+          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,
+            }));
+          });
+        },
+      }),
+      []
+    );
+
+    return (
+      <StyledFAB
+        onLayout={(event) =>
+          !hasSetButtonWidth &&
+          !active &&
+          setButtonWidth(event.nativeEvent.layout.width)
+        }
+        underlayColor={theme.__hd__.fab.colors.buttonPressedBackground}
+        onPress={onPress}
+        style={[
+          style,
+          {
+            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}
+      >
+        <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>
+    );
+  }
+);
+
+FAB.displayName = 'FAB';
+
 export default FAB;

package/src/components/FAB/StyledFAB.tsx

@@ -1,27 +1,33 @@
 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>(
-  ({ theme }) => ({
-    backgroundColor: theme.__hd__.fab.colors.buttonBackground,
-    borderRadius: theme.radii.rounded,
-    alignItems: 'center',
-    justifyContent: 'center',
-    alignSelf: 'flex-start',
-    padding: theme.__hd__.fab.space.containerPadding,
-    flexDirection: 'row',
-    elevation: theme.__hd__.fab.shadows.elevation,
-    shadowColor: theme.__hd__.fab.colors.shadow,
-    shadowOffset: theme.__hd__.fab.shadows.offset,
-    shadowRadius: theme.__hd__.fab.shadows.radius,
-    shadowOpacity: theme.__hd__.fab.shadows.opacity,
-  })
-);
+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,
+  borderRadius: theme.radii.rounded,
+  alignItems: 'center',
+  justifyContent: 'center',
+  alignSelf: 'flex-start',
+  padding: theme.__hd__.fab.space.containerPadding,
+  flexDirection: 'row',
+  elevation: theme.__hd__.fab.shadows.elevation,
+  shadowColor: theme.__hd__.fab.shadows.color,
+  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 }) => ({
   color: theme.__hd__.fab.colors.icon,
@@ -30,10 +36,7 @@ const StyledFABIcon = styled(Icon)<IconProps>(({ theme }) => ({
   textAlign: 'center',
 }));
 
-const StyledFABText = styled(Typography.Text)<TextProps>(({ theme }) => ({
-  fontFamily: theme.__hd__.fab.fonts.title,
-  fontSize: theme.__hd__.fab.fontSizes.title,
-  lineHeight: theme.__hd__.fab.lineHeights.title,
+const StyledFABText = styled(Typography.Body)<TextProps>(({ theme }) => ({
   color: theme.__hd__.fab.colors.titleText,
   textAlignVertical: 'center',
   textAlign: 'center',

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

@@ -6,8 +6,18 @@ import { StyledFAB, StyledFABIcon } from '../StyledFAB';
 describe('StyledFAB', () => {
   it('renders correctly', () => {
     const { toJSON } = renderWithTheme(
-      <StyledFAB>
-        <Typography.Text> button </Typography.Text>
+      <StyledFAB themeActive={false}>
+        <Typography.Body variant="small"> button </Typography.Body>
+      </StyledFAB>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly', () => {
+    const { toJSON } = renderWithTheme(
+      <StyledFAB themeActive>
+        <Typography.Body variant="small"> button </Typography.Body>
       </StyledFAB>
     );