@hero-design/rn 8.35.0-alpha.4 → 8.35.1

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,53 @@
+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 of the portal. If name is not provided, a random name will be generated.
+   */
+  name?: string;
+
+  /*
+   * Name of the portal host. If name is not provided, a default host will be used.
+   */
+  hostName?: string;
+
+  /*
+   * Content of the portal.
+   */
+  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,
+});

package/src/components/Portal/reducer.ts

@@ -0,0 +1,106 @@
+import { omit } from '../../utils/helpers';
+import { ACTIONS } from './constants';
+import { PortalType } from './contexts';
+import type {
+  ActionTypes,
+  AddUpdatePortalAction,
+  RemovePortalAction,
+} from './types';
+
+type State = Record<string, Array<PortalType>>;
+
+const registerHostIfNotExist = (state: State, hostName: string): State => {
+  if (!(hostName in state)) {
+    return {
+      ...state,
+      [hostName]: [],
+    };
+  }
+  return { ...state };
+};
+
+const deregisterHost = (state: State, hostName: string): State => {
+  return { ...omit([hostName], state) };
+};
+
+const addUpdatePortal = (
+  state: Record<string, Array<PortalType>>,
+  hostName: string,
+  portalName: string,
+  node: React.ReactNode
+) => {
+  const newState = registerHostIfNotExist(state, hostName);
+
+  const index = newState[hostName].findIndex(
+    (item) => item.name === portalName
+  );
+
+  if (index !== -1) {
+    return {
+      ...newState,
+      [hostName]: newState[hostName].map((item, i) => {
+        if (index === i) {
+          return {
+            ...item,
+            node,
+          };
+        }
+        return item;
+      }),
+    };
+  }
+
+  return {
+    ...newState,
+    [hostName]: [
+      ...newState[hostName],
+      {
+        name: portalName,
+        node,
+      },
+    ],
+  };
+};
+
+const removePortal = (
+  state: Record<string, Array<PortalType>>,
+  hostName: string,
+  portalName: string
+) => {
+  if (!(hostName in state)) {
+    return { ...state };
+  }
+
+  return {
+    ...state,
+    [hostName]: state[hostName].filter((item) => item.name !== portalName),
+  };
+};
+
+export const reducer = (
+  state: Record<string, Array<PortalType>>,
+  action: ActionTypes
+) => {
+  const { type } = action;
+  switch (type) {
+    case ACTIONS.REGISTER_HOST:
+      return registerHostIfNotExist(state, action.hostName);
+    case ACTIONS.DEREGISTER_HOST:
+      return deregisterHost(state, action.hostName);
+    case ACTIONS.ADD_UPDATE_PORTAL:
+      return addUpdatePortal(
+        state,
+        action.hostName,
+        (action as AddUpdatePortalAction).portalName,
+        (action as AddUpdatePortalAction).node
+      );
+    case ACTIONS.REMOVE_PORTAL:
+      return removePortal(
+        state,
+        action.hostName,
+        (action as RemovePortalAction).portalName
+      );
+    default:
+      return { ...state };
+  }
+};

package/src/components/Portal/types.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+import type { ACTIONS } from './constants';
+
+export interface AddUpdatePortalAction {
+  type: ACTIONS;
+  hostName: string;
+  portalName: string;
+  node: ReactNode;
+}
+
+export interface RemovePortalAction {
+  type: ACTIONS;
+  hostName: string;
+  portalName: string;
+}
+
+export interface RegisterHostAction {
+  type: ACTIONS;
+  hostName: string;
+}
+
+export interface UnregisterHostAction {
+  type: ACTIONS;
+  hostName: string;
+}
+
+export type ActionTypes =
+  | AddUpdatePortalAction
+  | RemovePortalAction
+  | RegisterHostAction
+  | UnregisterHostAction;

package/src/components/Portal/usePortal.ts

@@ -0,0 +1,50 @@
+import { ReactNode, useCallback, useContext } from 'react';
+import { ACTIONS } from './constants';
+import { PortalDispatchContext } from './contexts';
+
+export const usePortal = (hostName = 'root') => {
+  const dispatch = useContext(PortalDispatchContext);
+
+  if (dispatch === null) {
+    throw new Error("You must add 'PortalProvider' to the root component.");
+  }
+
+  const registerHost = useCallback(() => {
+    dispatch({
+      type: ACTIONS.REGISTER_HOST,
+      hostName,
+    });
+  }, []);
+
+  const deregisterHost = useCallback(() => {
+    dispatch({
+      type: ACTIONS.DEREGISTER_HOST,
+      hostName,
+    });
+  }, []);
+
+  const addUpdatePortal = useCallback((name: string, node: ReactNode) => {
+    dispatch({
+      type: ACTIONS.ADD_UPDATE_PORTAL,
+      hostName,
+      portalName: name,
+      node,
+    });
+  }, []);
+
+  const removePortal = useCallback((name: string) => {
+    dispatch({
+      type: ACTIONS.REMOVE_PORTAL,
+      hostName,
+      portalName: name,
+    });
+  }, []);
+
+  return {
+    registerHost,
+    deregisterHost,
+    addPortal: addUpdatePortal,
+    updatePortal: addUpdatePortal,
+    removePortal,
+  };
+};

