@hero-design/rn 8.35.0-alpha.3 → 8.35.0

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

@@ -14,7 +14,6 @@ import {
 
 import Box from '../../Box';
 import { FABHandles } from '../FAB';
-import { Portal } from '@gorhom/portal';
 
 export type ActionGroupHandles = {
   showFAB: () => void;
@@ -62,7 +61,6 @@ export interface ActionGroupProps {
    * Testing id of the component.
    */
   testID?: string;
-  portalName?: string;
 }
 
 const ActionGroup = forwardRef<ActionGroupHandles, ActionGroupProps>(
@@ -76,7 +74,6 @@ const ActionGroup = forwardRef<ActionGroupHandles, ActionGroupProps>(
       testID,
       fabTitle,
       fabIcon = 'add',
-      portalName,
     },
     ref
   ) => {
@@ -126,57 +123,52 @@ const ActionGroup = forwardRef<ActionGroupHandles, ActionGroupProps>(
         outputRange: [0, 1],
       });
 
-    const Wrapper = portalName ? Portal : React.Fragment;
     return (
-      <Wrapper name={portalName}>
-        <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,
-            }}
-          >
-            {!!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>
-
-          <Portal hostName="CustomPortalHost">
-            <StyledFAB
-              testID="fab"
-              icon={fabIcon}
-              onPress={onPress}
-              animated
-              active={active}
-              title={fabTitle}
-              ref={fabRef}
-            />
-          </Portal>
-        </StyledContainer>
-      </Wrapper>
+      <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,
+          }}
+        >
+          {!!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
+          testID="fab"
+          icon={fabIcon}
+          onPress={onPress}
+          animated
+          active={active}
+          title={fabTitle}
+          ref={fabRef}
+        />
+      </StyledContainer>
     );
   }
 );

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

@@ -73,7 +73,7 @@ exports[`StyledFAB renders correctly 2`] = `
       Object {
         "alignItems": "center",
         "alignSelf": "flex-start",
-        "backgroundColor": "#664780",
+        "backgroundColor": "#33144d",
         "borderRadius": 999,
         "elevation": 2,
         "flexDirection": "row",

package/src/components/FAB/index.tsx

@@ -1,10 +1,6 @@
 import FAB from './FAB';
 import ActionGroup from './ActionGroup';
-import { Portal, PortalHost, PortalProvider } from '@gorhom/portal';
 
 export default Object.assign(FAB, {
   ActionGroup,
-  Portal: Portal,
-  PortalHost: PortalHost,
-  Provider: PortalProvider,
 });

package/src/components/Icon/__tests__/__snapshots__/index.spec.tsx.snap

@@ -53,7 +53,7 @@ exports[`Icon renders correctly with color and size 1`] = `
   style={
     Array [
       Object {
-        "color": "#de350b",
+        "color": "#cb300a",
         "fontSize": 28,
       },
       undefined,

package/src/components/PinInput/__tests__/__snapshots__/PinCell.spec.tsx.snap

@@ -102,7 +102,7 @@ exports[`PinCell renders correctly when focused is false, state is error 1`] = `
     Array [
       Object {
         "alignItems": "center",
-        "borderColor": "#de350b",
+        "borderColor": "#cb300a",
         "borderRadius": 8,
         "borderWidth": 1,
         "height": 48,
@@ -128,7 +128,7 @@ exports[`PinCell renders correctly when focused is false, state is error 1`] = `
         },
         Array [
           Object {
-            "color": "#de350b",
+            "color": "#cb300a",
           },
           undefined,
         ],
@@ -198,7 +198,7 @@ exports[`PinCell renders correctly when focused is true, state is error 1`] = `
     Array [
       Object {
         "alignItems": "center",
-        "borderColor": "#de350b",
+        "borderColor": "#cb300a",
         "borderRadius": 8,
         "borderWidth": 2,
         "height": 48,
@@ -224,7 +224,7 @@ exports[`PinCell renders correctly when focused is true, state is error 1`] = `
         },
         Array [
           Object {
-            "color": "#de350b",
+            "color": "#cb300a",
           },
           undefined,
         ],

package/src/components/PinInput/__tests__/__snapshots__/index.spec.tsx.snap

