@hero-design/rn 8.10.0 → 8.11.0

package/src/components/Carousel/CardCarousel.tsx

@@ -0,0 +1,218 @@
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { FlatList, StyleProp, ViewStyle } from 'react-native';
+import { useTheme } from '../../theme';
+import { ITEM_WIDTH_RATE, VIEW_POSITION_CENTER } from './contants';
+import {
+  StyledCard,
+  StyledItemWrapper,
+  StyledPageControl,
+  StyledShadow,
+  StyledWrapper,
+} from './StyledCardCarousel';
+
+export type CardCarouselHandles = {
+  snapToIndex: (index: number) => void;
+};
+
+export interface CardCarouselProps {
+  /**
+   * Whether to scroll automatically.
+   */
+  autoPlay?: boolean;
+  /**
+   * Set interval of each slide.
+   */
+  autoPlayInterval?: number;
+  /**
+   * onItemIndexChange event handler receiving index of selected Item.
+   */
+  onItemIndexChange?: (index: number) => void;
+  /**
+   * Carousel data.
+   */
+  items: any[];
+  /**
+   * Indicates hide or show page control.
+   */
+  hidePageControl?: boolean;
+  /**
+   * Additional styles
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+  /**
+   * Component ref.
+   */
+  ref?: React.Ref<CardCarouselHandles>;
+}
+
+export const CardCarousel = forwardRef<CardCarouselHandles, CardCarouselProps>(
+  (
+    {
+      onItemIndexChange,
+      items,
+      hidePageControl = false,
+      style,
+      testID,
+      autoPlay = false,
+      autoPlayInterval = 3000,
+    }: CardCarouselProps,
+    ref?: React.Ref<CardCarouselHandles>
+  ) => {
+    const [currentIndex, setCurrentIndex] = useState(0);
+
+    const theme = useTheme();
+    const [flatListWidth, setFlatListWidth] = useState(0);
+    const itemWidth = flatListWidth * ITEM_WIDTH_RATE;
+    const carouselRef = useRef<FlatList>(null);
+
+    const snapToIndex = useCallback(
+      (index) => {
+        let validIndex = 0;
+        if (index < 0) {
+          validIndex = 0;
+        } else if (index >= items.length) {
+          validIndex = items.length - 1;
+        } else {
+          validIndex = index;
+        }
+
+        carouselRef.current?.scrollToIndex({
+          index: validIndex,
+          animated: true,
+          viewPosition: VIEW_POSITION_CENTER,
+        });
+      },
+      [carouselRef, itemWidth]
+    );
+
+    /*
+     * snap to the next index. If the curent index is the last one, snap to the first one.
+     */
+    const snapToNext = useCallback(() => {
+      let nextIndex = currentIndex + 1;
+      if (nextIndex >= items.length) {
+        nextIndex = 0;
+      }
+      carouselRef.current?.scrollToIndex({
+        index: nextIndex,
+        animated: true,
+        viewPosition: VIEW_POSITION_CENTER,
+      });
+    }, [carouselRef, currentIndex, itemWidth, items.length]);
+
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        snapToIndex: (index: number) => {
+          snapToIndex(index);
+        },
+        // we don't expose this method, it's for testing https://medium.com/developer-rants/how-to-test-useref-without-mocking-useref-699165f4994e
+        getFlatListRef: () => carouselRef.current,
+      }),
+      [snapToIndex]
+    );
+
+    useEffect(() => {
+      let timer: number;
+      if (autoPlay) {
+        timer = setInterval(() => {
+          snapToNext();
+        }, autoPlayInterval);
+      }
+      return () => {
+        clearInterval(timer);
+      };
+    }, [autoPlay, snapToNext, currentIndex, autoPlayInterval]);
+
+    const visibleSlideChanged = useCallback(
+      ({ viewableItems }) => {
+        if (!viewableItems || (viewableItems && !viewableItems.length)) return;
+        const { index } = viewableItems[0];
+        setCurrentIndex(index);
+        if (onItemIndexChange) {
+          onItemIndexChange(index);
+        }
+      },
+      [onItemIndexChange]
+    );
+
+    const getItemLayout = useCallback(
+      (_: React.ReactNode, index: number) => ({
+        length: itemWidth,
+        offset: itemWidth * index,
+        index,
+      }),
+      [itemWidth]
+    );
+
+    const onLayout = useCallback(
+      (e) => {
+        setFlatListWidth(e.nativeEvent.layout.width);
+      },
+      [setFlatListWidth]
+    );
+
+    const renderItem = useCallback(
+      ({ item }) => {
+        return (
+          <StyledItemWrapper style={{ width: itemWidth }}>
+            {/* using StyledShadow to fix border not shown on Android  */}
+            <StyledShadow>
+              <StyledCard>{item}</StyledCard>
+            </StyledShadow>
+          </StyledItemWrapper>
+        );
+      },
+      [itemWidth]
+    );
+
+    return (
+      <StyledWrapper style={style} testID={testID}>
+        <FlatList
+          contentContainerStyle={{
+            paddingHorizontal:
+              theme.__hd__.cardCarousel.space.contentContainerPaddingHorizontal,
+          }}
+          onLayout={onLayout}
+          data={items}
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          pagingEnabled
+          bounces={false}
+          scrollEventThrottle={32}
+          snapToAlignment="center"
+          getItemLayout={getItemLayout}
+          ref={carouselRef}
+          renderItem={renderItem}
+          keyExtractor={(_, index) => `${index}`}
+          decelerationRate="fast"
+          renderToHardwareTextureAndroid
+          snapToInterval={
+            itemWidth + theme.__hd__.cardCarousel.space.carouselItemSpacing
+          }
+          onViewableItemsChanged={visibleSlideChanged}
+          viewabilityConfig={{
+            itemVisiblePercentThreshold: 80,
+          }}
+        />
+        {!hidePageControl && (
+          <StyledPageControl
+            testID="pageControl"
+            currentPage={currentIndex}
+            numberOfPages={items.length}
+          />
+        )}
+      </StyledWrapper>
+    );
+  }
+);

