@hero-design/rn 8.11.2 → 8.11.3

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
-@hero-design/rn:build: cache hit, replaying output 19e687d21fa4a4ae
+@hero-design/rn:build: cache hit, replaying output de0243cb44d0158b
 @hero-design/rn:build: $ yarn build:js && yarn build:types
 @hero-design/rn:build: $ rollup -c
 @hero-design/rn:build: 
 @hero-design/rn:build: src/index.ts → lib/index.js, es/index.js...
 @hero-design/rn:build: (!) 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`.
 @hero-design/rn:build: (!) 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
-@hero-design/rn:build: created lib/index.js, es/index.js in 28.5s
+@hero-design/rn:build: created lib/index.js, es/index.js in 28.6s
 @hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

package/es/index.js

@@ -10847,7 +10847,8 @@ var CardCarousel = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _ref$autoPlay = _ref.autoPlay,
     autoPlay = _ref$autoPlay === void 0 ? false : _ref$autoPlay,
     _ref$autoPlayInterval = _ref.autoPlayInterval,
-    autoPlayInterval = _ref$autoPlayInterval === void 0 ? 3000 : _ref$autoPlayInterval;
+    autoPlayInterval = _ref$autoPlayInterval === void 0 ? 3000 : _ref$autoPlayInterval,
+    onLayout = _ref.onLayout;
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     currentIndex = _useState2[0],
@@ -10928,9 +10929,12 @@ var CardCarousel = /*#__PURE__*/forwardRef(function (_ref, ref) {
       index: index
     };
   }, [itemWidth]);
-  var onLayout = useCallback(function (e) {
+  var flatListOnLayout = useCallback(function (e) {
     setFlatListWidth(e.nativeEvent.layout.width);
-  }, [setFlatListWidth]);
+    setTimeout(function () {
+      onLayout === null || onLayout === void 0 ? void 0 : onLayout(e);
+    });
+  }, [setFlatListWidth, onLayout]);
   var renderItem = useCallback(function (_ref3) {
     var item = _ref3.item;
     return /*#__PURE__*/React.createElement(StyledItemWrapper, {
@@ -10943,10 +10947,13 @@ var CardCarousel = /*#__PURE__*/forwardRef(function (_ref, ref) {
     style: style,
     testID: testID
   }, /*#__PURE__*/React.createElement(FlatList, {
-    contentContainerStyle: {
-      paddingHorizontal: theme.__hd__.cardCarousel.space.contentContainerPaddingHorizontal
+    contentInset: {
+      top: 0,
+      left: theme.__hd__.cardCarousel.space.contentContainerPaddingHorizontal,
+      bottom: 0,
+      right: theme.__hd__.cardCarousel.space.contentContainerPaddingHorizontal
     },
-    onLayout: onLayout,
+    onLayout: flatListOnLayout,
     data: items,
     horizontal: true,
     showsHorizontalScrollIndicator: false,
@@ -10962,7 +10969,7 @@ var CardCarousel = /*#__PURE__*/forwardRef(function (_ref, ref) {
     },
     decelerationRate: "fast",
     renderToHardwareTextureAndroid: true,
-    snapToInterval: itemWidth + theme.__hd__.cardCarousel.space.carouselItemSpacing,
+    snapToInterval: itemWidth,
     onViewableItemsChanged: visibleSlideChanged,
     viewabilityConfig: {
       itemVisiblePercentThreshold: 80

package/lib/index.js

@@ -10876,7 +10876,8 @@ var CardCarousel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$autoPlay = _ref.autoPlay,
     autoPlay = _ref$autoPlay === void 0 ? false : _ref$autoPlay,
     _ref$autoPlayInterval = _ref.autoPlayInterval,
-    autoPlayInterval = _ref$autoPlayInterval === void 0 ? 3000 : _ref$autoPlayInterval;
+    autoPlayInterval = _ref$autoPlayInterval === void 0 ? 3000 : _ref$autoPlayInterval,
+    onLayout = _ref.onLayout;
   var _useState = React.useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     currentIndex = _useState2[0],
@@ -10957,9 +10958,12 @@ var CardCarousel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       index: index
     };
   }, [itemWidth]);
-  var onLayout = React.useCallback(function (e) {
+  var flatListOnLayout = React.useCallback(function (e) {
     setFlatListWidth(e.nativeEvent.layout.width);
-  }, [setFlatListWidth]);
+    setTimeout(function () {
+      onLayout === null || onLayout === void 0 ? void 0 : onLayout(e);
+    });
+  }, [setFlatListWidth, onLayout]);
   var renderItem = React.useCallback(function (_ref3) {
     var item = _ref3.item;
     return /*#__PURE__*/React__default["default"].createElement(StyledItemWrapper, {
@@ -10972,10 +10976,13 @@ var CardCarousel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     style: style,
     testID: testID
   }, /*#__PURE__*/React__default["default"].createElement(reactNative.FlatList, {
-    contentContainerStyle: {
-      paddingHorizontal: theme.__hd__.cardCarousel.space.contentContainerPaddingHorizontal
+    contentInset: {
+      top: 0,
+      left: theme.__hd__.cardCarousel.space.contentContainerPaddingHorizontal,
+      bottom: 0,
+      right: theme.__hd__.cardCarousel.space.contentContainerPaddingHorizontal
     },
-    onLayout: onLayout,
+    onLayout: flatListOnLayout,
     data: items,
     horizontal: true,
     showsHorizontalScrollIndicator: false,
@@ -10991,7 +10998,7 @@ var CardCarousel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     },
     decelerationRate: "fast",
     renderToHardwareTextureAndroid: true,
-    snapToInterval: itemWidth + theme.__hd__.cardCarousel.space.carouselItemSpacing,
+    snapToInterval: itemWidth,
     onViewableItemsChanged: visibleSlideChanged,
     viewabilityConfig: {
       itemVisiblePercentThreshold: 80

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.11.2",
+  "version": "8.11.3",
   "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.11.2",
+    "@hero-design/colors": "8.11.3",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.21"
@@ -44,7 +44,7 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
-    "@hero-design/eslint-plugin": "8.11.2",
+    "@hero-design/eslint-plugin": "8.11.3",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -60,9 +60,9 @@
     "@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.11.2",
+    "eslint-config-hd": "8.11.3",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.11.2",
+    "prettier-config-hd": "8.11.3",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.1.0",

package/src/components/Carousel/CardCarousel.tsx

@@ -5,7 +5,12 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { FlatList, StyleProp, ViewStyle } from 'react-native';
+import {
+  FlatList,
+  LayoutChangeEvent,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
 import { useTheme } from '../../theme';
 import { ITEM_WIDTH_RATE, VIEW_POSITION_CENTER } from './contants';
 import {
@@ -34,9 +39,9 @@ export interface CardCarouselProps {
    */
   onItemIndexChange?: (index: number) => void;
   /**
-   * Carousel data.
+   * Carousel items.
    */
-  items: any[];
+  items: React.ReactNode[];
   /**
    * Indicates hide or show page control.
    */
@@ -53,6 +58,10 @@ export interface CardCarouselProps {
    * Component ref.
    */
   ref?: React.Ref<CardCarouselHandles>;
+  /*
+   * onLayout event handler.
+   */
+  onLayout?: (event: LayoutChangeEvent) => void;
 }
 
 export const CardCarousel = forwardRef<CardCarouselHandles, CardCarouselProps>(
@@ -65,6 +74,7 @@ export const CardCarousel = forwardRef<CardCarouselHandles, CardCarouselProps>(
       testID,
       autoPlay = false,
       autoPlayInterval = 3000,
+      onLayout,
     }: CardCarouselProps,
     ref?: React.Ref<CardCarouselHandles>
   ) => {
@@ -155,11 +165,14 @@ export const CardCarousel = forwardRef<CardCarouselHandles, CardCarouselProps>(
       [itemWidth]
     );
 
-    const onLayout = useCallback(
+    const flatListOnLayout = useCallback(
       (e) => {
         setFlatListWidth(e.nativeEvent.layout.width);
+        setTimeout(() => {
+          onLayout?.(e);
+        });
       },
-      [setFlatListWidth]
+      [setFlatListWidth, onLayout]
     );
 
     const renderItem = useCallback(
@@ -179,11 +192,15 @@ export const CardCarousel = forwardRef<CardCarouselHandles, CardCarouselProps>(
     return (
       <StyledWrapper style={style} testID={testID}>
         <FlatList
-          contentContainerStyle={{
-            paddingHorizontal:
+          contentInset={{
+            top: 0,
+            left: theme.__hd__.cardCarousel.space
+              .contentContainerPaddingHorizontal,
+            bottom: 0,
+            right:
               theme.__hd__.cardCarousel.space.contentContainerPaddingHorizontal,
           }}
-          onLayout={onLayout}
+          onLayout={flatListOnLayout}
           data={items}
           horizontal
           showsHorizontalScrollIndicator={false}
@@ -197,14 +214,13 @@ export const CardCarousel = forwardRef<CardCarouselHandles, CardCarouselProps>(
           keyExtractor={(_, index) => `${index}`}
           decelerationRate="fast"
           renderToHardwareTextureAndroid
-          snapToInterval={
-            itemWidth + theme.__hd__.cardCarousel.space.carouselItemSpacing
-          }
+          snapToInterval={itemWidth}
           onViewableItemsChanged={visibleSlideChanged}
           viewabilityConfig={{
             itemVisiblePercentThreshold: 80,
           }}
         />
+
         {!hidePageControl && (
           <StyledPageControl
             testID="pageControl"

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

@@ -15,9 +15,12 @@ exports[`CardCarousel should render correctly 1`] = `
 >
   <RCTScrollView
     bounces={false}
