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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.34.2",
+  "version": "8.35.0-alpha.1",
   "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

@@ -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, Modal, Platform } from 'react-native';
 import type { IconName } from '../../Icon';
 import type { ActionItemProps } from './ActionItem';
 import ActionItem from './ActionItem';
@@ -14,6 +14,7 @@ import {
 
 import Box from '../../Box';
 import { FABHandles } from '../FAB';
+import { FABModal } from '../../..';
 
 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.
    * */
@@ -125,40 +125,60 @@ 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 }] }}
+        <FABModal visible={active}>
+          <StyledContainer
+            testID={testID}
+            pointerEvents="box-none"
+            style={style}
+          >
+            <StyledBackdrop
+              pointerEvents={active ? 'auto' : 'box-none'}
+              testID="back-drop"
+              style={{
+                opacity: interpolatedBackdropOpacityAnimation,
+                backgroundColor: 'yellow',
+              }}
+            />
+            <StyledActionGroupContainer
+              pointerEvents={active ? 'auto' : 'none'}
+              testID="action-group"
+              style={{
+                opacity: interpolatedActionGroupOpacityAnimation,
+                flex: 1,
+              }}
             >
-              <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>
-
+              {!!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>
         <StyledFAB
           testID="fab"
           icon={fabIcon}

package/src/components/FAB/FAB.tsx

@@ -163,7 +163,16 @@ const FAB = forwardRef<FABHandles, FABProps>(
     return (
       <StyledFAB
         /** Add a small timeout before executing animation to prevent flakiness */
-        onLayout={() => setTimeout(() => setCanAnimate(true), 500)}
+        onLayout={() => {
+          setTimeout(() => setCanAnimate(true), 500);
+        }}
+        ref={(ref) => {
+          if (ref) {
+            ref.measureInWindow((x, y, width, height) => {
+              console.log('measureInWindow', x, y, width, height);
+            });
+          }
+        }}
         underlayColor={theme.__hd__.fab.colors.buttonPressedBackground}
         onPress={onPress}
         style={[

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,
   })
 );