package/src/components/Carousel/StyledCardCarousel.tsx

@@ -0,0 +1,40 @@
+import styled from '@emotion/native';
+import { View, ViewProps } from 'react-native';
+import Card, { CardProps } from '../Card';
+import PageControl, { PageControlProps } from '../PageControl';
+
+const StyledPageControl = styled(PageControl)<PageControlProps>(
+  ({ theme }) => ({
+    alignSelf: 'center',
+    marginTop: theme.__hd__.cardCarousel.space.pageControlMarginTop,
+  })
+);
+
+const StyledWrapper = styled(View)<ViewProps>({});
+
+const StyledCard = styled(Card)<CardProps>(({ theme }) => ({
+  borderRadius: theme.__hd__.cardCarousel.radii.card,
+  overflow: 'hidden',
+  flex: 1,
+}));
+const StyledShadow = styled(View)<ViewProps>(({ theme }) => ({
+  borderRadius: theme.__hd__.cardCarousel.radii.card,
+  shadowColor: theme.__hd__.cardCarousel.colors.shadow,
+  shadowOffset: theme.__hd__.cardCarousel.shadows.offset,
+  shadowRadius: theme.__hd__.cardCarousel.shadows.radius,
+  shadowOpacity: theme.__hd__.cardCarousel.shadows.opacity,
+  elevation: theme.__hd__.cardCarousel.shadows.elevation,
+  flex: 1,
+}));
+
+const StyledItemWrapper = styled(View)<ViewProps>(({ theme }) => ({
+  padding: theme.__hd__.cardCarousel.space.carouselItemSpacing,
+}));
+
+export {
+  StyledCard,
+  StyledShadow,
+  StyledItemWrapper,
+  StyledWrapper,
+  StyledPageControl,
+};

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

