@hero-design/rn 8.30.3 → 8.30.4

package/lib/index.js

@@ -11588,12 +11588,18 @@ var Carousel = function Carousel(_ref) {
       clearTimeout(handle);
     };
   }, [currentSlideIndex, carouselRef]);
-  var visibleSlideChanged = React.useCallback(function (_ref2) {
-    var viewableItems = _ref2.viewableItems;
-    if (!viewableItems || viewableItems && !viewableItems.length) return;
-    var index = viewableItems[0].index;
+  var handleMomentumScrollEnd = function handleMomentumScrollEnd(event) {
+    // Calculate the current index based on the scroll position and container width
+    var containerWidth = event.nativeEvent.layoutMeasurement.width;
+    var scrollPosition = event.nativeEvent.contentOffset.x;
+    /**
+     * By rounding down, we ensure that any partial visibility of the next item does not affect the index value
+     * This helps maintain consistent behavior and aligns with the desired functionality of considering the left-most visible item as the current item.
+     */
+    var index = Math.floor(scrollPosition / containerWidth);
+    // Call the callback function with the current index
     internalOnItemIndexChange(index);
-  }, []);
+  };
   var viewConfig = React.useRef({
     viewAreaCoveragePercentThreshold: 50
   }).current;
@@ -11610,7 +11616,7 @@ var Carousel = function Carousel(_ref) {
     pagingEnabled: true,
     bounces: false,
     data: items,
-    onViewableItemsChanged: visibleSlideChanged,
+    onMomentumScrollEnd: handleMomentumScrollEnd,
     viewabilityConfig: viewConfig,
     scrollEventThrottle: 32,
     ref: carouselRef,
@@ -11623,8 +11629,8 @@ var Carousel = function Carousel(_ref) {
     }], {
       useNativeDriver: false
     }),
