@codeleap/mobile 3.15.8 → 3.16.0

package/package.json

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

package/src/components/Pager/index.tsx

@@ -1,7 +1,7 @@
 import {
-  AnyFunction,
   ComponentVariants,
   onUpdate,
+  PropsOf,
   TypeGuards,
   useDefaultComponentStyle,
   useWarning,
@@ -16,6 +16,7 @@ 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'
@@ -28,9 +29,8 @@ export type PageProps = {
   page: number
   index: number
   isPrevious: boolean
-}
 
-type ScrollEvent = NativeSyntheticEvent<NativeScrollEvent>
+}
 
 export type PagerProps = React.PropsWithChildren<{
   variants?: ComponentVariants<typeof PagerPresets>['variants']
@@ -43,14 +43,9 @@ export type PagerProps = React.PropsWithChildren<{
   renderPageWrapper?: React.FC<PageProps>
   pageWrapperProps?: any
   width?: number
-  onScroll?: (event: ScrollEvent, args: { isLeft: boolean; isRight: boolean; x: number; }) => void
+  onScroll: ScrollProps['onScroll']
   /** If TRUE render page, nextPage and prevPage only */
   windowing?: boolean
-  scrollRightEnabled?: boolean
-  scrollLeftEnabled?: boolean
-  scrollDirectionThrottle?: number
-  onSwipeLastPage?: (event: ScrollEvent) => void
-  waitEventDispatchTimeout?: number
 } & ScrollViewProps>
 
 const defaultProps: Partial<PagerProps> = {
@@ -59,12 +54,8 @@ const defaultProps: Partial<PagerProps> = {
   page: 0,
   returnEarly: true,
   windowing: false,
-  keyboardShouldPersistTaps: 'handled',
   scrollEnabled: true,
-  scrollRightEnabled: true,
-  scrollLeftEnabled: true,
-  scrollDirectionThrottle: 650,
-  waitEventDispatchTimeout: 250,
+  keyboardShouldPersistTaps: 'handled',
 }
 
 export const Pager = (pagerProps: PagerProps) => {
@@ -81,12 +72,6 @@ export const Pager = (pagerProps: PagerProps) => {
     windowing = false,
     setPage,
     scrollEnabled = true,
-    scrollLeftEnabled,
-    scrollRightEnabled,
-    onScroll,
-    scrollDirectionThrottle,
-    onSwipeLastPage,
-    waitEventDispatchTimeout,
   } = {
     ...defaultProps,
     ...pagerProps,
@@ -95,10 +80,6 @@ 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 waitEventDispatch = useRef(false)
 
   const variantStyles = useDefaultComponentStyle<'u:Pager', typeof PagerPresets>(
     'u:Pager',
@@ -116,6 +97,7 @@ export const Pager = (pagerProps: PagerProps) => {
 
   if (!validWidth) {
     width = windowWidth
+
   }
 
   useWarning(
@@ -130,62 +112,18 @@ export const Pager = (pagerProps: PagerProps) => {
 
   const WrapperComponent = renderPageWrapper || View
 
-  const hasScrollDirectionDisabled = !scrollLeftEnabled || !scrollRightEnabled
-
-  const handleScrollEnd = useCallback((event: ScrollEvent) => {
-    if (waitEventDispatch.current === true) return null
-
-    waitEventDispatch.current = true
-    
-    const x = event?.nativeEvent.contentOffset.x
-    const toPage = Math.floor(((Math.round(x)) / Math.round(width)))
-
-    const length = childArr.length - 1
-
-    if (toPage >= length  && TypeGuards.isFunction(onSwipeLastPage) && page >= length) {
-      onSwipeLastPage?.(event)
-    } else if (toPage !== page && toPage <= length) {
-      setPage(toPage)
-      setPositionX(toPage * width)
-    }
-
-    setTimeout(() => {
-      waitEventDispatch.current = false
-    }, waitEventDispatchTimeout)
-  }, [childArr, page, setPage, waitEventDispatch.current])
-
-  const handleScroll = (event: ScrollEvent) => {
-    const scrollX = event?.nativeEvent?.contentOffset?.x
+  const handleScrollEnd = useCallback(
+    ({ nativeEvent }: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const x = nativeEvent.contentOffset.x
+      const toPage = Math.ceil(x / width)
 
-    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)
-        })
+      if (toPage !== page && toPage <= childArr.length - 1 && !!scrollEnabled) {
+        setPage(toPage)
+        setPositionX(toPage * width)
       }
-    }
-
-    setScrollPositionX(scrollX)
-  }
+    },
+    [childArr, page, setPage],
+  )
 
   onUpdate(() => {
     const x = width * page
@@ -204,12 +142,12 @@ export const Pager = (pagerProps: PagerProps) => {
       horizontal
       pagingEnabled
       onMomentumScrollEnd={handleScrollEnd}
-      scrollEventThrottle={hasScrollDirectionDisabled ? 2000 : 300}
+      scrollEventThrottle={300}
       showsHorizontalScrollIndicator={false}
       style={[variantStyles.wrapper, style]}
       {...pagerProps}
-      onScroll={handleScroll}
-      scrollEnabled={childArr.length > 1 && scrollEnabled && _scrollEnabled}
+      scrollEnabled={childArr.length > 1 && scrollEnabled}
+
     >
       {childArr.map((child: PagerProps['children'][number], index) => {