@hero-design/rn 8.26.0 → 8.26.1

package/.eslintrc.js

@@ -5,8 +5,9 @@ module.exports = {
     project: ['./tsconfig.json'],
   },
   extends: ['hd', 'plugin:@hero-design/recommendedRn'],
-  plugins: ['@hero-design'],
+  plugins: ['@hero-design', 'import'],
   rules: {
     'no-underscore-dangle': [2, { allow: ['__hd__'] }],
+    'import/no-cycle': 2,
   },
 };

package/.turbo/turbo-build.log

@@ -4,5 +4,5 @@ $ rollup -c
 src/index.ts → lib/index.js, es/index.js...
 (!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
 (!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/root/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
-created lib/index.js, es/index.js in 25.9s
+created lib/index.js, es/index.js in 25.7s
 $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

package/es/index.js

@@ -2327,7 +2327,8 @@ var getFABTheme = function getFABTheme(theme) {
     headerTextMarginRight: theme.space.large,
     headerTextMarginBottom: theme.space.large,
     containerPadding: theme.space.large - theme.space.xsmall,
-    titleMarginHorizontal: theme.space.small
+    titleMarginHorizontal: theme.space.small,
+    internalFABMarginBottom: theme.space.large
   };
   var radii = {
     actionItem: theme.radii.rounded
@@ -13070,10 +13071,11 @@ var StyledBackdrop = index$a(Animated.View)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     position: 'absolute',
-    left: 0,
-    right: 0,
-    top: 0,
+    flex: 1,
+    height: '100%',
+    width: '100%',
     bottom: 0,
+    right: 0,
     backgroundColor: theme.__hd__.fab.colors.backdropBackground
   };
 });
@@ -13089,6 +13091,17 @@ var StyledHeaderText = index$a(Typography.Text)(function (_ref3) {
     textAlign: 'right'
   };
 });
