dean-added-auto-scroll-classifier

Author: deanblinder

demo/src/screens/componentScreens/CarouselScreen.tsx

@@ -57,7 +57,7 @@ class CarouselScreen extends Component<Props, State> {
       limitShownPages: false,
       numberOfPagesShown: 7,
       currentPage: INITIAL_PAGE,
-      autoplay: false
+      autoplay: true
     };
   }
 
@@ -82,8 +82,9 @@ class CarouselScreen extends Component<Props, State> {
     return Constants.windowWidth - Spacings.s5 * 2;
   };
 
-  onChangePage = (currentPage: number) => {
+  onChangePage = (currentPage: number, _: any) => {
     this.setState({currentPage});
+
   };
 
   onPagePress = (index: number) => {
@@ -102,23 +103,19 @@ class CarouselScreen extends Component<Props, State> {
         </Text>
 
         <View marginH-20 marginB-20>
-          {renderBooleanOption.call(
-            this,
+          {renderBooleanOption.call(this,
             'Limit number of pages shown in page control',
-            'limitShownPages'
-          )}
+            'limitShownPages')}
           {renderBooleanOption.call(this, 'autoplay', 'autoplay')}
-          {renderSliderOption.call(
-            this,
+          {renderSliderOption.call(this,
             'Number of pages shown',
             'numberOfPagesShown',
             {
               min: 5,
               max: 10,
               step: 1,
               initial: 7
-            }
-          )}
+            })}
         </View>
 
         <Carousel
@@ -136,6 +133,7 @@ class CarouselScreen extends Component<Props, State> {
           pageControlProps={{onPagePress: this.onPagePress, limitShownPages}}
           // showCounter
           allowAccessibleLayout
+          loop
         >
           {_.map([...Array(numberOfPagesShown)], (item, index) => (
             <Page

generatedTypes/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/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
@@ -48,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, height: containerHeight } } }: LayoutChangeEvent) => void;
+    onContainerLayout: ({nativeEvent: {layout: {width: containerWidth, height: containerHeight}}}: LayoutChangeEvent) => void;
     shouldAllowAccessibilityLayout(): boolean | undefined;
     onContentSizeChange: () => void;
     onMomentumScrollEnd: () => void;
@@ -63,7 +63,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/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 {
     /**

src/components/carousel/index.tsx

@@ -37,13 +37,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)
@@ -167,8 +168,10 @@ class Carousel extends Component<CarouselProps, CarouselState> {
 
   startAutoPlay() {
     this.autoplayTimer = setInterval(() => {
+      this.isAutoScrolled = true;
       this.goToNextPage();
     }, this.props.autoplayInterval);
+    
   }
 
   stopAutoPlay() {
@@ -258,7 +261,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, this.isAutoScrolled);
+        this.isAutoScrolled = false;
       }
     }
   };
@@ -276,12 +280,13 @@ class Carousel extends Component<CarouselProps, CarouselState> {
     }
 
     this.goToPage(nextPageIndex, true);
-
+    
     // in case of a loop, after we advanced right to the cloned first page,
     // we return silently to the real first page
     if (loop && currentPage === pagesCount) {
       this.goToPage(0, false);
     }
+    
   }
 
   onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
@@ -425,7 +430,7 @@ class Carousel extends Component<CarouselProps, CarouselState> {
     const {containerStyle, children} = this.props;
 
     return (
-      <View style={containerStyle} onLayout={this.onContainerLayout}>
+      <View style={containerStyle} onLayout={this.onContainerLayout}>  
         <ScrollView
           ref={this.carousel}
           showsVerticalScrollIndicator={false}

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, 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 {
@@ -105,6 +106,7 @@ export interface CarouselState {
   pageHeight: number;
   initialOffset: PointPropType;
   prevProps: CarouselProps;
+  // isAutoScrolled:boolean //dean
 }
 
 // @ts-ignore