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

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

@@ -1,13 +1,16 @@
-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';
+import { getCardCarouselValidIndex } from '../CardCarousel';
+import { CarouselData } from '../types';
 
-const carouselData = [
+const carouselData: CarouselData[] = [
   {
     image: 1, // Test the case when we import .png files as React Native component, it's convert to ImageRequireSource type (which is a number).
     heading: 'Welcome to the new Employment Hero app',
@@ -41,6 +44,10 @@ const carouselData = [
     heading: 'Test slide 4',
     background: theme.colors.decorativePrimarySurface,
   },
+  {
+    heading: 'Test slide 5',
+    background: theme.colors.decorativePrimarySurface,
+  },
 ];
 
 describe('Carousel', () => {
@@ -63,6 +70,14 @@ describe('Carousel', () => {
         />
       );
 
+      fireEvent(getByTestId('carousel_flatlist'), 'layout', {
+        nativeEvent: {
+          layout: {
+            width: 300,
+          },
+        },
+      });
+
       expect(getByTestId('carousel')).toBeTruthy();
 
       expect(queryByText('Skip')).toBeTruthy();
@@ -95,7 +110,7 @@ describe('Carousel', () => {
   it('should call skip call back when press skip', () => {
     const onSkip = jest.fn();
 
-    const { queryByText, toJSON } = renderWithTheme(
+    const { queryByText } = renderWithTheme(
       <Carousel
         testID="carousel"
         items={carouselData}
@@ -105,11 +120,96 @@ describe('Carousel', () => {
       />
     );
 
-    expect(toJSON()).toMatchSnapshot();
-
     expect(queryByText('Skip')).toBeTruthy();
 
     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,
+    });
+  });
+  it('should not render page control when there is only one item', () => {
+    const onPress = jest.fn();
+    const { queryByTestId } = renderWithTheme(
+      <Carousel
+        testID="carousel"
+        items={[carouselData[0]]}
+        renderActions={(_) => {
+          return <Button text="Skip" onPress={onPress} />;
+        }}
+      />
+    );
+
+    expect(queryByTestId('page-control-indicator1')).toBeFalsy();
+  });
+  it('should render correctly when image is undefined', () => {
+    const onPress = jest.fn();
+    const { toJSON } = renderWithTheme(
+      <Carousel
+        testID="carousel"
+        items={[carouselData[4]]}
+        renderActions={(_) => {
+          return <Button text="Skip" onPress={onPress} />;
+        }}
+      />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+// write test for getCardCarouselValidIndex
+describe('getCardCarouselValidIndex', () => {
+  it('should return 0 when index is less than 0', () => {
+    expect(getCardCarouselValidIndex(-1, 3)).toBe(0);
+  });
+  it('should return 2 when index is equal to 2', () => {
+    expect(getCardCarouselValidIndex(2, 3)).toBe(2);
+  });
+  it('should return 2 when index is greater than 2', () => {
+    expect(getCardCarouselValidIndex(3, 3)).toBe(2);
+  });
 });

package/src/components/Carousel/index.tsx

@@ -2,21 +2,25 @@ import React, {
   Dispatch,
   SetStateAction,
   useCallback,
-  useRef,
   useEffect,
+  useRef,
   useState,
 } from 'react';
 import {
   Animated,
   FlatList,
   StyleProp,
-  useWindowDimensions,
   View,
   ViewProps,
   ViewStyle,
+  ViewToken,
+  LayoutChangeEvent,
 } from 'react-native';
 
-import { CarouselData } from './types';
+import { useTheme } from '../../theme';
+import { useDeprecation } from '../../utils/hooks';
+import { CardCarousel } from './CardCarousel';
+import CarouselItem from './CarouselItem';
 import {
   StyledBackDrop,
   StyledCarouselFooterWrapper,
@@ -24,9 +28,7 @@ import {
   StyledPageControl,
   StyledPageControlWrapper,
 } from './StyledCarousel';
-import CarouselItem from './CarouselItem';
-import { CardCarousel } from './CardCarousel';
-import { useDeprecation } from '../../utils/hooks';
+import { CarouselData } from './types';
 
 interface CarouselProps extends ViewProps {
   /**
@@ -85,7 +87,8 @@ const Carousel = ({
   selectedItemIndex = 0,
   style,
   shouldShowPagination = noop,
-  pageControlPosition = 'bottom',
+  testID,
+  pageControlPosition = 'top',
   ...nativeProps
 }: CarouselProps) => {
   useDeprecation(
@@ -96,21 +99,35 @@ const Carousel = ({
     `The use of 'pageControlPosition == bottom' has been deprecated`,
     pageControlPosition === 'bottom'
   );
+
+  const theme = useTheme();
   const carouselRef = useRef<FlatList>(null);
 
   const [currentSlideIndex, setCurrentSlideIndex] =
     useStateFromProp(selectedItemIndex);
 
+  const shouldRenderPagination =
+    items.length > 1 && shouldShowPagination(currentSlideIndex);
+
   const internalOnItemIndexChange = useCallback(
     (index: number) => {
       setCurrentSlideIndex(index);
+
       if (onItemIndexChange) {
         onItemIndexChange(index);
       }
     },
     [setCurrentSlideIndex, onItemIndexChange]
   );
-  const { width } = useWindowDimensions();
+  const [flatListWidth, setFlatListWidth] = useState(0);
+  const itemWidth = flatListWidth;
+  const flatListOnLayout = useCallback(
+    (e: LayoutChangeEvent) => {
+      setFlatListWidth(e.nativeEvent.layout.width);
+    },
+    [setFlatListWidth]
+  );
+  const width = flatListWidth;
 
   const scrollX = useRef(new Animated.Value(0)).current;
   useEffect(() => {
@@ -125,40 +142,48 @@ const Carousel = ({
     return () => {
       clearTimeout(handle);
     };
-  }, [currentSlideIndex, carouselRef]);
-
-  const visibleSlideChanged = useCallback(({ viewableItems }) => {
-    if (!viewableItems || (viewableItems && !viewableItems.length)) return;
-    const { index } = viewableItems[0];
-    internalOnItemIndexChange(index);
-  }, []);
-
+  }, [currentSlideIndex, carouselRef, scrollX, width]);
   const viewConfig = useRef({ viewAreaCoveragePercentThreshold: 50 }).current;
 
+  const onViewCallBack = useRef(
+    (info: { viewableItems: Array<ViewToken>; changed: Array<ViewToken> }) => {
+      const firstVisibleItem = info.viewableItems.find(
+        (view) => view.index != null && view.isViewable
+      );
+      if (firstVisibleItem) {
+        internalOnItemIndexChange(firstVisibleItem.index || 0);
+      }
+    }
+  );
+
   return (
-    <View style={style} {...nativeProps}>
+    <View style={style} testID={testID} {...nativeProps}>
       <StyledBackDrop
-        themeSlideBackground={items[currentSlideIndex].background}
+        themeSlideBackground={
+          items[currentSlideIndex]?.background ||
+          theme.colors.defaultGlobalSurface
+        }
       />
 
       <StyledPageControlWrapper>
-        {pageControlPosition === 'top' &&
-          shouldShowPagination(currentSlideIndex) && (
-            <StyledPageControl
-              numberOfPages={items.length}
-              currentPage={currentSlideIndex}
-            />
-          )}
+        {pageControlPosition === 'top' && shouldRenderPagination && (
+          <StyledPageControl
+            numberOfPages={items.length}
+            currentPage={currentSlideIndex}
+          />
+        )}
       </StyledPageControlWrapper>
 
       <StyledCarouselView>
-        <FlatList
+        <FlatList<CarouselData>
+          onLayout={flatListOnLayout}
+          testID={testID ? `${testID}_flatlist` : undefined}
           horizontal
           showsHorizontalScrollIndicator={false}
           pagingEnabled
           bounces={false}
           data={items}
-          onViewableItemsChanged={visibleSlideChanged}
+          onViewableItemsChanged={onViewCallBack.current}
           viewabilityConfig={viewConfig}
           scrollEventThrottle={32}
           ref={carouselRef}
@@ -170,7 +195,6 @@ const Carousel = ({
             if (!item) return null;
 
             const { image, heading, body, content } = item;
-
             return (
               <CarouselItem
                 image={image}
@@ -181,16 +205,20 @@ const Carousel = ({
               />
             );
           }}
+          getItemLayout={(_, index) => ({
+            length: itemWidth,
+            offset: itemWidth * index,
+            index,
+          })}
         />
         <StyledCarouselFooterWrapper>
           {renderActions && renderActions(currentSlideIndex)}
-          {pageControlPosition === 'bottom' &&
-            shouldShowPagination(currentSlideIndex) && (
-              <StyledPageControl
-                numberOfPages={items.length}
-                currentPage={currentSlideIndex}
-              />
-            )}
+          {pageControlPosition === 'bottom' && shouldRenderPagination && (
+            <StyledPageControl
+              numberOfPages={items.length}
+              currentPage={currentSlideIndex}
+            />
+          )}
         </StyledCarouselFooterWrapper>
       </StyledCarouselView>
     </View>

package/src/components/Carousel/types.ts

@@ -2,15 +2,15 @@ import { ReactNode } from 'react';
 import { ImageSourcePropType, ImageResizeMode } from 'react-native';
 
 export type CarouselImageProps = ImageSourcePropType & {
-  height?: number;
-  width?: number;
+  height?: number | `${number}%`;
+  width?: number | `${number}%`;
   resizeMode?: ImageResizeMode;
 };
 
 export type CarouselData = {
-  image: CarouselImageProps | string;
+  image?: CarouselImageProps | string;
   content?: ReactNode;
-  heading: string;
+  heading?: string;
   body?: string;
   background: string;
 };

package/src/components/Checkbox/StyledCheckbox.tsx

@@ -1,28 +1,21 @@
 import styled from '@emotion/native';
 import { TouchableOpacity, View } from 'react-native';
-import Icon from '../Icon';
+import HeroIcon from '../Icon';
 import Typography from '../Typography';
 
-export const StyledWrapper = styled(TouchableOpacity)<{
-  themeWithBorder: boolean;
-  themeDisabled: boolean;
-}>(({ theme, themeWithBorder, themeDisabled }) => {
-  const borderStyle = {
-    borderRadius: theme.__hd__.checkbox.radii.wrapper,
-    borderWidth: theme.__hd__.checkbox.borderWidths.wrapper,
-    padding: theme.__hd__.checkbox.space.wrapperPadding,
-    borderColor: themeDisabled
-      ? theme.__hd__.checkbox.colors.disabledBorder
-      : theme.__hd__.checkbox.colors.default,
-  };
+type CheckboxThemeState = 'default' | 'disabled' | 'readonly';
 
-  return {
-    flexDirection: 'row',
-    ...(themeWithBorder && borderStyle),
-  };
-});
+export const StyledWrapper = styled(TouchableOpacity)<{
+  themeState: CheckboxThemeState;
+}>(({ theme, themeState }) => ({
+  flexDirection: 'row',
+  borderRadius: theme.__hd__.checkbox.radii.wrapper,
+  borderWidth: theme.__hd__.checkbox.borderWidths.wrapper,
+  padding: theme.__hd__.checkbox.space.wrapperPadding,
+  borderColor: theme.__hd__.checkbox.colors.borders[themeState],
+}));
 
-export const StyledDescription = styled(Typography.Text)(({ theme }) => ({
+export const StyledDescription = styled(Typography.Body)(({ theme }) => ({
   paddingRight: theme.__hd__.checkbox.space.iconDescriptionPadding,
   flex: 1,
 }));
@@ -33,18 +26,19 @@ export const StyledCheckboxContainer = styled(View)(({ theme }) => ({
   overflow: 'hidden',
 }));
 
-export const StyledCheckbox = styled(View)<{ themeDisabled: boolean }>(
-  ({ theme, themeDisabled }) => ({
-    flex: 1,
-    borderRadius: theme.__hd__.checkbox.radii.icon,
-    borderWidth: theme.__hd__.checkbox.borderWidths.icon,
-    borderColor: themeDisabled
-      ? theme.__hd__.checkbox.colors.disabledBorder
-      : theme.__hd__.checkbox.colors.default,
-  })
-);
+export const StyledCheckbox = styled(View)<{
+  themeState: CheckboxThemeState;
+}>(({ theme, themeState }) => ({
+  flex: 1,
+  borderRadius: theme.__hd__.checkbox.radii.icon,
+  borderWidth: theme.__hd__.checkbox.borderWidths.icon,
+  borderColor: theme.__hd__.checkbox.colors.borders[themeState],
+}));
 
-export const StyledCheckMark = styled(Icon)(({ theme }) => ({
+export const StyledCheckMark = styled(HeroIcon)<{
+  themeState: CheckboxThemeState;
+}>(({ theme, themeState }) => ({
   position: 'absolute',
   top: theme.__hd__.checkbox.space.iconTop,
+  color: theme.__hd__.checkbox.colors.borders[themeState],
 }));

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

@@ -1,18 +1,21 @@
 import React from 'react';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import { StyledWrapper, StyledCheckbox } from '../StyledCheckbox';
+import { getThemeState } from '..';
 
 describe('StyledWrapper', () => {
   it.each`
-    withBorder | disabled
-    ${false}   | ${false}
-    ${true}    | ${false}
-    ${true}    | ${true}
+    disabled | readonly
+    ${false} | ${false}
+    ${true}  | ${false}
+    ${false} | ${true}
+    ${true}  | ${true}
   `(
-    'renders correctly when disabled is $disabled, withBorder is $withBorder',
-    ({ disabled, withBorder }) => {
+    'renders correctly when disabled is $disabled, readonly is $readonly',
+    ({ disabled, readonly }) => {
+      const themeState = getThemeState({ disabled, readonly });
       const { toJSON } = renderWithTheme(
-        <StyledWrapper themeDisabled={disabled} themeWithBorder={withBorder} />
+        <StyledWrapper themeState={themeState} />
       );
 
       expect(toJSON()).toMatchSnapshot();
@@ -22,14 +25,20 @@ describe('StyledWrapper', () => {
 
 describe('StyledCheckbox', () => {
   it.each`
-    disabled
-    ${true}
-    ${false}
-  `('renders correctly when disabled is $disabled', ({ disabled }) => {
-    const { toJSON } = renderWithTheme(
-      <StyledCheckbox themeDisabled={disabled} />
-    );
+    disabled | readonly
+    ${true}  | ${false}
+    ${true}  | ${true}
+    ${false} | ${false}
+    ${false} | ${true}
+  `(
+    'renders correctly when disabled is $disabled and readonly is $readonly',
+    ({ disabled, readonly }) => {
+      const themeState = getThemeState({ disabled, readonly });
+      const { toJSON } = renderWithTheme(
+        <StyledCheckbox themeState={themeState} />
+      );
 
-    expect(toJSON()).toMatchSnapshot();
-  });
+      expect(toJSON()).toMatchSnapshot();
+    }
+  );
 });