@hero-design/rn 8.59.0 → 8.60.0

package/.turbo/turbo-build.log

@@ -2,4 +2,4 @@
 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 '/home/runner/work/hero-design/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 57.2s
+created lib/index.js, es/index.js in 57.4s

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hero-design/rn
 
+## 8.60.0
+
+### Minor Changes
+
+- [#2747](https://github.com/Thinkei/hero-design/pull/2747) [`28106e711`](https://github.com/Thinkei/hero-design/commit/28106e711ef6a127e4bfa0890535489649ff516c) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [FAB][fab.actiongroup][Scrollables with FAB] Update animations using Animated
+
 ## 8.59.0
 
 ### Minor Changes

package/es/index.js

@@ -14386,7 +14386,8 @@ var Error$1 = function Error(_ref2) {
   }, nativeProps));
 };
 
-var StyledFAB$1 = index$9(TouchableHighlight)(function (_ref) {
+var AnimatedTouchableHighlight = Animated.createAnimatedComponent(TouchableHighlight);
+var StyledFAB$1 = index$9(AnimatedTouchableHighlight)(function (_ref) {
   var theme = _ref.theme,
     themeActive = _ref.themeActive;
   return {
@@ -14401,7 +14402,8 @@ var StyledFAB$1 = index$9(TouchableHighlight)(function (_ref) {
     shadowColor: theme.__hd__.fab.shadows.color,
     shadowOffset: theme.__hd__.fab.shadows.offset,
     shadowRadius: theme.__hd__.fab.shadows.radius,
-    shadowOpacity: theme.__hd__.fab.shadows.opacity
+    shadowOpacity: theme.__hd__.fab.shadows.opacity,
+    height: theme.__hd__.fab.sizes.height
   };
 });
 var StyledFABIcon = index$9(Icon)(function (_ref2) {
@@ -14493,16 +14495,14 @@ var IconWithTextContent = function IconWithTextContent(_ref2) {
     testID: "styled-fab-icon"
   })), /*#__PURE__*/React.createElement(StyledFABText, null, title));
 };
-var defaultAnimation = {
-  create: {
-    type: 'easeInEaseOut',
-    property: 'opacity'
-  },
-  update: {
-    type: 'spring',
-    springDamping: Platform.OS === 'ios' ? 0.7 : 1.2
-  },
-  duration: Platform.OS === 'ios' ? 300 : 400
+var animateWidth = function animateWidth() {
+  LayoutAnimation.configureNext({
+    duration: Platform.OS === 'ios' ? 200 : 400,
+    update: {
+      type: 'spring',
+      springDamping: Platform.OS === 'ios' ? 1 : 1.5
+    }
+  });
 };
 var FAB$1 = /*#__PURE__*/forwardRef(function (_ref3, ref) {
   var _StyleSheet$flatten, _StyleSheet$flatten2;
@@ -14514,61 +14514,99 @@ var FAB$1 = /*#__PURE__*/forwardRef(function (_ref3, ref) {
     active = _ref3.active,
     style = _ref3.style;
   var theme = useTheme();
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    canAnimate = _React$useState2[0],
-    setCanAnimate = _React$useState2[1];
-  var _React$useState3 = React.useState({
+  var _React$useState = React.useState({
       hideTitle: false,
       hideButton: false
     }),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    displayState = _React$useState4[0],
-    setDisplayState = _React$useState4[1];
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    displayState = _React$useState2[0],
+    setDisplayState = _React$useState2[1];
   var isIconOnly = displayState.hideTitle || active || !title;
+  var animatedValues = {
+    opacity: React.useRef(new Animated.Value(1)).current,
+    width: React.useRef(new Animated.Value(1)).current,
+    translateY: React.useRef(new Animated.Value(0)).current
+  };
+  var marginBottom = Number((_StyleSheet$flatten = StyleSheet$1.flatten(style)) === null || _StyleSheet$flatten === void 0 ? void 0 : _StyleSheet$flatten.marginBottom) || 0;
+  var _React$useState3 = React.useState(0),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    buttonWidth = _React$useState4[0],
+    setButtonWidth = _React$useState4[1];
+  var hasSetButtonWidth = buttonWidth > 0;
   React.useImperativeHandle(ref, function () {
     return {
       show: function show() {
+        Animated.spring(animatedValues.translateY, {
+          toValue: 0,
+          useNativeDriver: true
+        }).start();
         setDisplayState({
           hideButton: false,
           hideTitle: false
         });
+        animateWidth();
+        Animated.spring(animatedValues.opacity, {
+          toValue: 1,
+          useNativeDriver: true
+        }).start();
       },
       collapse: function collapse() {
+        Animated.parallel([Animated.spring(animatedValues.opacity, {
+          toValue: 1,
+          useNativeDriver: true
+        }), Animated.spring(animatedValues.translateY, {
+          toValue: 0,
+          useNativeDriver: true
+        })]).start();
+        animateWidth();
         setDisplayState({
           hideButton: false,
           hideTitle: true
         });
       },
       hide: function hide() {
-        setDisplayState(function (previousState) {
-          return _objectSpread2(_objectSpread2({}, previousState), {}, {
-            hideButton: true
+        Animated.stagger(20, [Animated.spring(animatedValues.opacity, {
+          toValue: 0,
+          useNativeDriver: true
+        }), Animated.spring(animatedValues.translateY, {
+          toValue: 1,
+          useNativeDriver: true
+        })]).start(function () {
+          animateWidth();
+          setDisplayState(function (previousState) {
+            return _objectSpread2(_objectSpread2({}, previousState), {}, {
+              hideButton: true
+            });
           });
         });
       }
     };
   }, []);
-  React.useEffect(function () {
-    if (canAnimate) {
-      LayoutAnimation.configureNext(defaultAnimation);
-    }
-  }, [isIconOnly, displayState.hideButton, canAnimate]);
-  var marginBottom = Number((_StyleSheet$flatten = StyleSheet$1.flatten(style)) === null || _StyleSheet$flatten === void 0 ? void 0 : _StyleSheet$flatten.marginBottom) || 0;
-  return /*#__PURE__*/React.createElement(StyledFAB$1
-  /** Add a small timeout before executing animation to prevent flakiness */, {
-    onLayout: function onLayout() {
-      return setTimeout(function () {
-        return setCanAnimate(true);
-      }, 500);
+  return /*#__PURE__*/React.createElement(StyledFAB$1, {
+    onLayout: function onLayout(event) {
+      return !hasSetButtonWidth && !active && setButtonWidth(event.nativeEvent.layout.width);
     },
     underlayColor: theme.__hd__.fab.colors.buttonPressedBackground,
     onPress: onPress,
     style: [style, {
-      bottom: displayState.hideButton ? -(marginBottom + theme.__hd__.fab.sizes.height * 2) : (_StyleSheet$flatten2 = StyleSheet$1.flatten(style)) === null || _StyleSheet$flatten2 === void 0 ? void 0 : _StyleSheet$flatten2.bottom
+      bottom: displayState.hideButton ? -(marginBottom + theme.__hd__.fab.sizes.height * 2) : (_StyleSheet$flatten2 = StyleSheet$1.flatten(style)) === null || _StyleSheet$flatten2 === void 0 ? void 0 : _StyleSheet$flatten2.bottom,
+      transform: [{
+        translateY: animatedValues.translateY.interpolate({
+          inputRange: [0, 1],
+          outputRange: [0, marginBottom + theme.__hd__.fab.sizes.height * 2]
+        })
+      }]
     }],
     testID: testID,
     themeActive: active
+  }, /*#__PURE__*/React.createElement(Animated.View, {
+    style: {
+      flexDirection: 'row',
+      opacity: animatedValues.opacity.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, 1]
+      })
+    }
   }, isIconOnly ? /*#__PURE__*/React.createElement(IconOnlyContent, {
     animated: animated,
     active: active,
@@ -14576,7 +14614,7 @@ var FAB$1 = /*#__PURE__*/forwardRef(function (_ref3, ref) {
   }) : /*#__PURE__*/React.createElement(IconWithTextContent, {
     icon: icon,
     title: title
-  }));
+  })));
 });
 FAB$1.displayName = 'FAB';
 
@@ -14626,7 +14664,9 @@ var ActionItem = function ActionItem(_ref) {
     Animated.spring(animatedValue.current, {
       toValue: active ? 1 : 0,
       useNativeDriver: Platform.OS !== 'web',
-      delay: index * 20
+      delay: index * 30,
+      speed: 10,
+      bounciness: 10
     }).start();
   }, [active, index]);
   return /*#__PURE__*/React.createElement(Animated.View, {
@@ -14703,8 +14743,9 @@ var ActionGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _ref$fabIcon = _ref.fabIcon,
     fabIcon = _ref$fabIcon === void 0 ? 'add' : _ref$fabIcon;
   useDeprecation("FAB.ActionGroup's headerTitle prop will be removed in the next major release. Please remove it.", headerTitle !== undefined);
+  var theme = useTheme();
   var fabRef = useRef(null);
-  var tranlateXAnimation = useRef(new Animated.Value(active ? 1 : 0));
+  var animatedValue = useRef(new Animated.Value(active ? 1 : 0));
   React.useImperativeHandle(ref, function () {
     return {
       showFAB: function showFAB() {
@@ -14722,28 +14763,28 @@ var ActionGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
     };
   }, [fabRef]);
   React.useEffect(function () {
-    Animated.spring(tranlateXAnimation.current, {
+    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();
+    } else {
+      var _fabRef$current5;
+      (_fabRef$current5 = fabRef.current) === null || _fabRef$current5 === void 0 || _fabRef$current5.show();
+    }
   }, [active]);
-  var interpolatedActionGroupOpacityAnimation = tranlateXAnimation.current.interpolate({
+  var actionGroupOpacity = animatedValue.current.interpolate({
     inputRange: [0, 1],
     outputRange: [0, 1]
   });
-  var interpolatedFABOpacityAnimation = tranlateXAnimation.current.interpolate({
-    inputRange: [0, 1],
-    outputRange: [1, 0]
-  });
   return /*#__PURE__*/React.createElement(StyledContainer$2, {
     testID: testID,
     pointerEvents: "box-none",
     style: style
-  }, /*#__PURE__*/React.createElement(Animated.View, {
-    style: {
-      opacity: interpolatedFABOpacityAnimation
-    }
-  }, /*#__PURE__*/React.createElement(StyledFAB, {
+  }, /*#__PURE__*/React.createElement(Animated.View, null, /*#__PURE__*/React.createElement(StyledFAB, {
     key: "fab",
     testID: "fab",
     icon: fabIcon,
@@ -14767,7 +14808,7 @@ var ActionGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
     testID: "action-group",
     pointerEvents: "box-none",
     style: {
-      opacity: interpolatedActionGroupOpacityAnimation
+      opacity: actionGroupOpacity
     }
   }, /*#__PURE__*/React.createElement(Box, {
     style: [style, {
@@ -14780,7 +14821,13 @@ var ActionGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
       index: active ? index : items.length - index,
       active: active
     }));
-  }))), /*#__PURE__*/React.createElement(StyledFAB, {
+  }))), active && /*#__PURE__*/React.createElement(StyledFAB
+  // This FAB is moved up a bit compared to the original FAB,
+  // set marginBottom to negative value to compensate for it
+  , {
+    style: {
+      marginBottom: -theme.space.xxsmall
+    },
     key: "fab-in-portal",
     testID: "fab-in-portal",
     icon: fabIcon,
@@ -35554,8 +35601,9 @@ var index = Object.assign(RichTextEditorWithRef, {
   Toolbar: EditorToolbar
 });
 
-var COLLAPSE_BREAKPOINT = 10;
-var SHOW_AND_HIDE_BREAKPOINT = 200;
+var LAST_BREAKPOINT = 100;
+var MIDDLE_BREAKPOINT = 250;
+var MAX_ANIMATABLE_SCROLL_DISTANCE = 400;
 var REF_ACTIONS_BY_COMPONENT = {
   FAB: {
     show: 'show',
@@ -35570,27 +35618,23 @@ var REF_ACTIONS_BY_COMPONENT = {
 };
 var AnimatedFAB = function AnimatedFAB(_ref) {
   var fabProps = _ref.fabProps,
-    contentOffsetY = _ref.contentOffsetY;
+    contentOffsetY = _ref.contentOffsetY,
+    contentHeight = _ref.contentHeight,
+    layoutHeight = _ref.layoutHeight;
   var component = 'items' in fabProps ? 'ActionGroup' : 'FAB';
-  var _React$useState = React.useState('down'),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    currentScrollDirection = _React$useState2[0],
-    setCurrentScrollDirection = _React$useState2[1];
-  var _React$useState3 = React.useState(0),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    lastScrollY = _React$useState4[0],
-    setLastScrollY = _React$useState4[1];
-  var _React$useState5 = React.useState('show'),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    fabState = _React$useState6[0],
-    setFabState = _React$useState6[1];
-  var _React$useState7 = React.useState(SHOW_AND_HIDE_BREAKPOINT),
-    _React$useState8 = _slicedToArray(_React$useState7, 2),
-    remainingScrollOffset = _React$useState8[0],
-    setRemainingScrollOffset = _React$useState8[1];
   var ref = React.useRef(null);
+  var currentContentHeight = React.useRef(0);
+  var currentLayoutHeight = React.useRef(0);
+  /** fabState is used to avoid calling duplicated animations. */
+  var fabState = React.useRef('show');
+  /** remainingScrollOffset determines whether to animate the FAB. */
+  var remainingScrollOffset = React.useRef(MAX_ANIMATABLE_SCROLL_DISTANCE);
+  /** currentScrollDirection is used to determine the scroll direction. */
+  var currentScrollDirection = React.useRef('down');
+  /** lastScrollY is the scrollY from the preview scroll event. */
+  var lastScrollY = React.useRef(0);
   var animateFab = React.useCallback(function (newState) {
-    if (fabState !== newState) {
+    if (fabState.current !== newState) {
       if (newState === 'show') {
         var _ref$current;
         (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current[REF_ACTIONS_BY_COMPONENT[component].show]();
@@ -35601,37 +35645,64 @@ var AnimatedFAB = function AnimatedFAB(_ref) {
         var _ref$current3;
         (_ref$current3 = ref.current) === null || _ref$current3 === void 0 || _ref$current3[REF_ACTIONS_BY_COMPONENT[component].collapse]();
       }
-      setFabState(newState);
-    }
-  }, [fabState, component]);
-  // Listen to ScrollView's contentOffsetY value
-  contentOffsetY.addListener(function (_ref2) {
-    var value = _ref2.value;
-    if (value < 0) {
-      return;
-    }
-    var newScrollDirection = value > lastScrollY ? 'down' : 'up';
-    var isScrollingDown = newScrollDirection === 'down';
-    if (newScrollDirection !== currentScrollDirection || lastScrollY === 0) {
-      setLastScrollY(value);
-      setCurrentScrollDirection(newScrollDirection);
-    }
-    var offsetFromLastDirection = Math.abs(value - lastScrollY);
-    var offsetDiff = Math.round(Math.max(remainingScrollOffset - offsetFromLastDirection, 0));
-    if (remainingScrollOffset > 0) {
-      if (offsetDiff === SHOW_AND_HIDE_BREAKPOINT) {
-        animateFab(isScrollingDown ? 'show' : 'hide');
-      } else if (offsetDiff <= SHOW_AND_HIDE_BREAKPOINT && offsetDiff > COLLAPSE_BREAKPOINT) {
-        animateFab('collapse');
-      } else if (offsetDiff <= COLLAPSE_BREAKPOINT) {
-        animateFab(isScrollingDown ? 'hide' : 'show');
-      }
-      setRemainingScrollOffset(offsetDiff);
+      fabState.current = newState;
     }
-  });
+  }, [component]);
   React.useEffect(function () {
-    setRemainingScrollOffset(SHOW_AND_HIDE_BREAKPOINT);
-  }, [currentScrollDirection]);
+    contentHeight.addListener(function (_ref2) {
+      var value = _ref2.value;
+      if (value > 0 && value !== currentContentHeight.current) {
+        currentContentHeight.current = value;
+      }
+    });
+    layoutHeight.addListener(function (_ref3) {
+      var value = _ref3.value;
+      if (value > 0 && value !== currentLayoutHeight.current) {
+        currentLayoutHeight.current = value;
+      }
+    });
+    // Listen to ScrollView's contentOffsetY value
+    contentOffsetY.addListener(function (_ref4) {
+      var value = _ref4.value;
+      if (value < 0 ||
+      // Prevent calling the function if the scroll is not significant
+      value > 0 && Math.abs(value - lastScrollY.current) < 5) {
+        return;
+      }
+      // Scroll up to top, bouncing included.
+      if (value === 0 && lastScrollY.current !== 0) {
+        animateFab('show');
+      }
+      var newScrollDirection = value >= lastScrollY.current ? 'down' : 'up';
+      if (newScrollDirection !== currentScrollDirection.current) {
+        // If scroll direction changes, reset all values
+        currentScrollDirection.current = newScrollDirection;
+        remainingScrollOffset.current = MAX_ANIMATABLE_SCROLL_DISTANCE;
+      }
+      var hasReachedBottom = value + currentLayoutHeight.current >= currentContentHeight.current;
+      // Scroll down to bottom, bouncing included.
+      if (hasReachedBottom) {
+        animateFab('hide');
+        return;
+      }
+      if (remainingScrollOffset.current) {
+        var offsetDiff = Math.round(Math.max(Math.abs(value - lastScrollY.current), 0));
+        var newRemainingScrollOffset = Math.max(remainingScrollOffset.current - offsetDiff, 0);
+        if (newRemainingScrollOffset <= LAST_BREAKPOINT) {
+          animateFab(currentScrollDirection.current === 'down' ? 'hide' : 'show');
+        } else if (newRemainingScrollOffset <= MIDDLE_BREAKPOINT) {
+          animateFab('collapse');
+        }
+        remainingScrollOffset.current = newRemainingScrollOffset;
+      }
+      lastScrollY.current = value;
+    });
+    return function () {
+      contentOffsetY.removeAllListeners();
+      contentHeight.removeAllListeners();
+      layoutHeight.removeAllListeners();
+    };
+  }, [contentHeight, contentOffsetY, layoutHeight]);
   return component === 'FAB' ? /*#__PURE__*/React.createElement(FAB, _extends$1({
     ref: ref
   }, fabProps)) : /*#__PURE__*/React.createElement(ActionGroup, _extends$1({
@@ -35643,6 +35714,8 @@ function AnimatedScroller(_ref) {
   var ScrollComponent = _ref.ScrollComponent,
     fabProps = _ref.fabProps;
   var contentOffsetY = React.useRef(new Animated.Value(0)).current;
+  var contentHeight = React.useRef(new Animated.Value(0)).current;
+  var layoutHeight = React.useRef(new Animated.Value(0)).current;
   // Common props for all ScrollView, FlatList and SectionList.
   var _ScrollComponent$prop = ScrollComponent.props,
     onScroll = _ScrollComponent$prop.onScroll,
@@ -35653,6 +35726,12 @@ function AnimatedScroller(_ref) {
       nativeEvent: {
         contentOffset: {
           y: contentOffsetY
+        },
+        contentSize: {
+          height: contentHeight
+        },
+        layoutMeasurement: {
+          height: layoutHeight
         }
       }
     }], {
@@ -35661,7 +35740,9 @@ function AnimatedScroller(_ref) {
     })
   })), !!fabProps && /*#__PURE__*/React.createElement(AnimatedFAB, {
     fabProps: fabProps,
-    contentOffsetY: contentOffsetY
+    contentOffsetY: contentOffsetY,
+    contentHeight: contentHeight,
+    layoutHeight: layoutHeight
   }));
 }