diff options
Diffstat (limited to 'src/view/com/util/pager/Pager.web.tsx')
-rw-r--r-- | src/view/com/util/pager/Pager.web.tsx | 69 |
1 files changed, 0 insertions, 69 deletions
diff --git a/src/view/com/util/pager/Pager.web.tsx b/src/view/com/util/pager/Pager.web.tsx deleted file mode 100644 index 3c2805833..000000000 --- a/src/view/com/util/pager/Pager.web.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import React from 'react' -import {Animated, View} from 'react-native' -import {useAnimatedValue} from 'lib/hooks/useAnimatedValue' -import {s} from 'lib/styles' - -export interface RenderTabBarFnProps { - selectedPage: number - position: Animated.Value - offset: Animated.Value - onSelect?: (index: number) => void -} -export type RenderTabBarFn = (props: RenderTabBarFnProps) => JSX.Element - -interface Props { - tabBarPosition?: 'top' | 'bottom' - initialPage?: number - renderTabBar: RenderTabBarFn - onPageSelected?: (index: number) => void -} -export const Pager = ({ - children, - tabBarPosition = 'top', - initialPage = 0, - renderTabBar, - onPageSelected, -}: React.PropsWithChildren<Props>) => { - const [selectedPage, setSelectedPage] = React.useState(initialPage) - const position = useAnimatedValue(0) - const offset = useAnimatedValue(0) - - const onTabBarSelect = React.useCallback( - (index: number) => { - setSelectedPage(index) - onPageSelected?.(index) - Animated.timing(position, { - toValue: index, - duration: 200, - useNativeDriver: true, - }).start() - }, - [setSelectedPage, onPageSelected, position], - ) - - return ( - <View> - {tabBarPosition === 'top' && - renderTabBar({ - selectedPage, - position, - offset, - onSelect: onTabBarSelect, - })} - {children.map((child, i) => ( - <View - style={selectedPage === i ? undefined : s.hidden} - key={`page-${i}`}> - {child} - </View> - ))} - {tabBarPosition === 'bottom' && - renderTabBar({ - selectedPage, - position, - offset, - onSelect: onTabBarSelect, - })} - </View> - ) -} |