@hero-design/rn 8.44.0-alpha.0 → 8.44.0

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

@@ -1,11 +1,12 @@
-import React from 'react';
 import { fireEvent } from '@testing-library/react-native';
+import React from 'react';
 import { ImageResizeMode } from 'react-native';
-import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import Carousel from '..';
-import Image from '../../Image';
 import { theme } from '../../..';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import Button from '../../Button/Button';
+import HeroDesignProvider from '../../HeroDesignProvider';
+import Image from '../../Image';
 
 const carouselData = [
   {
@@ -112,4 +113,50 @@ describe('Carousel', () => {
     fireEvent.press(queryByText('Skip'));
     expect(onSkip).toBeCalled();
   });
+
+  it("pageControl' current index should change to 1 when scroll", async () => {
+    const onSkip = jest.fn();
+
+    const { rerender, getByTestId } = renderWithTheme(
+      <Carousel
+        testID="carousel"
+        items={carouselData}
+        renderActions={(_) => {
+          return <Button text="Skip" onPress={onSkip} />;
+        }}
+      />
+    );
+    const eventData = {
+      viewableItems: [
+        {
+          index: 0,
+          isViewable: false,
+        },
+        {
+          index: 1,
+          isViewable: true,
+        },
+      ],
+    };
+    fireEvent(
+      getByTestId('carousel_flatlist'),
+      'onViewableItemsChanged',
+      eventData
+    );
+    rerender(
+      <HeroDesignProvider theme={theme}>
+        <Carousel
+          testID="carousel"
+          items={carouselData}
+          renderActions={(_) => {
+            return <Button text="Skip" onPress={onSkip} />;
+          }}
+        />
+      </HeroDesignProvider>
+    );
+
+    expect(getByTestId('page-control-indicator1')).toHaveAccessibilityState({
+      selected: true,
+    });
+  });
 });

package/src/components/Carousel/index.tsx