+var StyledModalView = index$a(View)({
+  position: 'absolute',
+  flex: 1,
+  height: '100%',
+  width: '100%',
+  bottom: 0,
+  right: 0,
+  justifyContent: 'flex-end',
+  alignItems: 'flex-end',
+  backgroundColor: 'transparent'
+});
 
 var ActionItemsListComponent = function ActionItemsListComponent(_ref) {
   var style = _ref.style,
@@ -13111,15 +13124,43 @@ var ActionGroup = function ActionGroup(_ref2) {
     fabTitle = _ref2.fabTitle,
     _ref2$fabIcon = _ref2.fabIcon,
     fabIcon = _ref2$fabIcon === void 0 ? 'add' : _ref2$fabIcon;
+  var theme = useTheme();
+  // Internal state to control the animation of the action group
+  var _useState = useState(active),
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisibility = _useState2[1];
   var tranlateXAnimation = useRef(new Animated.Value(active ? 1 : 0));
   useEffect(function () {
+    if (active && !visible) {
+      setVisibility(true);
+    }
+  }, [active]);
+  useEffect(function () {
+    if (active) {
+      var animation = Animated.timing(tranlateXAnimation.current, {
+        toValue: 1,
+        useNativeDriver: Platform.OS === 'ios' || Platform.OS === 'android',
+        easing: Easing.inOut(Easing.cubic)
+      });
+      animation.start();
+    }
+  }, [active]);
+  //  Make sure the animation finishes running before closing the modal
+  var onInternalFABPress = useCallback(function () {
+    if (!onPress) {
+      return;
+    }
     var animation = Animated.timing(tranlateXAnimation.current, {
-      toValue: active ? 1 : 0,
+      toValue: 0,
       useNativeDriver: Platform.OS === 'ios' || Platform.OS === 'android',
       easing: Easing.inOut(Easing.cubic)
     });
-    animation.start();
-  }, [active]);
+    animation.start(function () {
+      setVisibility(false);
+      onPress();
+    });
+  }, [visible]);
   var interpolatedTranlateXAnimation = tranlateXAnimation.current.interpolate({
     inputRange: [0, 1],
     outputRange: [400, 0]
@@ -13136,13 +13177,18 @@ var ActionGroup = function ActionGroup(_ref2) {
     testID: testID,
     pointerEvents: "box-none",
     style: style
+  }, /*#__PURE__*/React.createElement(Modal, {
+    visible: visible,
+    transparent: true,
+    statusBarTranslucent: true,
+    animationType: "none"
   }, /*#__PURE__*/React.createElement(StyledBackdrop, {
-    pointerEvents: active ? 'auto' : 'box-none',
-    testID: "back-drop",
     style: {
       opacity: interpolatedBackdropOpacityAnimation
-    }
-  }), /*#__PURE__*/React.createElement(StyledActionGroupContainer, {
+    },
+    testID: "back-drop",
+    pointerEvents: active ? 'auto' : 'box-none'
+  }), /*#__PURE__*/React.createElement(StyledModalView, null, /*#__PURE__*/React.createElement(StyledActionGroupContainer, {
     pointerEvents: active ? 'auto' : 'none',
     testID: "action-group",
     style: {
@@ -13155,7 +13201,17 @@ var ActionGroup = function ActionGroup(_ref2) {
     testID: "header-text"
   }, headerTitle), /*#__PURE__*/React.createElement(ActionItemsListComponent, {
     items: items
-  })), /*#__PURE__*/React.createElement(StyledFAB, {
+  })), active && /*#__PURE__*/React.createElement(StyledFAB, {
+    testID: "fab",
+    icon: fabIcon,
+    onPress: onInternalFABPress,
+    animated: true,
+    active: active,
+    title: fabTitle,
+    style: {
+      marginBottom: theme.__hd__.fab.space.internalFABMarginBottom
+    }
+  }))), !active && /*#__PURE__*/React.createElement(StyledFAB, {
     testID: "fab",
     icon: fabIcon,
     onPress: onPress,

package/lib/index.js

@@ -2357,7 +2357,8 @@ var getFABTheme = function getFABTheme(theme) {
     headerTextMarginRight: theme.space.large,
     headerTextMarginBottom: theme.space.large,
     containerPadding: theme.space.large - theme.space.xsmall,
-    titleMarginHorizontal: theme.space.small
+    titleMarginHorizontal: theme.space.small,
+    internalFABMarginBottom: theme.space.large
   };
   var radii = {
     actionItem: theme.radii.rounded
@@ -13100,10 +13101,11 @@ var StyledBackdrop = index$a(reactNative.Animated.View)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     position: 'absolute',
-    left: 0,
-    right: 0,
-    top: 0,
+    flex: 1,
+    height: '100%',
+    width: '100%',
     bottom: 0,
+    right: 0,
     backgroundColor: theme.__hd__.fab.colors.backdropBackground
   };
 });
@@ -13119,6 +13121,17 @@ var StyledHeaderText = index$a(Typography.Text)(function (_ref3) {
     textAlign: 'right'
   };
 });
