diff options
Diffstat (limited to 'src/view/com')
-rw-r--r-- | src/view/com/pager/Pager.tsx | 28 | ||||
-rw-r--r-- | src/view/com/pager/Pager.web.tsx | 22 |
2 files changed, 37 insertions, 13 deletions
diff --git a/src/view/com/pager/Pager.tsx b/src/view/com/pager/Pager.tsx index 06ec2e450..26070fb88 100644 --- a/src/view/com/pager/Pager.tsx +++ b/src/view/com/pager/Pager.tsx @@ -1,17 +1,22 @@ import React, {forwardRef} from 'react' import {Animated, View} from 'react-native' import PagerView, { - PagerViewOnPageSelectedEvent, PagerViewOnPageScrollEvent, + PagerViewOnPageSelectedEvent, PageScrollStateChangedNativeEvent, } from 'react-native-pager-view' + +import {LogEvents} from '#/lib/statsig/events' import {s} from 'lib/styles' export type PageSelectedEvent = PagerViewOnPageSelectedEvent const AnimatedPagerView = Animated.createAnimatedComponent(PagerView) export interface PagerRef { - setPage: (index: number) => void + setPage: ( + index: number, + reason: LogEvents['home:feedDisplayed']['reason'], + ) => void } export interface RenderTabBarFnProps { @@ -25,7 +30,10 @@ interface Props { initialPage?: number renderTabBar: RenderTabBarFn onPageSelected?: (index: number) => void - onPageSelecting?: (index: number) => void + onPageSelecting?: ( + index: number, + reason: LogEvents['home:feedDisplayed']['reason'], + ) => void onPageScrollStateChanged?: ( scrollState: 'idle' | 'dragging' | 'settling', ) => void @@ -51,7 +59,13 @@ export const Pager = forwardRef<PagerRef, React.PropsWithChildren<Props>>( const pagerView = React.useRef<PagerView>(null) React.useImperativeHandle(ref, () => ({ - setPage: (index: number) => pagerView.current?.setPage(index), + setPage: ( + index: number, + reason: LogEvents['home:feedDisplayed']['reason'], + ) => { + pagerView.current?.setPage(index) + onPageSelecting?.(index, reason) + }, })) const onPageSelectedInner = React.useCallback( @@ -79,14 +93,14 @@ export const Pager = forwardRef<PagerRef, React.PropsWithChildren<Props>>( // -prf if (scrollState.current === 'settling') { if (lastDirection.current === -1 && offset < lastOffset.current) { - onPageSelecting?.(position) + onPageSelecting?.(position, 'pager-swipe') setSelectedPage(position) lastDirection.current = 0 } else if ( lastDirection.current === 1 && offset > lastOffset.current ) { - onPageSelecting?.(position + 1) + onPageSelecting?.(position + 1, 'pager-swipe') setSelectedPage(position + 1) lastDirection.current = 0 } @@ -113,7 +127,7 @@ export const Pager = forwardRef<PagerRef, React.PropsWithChildren<Props>>( const onTabBarSelect = React.useCallback( (index: number) => { pagerView.current?.setPage(index) - onPageSelecting?.(index) + onPageSelecting?.(index, 'tabbar-click') }, [pagerView, onPageSelecting], ) diff --git a/src/view/com/pager/Pager.web.tsx b/src/view/com/pager/Pager.web.tsx index 42982ef7f..abba12b2c 100644 --- a/src/view/com/pager/Pager.web.tsx +++ b/src/view/com/pager/Pager.web.tsx @@ -1,6 +1,8 @@ import React from 'react' -import {flushSync} from 'react-dom' import {View} from 'react-native' +import {flushSync} from 'react-dom' + +import {LogEvents} from '#/lib/statsig/events' import {s} from 'lib/styles' export interface RenderTabBarFnProps { @@ -14,7 +16,10 @@ interface Props { initialPage?: number renderTabBar: RenderTabBarFn onPageSelected?: (index: number) => void - onPageSelecting?: (index: number) => void + onPageSelecting?: ( + index: number, + reason: LogEvents['home:feedDisplayed']['reason'], + ) => void } export const Pager = React.forwardRef(function PagerImpl( { @@ -31,11 +36,16 @@ export const Pager = React.forwardRef(function PagerImpl( const anchorRef = React.useRef(null) React.useImperativeHandle(ref, () => ({ - setPage: (index: number) => onTabBarSelect(index), + setPage: ( + index: number, + reason: LogEvents['home:feedDisplayed']['reason'], + ) => { + onTabBarSelect(index, reason) + }, })) const onTabBarSelect = React.useCallback( - (index: number) => { + (index: number, reason: LogEvents['home:feedDisplayed']['reason']) => { const scrollY = window.scrollY // We want to determine if the tabbar is already "sticking" at the top (in which // case we should preserve and restore scroll), or if it is somewhere below in the @@ -54,7 +64,7 @@ export const Pager = React.forwardRef(function PagerImpl( flushSync(() => { setSelectedPage(index) onPageSelected?.(index) - onPageSelecting?.(index) + onPageSelecting?.(index, reason) }) if (isSticking) { const restoredScrollY = scrollYs.current[index] @@ -73,7 +83,7 @@ export const Pager = React.forwardRef(function PagerImpl( {renderTabBar({ selectedPage, tabBarAnchor: <View ref={anchorRef} />, - onSelect: onTabBarSelect, + onSelect: e => onTabBarSelect(e, 'tabbar-click'), })} {React.Children.map(children, (child, i) => ( <View style={selectedPage === i ? s.flex1 : s.hidden} key={`page-${i}`}> |