-    renderItem: function renderItem(_ref3) {
-      var item = _ref3.item;
+    renderItem: function renderItem(_ref2) {
+      var item = _ref2.item;
       if (!item) return null;
       var image = item.image,
         heading = item.heading,
@@ -13004,9 +13010,11 @@ var AnimatedFABIcon = function AnimatedFABIcon(_ref) {
     iconProps = _objectWithoutProperties(_ref, _excluded$c);
   var rotateAnimation = React.useRef(new reactNative.Animated.Value(active ? 1 : 0));
   React.useEffect(function () {
-    var animation = reactNative.Animated.spring(rotateAnimation.current, {
+    var animation = reactNative.Animated.timing(rotateAnimation.current, {
       toValue: active ? 1 : 0,
-      useNativeDriver: reactNative.Platform.OS === 'ios' || reactNative.Platform.OS === 'android'
+      useNativeDriver: reactNative.Platform.OS === 'ios' || reactNative.Platform.OS === 'android',
+      easing: reactNative.Easing.inOut(reactNative.Easing.ease),
+      duration: 300
     });
     animation.start();
     return function () {
@@ -13028,11 +13036,6 @@ var AnimatedFABIcon = function AnimatedFABIcon(_ref) {
   }, iconProps)));
 };
 
-if (reactNative.Platform.OS === 'android') {
-  if (reactNative.UIManager.setLayoutAnimationEnabledExperimental) {
-    reactNative.UIManager.setLayoutAnimationEnabledExperimental(true);
-  }
-}
 var IconOnlyContent = function IconOnlyContent(_ref) {
   var icon = _ref.icon,
     animated = _ref.animated,
@@ -13058,19 +13061,7 @@ var IconWithTextContent = function IconWithTextContent(_ref2) {
     testID: "styled-fab-icon"
   })), /*#__PURE__*/React__default["default"].createElement(StyledFABText, null, title));
 };
-var defaultAnimation = {
-  create: {
-    type: 'easeInEaseOut',
-    property: 'opacity'
-  },
-  update: {
-    type: 'spring',
-    springDamping: 1
-  },
-  duration: 400
-};
-var FAB = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
-  var _StyleSheet$flatten, _StyleSheet$flatten2;
+var FAB = function FAB(_ref3) {
   var onPress = _ref3.onPress,
     title = _ref3.title,
     icon = _ref3.icon,
@@ -13078,75 +13069,22 @@ var FAB = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
     testID = _ref3.testID,
     active = _ref3.active,
     style = _ref3.style;
+  var isIconOnly = !title;
   var theme = useTheme();
-  var _React$useState = React__default["default"].useState({
-      hideTitle: false,
-      hideButton: false
-    }),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    displayState = _React$useState2[0],
-    setDisplayState = _React$useState2[1];
-  var _React$useState3 = React__default["default"].useState(false),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    canAnimate = _React$useState4[0],
-    setCanAnimate = _React$useState4[1];
-  var isIconOnly = displayState.hideTitle || active || !title;
-  React.useImperativeHandle(ref, function () {
-    return {
-      show: function show() {
-        setDisplayState({
-          hideButton: false,
-          hideTitle: false
-        });
-      },
-      collapse: function collapse() {
-        setDisplayState({
-          hideButton: false,
-          hideTitle: true
-        });
-      },
-      hide: function hide() {
-        setDisplayState(function (previousState) {
-          return _objectSpread2(_objectSpread2({}, previousState), {}, {
-            hideButton: true
-          });
-        });
-      }
-    };
-  }, [displayState]);
-  React.useEffect(function () {
-    if (canAnimate) {
-      reactNative.LayoutAnimation.configureNext(defaultAnimation);
-    }
-  }, [isIconOnly]);
-  React.useEffect(function () {
-    if (canAnimate) {
-      reactNative.LayoutAnimation.configureNext(defaultAnimation);
-    }
-  }, [displayState.hideButton]);
-  var marginBottom = Number((_StyleSheet$flatten = reactNative.StyleSheet.flatten(style)) === null || _StyleSheet$flatten === void 0 ? void 0 : _StyleSheet$flatten.marginBottom) || 0;
-  return /*#__PURE__*/React__default["default"].createElement(StyledFAB$1
-  /** Add a small timeout before executing animation to prevent flakiness on android */, {
-    onLayout: function onLayout() {
-      return setTimeout(function () {
-        return setCanAnimate(true);
-      }, 200);
-    },
+  return /*#__PURE__*/React__default["default"].createElement(StyledFAB$1, {
     underlayColor: theme.__hd__.fab.colors.buttonPressedBackground,
     onPress: onPress,
-    style: [style, {
-      bottom: displayState.hideButton ? -(marginBottom + theme.__hd__.fab.sizes.height * 2) : (_StyleSheet$flatten2 = reactNative.StyleSheet.flatten(style)) === null || _StyleSheet$flatten2 === void 0 ? void 0 : _StyleSheet$flatten2.bottom
-    }],
+    style: style,
     testID: testID
   }, isIconOnly ? /*#__PURE__*/React__default["default"].createElement(IconOnlyContent, {
     animated: animated,
     active: active,
-    icon: active ? 'add' : icon
+    icon: icon
   }) : /*#__PURE__*/React__default["default"].createElement(IconWithTextContent, {
     icon: icon,
     title: title
   }));
-});
+};
 
 var StyledActionItem = index$a(reactNative.TouchableHighlight)(function (_ref) {
   var theme = _ref.theme;
@@ -13243,55 +13181,40 @@ var StyledHeaderText = index$a(Typography.Text)(function (_ref3) {
   };
 });
 
-var ActionGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var headerTitle = _ref.headerTitle,
-    onPress = _ref.onPress,
-    active = _ref.active,
-    style = _ref.style,
-    items = _ref.items,
-    testID = _ref.testID,
-    fabTitle = _ref.fabTitle,
-    _ref$fabIcon = _ref.fabIcon,
-    fabIcon = _ref$fabIcon === void 0 ? 'add' : _ref$fabIcon;
-  var fabRef = React.useRef(null);
+var ActionItemsListComponent = function ActionItemsListComponent(_ref) {
+  var style = _ref.style,
+    items = _ref.items;
+  return /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
+    style: style
+  }, items === null || items === void 0 ? void 0 : items.map(function (itemProp) {
+    return /*#__PURE__*/React__default["default"].createElement(ActionItem, _extends$1({
+      key: itemProp.key || "".concat(itemProp.icon, "_").concat(itemProp.title)
+    }, itemProp));
+  }));
+};
+var ActionGroup = function ActionGroup(_ref2) {
+  var headerTitle = _ref2.headerTitle,
+    onPress = _ref2.onPress,
+    active = _ref2.active,
+    style = _ref2.style,
+    items = _ref2.items,
+    testID = _ref2.testID,
+    fabTitle = _ref2.fabTitle,
+    _ref2$fabIcon = _ref2.fabIcon,
+    fabIcon = _ref2$fabIcon === void 0 ? 'add' : _ref2$fabIcon;
   var tranlateXAnimation = React.useRef(new reactNative.Animated.Value(active ? 1 : 0));
-  var animatedValues = React.useRef((items === null || items === void 0 ? void 0 : items.map(function () {
-    return new reactNative.Animated.Value(0);
-  })) || []).current;
-  var translateYAnimations = animatedValues === null || animatedValues === void 0 ? void 0 : animatedValues.map(function (value) {
-    return value.interpolate({
-      inputRange: [0, 1],
-      outputRange: active ? [100, 0] : [40, 0]
-    });
-  });
-  React.useImperativeHandle(ref, function () {
-    return {
-      showFAB: function showFAB() {
-        var _fabRef$current;
-        return (_fabRef$current = fabRef.current) === null || _fabRef$current === void 0 ? void 0 : _fabRef$current.show();
-      },
-      collapseFAB: function collapseFAB() {
-        var _fabRef$current2;
-        return (_fabRef$current2 = fabRef.current) === null || _fabRef$current2 === void 0 ? void 0 : _fabRef$current2.collapse();
-      },
-      hideFAB: function hideFAB() {
-        var _fabRef$current3;
-        return (_fabRef$current3 = fabRef.current) === null || _fabRef$current3 === void 0 ? void 0 : _fabRef$current3.hide();
-      }
-    };
-  }, [fabRef]);
   React.useEffect(function () {
-    reactNative.Animated.spring(tranlateXAnimation.current, {
+    var animation = reactNative.Animated.timing(tranlateXAnimation.current, {
       toValue: active ? 1 : 0,
-      useNativeDriver: reactNative.Platform.OS !== 'web'
-    }).start();
-    reactNative.Animated.stagger(20, animatedValues.map(function (value) {
-      return reactNative.Animated.spring(value, {
-        toValue: active ? 1 : 0,
-        useNativeDriver: reactNative.Platform.OS !== 'web'
-      });
-    }).reverse()).start();
-  }, [active, animatedValues]);
+      useNativeDriver: reactNative.Platform.OS === 'ios' || reactNative.Platform.OS === 'android',
+      easing: reactNative.Easing.inOut(reactNative.Easing.cubic)
+    });
+    animation.start();
+  }, [active]);
+  var interpolatedTranlateXAnimation = tranlateXAnimation.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: [400, 0]
+  });
   var interpolatedBackdropOpacityAnimation = tranlateXAnimation.current.interpolate({
     inputRange: [0, 1],
     outputRange: [0, 0.4]
@@ -13314,39 +13237,24 @@ var ActionGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     pointerEvents: active ? 'auto' : 'none',
     testID: "action-group",
     style: {
-      opacity: interpolatedActionGroupOpacityAnimation
-    }
-  }, !!headerTitle && /*#__PURE__*/React__default["default"].createElement(reactNative.Animated.View, {
-    style: {
+      opacity: interpolatedActionGroupOpacityAnimation,
       transform: [{
-        translateY: translateYAnimations[0]
+        translateX: interpolatedTranlateXAnimation
       }]
     }
-  }, /*#__PURE__*/React__default["default"].createElement(StyledHeaderText, {
+  }, !!headerTitle && /*#__PURE__*/React__default["default"].createElement(StyledHeaderText, {
     testID: "header-text"
-  }, headerTitle)), /*#__PURE__*/React__default["default"].createElement(Box, {
-    style: [style, {
-      paddingBottom: 0
-    }]
-  }, items === null || items === void 0 ? void 0 : items.map(function (itemProp, index) {
-    return /*#__PURE__*/React__default["default"].createElement(reactNative.Animated.View, {
-      key: itemProp.key || "".concat(itemProp.icon, "_").concat(itemProp.title),
-      style: {
-        transform: [{
-          translateY: translateYAnimations[index]
-        }]
-      }
-    }, /*#__PURE__*/React__default["default"].createElement(ActionItem, itemProp));
-  }))), /*#__PURE__*/React__default["default"].createElement(StyledFAB, {
+  }, headerTitle), /*#__PURE__*/React__default["default"].createElement(ActionItemsListComponent, {
+    items: items
+  })), /*#__PURE__*/React__default["default"].createElement(StyledFAB, {
     testID: "fab",
     icon: fabIcon,
     onPress: onPress,
     animated: true,
     active: active,
-    title: fabTitle,
-    ref: fabRef
+    title: fabTitle
   }));