package/src/components/Portal/usePortalState.ts

@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import { PortalStateContext } from './contexts';
+
+export const usePortalState = (hostName: string) => {
+  const state = useContext(PortalStateContext);
+  if (state === null) {
+    throw new Error("You must add 'PortalProvider' to the root component.");
+  }
+
+  return state[hostName] || [];
+};

package/src/components/Progress/StyledProgressBar.tsx

@@ -13,6 +13,7 @@ const StyledWrapper = styled(View)<ViewProps & { themeIntent: ThemeIntent }>(
         THEME_INTENT_MAP[themeIntent]
       ],
     overflow: 'hidden',
+    borderRadius: theme.__hd__.progress.radii.default,
   })
 );
 

package/src/components/Progress/__tests__/__snapshots__/index.spec.js.snap

@@ -7,7 +7,8 @@ exports[`Progress.Bar renders correctly 1`] = `
       Object {
         "alignSelf": "stretch",
         "backgroundColor": "#e8e9ea",
-        "height": 4,
+        "borderRadius": 999,
+        "height": 8,
         "overflow": "hidden",
       },
       undefined,
@@ -45,7 +46,8 @@ exports[`Progress.Bar renders correctly with intent 1`] = `
       Object {
         "alignSelf": "stretch",
         "backgroundColor": "#e8e9ea",
-        "height": 4,
+        "borderRadius": 999,
+        "height": 8,
         "overflow": "hidden",
       },
       undefined,
@@ -110,7 +112,7 @@ exports[`Progress.Circle allows to custom value renderer 1`] = `
               Object {
                 "borderColor": "#5ace7d",
                 "borderRadius": 999,
-                "borderWidth": 4,
+                "borderWidth": 8,
                 "height": 72,
                 "width": 72,
               },
@@ -161,7 +163,7 @@ exports[`Progress.Circle allows to custom value renderer 1`] = `
                 Object {
                   "borderColor": "#e8e9ea",
                   "borderRadius": 999,
-                  "borderWidth": 4,
+                  "borderWidth": 8,
                   "height": 72,
                   "width": 72,
                 },
@@ -204,7 +206,7 @@ exports[`Progress.Circle allows to custom value renderer 1`] = `
               Object {
                 "borderColor": "#5ace7d",
                 "borderRadius": 999,
-                "borderWidth": 4,
+                "borderWidth": 8,
                 "height": 72,
                 "width": 72,
               },
@@ -256,7 +258,7 @@ exports[`Progress.Circle allows to custom value renderer 1`] = `
                 Object {
                   "borderColor": "#e8e9ea",
                   "borderRadius": 999,
-                  "borderWidth": 4,
+                  "borderWidth": 8,
                   "height": 72,
                   "width": 72,
                 },
@@ -274,11 +276,11 @@ exports[`Progress.Circle allows to custom value renderer 1`] = `
           Object {
             "backgroundColor": "#5ace7d",
             "borderRadius": 999,
-            "height": 4,
-            "left": 34,
+            "height": 8,
+            "left": 32,
             "position": "absolute",
             "top": 0,
-            "width": 4,
+            "width": 8,
             "zIndex": 2,
           },
           undefined,
@@ -310,11 +312,11 @@ exports[`Progress.Circle allows to custom value renderer 1`] = `
             Object {
               "backgroundColor": "#5ace7d",
               "borderRadius": 999,
-              "height": 4,
-              "left": 34,
+              "height": 8,
+              "left": 32,
               "position": "absolute",
               "top": 0,
-              "width": 4,
+              "width": 8,
               "zIndex": 2,
             },
             undefined,
@@ -329,12 +331,12 @@ exports[`Progress.Circle allows to custom value renderer 1`] = `
           Object {
             "alignItems": "center",
             "borderRadius": 999,
-            "height": 64,
+            "height": 56,
             "justifyContent": "center",
-            "left": 4,
+            "left": 8,
             "position": "absolute",
-            "top": 4,
-            "width": 64,
+            "top": 8,
+            "width": 56,
             "zIndex": 3,
           },
           undefined,
@@ -400,7 +402,7 @@ exports[`Progress.Circle renders correctly 1`] = `
               Object {
                 "borderColor": "#401960",
                 "borderRadius": 999,
-                "borderWidth": 4,
+                "borderWidth": 8,
                 "height": 72,
                 "width": 72,
               },
