@codeleap/mobile 3.15.2 → 3.15.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/mobile",
-  "version": "3.15.2",
+  "version": "3.15.3",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "repository": {

package/src/components/Pager/index.tsx

@@ -1,7 +1,6 @@
 import {
   ComponentVariants,
   onUpdate,
-  PropsOf,
   TypeGuards,
   useDefaultComponentStyle,
   useWarning,
@@ -16,7 +15,6 @@ import {
   StyleSheet,
 } from 'react-native'
 import { StylesOf } from '../../types/utility'
-import { ScrollProps } from '../Scroll'
 import { View } from '../View'
 import { PagerPresets, PagerComposition } from './styles'
 export * from './styles'
@@ -29,9 +27,10 @@ export type PageProps = {
   page: number
   index: number
   isPrevious: boolean
-
 }
 
+type ScrollEvent = NativeSyntheticEvent<NativeScrollEvent>
+
 export type PagerProps = React.PropsWithChildren<{
   variants?: ComponentVariants<typeof PagerPresets>['variants']
   styles?: StylesOf<PagerComposition>
@@ -43,9 +42,12 @@ export type PagerProps = React.PropsWithChildren<{
   renderPageWrapper?: React.FC<PageProps>
   pageWrapperProps?: any
   width?: number
-  onScroll: ScrollProps['onScroll']
+  onScroll?: (event: ScrollEvent, args: { isLeft: boolean; isRight: boolean; x: number; }) => void
   /** If TRUE render page, nextPage and prevPage only */
   windowing?: boolean
+  scrollRightEnabled?: boolean
+  scrollLeftEnabled?: boolean
+  scrollDirectionThrottle?: number
 } & ScrollViewProps>
 
 const defaultProps: Partial<PagerProps> = {
@@ -54,8 +56,11 @@ const defaultProps: Partial<PagerProps> = {
   page: 0,
   returnEarly: true,
   windowing: false,
-  scrollEnabled: true,
   keyboardShouldPersistTaps: 'handled',
+  scrollEnabled: true,
+  scrollRightEnabled: true,
+  scrollLeftEnabled: true,
+  scrollDirectionThrottle: 650
 }
 
 export const Pager = (pagerProps: PagerProps) => {
@@ -72,6 +77,10 @@ export const Pager = (pagerProps: PagerProps) => {
     windowing = false,
     setPage,
     scrollEnabled = true,
+    scrollLeftEnabled,
+    scrollRightEnabled,
+    onScroll,
+    scrollDirectionThrottle,
   } = {
     ...defaultProps,
     ...pagerProps,
@@ -80,6 +89,8 @@ export const Pager = (pagerProps: PagerProps) => {
   const childArr = React.Children.toArray(children)
   const scrollRef = useRef<ScrollView>(null)
   const [positionX, setPositionX] = React.useState(0)
+  const [scrollPositionX, setScrollPositionX] = React.useState(0)
+  const [_scrollEnabled, setScrollEnabled] = React.useState(true)
 
   const variantStyles = useDefaultComponentStyle<'u:Pager', typeof PagerPresets>(
     'u:Pager',
@@ -97,7 +108,6 @@ export const Pager = (pagerProps: PagerProps) => {
 
   if (!validWidth) {
     width = windowWidth
-
   }
 
   useWarning(
@@ -112,12 +122,14 @@ export const Pager = (pagerProps: PagerProps) => {
 
   const WrapperComponent = renderPageWrapper || View
 
+  const hasScrollDirectionDisabled = !scrollLeftEnabled || !scrollRightEnabled
+
   const handleScrollEnd = useCallback(
-    ({ nativeEvent }: NativeSyntheticEvent<NativeScrollEvent>) => {
+    ({ nativeEvent }: ScrollEvent) => {
       const x = nativeEvent.contentOffset.x
       const toPage = Math.ceil(x / width)
 
-      if (toPage !== page && toPage <= childArr.length - 1 && !!scrollEnabled) {
+      if (toPage !== page && toPage <= childArr.length - 1) {
         setPage(toPage)
         setPositionX(toPage * width)
       }
@@ -125,9 +137,42 @@ export const Pager = (pagerProps: PagerProps) => {
     [childArr, page, setPage],
   )
 
+  const handleScroll = (event: ScrollEvent) => {
+    const scrollX = event?.nativeEvent?.contentOffset?.x
+
+    if (!_scrollEnabled) {
+      setScrollPositionX(scrollX)
+      return null
+    }
+
+    const isRight = scrollX < scrollPositionX
+    const isLeft = scrollX > scrollPositionX
+
+    if (TypeGuards.isFunction(onScroll)) onScroll?.(event, { isLeft, isRight, x: scrollX })
+
+    if (hasScrollDirectionDisabled) {
+      if (isRight && !scrollRightEnabled || isLeft && !scrollLeftEnabled) {
+        setScrollEnabled(false)
+
+        setTimeout(() => {
+          scrollRef.current.scrollTo({
+            x: positionX,
+            animated: true,
+          })
+
+          setTimeout(() => {
+            setScrollEnabled(true)
+          }, scrollDirectionThrottle)
+        })
+      }
+    }
+
+    setScrollPositionX(scrollX)
+  }
+
   onUpdate(() => {
     const x = width * page
-    if (scrollRef.current && x !== positionX) {
+    if (scrollRef.current && x !== positionX && !hasScrollDirectionDisabled) {
       scrollRef.current.scrollTo({
         x,
         animated: true,
@@ -142,12 +187,12 @@ export const Pager = (pagerProps: PagerProps) => {
       horizontal
       pagingEnabled
       onMomentumScrollEnd={handleScrollEnd}
-      scrollEventThrottle={300}
+      scrollEventThrottle={hasScrollDirectionDisabled ? 2000 : 300}
       showsHorizontalScrollIndicator={false}
       style={[variantStyles.wrapper, style]}
       {...pagerProps}
-      scrollEnabled={childArr.length > 1 && scrollEnabled}
-
+      onScroll={handleScroll}
+      scrollEnabled={childArr.length > 1 && scrollEnabled && _scrollEnabled}
     >
       {childArr.map((child: PagerProps['children'][number], index) => {