-});
+};
 
 var index$6 = Object.assign(FAB, {
   ActionGroup: ActionGroup
@@ -15029,7 +14937,7 @@ var getGradientColors = function getGradientColors(theme, intent) {
   }
 };
 var Skeleton = function Skeleton(_ref) {
-  var _StyleSheet$flatten, _StyleSheet$flatten2;
+  var _StyleSheet$flatten;
   var _ref$intent = _ref.intent,
     intent = _ref$intent === void 0 ? 'light' : _ref$intent,
     _ref$variant = _ref.variant,
@@ -15045,14 +14953,10 @@ var Skeleton = function Skeleton(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     containerWidth = _useState2[0],
     setContainerWidth = _useState2[1];
-  var _useState3 = React.useState(Number((_StyleSheet$flatten2 = reactNative.StyleSheet.flatten(style)) === null || _StyleSheet$flatten2 === void 0 ? void 0 : _StyleSheet$flatten2.height) || 0),
+  var _useState3 = React.useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    containerHeight = _useState4[0],
-    setContainerHeight = _useState4[1];
-  var _useState5 = React.useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    shouldStartAnimation = _useState6[0],
-    setShouldStartAnimation = _useState6[1];
+    shouldStartAnimation = _useState4[0],
+    setShouldStartAnimation = _useState4[1];
   var animatedValue = React.useRef(new reactNative.Animated.Value(0)).current;
   React.useEffect(function () {
     if (shouldStartAnimation) {
@@ -15069,10 +14973,7 @@ var Skeleton = function Skeleton(_ref) {
     outputRange: [-containerWidth, containerWidth]
   });
   var onContainerLayout = React.useCallback(function (e) {
-    var _e$nativeEvent$layout = e.nativeEvent.layout,
-      width = _e$nativeEvent$layout.width,
-      height = _e$nativeEvent$layout.height;
-    setContainerHeight(height);
+    var width = e.nativeEvent.layout.width;
     setContainerWidth(width);
     if (!shouldStartAnimation) {
       setShouldStartAnimation(true);
@@ -15090,8 +14991,8 @@ var Skeleton = function Skeleton(_ref) {
     start: gradientPositions.start,
     end: gradientPositions.end,
     style: {
-      width: containerWidth,
-      height: containerHeight,
+      width: '100%',
+      height: '100%',
       transform: [{
         translateX: translateX
       }]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.30.3",
+  "version": "8.30.4",
   "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.30.3",
+    "@hero-design/colors": "8.30.4",
     "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.30.3",
+    "@hero-design/eslint-plugin": "8.30.4",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -61,10 +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.30.3",
+    "eslint-config-hd": "8.30.4",
     "eslint-plugin-import": "^2.27.5",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.30.3",
+    "prettier-config-hd": "8.30.4",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.1.0",

package/src/components/Carousel/__tests__/__snapshots__/index.spec.tsx.snap

@@ -99,7 +99,6 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
       onScroll={[Function]}
       onScrollBeginDrag={[Function]}
       onScrollEndDrag={[Function]}
-      onViewableItemsChanged={[Function]}
       pagingEnabled={true}
       removeClippedSubviews={false}
       renderItem={[Function]}
@@ -111,16 +110,7 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
           "viewAreaCoveragePercentThreshold": 50,
         }
       }
-      viewabilityConfigCallbackPairs={
-        Array [
-          Object {
-            "onViewableItemsChanged": [Function],
-            "viewabilityConfig": Object {
-              "viewAreaCoveragePercentThreshold": 50,
-            },
-          },
-        ]
-      }
+      viewabilityConfigCallbackPairs={Array []}
     >
       <View>
         <View
@@ -933,7 +923,6 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
       onScroll={[Function]}
       onScrollBeginDrag={[Function]}
       onScrollEndDrag={[Function]}
-      onViewableItemsChanged={[Function]}
       pagingEnabled={true}
       removeClippedSubviews={false}
       renderItem={[Function]}
@@ -945,16 +934,7 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
           "viewAreaCoveragePercentThreshold": 50,
         }
       }
-      viewabilityConfigCallbackPairs={
-        Array [
-          Object {
-            "onViewableItemsChanged": [Function],
-            "viewabilityConfig": Object {
-              "viewAreaCoveragePercentThreshold": 50,
-            },
-          },
-        ]
-      }
+      viewabilityConfigCallbackPairs={Array []}
     >
       <View>
         <View
@@ -1620,7 +1600,6 @@ exports[`Carousel should call skip call back when press skip 1`] = `
       onScroll={[Function]}
       onScrollBeginDrag={[Function]}
       onScrollEndDrag={[Function]}
-      onViewableItemsChanged={[Function]}
       pagingEnabled={true}
       removeClippedSubviews={false}
       renderItem={[Function]}
@@ -1632,16 +1611,7 @@ exports[`Carousel should call skip call back when press skip 1`] = `
           "viewAreaCoveragePercentThreshold": 50,
         }
       }
-      viewabilityConfigCallbackPairs={
-        Array [
-          Object {
-            "onViewableItemsChanged": [Function],
-            "viewabilityConfig": Object {
-              "viewAreaCoveragePercentThreshold": 50,
-            },
-          },
-        ]
-      }
+      viewabilityConfigCallbackPairs={Array []}
     >
       <View>
         <View

package/src/components/Carousel/index.tsx

@@ -9,6 +9,8 @@ import React, {
 import {
   Animated,
   FlatList,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
   StyleProp,
   useWindowDimensions,
   View,
@@ -127,11 +129,22 @@ const Carousel = ({
     };
   }, [currentSlideIndex, carouselRef]);
 
-  const visibleSlideChanged = useCallback(({ viewableItems }) => {
-    if (!viewableItems || (viewableItems && !viewableItems.length)) return;
-    const { index } = viewableItems[0];
+  const handleMomentumScrollEnd = (
+    event: NativeSyntheticEvent<NativeScrollEvent>
+  ) => {
+    // Calculate the current index based on the scroll position and container width
+    const containerWidth = event.nativeEvent.layoutMeasurement.width;
+    const scrollPosition = event.nativeEvent.contentOffset.x;
+
+    /**
+     * By rounding down, we ensure that any partial visibility of the next item does not affect the index value
+     * This helps maintain consistent behavior and aligns with the desired functionality of considering the left-most visible item as the current item.
+     */
+    const index = Math.floor(scrollPosition / containerWidth);
+
+    // Call the callback function with the current index
     internalOnItemIndexChange(index);
-  }, []);
+  };
 
   const viewConfig = useRef({ viewAreaCoveragePercentThreshold: 50 }).current;
 
@@ -158,7 +171,7 @@ const Carousel = ({
           pagingEnabled
           bounces={false}
           data={items}
-          onViewableItemsChanged={visibleSlideChanged}
+          onMomentumScrollEnd={handleMomentumScrollEnd}
           viewabilityConfig={viewConfig}
           scrollEventThrottle={32}
           ref={carouselRef}