764c7cd569
* Move most responsive queries to the hook * Fix invalid CSS value * Fixes to tablet render of post thread * Fix overflow issues on web * Fix search header on tablet * Fix QP margin in web composer * Fix: only apply double gutter once to flatlist (close #1368) * Fix styles on discover feeds header * Fix double discover links in multifeed
80 lines
2.2 KiB
TypeScript
80 lines
2.2 KiB
TypeScript
import React, {useMemo} from 'react'
|
|
import {Animated, StyleSheet} from 'react-native'
|
|
import {observer} from 'mobx-react-lite'
|
|
import {TabBar} from 'view/com/pager/TabBar'
|
|
import {RenderTabBarFnProps} from 'view/com/pager/Pager'
|
|
import {useStores} from 'state/index'
|
|
import {usePalette} from 'lib/hooks/usePalette'
|
|
import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
|
|
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
|
|
import {FeedsTabBar as FeedsTabBarMobile} from './FeedsTabBarMobile'
|
|
|
|
export const FeedsTabBar = observer(
|
|
(
|
|
props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void},
|
|
) => {
|
|
const {isMobile} = useWebMediaQueries()
|
|
if (isMobile) {
|
|
return <FeedsTabBarMobile {...props} />
|
|
} else {
|
|
return <FeedsTabBarDesktop {...props} />
|
|
}
|
|
},
|
|
)
|
|
|
|
const FeedsTabBarDesktop = observer(
|
|
(
|
|
props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void},
|
|
) => {
|
|
const store = useStores()
|
|
const items = useMemo(
|
|
() => ['Following', ...store.me.savedFeeds.pinnedFeedNames],
|
|
[store.me.savedFeeds.pinnedFeedNames],
|
|
)
|
|
const pal = usePalette('default')
|
|
const interp = useAnimatedValue(0)
|
|
|
|
React.useEffect(() => {
|
|
Animated.timing(interp, {
|
|
toValue: store.shell.minimalShellMode ? 1 : 0,
|
|
duration: 100,
|
|
useNativeDriver: true,
|
|
isInteraction: false,
|
|
}).start()
|
|
}, [interp, store.shell.minimalShellMode])
|
|
const transform = {
|
|
transform: [
|
|
{translateX: '-50%'},
|
|
{translateY: Animated.multiply(interp, -100)},
|
|
],
|
|
}
|
|
|
|
return (
|
|
// @ts-ignore the type signature for transform wrong here, translateX and translateY need to be in separate objects -prf
|
|
<Animated.View style={[pal.view, styles.tabBar, transform]}>
|
|
<TabBar
|
|
key={items.join(',')}
|
|
{...props}
|
|
items={items}
|
|
indicatorColor={pal.colors.link}
|
|
/>
|
|
</Animated.View>
|
|
)
|
|
},
|
|
)
|
|
|
|
const styles = StyleSheet.create({
|
|
tabBar: {
|
|
position: 'absolute',
|
|
zIndex: 1,
|
|
left: '50%',
|
|
width: 598,
|
|
top: 0,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
},
|
|
tabBarAvi: {
|
|
marginTop: 1,
|
|
marginRight: 18,
|
|
},
|
|
})
|