@hero-design/rn 8.35.0 → 8.36.0-alpha.0

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

@@ -10,52 +10,53 @@ describe('ActionGroup', () => {
     ${true}
     ${false}
   `('has active $active', ({ active }) => {
-    const { toJSON, getByTestId, getByText } = renderWithTheme(
-      <ActionGroup
-        fabTitle="Shout out"
-        active={active}
-        headerTitle="What would you like to create?"
-        items={[
-          {
-            icon: 'speaker',
-            title: 'Give shout out',
-            testID: 'speaker-action-item',
-          },
-          { icon: 'target', title: 'Goal', testID: 'target-action-item' },
-          {
-            icon: 'plane',
-            title: 'Leave request',
-            testID: 'plane-action-item',
-          },
-          {
-            icon: 'health-bag',
-            title: 'Safety incident',
-            testID: 'health-bag-action-item',
-          },
-          { icon: 'clock', title: 'Timesheets', testID: 'clock-action-item' },
-        ]}
-      />
-    );
+    const { toJSON, getByTestId, getByText, queryByTestId, queryByText } =
+      renderWithTheme(
+        <ActionGroup
+          fabTitle="Shout out"
+          active={active}
+          headerTitle="What would you like to create?"
+          items={[
+            {
+              icon: 'speaker',
+              title: 'Give shout out',
+              testID: 'speaker-action-item',
+            },
+            { icon: 'target', title: 'Goal', testID: 'target-action-item' },
+            {
+              icon: 'plane',
+              title: 'Leave request',
+              testID: 'plane-action-item',
+            },
+            {
+              icon: 'health-bag',
+              title: 'Safety incident',
+              testID: 'health-bag-action-item',
+            },
+            { icon: 'clock', title: 'Timesheets', testID: 'clock-action-item' },
+          ]}
+        />
+      );
 
     expect(toJSON()).toMatchSnapshot();
 
-    expect(getByText('What would you like to create?')).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
-      expect(getByTestId('back-drop')).toHaveProp('pointerEvents', 'auto');
+      expect(queryByTestId('back-drop')).toBeDefined();
+      expect(getByText('What would you like to create?')).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 backdrop disappears
-      expect(getByTestId('back-drop')).toHaveProp('pointerEvents', 'box-none');
+      expect(queryByTestId('back-drop')).toBeNull();
+      expect(queryByText('What would you like to create?')).toBeNull();
     }
   });
 
   describe('when user presses', () => {
-    it('calls onPress', () => {
+    it('calls onPress when active = false', () => {
       const onPressSpy = jest.fn();
       const { getByTestId } = renderWithTheme(
         <ActionGroup onPress={onPressSpy} />
@@ -63,5 +64,14 @@ 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);
+    });
   });
 });

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

@@ -1,6 +1,6 @@
 import React, { forwardRef, useRef } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
-import { Animated, Platform } from 'react-native';
+import { Animated, Platform, Modal } from 'react-native';
 import type { IconName } from '../../Icon';
 import type { ActionItemProps } from './ActionItem';
 import ActionItem from './ActionItem';
@@ -8,6 +8,7 @@ import {
   StyledActionGroupContainer,
   StyledBackdrop,
   StyledContainer,
+  StyledContainerInModal,
   StyledFAB,
   StyledHeaderText,
 } from './StyledActionGroup';
@@ -110,64 +111,83 @@ const ActionGroup = forwardRef<ActionGroupHandles, ActionGroupProps>(
         }),
       ]).start();
     }, [active]);
-
-    const interpolatedBackdropOpacityAnimation =
+    const interpolatedActionGroupOpacityAnimation =
       tranlateXAnimation.current.interpolate({
         inputRange: [0, 1],
-        outputRange: [0, 0.25],
+        outputRange: [0, 1],
       });
 
-    const interpolatedActionGroupOpacityAnimation =
+    const interpolatedFABOpacityAnimation =
       tranlateXAnimation.current.interpolate({
         inputRange: [0, 1],
-        outputRange: [0, 1],
+        outputRange: [1, 0],
       });
 
     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"
+        <Animated.View
           style={{
-            opacity: interpolatedActionGroupOpacityAnimation,
+            opacity: interpolatedFABOpacityAnimation,
           }}
         >
-          {!!headerTitle && (
-            <Animated.View
-              style={{ transform: [{ translateY: titleTranslateY }] }}
+          <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={true}
+        >
+          <StyledContainerInModal testID={testID} style={[style]}>
+            <StyledBackdrop testID="back-drop" />
+            <StyledActionGroupContainer
+              testID="action-group"
+              style={{
+                opacity: interpolatedActionGroupOpacityAnimation,
+              }}
             >
-              <StyledHeaderText testID="header-text" level="h4">
-                {headerTitle}
-              </StyledHeaderText>
-            </Animated.View>
-          )}
-
-          <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>
-
-        <StyledFAB
-          testID="fab"
-          icon={fabIcon}
-          onPress={onPress}
-          animated
-          active={active}
-          title={fabTitle}
-          ref={fabRef}
-        />
+              {!!headerTitle && (
+                <Animated.View
+                  style={{ transform: [{ translateY: titleTranslateY }] }}
+                >
+                  <StyledHeaderText testID="header-text" level="h4">
+                    {headerTitle}
+                  </StyledHeaderText>
+                </Animated.View>
+              )}
+
+              <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>
+
+            <StyledFAB
+              key="fab-in-portal"
+              testID="fab-in-portal"
+              icon={fabIcon}
+              onPress={onPress}
+              animated
+              active={active}
+              title={fabTitle}
+            />
+          </StyledContainerInModal>
+        </Modal>
       </StyledContainer>
     );
   }

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

@@ -0,0 +1,21 @@
+import React from 'react';
+export interface ModalProps {
+    /**
+     * Content of the modal.
+     */
+    children: React.ReactElement;
+    /**
+     * Visibility of the modal
+     */
+    visible?: boolean;
+    /**
+     * Callback when the modal is shown.
+     */
+    onShow?: () => void;
+    /**
+     * TestID of the modal.
+     */
+    testID?: string;
+}
+declare const fABModal: ({ children, onShow, testID, visible }: ModalProps) => null;
+export default fABModal;

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+type ModalContentWrapperProps = {
+    children: React.ReactElement;
+    visible?: boolean;
+    testID?: string;
+    style?: StyleProp<ViewStyle>;
+    animated?: boolean;
+    pointerEvents: 'box-none' | 'none' | 'box-only' | 'auto';
+};
+export type ModalContentWrapperHandler = {
+    hide: (callback?: () => void) => void;
+};
+declare const FABModalContentWrapper: {
+    ({ children, testID, pointerEvents, }: ModalContentWrapperProps): JSX.Element;
+    displayName: string;
+};
+export default FABModalContentWrapper;

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

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+declare const ModalProvider: ({ children }: {
+    children: ReactNode;
+}) => JSX.Element;
+export default ModalProvider;

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import { ViewProps } from 'react-native';
+export type ModalPresenterHandles = {
+    animatedOut: (completion?: () => void) => void;
+};
+export type FABModalDismissFunc = (onDismiss?: () => void) => void;
+export type FABModalUpdateFunc = (content: React.ReactNode) => void;
+/**
+ * Modal handler is returned by `showModal` function.
+ */
+export type FABModalHandler = {
+    /**
+     * Same `dismiss` function as in `ModalContentProps`.
+     */
+    dismiss: FABModalDismissFunc;
+    /**
+     * Same `update` function as in `ModalContentProps`.
+     */
+    update: FABModalUpdateFunc;
+};
+declare const FABModalPresenter: React.ForwardRefExoticComponent<ViewProps & React.RefAttributes<ModalPresenterHandles>>;
+/**
+ * Present a modal on screen immediately.
+ *
+ * The new presented modal will be on top of existing modals if there are any.
+ *
+ * @param Content A component to be presented as a modal on screen.
+ * This component will be centered horizontally and vertically on screen with
+ * a semitransparent black overlay underneath.
+ * @param contentProps Props for this modal component.
+ * @returns A `ModalHandler` you can use to dismiss the modal.
+ */
+export declare const showFABModal: (content: React.ReactNode) => FABModalHandler;
+export default FABModalPresenter;

package/types/components/FAB/ActionGroup/ModalPresenter/index.d.ts

@@ -0,0 +1,3 @@
+import { FABModalDismissFunc, FABModalHandler, showFABModal, ModalPresenterHandles } from './ModalPresenter';
+export type { FABModalDismissFunc as ModalDismissFunc, FABModalHandler as ModalHandler, ModalPresenterHandles, };
+export { showFABModal };

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

@@ -8,6 +8,12 @@ declare const StyledContainer: import("@emotion/native").StyledComponent<ViewPro
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
+declare const StyledContainerInModal: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
 declare const StyledActionGroupContainer: import("@emotion/native").StyledComponent<Animated.AnimatedProps<ViewProps & import("react").RefAttributes<View>> & {
     children?: import("react").ReactNode;
 } & {
@@ -28,4 +34,4 @@ declare const StyledHeaderText: import("@emotion/native").StyledComponent<import
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & TextProps, {}, {}>;
-export { StyledHeaderText, StyledBackdrop, StyledContainer, StyledActionGroupContainer, StyledFAB, };
+export { StyledHeaderText, StyledBackdrop, StyledContainer, StyledContainerInModal, StyledActionGroupContainer, StyledFAB, };