dean-added-auto-scroll-classifier

demo/src/screens/componentScreens/CarouselScreen.tsx

@@ -1,19 +1,8 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
 import {StyleSheet, ScrollView} from 'react-native';
-import {
-  Constants,
-  Spacings,
-  View,
-  Text,
-  Carousel,
-  Image,
-  Colors
-} from 'react-native-ui-lib';
-import {
-  renderBooleanOption,
-  renderSliderOption
-} from '../ExampleScreenPresenter';
+import {Constants, Spacings, View, Text, Carousel, Image, Colors} from 'react-native-ui-lib';
+import {renderBooleanOption, renderSliderOption} from '../ExampleScreenPresenter';
 
 const INITIAL_PAGE = 2;
 const IMAGES = [
@@ -57,7 +46,7 @@ class CarouselScreen extends Component<Props, State> {
       limitShownPages: false,
       numberOfPagesShown: 7,
       currentPage: INITIAL_PAGE,
-      autoplay: false
+      autoplay: true
     };
   }
 
@@ -82,7 +71,7 @@ class CarouselScreen extends Component<Props, State> {
     return Constants.windowWidth - Spacings.s5 * 2;
   };
 
-  onChangePage = (currentPage: number) => {
+  onChangePage = (currentPage: number, _: any) => {
     this.setState({currentPage});
   };
 
@@ -102,23 +91,14 @@ class CarouselScreen extends Component<Props, State> {
         </Text>
 
         <View marginH-20 marginB-20>
-          {renderBooleanOption.call(
-            this,
-            'Limit number of pages shown in page control',
-            'limitShownPages'
-          )}
+          {renderBooleanOption.call(this, 'Limit number of pages shown in page control', 'limitShownPages')}
           {renderBooleanOption.call(this, 'autoplay', 'autoplay')}
-          {renderSliderOption.call(
-            this,
-            'Number of pages shown',
-            'numberOfPagesShown',
-            {
-              min: 5,
-              max: 10,
-              step: 1,
-              initial: 7
-            }
-          )}
+          {renderSliderOption.call(this, 'Number of pages shown', 'numberOfPagesShown', {
+            min: 5,
+            max: 10,
+            step: 1,
+            initial: 7
+          })}
         </View>
 
         <Carousel
@@ -136,12 +116,10 @@ class CarouselScreen extends Component<Props, State> {
           pageControlProps={{onPagePress: this.onPagePress, limitShownPages}}
           // showCounter
           allowAccessibleLayout
+          loop
         >
           {_.map([...Array(numberOfPagesShown)], (item, index) => (
-            <Page
-              style={{backgroundColor: BACKGROUND_COLORS[index]}}
-              key={index}
-            >
+            <Page style={{backgroundColor: BACKGROUND_COLORS[index]}} key={index}>
               <Text margin-15>CARD {index}</Text>
             </Page>
           ))}

generatedTypes/src/components/carousel/CarouselPresenter.d.ts

@@ -1,5 +1,5 @@
-import { PropsWithChildren } from 'react';
-import { CarouselProps, CarouselState } from './types';
+import {PropsWithChildren} from 'react';
+import {CarouselProps, CarouselState} from './types';
 export declare function getChildrenLength(props: PropsWithChildren<CarouselProps>): number;
 export declare function calcOffset(props: CarouselProps, state: Omit<CarouselState, 'initialOffset' | 'prevProps'>): {
     x: number;

generatedTypes/src/components/carousel/index.d.ts

@@ -1,7 +1,7 @@
-import React, { Component, RefObject, ReactNode, Key } from 'react';
-import { ScrollView, LayoutChangeEvent, NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
-import { CarouselProps, CarouselState, PageControlPosition } from './types';
-export { CarouselProps, PageControlPosition };
+import React, {Component, RefObject, ReactNode, Key} from 'react';
+import {ScrollView, LayoutChangeEvent, NativeSyntheticEvent, NativeScrollEvent} from 'react-native';
+import {CarouselProps, CarouselState, PageControlPosition} from './types';
+export {CarouselProps, PageControlPosition};
 declare type DefaultProps = Partial<CarouselProps>;
 /**
  * @description: Carousel for scrolling pages horizontally
@@ -19,6 +19,7 @@ declare class Carousel extends Component<CarouselProps, CarouselState> {
     autoplayTimer?: ReturnType<typeof setTimeout>;
     orientationChange?: boolean;
     skippedInitialScroll?: boolean;
+    isAutoScrolled: boolean;
     constructor(props: CarouselProps);
     static getDerivedStateFromProps(nextProps: CarouselProps, prevState: CarouselState): {
         pageWidth: number;
@@ -48,7 +49,7 @@ declare class Carousel extends Component<CarouselProps, CarouselState> {
     getSnapToOffsets: () => number[] | undefined;
     shouldUsePageWidth(): number | false | undefined;
     shouldEnablePagination(): boolean | undefined;
-    onContainerLayout: ({ nativeEvent: { layout: { width: containerWidth, height: containerHeight } } }: LayoutChangeEvent) => void;
+    onContainerLayout: ({nativeEvent: {layout: {width: containerWidth, height: containerHeight}}}: LayoutChangeEvent) => void;
     shouldAllowAccessibilityLayout(): boolean | undefined;
     onContentSizeChange: () => void;
     onMomentumScrollEnd: () => void;
@@ -63,7 +64,7 @@ declare class Carousel extends Component<CarouselProps, CarouselState> {
     renderCarousel(): JSX.Element;
     render(): JSX.Element;
 }
-export { Carousel };
+export {Carousel};
 declare const _default: React.ComponentClass<CarouselProps & {
     useCustomTheme?: boolean | undefined;
 }, any> & Carousel & {

generatedTypes/src/components/carousel/types.d.ts

@@ -1,8 +1,8 @@
-import { ScrollViewProps, StyleProp, ViewStyle, NativeSyntheticEvent, NativeScrollEvent, PointPropType, Animated } from 'react-native';
-import { PageControlProps } from '../pageControl';
+import {ScrollViewProps, StyleProp, ViewStyle, NativeSyntheticEvent, NativeScrollEvent, PointPropType, Animated} from 'react-native';
+import {PageControlProps} from '../pageControl';
 export declare enum PageControlPosition {
-    OVER = "over",
-    UNDER = "under"
+    OVER = 'over',
+    UNDER = 'under'
 }
 export interface CarouselProps extends ScrollViewProps {
     /**
@@ -37,7 +37,7 @@ export interface CarouselProps extends ScrollViewProps {
     /**
      * callback for when page has changed
      */
-    onChangePage?: (newPageIndex: number, oldPageIndex: number) => void;
+    onChangePage?: (newPageIndex: number, oldPageIndex: number, info: {isAutoScrolled: boolean}) => void;
     /**
      * callback for onScroll event of the internal ScrollView
      */

src/components/carousel/index.tsx

@@ -1,6 +1,13 @@
 import _ from 'lodash';
 import React, {Component, RefObject, ReactNode, Key} from 'react';
-import {Animated, ScrollView, StyleSheet, LayoutChangeEvent, NativeSyntheticEvent, NativeScrollEvent} from 'react-native';
+import {
+  Animated,
+  ScrollView,
+  StyleSheet,
+  LayoutChangeEvent,
+  NativeSyntheticEvent,
+  NativeScrollEvent
+} from 'react-native';
 import {Constants} from '../../helpers';
 import {Colors} from '../../style';
 import {asBaseComponent} from '../../commons/new';
@@ -11,7 +18,7 @@ import * as presenter from './CarouselPresenter';
 import {CarouselProps, CarouselState, PageControlPosition} from './types';
 export {CarouselProps, PageControlPosition};
 
-type DefaultProps = Partial<CarouselProps>
+type DefaultProps = Partial<CarouselProps>;
 
 /**
  * @description: Carousel for scrolling pages horizontally
@@ -37,13 +44,14 @@ class Carousel extends Component<CarouselProps, CarouselState> {
   autoplayTimer?: ReturnType<typeof setTimeout>;
   orientationChange?: boolean;
   skippedInitialScroll?: boolean;
+  isAutoScrolled: boolean;
 
   constructor(props: CarouselProps) {
     super(props);
 
     const defaultPageWidth = props.loop || !props.pageWidth ? Constants.screenWidth : props.pageWidth;
     const pageHeight = props.pageHeight ?? Constants.screenHeight;
-
+    this.isAutoScrolled = false;
     this.state = {
       containerWidth: undefined,
       // @ts-ignore (defaultProps)
@@ -66,8 +74,10 @@ class Carousel extends Component<CarouselProps, CarouselState> {
     const {pageWidth, pageHeight} = prevProps;
     const {pageWidth: nextPageWidth, pageHeight: nextPageHeight} = nextProps;
 
-    if ((!_.isUndefined(nextPageWidth) && pageWidth !== nextPageWidth)
-      || (!_.isUndefined(nextPageHeight) && pageHeight !== nextPageHeight)) {
+    if (
+      (!_.isUndefined(nextPageWidth) && pageWidth !== nextPageWidth) ||
+      (!_.isUndefined(nextPageHeight) && pageHeight !== nextPageHeight)
+    ) {
       const pageWidth = nextPageWidth as number;
       const pageHeight = nextPageHeight as number;
 
@@ -167,6 +177,7 @@ class Carousel extends Component<CarouselProps, CarouselState> {
 
   startAutoPlay() {
     this.autoplayTimer = setInterval(() => {
+      this.isAutoScrolled = true;
       this.goToNextPage();
     }, this.props.autoplayInterval);
   }
@@ -218,7 +229,7 @@ class Carousel extends Component<CarouselProps, CarouselState> {
 
   shouldEnablePagination() {
     const {pagingEnabled, horizontal} = this.props;
-    return horizontal ? (pagingEnabled && !this.shouldUsePageWidth()) : true;
+    return horizontal ? pagingEnabled && !this.shouldUsePageWidth() : true;
   }
 
   onContainerLayout = ({
@@ -258,7 +269,8 @@ class Carousel extends Component<CarouselProps, CarouselState> {
     if (index < pagesCount) {
       this.setState({currentStandingPage: index});
       if (currentStandingPage !== index) {
-        this.props.onChangePage?.(index, currentStandingPage);
+        this.props.onChangePage?.(index, currentStandingPage, {isAutoScrolled: this.isAutoScrolled});
+        this.isAutoScrolled = false;
       }
     }
   };
@@ -320,16 +332,17 @@ class Carousel extends Component<CarouselProps, CarouselState> {
   };
 
   // @ts-ignore
-  onScrollEvent = Animated.event([{nativeEvent: {contentOffset: {y: this.props?.animatedScrollOffset?.y, x: this.props?.animatedScrollOffset?.x}}}], {
-    useNativeDriver: true,
-    listener: this.onScroll
-  });
+  onScrollEvent = Animated.event([{nativeEvent: {contentOffset: {y: this.props?.animatedScrollOffset?.y, x: this.props?.animatedScrollOffset?.x}}}],
+    {
+      useNativeDriver: true,
+      listener: this.onScroll
+    });
 
   renderChild = (child: ReactNode, key: Key): JSX.Element | undefined => {
     if (child) {
       const {pageWidth, pageHeight} = this.state;
       const {horizontal} = this.props;
-      const paddingLeft = horizontal ? this.shouldUsePageWidth() ? this.getItemSpacings(this.props) : undefined : 0;
+      const paddingLeft = horizontal ? (this.shouldUsePageWidth() ? this.getItemSpacings(this.props) : undefined) : 0;
       const index = Number(key);
       const length = presenter.getChildrenLength(this.props);
       const containerMarginHorizontal = this.getContainerMarginHorizontal();

src/components/carousel/types.tsx

@@ -40,7 +40,7 @@ export interface CarouselProps extends ScrollViewProps {
   /**
    * callback for when page has changed
    */
-  onChangePage?: (newPageIndex: number, oldPageIndex: number) => void;
+  onChangePage?: (newPageIndex: number, oldPageIndex: number, info: {isAutoScrolled: boolean}) => void;
   /**
    * callback for onScroll event of the internal ScrollView
    */
@@ -95,6 +95,7 @@ export interface CarouselProps extends ScrollViewProps {
    * Carousel scroll offset (pass new Animated.ValueXY())
    */
   animatedScrollOffset?: Animated.ValueXY;
+
 }
 
 export interface CarouselState {