[Nicer Tabs] Fork TabBar, simplify Pager

src/lib/statsig/events.ts

@@ -80,12 +80,6 @@ export type LogEvents = {
     feedUrl: string
     feedType: string
     index: number
-    reason:
-      | 'focus'
-      | 'tabbar-click'
-      | 'pager-swipe'
-      | 'desktop-sidebar-click'
-      | 'starter-pack-initial-feed'
   }
   'feed:endReached': {
     feedUrl: string

src/view/com/pager/Pager.tsx

@@ -1,21 +1,16 @@
 import React, {forwardRef} from 'react'
 import {View} from 'react-native'
 import PagerView, {
-  PagerViewOnPageScrollEvent,
   PagerViewOnPageSelectedEvent,
   PageScrollStateChangedNativeEvent,
 } from 'react-native-pager-view'
 
-import {LogEvents} from '#/lib/statsig/events'
 import {atoms as a, native} from '#/alf'
 
 export type PageSelectedEvent = PagerViewOnPageSelectedEvent
 
 export interface PagerRef {
-  setPage: (
-    index: number,
-    reason: LogEvents['home:feedDisplayed']['reason'],
-  ) => void
+  setPage: (index: number) => void
 }
 
 export interface RenderTabBarFnProps {
@@ -29,10 +24,6 @@ interface Props {
   initialPage?: number
   renderTabBar: RenderTabBarFn
   onPageSelected?: (index: number) => void
-  onPageSelecting?: (
-    index: number,
-    reason: LogEvents['home:feedDisplayed']['reason'],
-  ) => void
   onPageScrollStateChanged?: (
     scrollState: 'idle' | 'dragging' | 'settling',
   ) => void
@@ -46,24 +37,16 @@ export const Pager = forwardRef<PagerRef, React.PropsWithChildren<Props>>(
       renderTabBar,
       onPageScrollStateChanged,
       onPageSelected,
-      onPageSelecting,
       testID,
     }: React.PropsWithChildren<Props>,
     ref,
   ) {
     const [selectedPage, setSelectedPage] = React.useState(0)
-    const lastOffset = React.useRef(0)
-    const lastDirection = React.useRef(0)
-    const scrollState = React.useRef('')
     const pagerView = React.useRef<PagerView>(null)
 
     React.useImperativeHandle(ref, () => ({
-      setPage: (
-        index: number,
-        reason: LogEvents['home:feedDisplayed']['reason'],
-      ) => {
+      setPage: (index: number) => {
         pagerView.current?.setPage(index)
-        onPageSelecting?.(index, reason)
       },
     }))
 
@@ -75,60 +58,18 @@ export const Pager = forwardRef<PagerRef, React.PropsWithChildren<Props>>(
       [setSelectedPage, onPageSelected],
     )
 
-    const onPageScroll = React.useCallback(
-      (e: PagerViewOnPageScrollEvent) => {
-        const {position, offset} = e.nativeEvent
-        if (offset === 0) {
-          // offset hits 0 in some awkward spots so we ignore it
-          return
-        }
-        // NOTE
-        // we want to call `onPageSelecting` as soon as the scroll-gesture
-        // enters the "settling" phase, which means the user has released it
-        // we can't infer directionality from the scroll information, so we
-        // track the offset changes. if the offset delta is consistent with
-        // the existing direction during the settling phase, we can say for
-        // certain where it's going and can fire
-        // -prf
-        if (scrollState.current === 'settling') {
-          if (lastDirection.current === -1 && offset < lastOffset.current) {
-            onPageSelecting?.(position, 'pager-swipe')
-            setSelectedPage(position)
-            lastDirection.current = 0
-          } else if (
-            lastDirection.current === 1 &&
-            offset > lastOffset.current
-          ) {
-            onPageSelecting?.(position + 1, 'pager-swipe')
-            setSelectedPage(position + 1)
-            lastDirection.current = 0
-          }
-        } else {
-          if (offset < lastOffset.current) {
-            lastDirection.current = -1
-          } else if (offset > lastOffset.current) {
-            lastDirection.current = 1
-          }
-        }
-        lastOffset.current = offset
-      },
-      [lastOffset, lastDirection, onPageSelecting],
-    )
-
     const handlePageScrollStateChanged = React.useCallback(
       (e: PageScrollStateChangedNativeEvent) => {
-        scrollState.current = e.nativeEvent.pageScrollState
         onPageScrollStateChanged?.(e.nativeEvent.pageScrollState)
       },
-      [scrollState, onPageScrollStateChanged],
+      [onPageScrollStateChanged],
     )
 
     const onTabBarSelect = React.useCallback(
       (index: number) => {
         pagerView.current?.setPage(index)
-        onPageSelecting?.(index, 'tabbar-click')
       },
-      [pagerView, onPageSelecting],
+      [pagerView],
     )
 
     return (
@@ -142,8 +83,7 @@ export const Pager = forwardRef<PagerRef, React.PropsWithChildren<Props>>(
           style={[a.flex_1]}
           initialPage={initialPage}
           onPageScrollStateChanged={handlePageScrollStateChanged}
-          onPageSelected={onPageSelectedInner}
-          onPageScroll={onPageScroll}>
+          onPageSelected={onPageSelectedInner}>
           {children}
         </PagerView>
       </View>

src/view/com/pager/Pager.web.tsx

@@ -2,7 +2,6 @@ import React from 'react'
 import {View} from 'react-native'
 import {flushSync} from 'react-dom'
 
-import {LogEvents} from '#/lib/statsig/events'
 import {s} from '#/lib/styles'
 
 export interface RenderTabBarFnProps {
@@ -16,18 +15,13 @@ interface Props {
   initialPage?: number
   renderTabBar: RenderTabBarFn
   onPageSelected?: (index: number) => void
-  onPageSelecting?: (
-    index: number,
-    reason: LogEvents['home:feedDisplayed']['reason'],
-  ) => void
 }
 export const Pager = React.forwardRef(function PagerImpl(
   {
     children,
     initialPage = 0,
     renderTabBar,
     onPageSelected,
-    onPageSelecting,
   }: React.PropsWithChildren<Props>,
   ref,
 ) {
@@ -36,16 +30,13 @@ export const Pager = React.forwardRef(function PagerImpl(
   const anchorRef = React.useRef(null)
 
   React.useImperativeHandle(ref, () => ({
-    setPage: (
-      index: number,
-      reason: LogEvents['home:feedDisplayed']['reason'],
-    ) => {
-      onTabBarSelect(index, reason)
+    setPage: (index: number) => {
+      onTabBarSelect(index)
     },
   }))
 
   const onTabBarSelect = React.useCallback(
-    (index: number, reason: LogEvents['home:feedDisplayed']['reason']) => {
+    (index: number) => {
       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
@@ -64,7 +55,6 @@ export const Pager = React.forwardRef(function PagerImpl(
       flushSync(() => {
         setSelectedPage(index)
         onPageSelected?.(index)
-        onPageSelecting?.(index, reason)
       })
       if (isSticking) {
         const restoredScrollY = scrollYs.current[index]
@@ -75,15 +65,15 @@ export const Pager = React.forwardRef(function PagerImpl(
         }
       }
     },
-    [selectedPage, setSelectedPage, onPageSelected, onPageSelecting],
+    [selectedPage, setSelectedPage, onPageSelected],
   )
 
   return (
     <View style={s.hContentRegion}>
       {renderTabBar({
         selectedPage,
         tabBarAnchor: <View ref={anchorRef} />,
-        onSelect: e => onTabBarSelect(e, 'tabbar-click'),
+        onSelect: e => onTabBarSelect(e),
       })}
       {React.Children.map(children, (child, i) => (
         <View style={selectedPage === i ? s.flex1 : s.hidden} key={`page-${i}`}>

src/view/com/pager/PagerWithHeader.tsx

@@ -182,17 +182,12 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
       [onPageSelected, setCurrentPage],
     )
 
-    const onPageSelecting = React.useCallback((index: number) => {
-      setCurrentPage(index)
-    }, [])
-
     return (
       <Pager
         ref={ref}
         testID={testID}
         initialPage={initialPage}
         onPageSelected={onPageSelectedInner}
-        onPageSelecting={onPageSelecting}
         renderTabBar={renderTabBar}>
         {toArray(children)
           .filter(Boolean)

src/view/com/pager/PagerWithHeader.web.tsx

@@ -75,17 +75,12 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
       [onPageSelected, setCurrentPage],
     )
 
-    const onPageSelecting = React.useCallback((index: number) => {
-      setCurrentPage(index)
-    }, [])
-
     return (
       <Pager
         ref={ref}
         testID={testID}
         initialPage={initialPage}
         onPageSelected={onPageSelectedInner}
-        onPageSelecting={onPageSelecting}
         renderTabBar={renderTabBar}>
         {toArray(children)
           .filter(Boolean)