-    contentContainerStyle={
+    contentInset={
       Object {
-        "paddingHorizontal": 24,
+        "bottom": 0,
+        "left": 24,
+        "right": 24,
+        "top": 0,
       }
     }
     data={
@@ -51,7 +54,7 @@ exports[`CardCarousel should render correctly 1`] = `
     scrollEventThrottle={32}
     showsHorizontalScrollIndicator={false}
     snapToAlignment="center"
-    snapToInterval={8}
+    snapToInterval={0}
     stickyHeaderIndices={Array []}
     viewabilityConfig={
       Object {

package/types/components/Carousel/CardCarousel.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
+import { LayoutChangeEvent, StyleProp, ViewStyle } from 'react-native';
 export declare type CardCarouselHandles = {
     snapToIndex: (index: number) => void;
 };
@@ -17,9 +17,9 @@ export interface CardCarouselProps {
      */
     onItemIndexChange?: (index: number) => void;
     /**
-     * Carousel data.
+     * Carousel items.
      */
-    items: any[];
+    items: React.ReactNode[];
     /**
      * Indicates hide or show page control.
      */
@@ -36,5 +36,6 @@ export interface CardCarouselProps {
      * Component ref.
      */
     ref?: React.Ref<CardCarouselHandles>;
+    onLayout?: (event: LayoutChangeEvent) => void;
 }
-export declare const CardCarousel: React.ForwardRefExoticComponent<Pick<CardCarouselProps, "style" | "testID" | "items" | "onItemIndexChange" | "hidePageControl" | "autoPlay" | "autoPlayInterval"> & React.RefAttributes<CardCarouselHandles>>;
+export declare const CardCarousel: React.ForwardRefExoticComponent<Pick<CardCarouselProps, "style" | "onLayout" | "testID" | "items" | "onItemIndexChange" | "hidePageControl" | "autoPlay" | "autoPlayInterval"> & React.RefAttributes<CardCarouselHandles>>;

package/types/components/Carousel/index.d.ts

@@ -33,6 +33,6 @@ interface CarouselProps extends ViewProps {
 }
 export declare function useStateFromProp<T>(initialValue: T): [T, Dispatch<SetStateAction<T>>];
 declare const _default: (({ items, onItemIndexChange, renderActions, selectedItemIndex, style, shouldShowPagination, ...nativeProps }: CarouselProps) => JSX.Element) & {
-    Card: React.ForwardRefExoticComponent<Pick<import("./CardCarousel").CardCarouselProps, "style" | "testID" | "items" | "onItemIndexChange" | "hidePageControl" | "autoPlay" | "autoPlayInterval"> & React.RefAttributes<import("./CardCarousel").CardCarouselHandles>>;
+    Card: React.ForwardRefExoticComponent<Pick<import("./CardCarousel").CardCarouselProps, "style" | "onLayout" | "testID" | "items" | "onItemIndexChange" | "hidePageControl" | "autoPlay" | "autoPlayInterval"> & React.RefAttributes<import("./CardCarousel").CardCarouselHandles>>;
 };
 export default _default;