@@ -822,7 +822,7 @@ exports[`rendering renders correctly when there is error 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "borderColor": "#de350b",
+            "borderColor": "#cb300a",
             "borderRadius": 8,
             "borderWidth": 1,
             "height": 48,
@@ -839,8 +839,8 @@ exports[`rendering renders correctly when there is error 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#de350b",
-              "borderColor": "#de350b",
+              "backgroundColor": "#cb300a",
+              "borderColor": "#cb300a",
               "borderRadius": 999,
               "borderWidth": 1,
               "height": 16,
@@ -868,7 +868,7 @@ exports[`rendering renders correctly when there is error 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "borderColor": "#de350b",
+            "borderColor": "#cb300a",
             "borderRadius": 8,
             "borderWidth": 1,
             "height": 48,
@@ -885,8 +885,8 @@ exports[`rendering renders correctly when there is error 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#de350b",
-              "borderColor": "#de350b",
+              "backgroundColor": "#cb300a",
+              "borderColor": "#cb300a",
               "borderRadius": 999,
               "borderWidth": 1,
               "height": 16,
@@ -914,7 +914,7 @@ exports[`rendering renders correctly when there is error 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "borderColor": "#de350b",
+            "borderColor": "#cb300a",
             "borderRadius": 8,
             "borderWidth": 1,
             "height": 48,
@@ -931,7 +931,7 @@ exports[`rendering renders correctly when there is error 1`] = `
         style={
           Array [
             Object {
-              "borderColor": "#de350b",
+              "borderColor": "#cb300a",
               "borderRadius": 999,
               "borderWidth": 1,
               "height": 16,
@@ -959,7 +959,7 @@ exports[`rendering renders correctly when there is error 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "borderColor": "#de350b",
+            "borderColor": "#cb300a",
             "borderRadius": 8,
             "borderWidth": 1,
             "height": 48,
@@ -976,7 +976,7 @@ exports[`rendering renders correctly when there is error 1`] = `
         style={
           Array [
             Object {
-              "borderColor": "#de350b",
+              "borderColor": "#cb300a",
               "borderRadius": 999,
               "borderWidth": 1,
               "height": 16,
@@ -1007,7 +1007,7 @@ exports[`rendering renders correctly when there is error 1`] = `
       style={
         Array [
           Object {
-            "color": "#de350b",
+            "color": "#cb300a",
             "fontSize": 16,
           },
           undefined,
@@ -1030,7 +1030,7 @@ exports[`rendering renders correctly when there is error 1`] = `
           },
           Array [
             Object {
-              "color": "#de350b",
+              "color": "#cb300a",
               "paddingLeft": 4,
             },
             undefined,

package/src/components/Portal/PortalHost.tsx

@@ -0,0 +1,24 @@
+import React, { memo, useEffect } from 'react';
+import { usePortal } from './usePortal';
+import { usePortalState } from './usePortalState';
+import { PortalType } from './contexts';
+
+export interface PortalHostProps {
+  name: string;
+}
+const PortalHostComponent = ({ name }: PortalHostProps) => {
+  const state = usePortalState(name);
+  const { registerHost, deregisterHost } = usePortal(name);
+
+  useEffect(() => {
+    registerHost();
+    return () => {
+      deregisterHost();
+    };
+  }, []);
+
+  return <>{state.map((item: PortalType) => item.node)}</>;
+};
+
+export const PortalHost = memo(PortalHostComponent);
+PortalHost.displayName = 'PortalHost';

package/src/components/Portal/PortalProvider.tsx

@@ -0,0 +1,29 @@
+import React, { memo, useReducer } from 'react';
+import type { ReactNode } from 'react';
+import { PortalHost } from './PortalHost';
+import { reducer } from './reducer';
+import { INITIAL_STATE } from './constants';
+import { PortalDispatchContext, PortalStateContext } from './contexts';
+
+export interface PortalProviderProps {
+  rootHostName?: string;
+  children: ReactNode | ReactNode[];
+}
+
+const PortalProviderComponent = ({
+  rootHostName = 'root',
+  children,
+}: PortalProviderProps) => {
+  const [state, dispatch] = useReducer(reducer, INITIAL_STATE);
+  return (
+    <PortalDispatchContext.Provider value={dispatch}>
+      <PortalStateContext.Provider value={state}>
+        {children}
+        <PortalHost name={rootHostName} />
+      </PortalStateContext.Provider>
+    </PortalDispatchContext.Provider>
+  );
+};
+
+export const PortalProvider = memo(PortalProviderComponent);
+PortalProvider.displayName = 'PortalProvider';

package/src/components/Portal/__tests__/PortalHost.spec.tsx

@@ -0,0 +1,50 @@
+import React, { useContext } from 'react';
+import { waitFor } from '@testing-library/react-native';
+import { PortalHost } from '../PortalHost';
+import { PortalProvider } from '../PortalProvider';
+import Typography from '../../Typography';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import { PortalStateContext } from '../contexts';
+import theme, { ThemeProvider } from '../../../theme';
+
+/*
+ * This component is used to test the PortalHost hook
+ */
+const TestComponent = () => {
+  const state = useContext(PortalStateContext);
+
+  const text = 'host' in state! ? 'registered' : 'unregistered';
+  return <Typography.Body>{text}</Typography.Body>;
+};
+
+describe('PortalHost', () => {
+  it('should register portal when mount', async () => {
+    const { getByText } = renderWithTheme(
+      <PortalProvider>
+        <PortalHost name="host" />
+        <TestComponent />
+      </PortalProvider>
+    );
+
+    expect(getByText('registered')).toBeDefined();
+  });
+
+  it('should unregister portal when unmount', async () => {
+    const { getByText, rerender } = renderWithTheme(
+      <PortalProvider>
+        <PortalHost name="host" />
+        <TestComponent />
+      </PortalProvider>
+    );
+
+    rerender(
+      <ThemeProvider theme={theme}>
+        <PortalProvider>
+          <TestComponent />
+        </PortalProvider>
+      </ThemeProvider>
+    );
+
+    await waitFor(() => expect(getByText('unregistered')).toBeDefined());
+  });
+});

package/src/components/Portal/__tests__/PortalProvider.spec.tsx

@@ -0,0 +1,24 @@
+import React, { useContext } from 'react';
+import { PortalStateContext } from '../contexts';
+import Typography from '../../Typography';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import { PortalProvider } from '../PortalProvider';
+
+const TestComponent = () => {
+  const state = useContext(PortalStateContext);
+
+  const text = 'root' in state! ? 'registered' : 'unregistered';
+  return <Typography.Body>{text}</Typography.Body>;
+};
+
+describe('PortalProvider', () => {
+  it('should register root portal when mount', async () => {
+    const { getByText } = renderWithTheme(
+      <PortalProvider>
+        <TestComponent />
+      </PortalProvider>
+    );
+
+    expect(getByText('registered')).toBeDefined();
+  });
+});

package/src/components/Portal/__tests__/index.spec.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { View } from 'react-native';
+import { waitFor, within } from '@testing-library/react-native';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import { PortalHost } from '../PortalHost';
+import { PortalProvider } from '../PortalProvider';
+import Typography from '../../Typography';
+import Portal from '..';
+
+describe('Portal', () => {
+  it('should render Typography inside Portal.Host', async () => {
+    const { getByTestId } = renderWithTheme(
+      <PortalProvider>
+        <View testID="portal-wrapper">
+          <PortalHost name="host" />
+        </View>
+        <Portal hostName="host">
+          <Typography.Body>portal</Typography.Body>;
+        </Portal>
+      </PortalProvider>
+    );
+
+    await waitFor(() =>
+      expect(
+        within(getByTestId('portal-wrapper')).getByText('portal')
+      ).toBeDefined()
+    );
+  });
+});

package/src/components/Portal/__tests__/reducer.spec.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import Typography from '../../Typography';
+import { ACTIONS, INITIAL_STATE } from '../constants';
+import { reducer } from '../reducer';
+
+describe('reducers', () => {
+  describe('registerHost', () => {
+    it('should return correct state', () => {
+      const newState = reducer(INITIAL_STATE, {
+        type: ACTIONS.REGISTER_HOST,
+        hostName: 'host',
+      });
+      expect(newState).toEqual({
+        host: [],
+      });
+    });
+  });
+
+  describe('deregisterHost', () => {
+    it('should return correct state', () => {
+      const newState = reducer(
+        {
+          removedHost: [],
+          host: [],
+        },
+        {
+          type: ACTIONS.DEREGISTER_HOST,
+          hostName: 'removedHost',
+        }
+      );
+      expect(newState).toEqual({
+        host: [],
+      });
+    });
+  });
+
+  describe('addUpdatePortal', () => {
+    it('should return correct state', () => {
+      const newState = reducer(
+        {
+          host: [],
+        },
+        {
+          type: ACTIONS.ADD_UPDATE_PORTAL,
+          hostName: 'host',
+          portalName: 'portal',
+          node: <Typography.Body>Portal</Typography.Body>,
+        }
+      );
+      expect(newState).toEqual({
+        host: [
+          {
+            name: 'portal',
+            node: <Typography.Body>Portal</Typography.Body>,
+          },
+        ],
+      });
+    });
+
+    it('should new portal when the portal is existing', () => {
+      const newState = reducer(
+        {
+          host: [
+            {
+              name: 'portal',
+              node: <Typography.Body>Old Portal</Typography.Body>,
+            },
+          ],
+        },
+        {
+          type: ACTIONS.ADD_UPDATE_PORTAL,
+          hostName: 'host',
+          portalName: 'portal',
+          node: <Typography.Body>New Portal</Typography.Body>,
+        }
+      );
+      expect(newState).toEqual({
+        host: [
+          {
+            name: 'portal',
+            node: <Typography.Body>New Portal</Typography.Body>,
+          },
+        ],
+      });
+    });
+  });
+
+  describe('removePortal', () => {
+    it('should return correct state', () => {
+      const newState = reducer(
+        {
+          host: [
+            {
+              name: 'portal',
+              node: <Typography.Body>Portal</Typography.Body>,
+            },
+          ],
+        },
+        {
+          type: ACTIONS.REMOVE_PORTAL,
+          hostName: 'host',
+          portalName: 'portal',
+        }
+      );
+      expect(newState).toEqual({
+        host: [],
+      });
+    });
+  });
+});

package/src/components/Portal/constants.ts

@@ -0,0 +1,10 @@
+enum ACTIONS {
+  REGISTER_HOST,
+  DEREGISTER_HOST,
+  ADD_UPDATE_PORTAL,
+  REMOVE_PORTAL,
+}
+
+const INITIAL_STATE = {};
+
+export { ACTIONS, INITIAL_STATE };

package/src/components/Portal/contexts.ts

@@ -0,0 +1,14 @@
+import React, { createContext } from 'react';
+import type { ReactNode } from 'react';
+import { ActionTypes } from './types';
+
+export interface PortalType {
+  name: string;
+  node: ReactNode;
+}
+export const PortalStateContext = createContext<Record<
+  string,
+  Array<PortalType>
+> | null>(null);
+export const PortalDispatchContext =
+  createContext<React.Dispatch<ActionTypes> | null>(null);

package/src/components/Portal/index.tsx

@@ -0,0 +1,42 @@
+import { ReactNode, memo, useLayoutEffect, useMemo } from 'react';
+// Fix issue no crypto in react-native
+// https://stackoverflow.com/a/66852908
+import { customAlphabet } from 'nanoid/non-secure';
+import { usePortal } from './usePortal';
+import { PortalProvider } from './PortalProvider';
+import { PortalHost } from './PortalHost';
+
+const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz0123456789', 10);
+
+export interface PortalProps {
+  name?: string;
+  hostName?: string;
+  children?: ReactNode | ReactNode[];
+}
+
+const PortalComponent = ({ name, hostName, children }: PortalProps) => {
+  const { addPortal: addUpdatePortal, removePortal } = usePortal(hostName);
+
+  const nameOrRandom = useMemo(() => name || nanoid(), [name]);
+
+  useLayoutEffect(() => {
+    addUpdatePortal(nameOrRandom, children);
+    return () => {
+      removePortal(nameOrRandom);
+    };
+  }, [addUpdatePortal]);
+
+  useLayoutEffect(() => {
+    addUpdatePortal(nameOrRandom, children);
+  }, [children]);
+
+  return null;
+};
+
+const Portal = memo(PortalComponent);
+Portal.displayName = 'Portal';
+
+export default Object.assign(Portal, {
+  Provider: PortalProvider,
+  Host: PortalHost,
+});