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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.34.2",
+  "version": "8.35.0-alpha.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,13 +21,13 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.34.2",
+    "@hero-design/colors": "8.34.1",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.21"
   },
   "peerDependencies": {
-    "@hero-design/react-native-month-year-picker": "^8.34.2",
+    "@hero-design/react-native-month-year-picker": "^8.34.1",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "react": "18.0.0",
@@ -47,8 +47,8 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
-    "@hero-design/eslint-plugin": "8.34.2",
-    "@hero-design/react-native-month-year-picker": "^8.34.2",
+    "@hero-design/eslint-plugin": "8.34.1",
+    "@hero-design/react-native-month-year-picker": "^8.34.1",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -64,10 +64,10 @@
     "@types/react-native": "^0.67.7",
     "@types/react-native-vector-icons": "^6.4.10",
     "babel-plugin-inline-import": "^3.0.0",
-    "eslint-config-hd": "8.34.2",
+    "eslint-config-hd": "8.34.1",
     "eslint-plugin-import": "^2.27.5",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.34.2",
+    "prettier-config-hd": "8.34.1",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.5.0",
@@ -82,5 +82,6 @@
     "rollup-plugin-flow": "^1.1.1",
     "ts-jest": "^27.0.7"
   },
-  "prettier": "prettier-config-hd"
+  "prettier": "prettier-config-hd",
+  "react-native": "src/index.ts"
 }

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

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Dimensions, View, ViewStyle } from 'react-native';
+import { ModalHandler, showFABModal } from './ModalPresenter';
+
+const wrapperStyle: ViewStyle = {
+  width: Dimensions.get('window').width,
+  height: Dimensions.get('window').height,
+};
+
+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;
+}
+
+const fABModal = ({ children, onShow, testID, visible = true }: ModalProps) => {
+  const [modalHandler, setModalHandler] = React.useState<ModalHandler>();
+
+  const getModalContent = React.useCallback(
+    () => (
+      <View pointerEvents="box-none" style={wrapperStyle} testID={testID}>
+        {children}
+      </View>
+    ),
+    [visible, children, onShow, testID]
+  );
+
+  React.useEffect(() => {
+    if (visible) {
+      // Modal does not exist, create a new one
+      if (!modalHandler) {
+        const newModalHandler = showFABModal(getModalContent());
+        setModalHandler(newModalHandler);
+
+        onShow?.();
+      }
+      // Modal already exists, update it
+      else {
+        modalHandler.update(getModalContent());
+      }
+    } else {
+      modalHandler?.dismiss();
+      setModalHandler(undefined);
+    }
+  }, [getModalContent]);
+
+  return null;
+};
+
+export default fABModal;

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { StyleProp, View, 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;
+};
+
+const FABModalContentWrapper = ({
+  children,
+  testID,
+  pointerEvents,
+}: ModalContentWrapperProps) => {
+  return (
+    <View testID={testID} pointerEvents={pointerEvents}>
+      {children}
+    </View>
+  );
+};
+
+FABModalContentWrapper.displayName = 'FABModalContentWrapper';
+
+export default FABModalContentWrapper;

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

@@ -0,0 +1,133 @@
+import React, { forwardRef, useRef } from 'react';
+import { Animated, StyleSheet, ViewProps } from 'react-native';
+import RootSiblings from 'react-native-root-siblings';
+import Box from '../../../Box';
+
+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;
+};
+
+const FABModalPresenter = forwardRef<ModalPresenterHandles, ViewProps>(
+  ({ style, children, ...props }, ref) => {
+    const animatedOpacity = useRef(new Animated.Value(0));
+
+    React.useEffect(() => {
+      Animated.spring(animatedOpacity.current, {
+        toValue: 1,
+        useNativeDriver: true,
+      }).start();
+    }, []);
+
+    React.useImperativeHandle(ref, () => ({
+      animatedOut: (completion?: () => void) => {
+        Animated.spring(animatedOpacity.current, {
+          toValue: 0,
+          useNativeDriver: true,
+        }).start(() => {
+          completion?.();
+        });
+      },
+    }));
+
+    return (
+      <Box style={StyleSheet.absoluteFill} pointerEvents="box-none">
+        <Animated.View
+          style={[
+            {
+              width: '100%',
+              height: '100%',
+              justifyContent: 'center',
+              alignItems: 'center',
+              opacity: animatedOpacity.current,
+            },
+            style,
+          ]}
+          {...props}
+          pointerEvents="box-none"
+        >
+          {children}
+        </Animated.View>
+      </Box>
+    );
+  }
+);
+
+/**
+ * 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 const showFABModal = (content: React.ReactNode): FABModalHandler => {
+  let ref: ModalPresenterHandles | null = null;
+  let rootSiblings: RootSiblings | null = null;
+
+  const dismiss: FABModalDismissFunc = (onDismiss) => {
+    if (rootSiblings) {
+      const cleanup = () => {
+        rootSiblings?.destroy();
+        rootSiblings = null;
+        ref = null;
+        onDismiss?.();
+      };
+
+      if (ref) {
+        ref.animatedOut(cleanup);
+      } else {
+        cleanup();
+      }
+    }
+  };
+
+  const update: FABModalUpdateFunc = (newContent) => {
+    rootSiblings?.update(
+      <FABModalPresenter
+        ref={(_ref) => {
+          ref = _ref;
+        }}
+      >
+        {newContent}
+      </FABModalPresenter>
+    );
+  };
+
+  rootSiblings = new RootSiblings(
+    (
+      <FABModalPresenter
+        ref={(_ref) => {
+          ref = _ref;
+        }}
+      >
+        {content}
+      </FABModalPresenter>
+    )
+  );
+
+  return { dismiss, update };
+};
+
+FABModalPresenter.displayName = 'FABModalPresenter';
+
+export default FABModalPresenter;

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

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

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

@@ -14,6 +14,7 @@ import {
 
 import Box from '../../Box';
 import { FABHandles } from '../FAB';
+import FABModal from './FABModal';
 
 export type ActionGroupHandles = {
   showFAB: () => void;
@@ -31,7 +32,6 @@ export interface ActionGroupProps {
    * This function is called on pressing the FAB button.
    * */
   onPress?: () => void;
-
   /**
    * Specify if the FAB button is in active state and the action group is shown.
    * */
@@ -124,51 +124,53 @@ const ActionGroup = forwardRef<ActionGroupHandles, ActionGroupProps>(
       });
 
     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,
-          }}
-        >
-          {!!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>
+      <FABModal>
+        <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>
+      </FABModal>
     );
   }
 );

package/src/components/Progress/StyledProgressBar.tsx

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