@hero-design/rn 8.118.0 → 8.118.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hero-design/rn
 
+## 8.118.1
+
+### Patch Changes
+
+- [#4719](https://github.com/Thinkei/hero-design/pull/4719) [`2d4e3f901018d95280909eac099ad387982ff1b7`](https://github.com/Thinkei/hero-design/commit/2d4e3f901018d95280909eac099ad387982ff1b7) Thanks [@ttkien](https://github.com/ttkien)! - [FAB] Fix redundant FAB button with bottom navigation
+
 ## 8.118.0
 
 ### Minor Changes

package/es/index.js

@@ -23774,7 +23774,7 @@ var FAB$1 = /*#__PURE__*/forwardRef(function (_ref3, ref) {
   var onPress = _ref3.onPress,
     title = _ref3.title,
     icon = _ref3.icon,
-    animated = _ref3.animated,
+    iconAnimated = _ref3.animated,
     testID = _ref3.testID,
     active = _ref3.active,
     style = _ref3.style;
@@ -23801,49 +23801,78 @@ var FAB$1 = /*#__PURE__*/forwardRef(function (_ref3, ref) {
   React__default.useImperativeHandle(ref, function () {
     return {
       show: function show() {
-        Animated.spring(animatedValues.translateY, {
-          toValue: 0,
-          useNativeDriver: true
-        }).start();
+        var animated = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+        var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noop$2;
         setDisplayState({
           hideButton: false,
           hideTitle: false
         });
         animateWidth();
-        Animated.spring(animatedValues.opacity, {
-          toValue: 1,
-          useNativeDriver: true
-        }).start();
+        if (animated) {
+          Animated.parallel([Animated.spring(animatedValues.opacity, {
+            toValue: 1,
+            useNativeDriver: true
+          }), Animated.spring(animatedValues.translateY, {
+            toValue: 0,
+            useNativeDriver: true
+          })]).start(callback);
+        } else {
+          animatedValues.opacity.setValue(1);
+          animatedValues.translateY.setValue(0);
+        }
       },
       collapse: function collapse() {
-        Animated.parallel([Animated.spring(animatedValues.opacity, {
-          toValue: 1,
-          useNativeDriver: true
-        }), Animated.spring(animatedValues.translateY, {
-          toValue: 0,
-          useNativeDriver: true
-        })]).start();
-        animateWidth();
+        var animated = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+        var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noop$2;
         setDisplayState({
           hideButton: false,
           hideTitle: true
         });
+        animateWidth();
+        if (animated) {
+          Animated.parallel([Animated.spring(animatedValues.opacity, {
+            toValue: 1,
+            useNativeDriver: true
+          }), Animated.spring(animatedValues.translateY, {
+            toValue: 0,
+            useNativeDriver: true
+          })]).start(callback);
+        } else {
+          animatedValues.opacity.setValue(1);
+          animatedValues.translateY.setValue(0);
+        }
       },
       hide: function hide() {
-        Animated.stagger(20, [Animated.spring(animatedValues.opacity, {
-          toValue: 0,
-          useNativeDriver: true
-        }), Animated.spring(animatedValues.translateY, {
-          toValue: 1,
-          useNativeDriver: true
-        })]).start(function () {
+        var animated = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+        var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noop$2;
+        if (animated) {
+          Animated.stagger(20, [Animated.spring(animatedValues.opacity, {
+            toValue: 0,
+            useNativeDriver: true
+          }), Animated.spring(animatedValues.translateY, {
+            toValue: 1,
+            useNativeDriver: true
+          })]).start(function (arg) {
+            animateWidth();
+            setDisplayState(function (previousState) {
+              return _objectSpread2(_objectSpread2({}, previousState), {}, {
+                hideButton: true
+              });
+            });
+            if (callback) {
+              callback(arg);
+            }
+          });
+        } else {
+          animatedValues.opacity.setValue(0);
+          animatedValues.translateY.setValue(1);
           animateWidth();
           setDisplayState(function (previousState) {
             return _objectSpread2(_objectSpread2({}, previousState), {}, {
               hideButton: true
             });
           });
-        });
+        }
       }
     };
   }, []);
@@ -23873,7 +23902,7 @@ var FAB$1 = /*#__PURE__*/forwardRef(function (_ref3, ref) {
       })
     }
   }, isIconOnly ? /*#__PURE__*/React__default.createElement(IconOnlyContent, {
-    animated: animated,
+    animated: iconAnimated,
     active: active,
     icon: active ? 'add' : icon
   }) : /*#__PURE__*/React__default.createElement(IconWithTextContent, {
@@ -23972,15 +24001,18 @@ var ActionGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
   React__default.useEffect(function () {
     Animated.spring(animatedValue.current, {
       toValue: active ? 1 : 0,
-      delay: 100,
       useNativeDriver: Platform.OS !== 'web'
     }).start();
     if (active) {
       var _fabRef$current4;
-      (_fabRef$current4 = fabRef.current) === null || _fabRef$current4 === void 0 || _fabRef$current4.collapse();
+      (_fabRef$current4 = fabRef.current) === null || _fabRef$current4 === void 0 || _fabRef$current4.collapse(true, function () {
+        var _fabRef$current5;
+        (_fabRef$current5 = fabRef.current) === null || _fabRef$current5 === void 0 || _fabRef$current5.hide(false);
+      });
     } else {
-      var _fabRef$current5;
-      (_fabRef$current5 = fabRef.current) === null || _fabRef$current5 === void 0 || _fabRef$current5.show();
+      var _fabRef$current6, _fabRef$current7;
+      (_fabRef$current6 = fabRef.current) === null || _fabRef$current6 === void 0 || _fabRef$current6.collapse(false);
+      (_fabRef$current7 = fabRef.current) === null || _fabRef$current7 === void 0 || _fabRef$current7.show();
     }
   }, [active]);
   var actionGroupOpacity = animatedValue.current.interpolate({

package/lib/index.js

@@ -23803,7 +23803,7 @@ var FAB$1 = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
   var onPress = _ref3.onPress,
     title = _ref3.title,
     icon = _ref3.icon,
-    animated = _ref3.animated,
+    iconAnimated = _ref3.animated,
     testID = _ref3.testID,
     active = _ref3.active,
     style = _ref3.style;
@@ -23830,49 +23830,78 @@ var FAB$1 = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
   React__namespace.default.useImperativeHandle(ref, function () {
     return {
       show: function show() {
-        reactNative.Animated.spring(animatedValues.translateY, {
-          toValue: 0,
-          useNativeDriver: true
-        }).start();
+        var animated = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+        var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noop$2;
         setDisplayState({
           hideButton: false,
           hideTitle: false
         });
         animateWidth();
-        reactNative.Animated.spring(animatedValues.opacity, {
-          toValue: 1,
-          useNativeDriver: true
-        }).start();
+        if (animated) {
+          reactNative.Animated.parallel([reactNative.Animated.spring(animatedValues.opacity, {
+            toValue: 1,
+            useNativeDriver: true
+          }), reactNative.Animated.spring(animatedValues.translateY, {
+            toValue: 0,
+            useNativeDriver: true
+          })]).start(callback);
+        } else {
+          animatedValues.opacity.setValue(1);
+          animatedValues.translateY.setValue(0);
+        }
       },
       collapse: function collapse() {
-        reactNative.Animated.parallel([reactNative.Animated.spring(animatedValues.opacity, {
-          toValue: 1,
-          useNativeDriver: true
-        }), reactNative.Animated.spring(animatedValues.translateY, {
-          toValue: 0,
-          useNativeDriver: true
-        })]).start();
-        animateWidth();
+        var animated = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+        var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noop$2;
         setDisplayState({
           hideButton: false,
           hideTitle: true
         });
+        animateWidth();
+        if (animated) {
+          reactNative.Animated.parallel([reactNative.Animated.spring(animatedValues.opacity, {
+            toValue: 1,
+            useNativeDriver: true
+          }), reactNative.Animated.spring(animatedValues.translateY, {
+            toValue: 0,
+            useNativeDriver: true
+          })]).start(callback);
+        } else {
+          animatedValues.opacity.setValue(1);
+          animatedValues.translateY.setValue(0);
+        }
       },
       hide: function hide() {
-        reactNative.Animated.stagger(20, [reactNative.Animated.spring(animatedValues.opacity, {
-          toValue: 0,
-          useNativeDriver: true
-        }), reactNative.Animated.spring(animatedValues.translateY, {
-          toValue: 1,
-          useNativeDriver: true
-        })]).start(function () {
+        var animated = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+        var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noop$2;
+        if (animated) {
+          reactNative.Animated.stagger(20, [reactNative.Animated.spring(animatedValues.opacity, {
+            toValue: 0,
+            useNativeDriver: true
+          }), reactNative.Animated.spring(animatedValues.translateY, {
+            toValue: 1,
+            useNativeDriver: true
+          })]).start(function (arg) {
+            animateWidth();
+            setDisplayState(function (previousState) {
+              return _objectSpread2(_objectSpread2({}, previousState), {}, {
+                hideButton: true
+              });
+            });
+            if (callback) {
+              callback(arg);
+            }
+          });
+        } else {
+          animatedValues.opacity.setValue(0);
+          animatedValues.translateY.setValue(1);
           animateWidth();
           setDisplayState(function (previousState) {
             return _objectSpread2(_objectSpread2({}, previousState), {}, {
               hideButton: true
             });
           });
-        });
+        }
       }
     };
   }, []);
@@ -23902,7 +23931,7 @@ var FAB$1 = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
       })
     }
   }, isIconOnly ? /*#__PURE__*/React__namespace.default.createElement(IconOnlyContent, {
-    animated: animated,
+    animated: iconAnimated,
     active: active,
     icon: active ? 'add' : icon
   }) : /*#__PURE__*/React__namespace.default.createElement(IconWithTextContent, {
@@ -24001,15 +24030,18 @@ var ActionGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   React__namespace.default.useEffect(function () {
     reactNative.Animated.spring(animatedValue.current, {
       toValue: active ? 1 : 0,
-      delay: 100,
       useNativeDriver: reactNative.Platform.OS !== 'web'
     }).start();
     if (active) {
       var _fabRef$current4;
-      (_fabRef$current4 = fabRef.current) === null || _fabRef$current4 === void 0 || _fabRef$current4.collapse();
+      (_fabRef$current4 = fabRef.current) === null || _fabRef$current4 === void 0 || _fabRef$current4.collapse(true, function () {
+        var _fabRef$current5;
+        (_fabRef$current5 = fabRef.current) === null || _fabRef$current5 === void 0 || _fabRef$current5.hide(false);
+      });
     } else {
-      var _fabRef$current5;
-      (_fabRef$current5 = fabRef.current) === null || _fabRef$current5 === void 0 || _fabRef$current5.show();
+      var _fabRef$current6, _fabRef$current7;
+      (_fabRef$current6 = fabRef.current) === null || _fabRef$current6 === void 0 || _fabRef$current6.collapse(false);
+      (_fabRef$current7 = fabRef.current) === null || _fabRef$current7 === void 0 || _fabRef$current7.show();
     }
   }, [active]);
   var actionGroupOpacity = animatedValue.current.interpolate({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.118.0",
+  "version": "8.118.1",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

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

@@ -113,13 +113,15 @@ const ActionGroup = forwardRef<ActionGroupHandles, ActionGroupProps>(
     React.useEffect(() => {
       Animated.spring(animatedValue.current, {
         toValue: active ? 1 : 0,
-        delay: 100,
         useNativeDriver: Platform.OS !== 'web',
       }).start();
 
       if (active) {
-        fabRef.current?.collapse();
+        fabRef.current?.collapse(true, () => {
+          fabRef.current?.hide(false);
+        });
       } else {
+        fabRef.current?.collapse(false);
         fabRef.current?.show();
       }
     }, [active]);

package/src/components/FAB/FAB.tsx

@@ -16,11 +16,12 @@ import {
   StyledFABText,
   StyledIconContainer,
 } from './StyledFAB';
+import { noop } from '../../utils/functions';
 
 export type FABHandles = {
-  show: () => void;
-  collapse: () => void;
-  hide: () => void;
+  show: (animated?: boolean, callback?: Animated.EndCallback) => void;
+  collapse: (animated?: boolean, callback?: Animated.EndCallback) => void;
+  hide: (animated?: boolean, callback?: Animated.EndCallback) => void;
 };
 
 if (Platform.OS === 'android') {
@@ -120,7 +121,10 @@ const animateWidth = () => {
 };
 
 const FAB = forwardRef<FABHandles, FABProps>(
-  ({ onPress, title, icon, animated, testID, active, style }, ref) => {
+  (
+    { onPress, title, icon, animated: iconAnimated, testID, active, style },
+    ref
+  ) => {
     const theme = useTheme();
     const [displayState, setDisplayState] = React.useState({
       hideTitle: false,
@@ -141,12 +145,7 @@ const FAB = forwardRef<FABHandles, FABProps>(
     React.useImperativeHandle(
       ref,
       () => ({
-        show: () => {
-          Animated.spring(animatedValues.translateY, {
-            toValue: 0,
-            useNativeDriver: true,
-          }).start();
-
+        show: (animated = true, callback: Animated.EndCallback = noop) => {
           setDisplayState({
             hideButton: false,
             hideTitle: false,
@@ -154,47 +153,76 @@ const FAB = forwardRef<FABHandles, FABProps>(
 
           animateWidth();
 
-          Animated.spring(animatedValues.opacity, {
-            toValue: 1,
-            useNativeDriver: true,
-          }).start();
+          if (animated) {
+            Animated.parallel([
+              Animated.spring(animatedValues.opacity, {
+                toValue: 1,
+                useNativeDriver: true,
+              }),
+              Animated.spring(animatedValues.translateY, {
+                toValue: 0,
+                useNativeDriver: true,
+              }),
+            ]).start(callback);
+          } else {
+            animatedValues.opacity.setValue(1);
+            animatedValues.translateY.setValue(0);
+          }
         },
-        collapse: () => {
-          Animated.parallel([
-            Animated.spring(animatedValues.opacity, {
-              toValue: 1,
-              useNativeDriver: true,
-            }),
-            Animated.spring(animatedValues.translateY, {
-              toValue: 0,
-              useNativeDriver: true,
-            }),
-          ]).start();
-
-          animateWidth();
-
+        collapse: (animated = true, callback: Animated.EndCallback = noop) => {
           setDisplayState({
             hideButton: false,
             hideTitle: true,
           });
+
+          animateWidth();
+
+          if (animated) {
+            Animated.parallel([
+              Animated.spring(animatedValues.opacity, {
+                toValue: 1,
+                useNativeDriver: true,
+              }),
+              Animated.spring(animatedValues.translateY, {
+                toValue: 0,
+                useNativeDriver: true,
+              }),
+            ]).start(callback);
+          } else {
+            animatedValues.opacity.setValue(1);
+            animatedValues.translateY.setValue(0);
+          }
         },
-        hide: () => {
-          Animated.stagger(20, [
-            Animated.spring(animatedValues.opacity, {
-              toValue: 0,
-              useNativeDriver: true,
-            }),
-            Animated.spring(animatedValues.translateY, {
-              toValue: 1,
-              useNativeDriver: true,
-            }),
-          ]).start(() => {
+        hide: (animated = true, callback: Animated.EndCallback = noop) => {
+          if (animated) {
+            Animated.stagger(20, [
+              Animated.spring(animatedValues.opacity, {
+                toValue: 0,
+                useNativeDriver: true,
+              }),
+              Animated.spring(animatedValues.translateY, {
+                toValue: 1,
+                useNativeDriver: true,
+              }),
+            ]).start((arg) => {
+              animateWidth();
+              setDisplayState((previousState) => ({
+                ...previousState,
+                hideButton: true,
+              }));
+              if (callback) {
+                callback(arg);
+              }
+            });
+          } else {
+            animatedValues.opacity.setValue(0);
+            animatedValues.translateY.setValue(1);
             animateWidth();
             setDisplayState((previousState) => ({
               ...previousState,
               hideButton: true,
             }));
-          });
+          }
         },
       }),
       []
@@ -243,7 +271,7 @@ const FAB = forwardRef<FABHandles, FABProps>(
         >
           {isIconOnly ? (
             <IconOnlyContent
-              animated={animated}
+              animated={iconAnimated}
               active={active}
               icon={active ? 'add' : icon}
             />

package/testUtils/setup.tsx

@@ -9,10 +9,11 @@ jest.mock('react-native-vector-icons', () => ({
 
 jest.mock('react-native', () => {
   const RN = jest.requireActual('react-native');
-
   const mockedAnimatedFunctions = {
     setImmediate: () => jest.fn(),
-    start: () => jest.fn(),
+    start: jest.fn((callback?: (result: { finished: boolean }) => void) => {
+      callback?.({ finished: true });
+    }),
     stop: () => jest.fn(),
     _isUsingNativeDriver: () => jest.fn(),
     _startNativeLoop: () => jest.fn(),

package/types/components/FAB/FAB.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
+import { Animated } from 'react-native';
 import type { IconName } from '../Icon';
 export type FABHandles = {
-    show: () => void;
-    collapse: () => void;
-    hide: () => void;
+    show: (animated?: boolean, callback?: Animated.EndCallback) => void;
+    collapse: (animated?: boolean, callback?: Animated.EndCallback) => void;
+    hide: (animated?: boolean, callback?: Animated.EndCallback) => void;
 };
 export interface FABProps {
     /**