@@ -451,7 +453,7 @@ exports[`Progress.Circle renders correctly 1`] = `
                 Object {
                   "borderColor": "#e8e9ea",
                   "borderRadius": 999,
-                  "borderWidth": 4,
+                  "borderWidth": 8,
                   "height": 72,
                   "width": 72,
                 },
@@ -494,7 +496,7 @@ exports[`Progress.Circle renders correctly 1`] = `
               Object {
                 "borderColor": "#401960",
                 "borderRadius": 999,
-                "borderWidth": 4,
+                "borderWidth": 8,
                 "height": 72,
                 "width": 72,
               },
@@ -546,7 +548,7 @@ exports[`Progress.Circle renders correctly 1`] = `
                 Object {
                   "borderColor": "#e8e9ea",
                   "borderRadius": 999,
-                  "borderWidth": 4,
+                  "borderWidth": 8,
                   "height": 72,
                   "width": 72,
                 },
@@ -564,11 +566,11 @@ exports[`Progress.Circle renders correctly 1`] = `
           Object {
             "backgroundColor": "#401960",
             "borderRadius": 999,
-            "height": 4,
-            "left": 34,
+            "height": 8,
+            "left": 32,
             "position": "absolute",
             "top": 0,
-            "width": 4,
+            "width": 8,
             "zIndex": 2,
           },
           undefined,
@@ -600,11 +602,11 @@ exports[`Progress.Circle renders correctly 1`] = `
             Object {
               "backgroundColor": "#401960",
               "borderRadius": 999,
-              "height": 4,
-              "left": 34,
+              "height": 8,
+              "left": 32,
               "position": "absolute",
               "top": 0,
-              "width": 4,
+              "width": 8,
               "zIndex": 2,
             },
             undefined,
@@ -619,12 +621,12 @@ exports[`Progress.Circle renders correctly 1`] = `
           Object {
             "alignItems": "center",
             "borderRadius": 999,
-            "height": 64,
+            "height": 56,
             "justifyContent": "center",
-            "left": 4,
+            "left": 8,
             "position": "absolute",
-            "top": 4,
-            "width": 64,
+            "top": 8,
+            "width": 56,
             "zIndex": 3,
           },
           undefined,
@@ -690,7 +692,7 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
               Object {
                 "borderColor": "#5ace7d",
                 "borderRadius": 999,
-                "borderWidth": 4,
+                "borderWidth": 8,
                 "height": 72,
                 "width": 72,
               },
@@ -741,7 +743,7 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
                 Object {
                   "borderColor": "#e8e9ea",
                   "borderRadius": 999,
-                  "borderWidth": 4,
+                  "borderWidth": 8,
                   "height": 72,
                   "width": 72,
                 },
@@ -784,7 +786,7 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
               Object {
                 "borderColor": "#5ace7d",
                 "borderRadius": 999,
-                "borderWidth": 4,
+                "borderWidth": 8,
                 "height": 72,
                 "width": 72,
               },
@@ -836,7 +838,7 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
                 Object {
                   "borderColor": "#e8e9ea",
                   "borderRadius": 999,
-                  "borderWidth": 4,
+                  "borderWidth": 8,
                   "height": 72,
                   "width": 72,
                 },
@@ -854,11 +856,11 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
           Object {
             "backgroundColor": "#5ace7d",
             "borderRadius": 999,
-            "height": 4,
-            "left": 34,
+            "height": 8,
+            "left": 32,
             "position": "absolute",
             "top": 0,
-            "width": 4,
+            "width": 8,
             "zIndex": 2,
           },
           undefined,
@@ -890,11 +892,11 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
             Object {
               "backgroundColor": "#5ace7d",
               "borderRadius": 999,
-              "height": 4,
-              "left": 34,
+              "height": 8,
+              "left": 32,
               "position": "absolute",
               "top": 0,
-              "width": 4,
+              "width": 8,
               "zIndex": 2,
             },
             undefined,
@@ -909,12 +911,12 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
           Object {
             "alignItems": "center",
             "borderRadius": 999,
-            "height": 64,
+            "height": 56,
             "justifyContent": "center",
-            "left": 4,
+            "left": 8,
             "position": "absolute",
-            "top": 4,
-            "width": 64,
+            "top": 8,
+            "width": 56,
             "zIndex": 3,
           },
           undefined,