Add vertical scroll to Carousel component (#1175)

* Add vertical scroll to Carousel component

* cr fixes

Co-authored-by: Ethan Sharabi <[email protected]>

Author: kochavi-daniel

demo/src/index.js

@@ -34,6 +34,9 @@ module.exports = {
       get CarouselScreen() {
         return require('./screens/componentScreens/CarouselScreen').default;
       },
+      get CarouselVerticalScreen() {
+        return require('./screens/componentScreens/CarouselVerticalScreen').default;
+      },
       get CheckboxScreen() {
         return require('./screens/componentScreens/CheckboxScreen').default;
       },

demo/src/screens/MenuStructure.js

@@ -86,6 +86,7 @@ export const navigationData = {
     title: 'Layouts & Templates',
     screens: [
       {title: 'Carousel', tags: 'carousel', screen: 'unicorn.components.CarouselScreen'},
+      {title: 'Carousel (Vertical)', tags: 'carousel', screen: 'unicorn.components.CarouselVerticalScreen'},
       {title: 'LoadingScreen', tags: 'loading screen', screen: 'unicorn.screens.LoadingScreen'},
       {title: 'Modal', tags: 'modal topbar screen', screen: 'unicorn.screens.ModalScreen'},
       {title: 'StateScreen', tags: 'empty state screen', screen: 'unicorn.screens.EmptyStateScreen'},

demo/src/screens/componentScreens/CarouselVerticalScreen.tsx

@@ -0,0 +1,109 @@
+import {Carousel, Constants, Text, View, Colors} from 'react-native-ui-lib';
+import React, {Component} from 'react';
+import _ from 'lodash';
+import {StyleSheet} from 'react-native';
+import {
+  renderBooleanOption,
+  renderSliderOption
+} from '../ExampleScreenPresenter';
+
+interface Props {}
+
+interface State {
+  numberOfPagesShown: number;
+  autoplay: boolean;
+}
+
+const BACKGROUND_COLORS = [
+  Colors.red50,
+  Colors.yellow20,
+  Colors.purple50,
+  Colors.green50,
+  Colors.cyan50,
+  Colors.purple20,
+  Colors.blue60,
+  Colors.red10,
+  Colors.green20,
+  Colors.purple60
+];
+
+const pageHeight = Constants.windowHeight / 2;
+
+class CarouselVerticalScreen extends Component<Props, State> {
+  carousel = React.createRef<typeof Carousel>();
+
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      numberOfPagesShown: 5,
+      autoplay: false
+    };
+  }
+
+  render() {
+    const {numberOfPagesShown, autoplay} = this.state
+    return (
+      <View flex paddingT-20>
+        <View marginH-20 marginB-20>
+          {renderBooleanOption.call(this, 'autoplay', 'autoplay')}
+          {renderSliderOption.call(
+            this,
+            'Number of pages shown',
+            'numberOfPagesShown',
+            {
+              min: 3,
+              max: 10,
+              step: 1,
+              initial: 5
+            }
+          )}
+        </View>
+        <Carousel
+          key={'carousel'}
+          ref={this.carousel}
+          autoplay={autoplay}
+          pageWidth={Constants.windowWidth}
+          pageHeight={pageHeight}
+          initialPage={0}
+          containerStyle={{height: pageHeight}}
+          allowAccessibleLayout
+          horizontal={false}
+        >
+          {_.map([...Array(numberOfPagesShown)], (_, index) => (
+            <Page
+              style={{backgroundColor: BACKGROUND_COLORS[index]}}
+              key={index}
+            >
+              <Text style={styles.pageText}>{index}</Text>
+            </Page>
+          ))}
+        </Carousel>
+      </View>
+    );
+  }
+}
+
+// @ts-ignore
+const Page = ({children, style, ...others}) => {
+  return (
+    <View center {...others} style={[styles.page, style]}>
+      {children}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {},
+  page: {
+    flex: 1,
+    height: pageHeight,
+    width: Constants.windowWidth
+  },
+  pageText: {
+    fontSize: 40,
+    color: 'white'
+  }
+});
+
+export default CarouselVerticalScreen

demo/src/screens/componentScreens/index.js

@@ -10,6 +10,7 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.CardsScreen', () => require('./CardsScreen').default);
   registrar('unicorn.animations.CardScannerScreen', () => require('../componentScreens/CardScannerScreen').default);
   registrar('unicorn.components.CarouselScreen', () => require('./CarouselScreen').default);
+  registrar('unicorn.components.CarouselVerticalScreen', () => require('./CarouselVerticalScreen').default);
   registrar('unicorn.components.CheckboxScreen', () => require('./CheckboxScreen').default);
   registrar('unicorn.components.ChipScreen', () => require('./ChipScreen').default);
   registrar('unicorn.components.ConnectionStatusBar', () => require('./ConnectionStatusBarScreen').default);

generatedTypes/components/carousel/CarouselPresenter.d.ts

@@ -1,5 +1,8 @@
 import { CarouselProps, CarouselState } from './types';
 export declare function getChildrenLength(props: CarouselProps): number;
-export declare function calcOffset(props: CarouselProps, state: Omit<CarouselState, 'initialOffset' | 'prevProps'>): number;
-export declare function calcPageIndex(offset: number, props: CarouselProps, pageWidth: number): number;
+export declare function calcOffset(props: CarouselProps, state: Omit<CarouselState, 'initialOffset' | 'prevProps'>): {
+    x: number;
+    y: number;
+};
+export declare function calcPageIndex(offset: number, props: CarouselProps, pageSize: number): number;
 export declare function isOutOfBounds(offset: number, props: CarouselProps, pageWidth: number): boolean;

generatedTypes/components/carousel/index.d.ts

@@ -24,6 +24,7 @@ declare class Carousel extends Component<CarouselProps, CarouselState> {
         pageWidth: number;
         initialOffset: {
             x: number;
+            y: number;
         };
         prevProps: CarouselProps;
     } | {
@@ -47,7 +48,7 @@ declare class Carousel extends Component<CarouselProps, CarouselState> {
     getSnapToOffsets: () => number[] | undefined;
     shouldUsePageWidth(): number | false | undefined;
     shouldEnablePagination(): boolean | undefined;
-    onContainerLayout: ({ nativeEvent: { layout: { width: containerWidth } } }: LayoutChangeEvent) => void;
+    onContainerLayout: ({ nativeEvent: { layout: { width: containerWidth, height: containerHeight } } }: LayoutChangeEvent) => void;
     shouldAllowAccessibilityLayout(): boolean | undefined;
     onContentSizeChange: () => void;
     onMomentumScrollEnd: () => void;

generatedTypes/components/carousel/types.d.ts

@@ -13,6 +13,10 @@ export interface CarouselProps {
      * the page width (all pages should have the same width). Does not work if passing 'loop' prop
      */
     pageWidth?: number;
+    /**
+     * the page height (all pages should have the same height).
+     */
+    pageHeight?: number;
     /**
      * the spacing between the items
      */
@@ -27,7 +31,7 @@ export interface CarouselProps {
      */
     containerPaddingVertical?: number;
     /**
-     * if true, will have infinite scroll
+     * if true, will have infinite scroll (do not turn on for vertical scrolling)
      */
     loop?: boolean;
     /**
@@ -78,12 +82,18 @@ export interface CarouselProps {
      * the amount of ms to wait before switching to the next page, in case autoplay is on
      */
     autoplayInterval?: number;
+    /**
+     * When true the scroll view's children are arranged horizontally in a row
+     * instead of vertically in a column. The default value is true.
+     */
+    horizontal?: boolean | null;
 }
 export interface CarouselState {
     containerWidth?: number;
     currentPage: number;
     currentStandingPage?: number;
     pageWidth: number;
+    pageHeight: number;
     initialOffset: PointPropType;
     prevProps: CarouselProps;
 }

src/components/carousel/CarouselPresenter.ts

@@ -7,19 +7,24 @@ export function getChildrenLength(props: CarouselProps): number {
 }
 
 export function calcOffset(props: CarouselProps, state: Omit<CarouselState, 'initialOffset' | 'prevProps'>) {
-  const {currentPage, pageWidth} = state;
+  const {currentPage, pageWidth, pageHeight} = state;
   const {loop, containerMarginHorizontal = 0} = props;
   const actualCurrentPage = loop ? currentPage + 1 : currentPage;
   const nonLoopAdjustment = !loop && currentPage > 0 ? containerMarginHorizontal : 0;
-  const offset = pageWidth * actualCurrentPage - nonLoopAdjustment;
+  const pageSize = props.horizontal ? pageWidth : pageHeight;
+  const offset = pageSize * actualCurrentPage - nonLoopAdjustment;
+  const offsetXY = {
+    x: props.horizontal ? offset : 0,
+    y: props.horizontal ? 0 : offset
+  };
 
-  return offset;
+  return offsetXY;
 }
 
-export function calcPageIndex(offset: number, props: CarouselProps, pageWidth: number) {
+export function calcPageIndex(offset: number, props: CarouselProps, pageSize: number) {
   const pagesCount = getChildrenLength(props);
   const {loop} = props;
-  const pageIndexIncludingClonedPages = Math.round(offset / pageWidth);
+  const pageIndexIncludingClonedPages = Math.round(offset / pageSize);
 
   let actualPageIndex;
   if (loop) {

src/components/carousel/__tests__/CarouselPresenter.spec.js

@@ -9,15 +9,18 @@ describe('Carousel presenter', () => {
 
   describe('calcOffset', () => {
     it('should calcOffset (default mode)', () => {
-      expect(uut.calcOffset({children: [{}, {}, {}]}, {pageWidth: 120, currentPage: 0})).toBe(0);
-      expect(uut.calcOffset({children: [{}, {}, {}]}, {pageWidth: 120, currentPage: 1})).toBe(120);
-      expect(uut.calcOffset({children: [{}, {}, {}]}, {pageWidth: 120, currentPage: 2})).toBe(240);
+      expect(uut.calcOffset({children: [{}, {}, {}], horizontal: true}, {pageWidth: 120, pageHeight: 100, currentPage: 0})).toStrictEqual({x: 0, y: 0});
+      expect(uut.calcOffset({children: [{}, {}, {}], horizontal: true}, {pageWidth: 120, pageHeight: 100, currentPage: 1})).toStrictEqual({x: 120, y: 0});
+      expect(uut.calcOffset({children: [{}, {}, {}], horizontal: true}, {pageWidth: 120, pageHeight: 100, currentPage: 2})).toStrictEqual({x: 240, y: 0});
+      expect(uut.calcOffset({children: [{}, {}, {}], horizontal: false}, {pageWidth: 80, pageHeight: 150, currentPage: 0})).toStrictEqual({x: 0, y: 0});
+      expect(uut.calcOffset({children: [{}, {}, {}], horizontal: false}, {pageWidth: 80, pageHeight: 150, currentPage: 1})).toStrictEqual({x: 0, y: 150});
+      expect(uut.calcOffset({children: [{}, {}, {}], horizontal: false}, {pageWidth: 80, pageHeight: 150, currentPage: 2})).toStrictEqual({x: 0, y: 300});
     });
 
     it('should calcOffset (loop mode)', () => {
-      expect(uut.calcOffset({loop: true, children: [{}, {}, {}]}, {pageWidth: 120, currentPage: 0})).toBe(120);
-      expect(uut.calcOffset({loop: true, children: [{}, {}, {}]}, {pageWidth: 120, currentPage: 1})).toBe(240);
-      expect(uut.calcOffset({loop: true, children: [{}, {}, {}]}, {pageWidth: 120, currentPage: 2})).toBe(360);
+      expect(uut.calcOffset({loop: true, children: [{}, {}, {}], horizontal: true}, {pageWidth: 120, pageHeight: 100, currentPage: 0})).toStrictEqual({x: 120, y: 0});
+      expect(uut.calcOffset({loop: true, children: [{}, {}, {}], horizontal: true}, {pageWidth: 120, pageHeight: 100, currentPage: 1})).toStrictEqual({x: 240, y: 0});
+      expect(uut.calcOffset({loop: true, children: [{}, {}, {}], horizontal: true}, {pageWidth: 120, pageHeight: 100, currentPage: 2})).toStrictEqual({x: 360, y: 0});
     });
   });