@hero-design/rn 8.30.2 → 8.30.4

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 26s
+created lib/index.js, es/index.js in 27.5s
 $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

package/es/index.js

@@ -11558,12 +11558,18 @@ var Carousel = function Carousel(_ref) {
       clearTimeout(handle);
     };
   }, [currentSlideIndex, carouselRef]);
-  var visibleSlideChanged = 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 = useRef({
     viewAreaCoveragePercentThreshold: 50
   }).current;
@@ -11580,7 +11586,7 @@ var Carousel = function Carousel(_ref) {
     pagingEnabled: true,
     bounces: false,
     data: items,
-    onViewableItemsChanged: visibleSlideChanged,
+    onMomentumScrollEnd: handleMomentumScrollEnd,
     viewabilityConfig: viewConfig,
     scrollEventThrottle: 32,
     ref: carouselRef,
@@ -11593,8 +11599,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,
@@ -14901,7 +14907,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,
@@ -14917,14 +14923,10 @@ var Skeleton = function Skeleton(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     containerWidth = _useState2[0],
     setContainerWidth = _useState2[1];
-  var _useState3 = useState(Number((_StyleSheet$flatten2 = StyleSheet$1.flatten(style)) === null || _StyleSheet$flatten2 === void 0 ? void 0 : _StyleSheet$flatten2.height) || 0),
+  var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    containerHeight = _useState4[0],
-    setContainerHeight = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    shouldStartAnimation = _useState6[0],
-    setShouldStartAnimation = _useState6[1];
+    shouldStartAnimation = _useState4[0],
+    setShouldStartAnimation = _useState4[1];
   var animatedValue = useRef(new Animated.Value(0)).current;
   useEffect(function () {
     if (shouldStartAnimation) {
@@ -14941,10 +14943,7 @@ var Skeleton = function Skeleton(_ref) {
     outputRange: [-containerWidth, containerWidth]
   });
   var onContainerLayout = 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);
@@ -14962,8 +14961,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/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,
@@ -14931,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,
@@ -14947,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) {
@@ -14971,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);
@@ -14992,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.2",
+  "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.2",
+    "@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.2",
+    "@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.2",
+    "eslint-config-hd": "8.30.4",
     "eslint-plugin-import": "^2.27.5",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.30.2",
+    "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}

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

@@ -57,13 +57,13 @@ exports[`Skeleton renders correctly by default 1`] = `
       }
       style={
         Object {
-          "height": 0,
+          "height": "100%",
           "transform": Array [
             Object {
               "translateX": -0,
             },
           ],
-          "width": 0,
+          "width": "100%",
         }
       }
     />
@@ -128,13 +128,13 @@ exports[`Skeleton renders correctly when intent is dark and variant is circular
       }
       style={
         Object {
-          "height": 0,
+          "height": "100%",
           "transform": Array [
             Object {
               "translateX": -0,
             },
           ],
-          "width": 0,
+          "width": "100%",
         }
       }
     />
@@ -199,13 +199,13 @@ exports[`Skeleton renders correctly when intent is dark and variant is rectangul
       }
       style={
         Object {
-          "height": 0,
+          "height": "100%",
           "transform": Array [
             Object {
               "translateX": -0,
             },
           ],
-          "width": 0,
+          "width": "100%",
         }
       }
     />
@@ -270,13 +270,13 @@ exports[`Skeleton renders correctly when intent is dark and variant is rounded 1
       }
       style={
         Object {
-          "height": 0,
+          "height": "100%",
           "transform": Array [
             Object {
               "translateX": -0,
             },
           ],
-          "width": 0,
+          "width": "100%",
         }
       }
     />
@@ -341,13 +341,13 @@ exports[`Skeleton renders correctly when intent is light and variant is circular
       }
       style={
         Object {
-          "height": 0,
+          "height": "100%",
           "transform": Array [
             Object {
               "translateX": -0,
             },
           ],
-          "width": 0,
+          "width": "100%",
         }
       }
     />
@@ -412,13 +412,13 @@ exports[`Skeleton renders correctly when intent is light and variant is rectangu
       }
       style={
         Object {
-          "height": 0,
+          "height": "100%",
           "transform": Array [
             Object {
               "translateX": -0,
             },
           ],
-          "width": 0,
+          "width": "100%",
         }
       }
     />
@@ -483,13 +483,13 @@ exports[`Skeleton renders correctly when intent is light and variant is rounded
       }
       style={
         Object {
-          "height": 0,
+          "height": "100%",
           "transform": Array [
             Object {
               "translateX": -0,
             },
           ],
-          "width": 0,
+          "width": "100%",
         }
       }
     />

package/src/components/Skeleton/index.tsx

@@ -69,9 +69,6 @@ const Skeleton = ({
   const [containerWidth, setContainerWidth] = useState(
     Number(StyleSheet.flatten(style)?.width) || 0
   );
-  const [containerHeight, setContainerHeight] = useState(
-    Number(StyleSheet.flatten(style)?.height) || 0
-  );
 
   const [shouldStartAnimation, setShouldStartAnimation] = useState(false);
 
@@ -96,8 +93,7 @@ const Skeleton = ({
   });
 
   const onContainerLayout = useCallback((e: LayoutChangeEvent) => {
-    const { width, height } = e.nativeEvent.layout;
-    setContainerHeight(height);
+    const { width } = e.nativeEvent.layout;
     setContainerWidth(width);
 
     if (!shouldStartAnimation) {
@@ -120,8 +116,8 @@ const Skeleton = ({
           start={gradientPositions.start}
           end={gradientPositions.end}
           style={{
-            width: containerWidth,
-            height: containerHeight,
+            width: '100%',
+            height: '100%',
             transform: [{ translateX }],
           }}
           colors={colors}