@@ -0,0 +1,105 @@
+import { waitFor } from '@testing-library/react-native';
+import React from 'react';
+import { FlatList } from 'react-native';
+import { CardCarousel, CardCarouselHandles } from '../CardCarousel';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import Typography from '../../Typography';
+
+describe('CardCarousel', () => {
+  it('should render correctly', () => {
+    const wrapper = renderWithTheme(
+      <CardCarousel
+        testID="cardCarousel"
+        style={{ width: 100, height: 100 }}
+        items={[
+          <Typography.Text> screen 1</Typography.Text>,
+          <Typography.Text> screen 2</Typography.Text>,
+        ]}
+      />
+    );
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+    expect(wrapper.queryAllByText('screen 1')).toHaveLength(1);
+    expect(wrapper.queryAllByText('screen 2')).toHaveLength(1);
+    expect(wrapper.queryAllByTestId('pageControl')).toHaveLength(1);
+  });
+
+  describe('autoPlay', () => {
+    it('should call scrollToIndex 1', () => {
+      jest.useFakeTimers();
+      const carouselRef = React.createRef<
+        CardCarouselHandles & {
+          getFlatListRef: () => FlatList;
+        }
+      >();
+
+      renderWithTheme(
+        <CardCarousel
+          ref={carouselRef}
+          autoPlay
+          autoPlayInterval={3000}
+          items={[
+            <Typography.Text> screen 1</Typography.Text>,
+            <Typography.Text> screen 2</Typography.Text>,
+          ]}
+        />
+      );
+      const flatListRef = carouselRef.current!.getFlatListRef()!;
+      const snapToIndexSpy = jest.spyOn(flatListRef, 'scrollToIndex');
+      jest.advanceTimersByTime(3000);
+      expect(snapToIndexSpy).toHaveBeenCalledWith({
+        animated: true,
+        index: 1,
+        viewPosition: 0.5,
+      });
+
+      jest.useRealTimers();
+    });
+  });
+
+  describe('hidePageControl', () => {
+    const wrapper = renderWithTheme(
+      <CardCarousel
+        style={{ width: 100, height: 100 }}
+        hidePageControl
+        items={[
+          <Typography.Text> screen 1</Typography.Text>,
+          <Typography.Text> screen 2</Typography.Text>,
+        ]}
+      />
+    );
+    expect(wrapper.queryAllByTestId('pageControl')).toHaveLength(0);
+  });
+
+  describe('snapToIndex', () => {
+    it('should render correctly', () => {
+      const carouselRef = React.createRef<
+        CardCarouselHandles & {
+          getFlatListRef: () => FlatList;
+        }
+      >();
+
+      renderWithTheme(
+        <CardCarousel
+          ref={carouselRef}
+          items={[
+            <Typography.Text> screen 1</Typography.Text>,
+            <Typography.Text> screen 2</Typography.Text>,
+            <Typography.Text> screen 3</Typography.Text>,
+          ]}
+        />
+      );
+
+      const flatListRef = carouselRef.current!.getFlatListRef()!;
+      const snapToIndexSpy = jest.spyOn(flatListRef, 'scrollToIndex');
+      carouselRef.current?.snapToIndex(2);
+      waitFor(() => expect(snapToIndexSpy).toHaveBeenCalled());
+
+      expect(snapToIndexSpy).toHaveBeenCalledWith({
+        animated: true,
+        index: 2,
+        viewPosition: 0.5,
+      });
+    });
+  });
+});

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import {
+  StyledCard,
+  StyledItemWrapper,
+  StyledPageControl,
+  StyledWrapper,
+} from '../StyledCardCarousel';
+
+describe('StyledPageControl', () => {
+  it('should render correctly', () => {
+    const { toJSON } = renderWithTheme(
+      <StyledPageControl numberOfPages={3} currentPage={1} />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('StyledWrapper', () => {
+  it('should render correctly', () => {
+    const { toJSON } = renderWithTheme(<StyledWrapper />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('StyledCard', () => {
+  it('should render correctly', () => {
+    const { toJSON } = renderWithTheme(<StyledCard />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('StyledItemWrapper', () => {
+  it('should render correctly', () => {
+    const { toJSON } = renderWithTheme(<StyledItemWrapper />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,289 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CardCarousel should render correctly 1`] = `
+<View
+  style={
+    Array [
+      Object {},
+      Object {
+        "height": 100,
+        "width": 100,
+      },
+    ]
+  }
+  testID="cardCarousel"
+>
+  <RCTScrollView
+    bounces={false}
+    contentContainerStyle={
+      Object {
+        "paddingHorizontal": 24,
+      }
+    }
+    data={
+      Array [
+        <Text>
+           screen 1
+        </Text>,
+        <Text>
+           screen 2
+        </Text>,
+      ]
+    }
+    decelerationRate="fast"
+    getItem={[Function]}
+    getItemCount={[Function]}
+    getItemLayout={[Function]}
+    horizontal={true}
+    keyExtractor={[Function]}
+    onContentSizeChange={[Function]}
+    onLayout={[Function]}
+    onMomentumScrollBegin={[Function]}
+    onMomentumScrollEnd={[Function]}
+    onScroll={[Function]}
+    onScrollBeginDrag={[Function]}
+    onScrollEndDrag={[Function]}
+    onViewableItemsChanged={[Function]}
+    pagingEnabled={true}
+    removeClippedSubviews={false}
+    renderItem={[Function]}
+    renderToHardwareTextureAndroid={true}
+    scrollEventThrottle={32}
+    showsHorizontalScrollIndicator={false}
+    snapToAlignment="center"
+    snapToInterval={8}
+    stickyHeaderIndices={Array []}
+    viewabilityConfig={
+      Object {
+        "itemVisiblePercentThreshold": 80,
+      }
+    }
+    viewabilityConfigCallbackPairs={
+      Array [
+        Object {
+          "onViewableItemsChanged": [Function],
+          "viewabilityConfig": Object {
+            "itemVisiblePercentThreshold": 80,
+          },
+        },
+      ]
+    }
+  >
+    <View>
+      <View
+        style={
+          Array [
+            Object {
+              "flexDirection": "row",
+            },
+            null,
+          ]
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "padding": 8,
+              },
+              Object {
+                "width": 0,
+              },
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "borderRadius": 8,
+                  "elevation": 4,
+                  "flex": 1,
+                  "shadowColor": "#001f23",
+                  "shadowOffset": Object {
+                    "height": 2,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.12,
+                  "shadowRadius": 8,
+                },
+                undefined,
+              ]
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "borderRadius": 12,
+                    "overflow": "hidden",
+                  },
+                  Array [
+                    Object {
+                      "borderRadius": 8,
+                      "flex": 1,
+                      "overflow": "hidden",
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+            >
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 14,
+                      "letterSpacing": 0.42,
+                      "lineHeight": 22,
+                    },
+                    undefined,
+                  ]
+                }
+                themeFontSize="medium"
+                themeFontWeight="regular"
+                themeIntent="body"
+                themeTypeface="neutral"
+              >
+                 screen 1
+              </Text>
+            </View>
+          </View>
+        </View>
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "flexDirection": "row",
+            },
+            null,
+          ]
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "padding": 8,
+              },
+              Object {
+                "width": 0,
+              },
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "borderRadius": 8,
+                  "elevation": 4,
+                  "flex": 1,
+                  "shadowColor": "#001f23",
+                  "shadowOffset": Object {
+                    "height": 2,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.12,
+                  "shadowRadius": 8,
+                },
+                undefined,
+              ]
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "borderRadius": 12,
+                    "overflow": "hidden",
+                  },
+                  Array [
+                    Object {
+                      "borderRadius": 8,
+                      "flex": 1,
+                      "overflow": "hidden",
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+            >
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 14,
+                      "letterSpacing": 0.42,
+                      "lineHeight": 22,
+                    },
+                    undefined,
+                  ]
+                }
+                themeFontSize="medium"
+                themeFontWeight="regular"
+                themeIntent="body"
+                themeTypeface="neutral"
+              >
+                 screen 2
+              </Text>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  </RCTScrollView>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+        },
+        Array [
+          Object {
+            "alignSelf": "center",
+            "marginTop": 16,
+          },
+          undefined,
+        ],
+      ]
+    }
+    testID="pageControl"
+  >
+    <View
+      collapsable={false}
+      style={
+        Object {
+          "backgroundColor": "#401960",
+          "borderRadius": 999,
+          "height": 8,
+          "marginHorizontal": 8,
+          "opacity": 1,
+          "width": 24,
+        }
+      }
+      testID="page-control-indicator0"
+    />
+    <View
+      collapsable={false}
+      style={
+        Object {
+          "backgroundColor": "#401960",
+          "borderRadius": 999,
+          "height": 8,
+          "marginHorizontal": 8,
+          "opacity": 0.5,
+          "width": 8,
+        }
+      }
+      testID="page-control-indicator1"
+    />
+  </View>
+</View>
+`;