@@ -9,13 +9,12 @@ import React, {
 import {
   Animated,
   FlatList,
-  NativeScrollEvent,
-  NativeSyntheticEvent,
   StyleProp,
   useWindowDimensions,
   View,
   ViewProps,
   ViewStyle,
+  ViewToken,
 } from 'react-native';
 
 import { CarouselData } from './types';
@@ -87,6 +86,7 @@ const Carousel = ({
   selectedItemIndex = 0,
   style,
   shouldShowPagination = noop,
+  testID,
   pageControlPosition = 'top',
   ...nativeProps
 }: CarouselProps) => {
@@ -129,27 +129,20 @@ const Carousel = ({
     };
   }, [currentSlideIndex, carouselRef]);
 
-  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;
-
+  const onViewCallBack = React.useCallback(
+    (info: { viewableItems: Array<ViewToken>; changed: Array<ViewToken> }) => {
+      const firstVisibleItem = info.viewableItems.find(
+        (view) => view.index != null && view.isViewable
+      );
+      if (firstVisibleItem) {
+        internalOnItemIndexChange(firstVisibleItem.index || 0);
+      }
+    },
+    [internalOnItemIndexChange]
+  );
   return (
-    <View style={style} {...nativeProps}>
+    <View style={style} testID={testID} {...nativeProps}>
       <StyledBackDrop
         themeSlideBackground={items[currentSlideIndex].background}
       />
@@ -166,12 +159,13 @@ const Carousel = ({
 
       <StyledCarouselView>
         <FlatList
+          testID={testID ? `${testID}_flatlist` : undefined}
           horizontal
           showsHorizontalScrollIndicator={false}
           pagingEnabled
           bounces={false}
           data={items}
-          onMomentumScrollEnd={handleMomentumScrollEnd}
+          onViewableItemsChanged={onViewCallBack}
           viewabilityConfig={viewConfig}
           scrollEventThrottle={32}
           ref={carouselRef}

package/src/components/Checkbox/__tests__/__snapshots__/StyledCheckbox.spec.tsx.snap

@@ -3,167 +3,459 @@
 exports[`StyledCheckbox renders correctly when disabled is false and readonly is false 1`] = `
 <View
   style={
-    [
-      {
-        "borderColor": "#001f23",
-        "borderRadius": 4,
-        "borderWidth": 2,
-        "flex": 1,
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-  themeState="default"
-/>
+>
+  <View
+    style={
+      [
+        {
+          "borderColor": "#001f23",
+          "borderRadius": 4,
+          "borderWidth": 2,
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+    themeState="default"
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`StyledCheckbox renders correctly when disabled is false and readonly is true 1`] = `
 <View
   style={
-    [
-      {
-        "borderColor": "#808f91",
-        "borderRadius": 4,
-        "borderWidth": 2,
-        "flex": 1,
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-  themeState="readonly"
-/>
+>
+  <View
+    style={
+      [
+        {
+          "borderColor": "#808f91",
+          "borderRadius": 4,
+          "borderWidth": 2,
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+    themeState="readonly"
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`StyledCheckbox renders correctly when disabled is true and readonly is false 1`] = `
 <View
   style={
-    [
-      {
-        "borderColor": "#bfc1c5",
-        "borderRadius": 4,
-        "borderWidth": 2,
-        "flex": 1,
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-  themeState="disabled"
-/>
+>
+  <View
+    style={
+      [
+        {
+          "borderColor": "#bfc1c5",
+          "borderRadius": 4,
+          "borderWidth": 2,
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+    themeState="disabled"
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`StyledCheckbox renders correctly when disabled is true and readonly is true 1`] = `
 <View
   style={
-    [
-      {
-        "borderColor": "#bfc1c5",
-        "borderRadius": 4,
-        "borderWidth": 2,
-        "flex": 1,
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-  themeState="disabled"
-/>
+>
+  <View
+    style={
+      [
+        {
+          "borderColor": "#bfc1c5",
+          "borderRadius": 4,
+          "borderWidth": 2,
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+    themeState="disabled"
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`StyledWrapper renders correctly when disabled is false, readonly is false 1`] = `
 <View
-  accessible={true}
-  collapsable={false}
-  focusable={false}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
   style={
     {
-      "borderColor": "#001f23",
-      "borderRadius": 8,
-      "borderWidth": 1,
-      "flexDirection": "row",
-      "opacity": 1,
-      "padding": 16,
+      "flex": 1,
     }
   }
-/>
+>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={false}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "borderColor": "#001f23",
+        "borderRadius": 8,
+        "borderWidth": 1,
+        "flexDirection": "row",
+        "opacity": 1,
+        "padding": 16,
+      }
+    }
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`StyledWrapper renders correctly when disabled is false, readonly is true 1`] = `
 <View
-  accessible={true}
-  collapsable={false}
-  focusable={false}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
   style={
     {
-      "borderColor": "#808f91",
-      "borderRadius": 8,
-      "borderWidth": 1,
-      "flexDirection": "row",
-      "opacity": 1,
-      "padding": 16,
+      "flex": 1,
     }
   }
-/>
+>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={false}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "borderColor": "#808f91",
+        "borderRadius": 8,
+        "borderWidth": 1,
+        "flexDirection": "row",
+        "opacity": 1,
+        "padding": 16,
+      }
+    }
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`StyledWrapper renders correctly when disabled is true, readonly is false 1`] = `
 <View
-  accessible={true}
-  collapsable={false}
-  focusable={false}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
   style={
     {
-      "borderColor": "#bfc1c5",
-      "borderRadius": 8,
-      "borderWidth": 1,
-      "flexDirection": "row",
-      "opacity": 1,
-      "padding": 16,
+      "flex": 1,
     }
   }
-/>
+>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={false}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "borderColor": "#bfc1c5",
+        "borderRadius": 8,
+        "borderWidth": 1,
+        "flexDirection": "row",
+        "opacity": 1,
+        "padding": 16,
+      }
+    }
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`StyledWrapper renders correctly when disabled is true, readonly is true 1`] = `
 <View
-  accessible={true}
-  collapsable={false}
-  focusable={false}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
   style={
     {
-      "borderColor": "#bfc1c5",
-      "borderRadius": 8,
-      "borderWidth": 1,
-      "flexDirection": "row",
-      "opacity": 1,
-      "padding": 16,
+      "flex": 1,
     }
   }
-/>
+>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={false}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "borderColor": "#bfc1c5",
+        "borderRadius": 8,
+        "borderWidth": 1,
+        "flexDirection": "row",
+        "opacity": 1,
+        "padding": 16,
+      }
+    }
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;