+var StyledModalView = index$a(reactNative.View)({
+  position: 'absolute',
+  flex: 1,
+  height: '100%',
+  width: '100%',
+  bottom: 0,
+  right: 0,
+  justifyContent: 'flex-end',
+  alignItems: 'flex-end',
+  backgroundColor: 'transparent'
+});
 
 var ActionItemsListComponent = function ActionItemsListComponent(_ref) {
   var style = _ref.style,
@@ -13141,15 +13154,43 @@ var ActionGroup = function ActionGroup(_ref2) {
     fabTitle = _ref2.fabTitle,
     _ref2$fabIcon = _ref2.fabIcon,
     fabIcon = _ref2$fabIcon === void 0 ? 'add' : _ref2$fabIcon;
+  var theme = useTheme();
+  // Internal state to control the animation of the action group
+  var _useState = React.useState(active),
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisibility = _useState2[1];
   var tranlateXAnimation = React.useRef(new reactNative.Animated.Value(active ? 1 : 0));
   React.useEffect(function () {
+    if (active && !visible) {
+      setVisibility(true);
+    }
+  }, [active]);
+  React.useEffect(function () {
+    if (active) {
+      var animation = reactNative.Animated.timing(tranlateXAnimation.current, {
+        toValue: 1,
+        useNativeDriver: reactNative.Platform.OS === 'ios' || reactNative.Platform.OS === 'android',
+        easing: reactNative.Easing.inOut(reactNative.Easing.cubic)
+      });
+      animation.start();
+    }
+  }, [active]);
+  //  Make sure the animation finishes running before closing the modal
+  var onInternalFABPress = React.useCallback(function () {
+    if (!onPress) {
+      return;
+    }
     var animation = reactNative.Animated.timing(tranlateXAnimation.current, {
-      toValue: active ? 1 : 0,
+      toValue: 0,
       useNativeDriver: reactNative.Platform.OS === 'ios' || reactNative.Platform.OS === 'android',
       easing: reactNative.Easing.inOut(reactNative.Easing.cubic)
     });
-    animation.start();
-  }, [active]);
+    animation.start(function () {
+      setVisibility(false);
+      onPress();
+    });
+  }, [visible]);
   var interpolatedTranlateXAnimation = tranlateXAnimation.current.interpolate({
     inputRange: [0, 1],
     outputRange: [400, 0]
@@ -13166,13 +13207,18 @@ var ActionGroup = function ActionGroup(_ref2) {
     testID: testID,
     pointerEvents: "box-none",
     style: style
+  }, /*#__PURE__*/React__default["default"].createElement(reactNative.Modal, {
+    visible: visible,
+    transparent: true,
+    statusBarTranslucent: true,
+    animationType: "none"
   }, /*#__PURE__*/React__default["default"].createElement(StyledBackdrop, {
-    pointerEvents: active ? 'auto' : 'box-none',
-    testID: "back-drop",
     style: {
       opacity: interpolatedBackdropOpacityAnimation
-    }
-  }), /*#__PURE__*/React__default["default"].createElement(StyledActionGroupContainer, {
+    },
+    testID: "back-drop",
+    pointerEvents: active ? 'auto' : 'box-none'
+  }), /*#__PURE__*/React__default["default"].createElement(StyledModalView, null, /*#__PURE__*/React__default["default"].createElement(StyledActionGroupContainer, {
     pointerEvents: active ? 'auto' : 'none',
     testID: "action-group",
     style: {
@@ -13185,7 +13231,17 @@ var ActionGroup = function ActionGroup(_ref2) {
     testID: "header-text"
   }, headerTitle), /*#__PURE__*/React__default["default"].createElement(ActionItemsListComponent, {
     items: items
-  })), /*#__PURE__*/React__default["default"].createElement(StyledFAB, {
+  })), active && /*#__PURE__*/React__default["default"].createElement(StyledFAB, {
+    testID: "fab",
+    icon: fabIcon,
+    onPress: onInternalFABPress,
+    animated: true,
+    active: active,
+    title: fabTitle,
+    style: {
+      marginBottom: theme.__hd__.fab.space.internalFABMarginBottom
+    }
+  }))), !active && /*#__PURE__*/React__default["default"].createElement(StyledFAB, {
     testID: "fab",
     icon: fabIcon,
     onPress: onPress,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.26.0",
+  "version": "8.26.1",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.26.0",
+    "@hero-design/colors": "8.26.1",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.21"
@@ -45,7 +45,7 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
-    "@hero-design/eslint-plugin": "8.26.0",
+    "@hero-design/eslint-plugin": "8.26.1",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -61,9 +61,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.26.0",
+    "eslint-config-hd": "8.26.1",
+    "eslint-plugin-import": "^2.27.5",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.26.0",
+    "prettier-config-hd": "8.26.1",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.1.0",

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

@@ -34,10 +34,11 @@ const StyledBackdrop = styled(Animated.View)<
   ComponentProps<typeof Animated.View>
 >(({ theme }) => ({
   position: 'absolute',
-  left: 0,
-  right: 0,
-  top: 0,
+  flex: 1,
+  height: '100%',
+  width: '100%',
   bottom: 0,
+  right: 0,
   backgroundColor: theme.__hd__.fab.colors.backdropBackground,
 }));
 
@@ -51,10 +52,23 @@ const StyledHeaderText = styled(Typography.Text)<TextProps>(({ theme }) => ({
   textAlign: 'right',
 }));
 
+const StyledModalView = styled(View)({
+  position: 'absolute',
+  flex: 1,
+  height: '100%',
+  width: '100%',
+  bottom: 0,
+  right: 0,
+  justifyContent: 'flex-end',
+  alignItems: 'flex-end',
+  backgroundColor: 'transparent',
+});
+
 export {
   StyledHeaderText,
   StyledBackdrop,
   StyledContainer,
   StyledActionGroupContainer,
   StyledFAB,
+  StyledModalView,
 };