diff options
Diffstat (limited to 'src/view/com/pager')
| -rw-r--r-- | src/view/com/pager/FeedsTabBar.tsx | 1 | ||||
| -rw-r--r-- | src/view/com/pager/FeedsTabBar.web.tsx | 155 | ||||
| -rw-r--r-- | src/view/com/pager/FeedsTabBarMobile.tsx | 171 | ||||
| -rw-r--r-- | src/view/com/pager/FixedTouchableHighlight.tsx | 42 | ||||
| -rw-r--r-- | src/view/com/pager/PagerWithHeader.tsx | 35 | ||||
| -rw-r--r-- | src/view/com/pager/TabBar.tsx | 119 |
6 files changed, 108 insertions, 415 deletions
diff --git a/src/view/com/pager/FeedsTabBar.tsx b/src/view/com/pager/FeedsTabBar.tsx deleted file mode 100644 index aa0ba7b24..000000000 --- a/src/view/com/pager/FeedsTabBar.tsx +++ /dev/null @@ -1 +0,0 @@ -export * from './FeedsTabBarMobile' diff --git a/src/view/com/pager/FeedsTabBar.web.tsx b/src/view/com/pager/FeedsTabBar.web.tsx deleted file mode 100644 index 9fe03b7e9..000000000 --- a/src/view/com/pager/FeedsTabBar.web.tsx +++ /dev/null @@ -1,155 +0,0 @@ -import React from 'react' -import {View, StyleSheet} from 'react-native' -import Animated from 'react-native-reanimated' -import {TabBar} from 'view/com/pager/TabBar' -import {RenderTabBarFnProps} from 'view/com/pager/Pager' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {FeedsTabBar as FeedsTabBarMobile} from './FeedsTabBarMobile' -import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode' -import {useShellLayout} from '#/state/shell/shell-layout' -import {usePinnedFeedsInfos} from '#/state/queries/feed' -import {useSession} from '#/state/session' -import {TextLink} from '#/view/com/util/Link' -import {CenteredView} from '../util/Views' -import {isWeb} from 'platform/detection' -import {useNavigation} from '@react-navigation/native' -import {NavigationProp} from 'lib/routes/types' - -export function FeedsTabBar( - props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void}, -) { - const {isMobile, isTablet} = useWebMediaQueries() - const {hasSession} = useSession() - - if (isMobile) { - return <FeedsTabBarMobile {...props} /> - } else if (isTablet) { - if (hasSession) { - return <FeedsTabBarTablet {...props} /> - } else { - return <FeedsTabBarPublic /> - } - } else { - return null - } -} - -function FeedsTabBarPublic() { - const pal = usePalette('default') - const {isSandbox} = useSession() - - return ( - <CenteredView sideBorders> - <View - style={[ - pal.view, - { - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'space-between', - paddingHorizontal: 18, - paddingVertical: 12, - }, - ]}> - <TextLink - type="title-lg" - href="/" - style={[pal.text, {fontWeight: 'bold'}]} - text={ - <> - {isSandbox ? 'SANDBOX' : 'Bluesky'}{' '} - {/*hasNew && ( - <View - style={{ - top: -8, - backgroundColor: colors.blue3, - width: 8, - height: 8, - borderRadius: 4, - }} - /> - )*/} - </> - } - // onPress={emitSoftReset} - /> - </View> - </CenteredView> - ) -} - -function FeedsTabBarTablet( - props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void}, -) { - const {feeds, hasPinnedCustom} = usePinnedFeedsInfos() - const pal = usePalette('default') - const {hasSession} = useSession() - const navigation = useNavigation<NavigationProp>() - const {headerMinimalShellTransform} = useMinimalShellMode() - const {headerHeight} = useShellLayout() - - const items = React.useMemo(() => { - if (!hasSession) return [] - - const pinnedNames = feeds.map(f => f.displayName) - - if (!hasPinnedCustom) { - return pinnedNames.concat('Feeds ✨') - } - return pinnedNames - }, [hasSession, hasPinnedCustom, feeds]) - - const onPressDiscoverFeeds = React.useCallback(() => { - if (isWeb) { - navigation.navigate('Feeds') - } else { - navigation.navigate('FeedsTab') - navigation.popToTop() - } - }, [navigation]) - - const onSelect = React.useCallback( - (index: number) => { - if (hasSession && !hasPinnedCustom && index === items.length - 1) { - onPressDiscoverFeeds() - } else if (props.onSelect) { - props.onSelect(index) - } - }, - [items.length, onPressDiscoverFeeds, props, hasSession, hasPinnedCustom], - ) - - 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, pal.border, styles.tabBar, headerMinimalShellTransform]} - onLayout={e => { - headerHeight.value = e.nativeEvent.layout.height - }}> - <TabBar - key={items.join(',')} - {...props} - onSelect={onSelect} - items={items} - indicatorColor={pal.colors.link} - /> - </Animated.View> - ) -} - -const styles = StyleSheet.create({ - tabBar: { - // @ts-ignore Web only - position: 'sticky', - zIndex: 1, - // @ts-ignore Web only -prf - left: 'calc(50% - 300px)', - width: 600, - top: 0, - flexDirection: 'row', - alignItems: 'center', - borderLeftWidth: 1, - borderRightWidth: 1, - }, -}) diff --git a/src/view/com/pager/FeedsTabBarMobile.tsx b/src/view/com/pager/FeedsTabBarMobile.tsx deleted file mode 100644 index 4eba241ae..000000000 --- a/src/view/com/pager/FeedsTabBarMobile.tsx +++ /dev/null @@ -1,171 +0,0 @@ -import React from 'react' -import {StyleSheet, TouchableOpacity, View} from 'react-native' -import {TabBar} from 'view/com/pager/TabBar' -import {RenderTabBarFnProps} from 'view/com/pager/Pager' -import {usePalette} from 'lib/hooks/usePalette' -import {Link} from '../util/Link' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome' -import {HITSLOP_10} from 'lib/constants' -import Animated from 'react-native-reanimated' -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode' -import {useSetDrawerOpen} from '#/state/shell/drawer-open' -import {useShellLayout} from '#/state/shell/shell-layout' -import {useSession} from '#/state/session' -import {usePinnedFeedsInfos} from '#/state/queries/feed' -import {isWeb} from 'platform/detection' -import {useNavigation} from '@react-navigation/native' -import {NavigationProp} from 'lib/routes/types' -import {Logo} from '#/view/icons/Logo' - -import {IS_DEV} from '#/env' -import {atoms} from '#/alf' -import {Link as Link2} from '#/components/Link' -import {ColorPalette_Stroke2_Corner0_Rounded as ColorPalette} from '#/components/icons/ColorPalette' - -export function FeedsTabBar( - props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void}, -) { - const pal = usePalette('default') - const {hasSession} = useSession() - const {_} = useLingui() - const setDrawerOpen = useSetDrawerOpen() - const navigation = useNavigation<NavigationProp>() - const {feeds, hasPinnedCustom} = usePinnedFeedsInfos() - const {headerHeight} = useShellLayout() - const {headerMinimalShellTransform} = useMinimalShellMode() - - const items = React.useMemo(() => { - if (!hasSession) return [] - - const pinnedNames = feeds.map(f => f.displayName) - - if (!hasPinnedCustom) { - return pinnedNames.concat('Feeds ✨') - } - return pinnedNames - }, [hasSession, hasPinnedCustom, feeds]) - - const onPressFeedsLink = React.useCallback(() => { - if (isWeb) { - navigation.navigate('Feeds') - } else { - navigation.navigate('FeedsTab') - navigation.popToTop() - } - }, [navigation]) - - const onSelect = React.useCallback( - (index: number) => { - if (hasSession && !hasPinnedCustom && index === items.length - 1) { - onPressFeedsLink() - } else if (props.onSelect) { - props.onSelect(index) - } - }, - [items.length, onPressFeedsLink, props, hasSession, hasPinnedCustom], - ) - - const onPressAvi = React.useCallback(() => { - setDrawerOpen(true) - }, [setDrawerOpen]) - - return ( - <Animated.View - style={[pal.view, pal.border, styles.tabBar, headerMinimalShellTransform]} - onLayout={e => { - headerHeight.value = e.nativeEvent.layout.height - }}> - <View style={[pal.view, styles.topBar]}> - <View style={[pal.view, {width: 100}]}> - <TouchableOpacity - testID="viewHeaderDrawerBtn" - onPress={onPressAvi} - accessibilityRole="button" - accessibilityLabel={_(msg`Open navigation`)} - accessibilityHint={_( - msg`Access profile and other navigation links`, - )} - hitSlop={HITSLOP_10}> - <FontAwesomeIcon - icon="bars" - size={18} - color={pal.colors.textLight} - /> - </TouchableOpacity> - </View> - <View> - <Logo width={30} /> - </View> - <View - style={[ - atoms.flex_row, - atoms.justify_end, - atoms.align_center, - atoms.gap_md, - pal.view, - {width: 100}, - ]}> - {IS_DEV && ( - <Link2 to="/sys/debug"> - <ColorPalette size="md" /> - </Link2> - )} - - {hasSession && ( - <Link - testID="viewHeaderHomeFeedPrefsBtn" - href="/settings/home-feed" - hitSlop={HITSLOP_10} - accessibilityRole="button" - accessibilityLabel={_(msg`Home Feed Preferences`)} - accessibilityHint=""> - <FontAwesomeIcon - icon="sliders" - style={pal.textLight as FontAwesomeIconStyle} - /> - </Link> - )} - </View> - </View> - - {items.length > 0 && ( - <TabBar - key={items.join(',')} - onPressSelected={props.onPressSelected} - selectedPage={props.selectedPage} - onSelect={onSelect} - testID={props.testID} - items={items} - indicatorColor={pal.colors.link} - /> - )} - </Animated.View> - ) -} - -const styles = StyleSheet.create({ - tabBar: { - // @ts-ignore web-only - position: isWeb ? 'fixed' : 'absolute', - zIndex: 1, - left: 0, - right: 0, - top: 0, - flexDirection: 'column', - borderBottomWidth: 1, - }, - topBar: { - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'center', - paddingHorizontal: 18, - paddingVertical: 8, - width: '100%', - }, - title: { - fontSize: 21, - }, -}) diff --git a/src/view/com/pager/FixedTouchableHighlight.tsx b/src/view/com/pager/FixedTouchableHighlight.tsx deleted file mode 100644 index d07196975..000000000 --- a/src/view/com/pager/FixedTouchableHighlight.tsx +++ /dev/null @@ -1,42 +0,0 @@ -// FixedTouchableHighlight.tsx -import React, {ComponentProps, useRef} from 'react' -import {GestureResponderEvent, TouchableHighlight} from 'react-native' - -type Position = {pageX: number; pageY: number} - -export default function FixedTouchableHighlight({ - onPress, - onPressIn, - ...props -}: ComponentProps<typeof TouchableHighlight>) { - const _touchActivatePositionRef = useRef<Position | null>(null) - - function _onPressIn(e: GestureResponderEvent) { - const {pageX, pageY} = e.nativeEvent - - _touchActivatePositionRef.current = { - pageX, - pageY, - } - - onPressIn?.(e) - } - - function _onPress(e: GestureResponderEvent) { - const {pageX, pageY} = e.nativeEvent - - const absX = Math.abs(_touchActivatePositionRef.current?.pageX! - pageX) - const absY = Math.abs(_touchActivatePositionRef.current?.pageY! - pageY) - - const dragged = absX > 2 || absY > 2 - if (!dragged) { - onPress?.(e) - } - } - - return ( - <TouchableHighlight onPressIn={_onPressIn} onPress={_onPress} {...props}> - {props.children} - </TouchableHighlight> - ) -} diff --git a/src/view/com/pager/PagerWithHeader.tsx b/src/view/com/pager/PagerWithHeader.tsx index 938c1e7e8..aa110682a 100644 --- a/src/view/com/pager/PagerWithHeader.tsx +++ b/src/view/com/pager/PagerWithHeader.tsx @@ -233,36 +233,29 @@ let PagerTabBar = ({ }, ], })) - const pendingHeaderHeight = React.useRef<null | number>(null) + const headerRef = React.useRef(null) return ( <Animated.View pointerEvents="box-none" style={[styles.tabBarMobile, headerTransform]}> - <View - pointerEvents="box-none" - collapsable={false} - onLayout={e => { - if (isHeaderReady) { - onHeaderOnlyLayout(e.nativeEvent.layout.height) - pendingHeaderHeight.current = null - } else { - // Stash it away for when `isHeaderReady` turns `true` later. - pendingHeaderHeight.current = e.nativeEvent.layout.height - } - }}> + <View ref={headerRef} pointerEvents="box-none" collapsable={false}> {renderHeader?.()} { - // When `isHeaderReady` turns `true`, we want to send the parent layout. - // However, if that didn't lead to a layout change, parent `onLayout` wouldn't get called again. - // We're conditionally rendering an empty view so that we can send the last measurement. + // It wouldn't be enough to place `onLayout` on the parent node because + // this would risk measuring before `isHeaderReady` has turned `true`. + // Instead, we'll render a brand node conditionally and get fresh layout. isHeaderReady && ( <View + // It wouldn't be enough to do this in a `ref` of an effect because, + // even if `isHeaderReady` might have turned `true`, the associated + // layout might not have been performed yet on the native side. onLayout={() => { - // We're assuming the parent `onLayout` already ran (parent -> child ordering). - if (pendingHeaderHeight.current !== null) { - onHeaderOnlyLayout(pendingHeaderHeight.current) - pendingHeaderHeight.current = null - } + // @ts-ignore + headerRef.current?.measure( + (_x: number, _y: number, _width: number, height: number) => { + onHeaderOnlyLayout(height) + }, + ) }} /> ) diff --git a/src/view/com/pager/TabBar.tsx b/src/view/com/pager/TabBar.tsx index dadcfcebd..ff8acd60c 100644 --- a/src/view/com/pager/TabBar.tsx +++ b/src/view/com/pager/TabBar.tsx @@ -4,8 +4,8 @@ import {Text} from '../util/text/Text' import {PressableWithHover} from '../util/PressableWithHover' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {isWeb} from 'platform/detection' import {DraggableScrollView} from './DraggableScrollView' +import {isNative} from '#/platform/detection' export interface TabBarProps { testID?: string @@ -16,6 +16,10 @@ export interface TabBarProps { onPressSelected?: (index: number) => void } +// How much of the previous/next item we're showing +// to give the user a hint there's more to scroll. +const OFFSCREEN_ITEM_WIDTH = 20 + export function TabBar({ testID, selectedPage, @@ -26,19 +30,68 @@ export function TabBar({ }: TabBarProps) { const pal = usePalette('default') const scrollElRef = useRef<ScrollView>(null) + const itemRefs = useRef<Array<Element>>([]) const [itemXs, setItemXs] = useState<number[]>([]) const indicatorStyle = useMemo( () => ({borderBottomColor: indicatorColor || pal.colors.link}), [indicatorColor, pal], ) const {isDesktop, isTablet} = useWebMediaQueries() + const styles = isDesktop || isTablet ? desktopStyles : mobileStyles - // scrolls to the selected item when the page changes useEffect(() => { - scrollElRef.current?.scrollTo({ - x: itemXs[selectedPage] || 0, - }) - }, [scrollElRef, itemXs, selectedPage]) + if (isNative) { + // On native, the primary interaction is swiping. + // We adjust the scroll little by little on every tab change. + // Scroll into view but keep the end of the previous item visible. + let x = itemXs[selectedPage] || 0 + x = Math.max(0, x - OFFSCREEN_ITEM_WIDTH) + scrollElRef.current?.scrollTo({x}) + } else { + // On the web, the primary interaction is tapping. + // Scrolling under tap feels disorienting so only adjust the scroll offset + // when tapping on an item out of view--and we adjust by almost an entire page. + const parent = scrollElRef?.current?.getScrollableNode?.() + if (!parent) { + return + } + const parentRect = parent.getBoundingClientRect() + if (!parentRect) { + return + } + const { + left: parentLeft, + right: parentRight, + width: parentWidth, + } = parentRect + const child = itemRefs.current[selectedPage] + if (!child) { + return + } + const childRect = child.getBoundingClientRect?.() + if (!childRect) { + return + } + const {left: childLeft, right: childRight, width: childWidth} = childRect + let dx = 0 + if (childRight >= parentRight) { + dx += childRight - parentRight + dx += parentWidth - childWidth - OFFSCREEN_ITEM_WIDTH + } else if (childLeft <= parentLeft) { + dx -= parentLeft - childLeft + dx -= parentWidth - childWidth - OFFSCREEN_ITEM_WIDTH + } + let x = parent.scrollLeft + dx + x = Math.max(0, x) + x = Math.min(x, parent.scrollWidth - parentWidth) + if (dx !== 0) { + parent.scroll({ + left: x, + behavior: 'smooth', + }) + } + } + }, [scrollElRef, itemXs, selectedPage, styles]) const onPressItem = useCallback( (index: number) => { @@ -63,8 +116,6 @@ export function TabBar({ [], ) - const styles = isDesktop || isTablet ? desktopStyles : mobileStyles - return ( <View testID={testID} style={[pal.view, styles.outer]}> <DraggableScrollView @@ -79,20 +130,24 @@ export function TabBar({ <PressableWithHover testID={`${testID}-selector-${i}`} key={`${item}-${i}`} + ref={node => (itemRefs.current[i] = node)} onLayout={e => onItemLayout(e, i)} - style={[styles.item, selected && indicatorStyle]} + style={styles.item} hoverStyle={pal.viewLight} onPress={() => onPressItem(i)}> - <Text - type={isDesktop || isTablet ? 'xl-bold' : 'lg-bold'} - testID={testID ? `${testID}-${item}` : undefined} - style={selected ? pal.text : pal.textLight}> - {item} - </Text> + <View style={[styles.itemInner, selected && indicatorStyle]}> + <Text + type={isDesktop || isTablet ? 'xl-bold' : 'lg-bold'} + testID={testID ? `${testID}-${item}` : undefined} + style={selected ? pal.text : pal.textLight}> + {item} + </Text> + </View> </PressableWithHover> ) })} </DraggableScrollView> + <View style={[pal.border, styles.outerBottomBorder]} /> </View> ) } @@ -103,18 +158,25 @@ const desktopStyles = StyleSheet.create({ width: 598, }, contentContainer: { - columnGap: 8, - marginLeft: 14, - paddingRight: 14, + paddingHorizontal: 0, backgroundColor: 'transparent', }, item: { paddingTop: 14, + paddingHorizontal: 14, + justifyContent: 'center', + }, + itemInner: { paddingBottom: 12, - paddingHorizontal: 10, borderBottomWidth: 3, borderBottomColor: 'transparent', - justifyContent: 'center', + }, + outerBottomBorder: { + position: 'absolute', + left: 0, + right: 0, + bottom: -1, + borderBottomWidth: 1, }, }) @@ -123,17 +185,24 @@ const mobileStyles = StyleSheet.create({ flexDirection: 'row', }, contentContainer: { - columnGap: isWeb ? 0 : 20, - marginLeft: isWeb ? 0 : 18, - paddingRight: isWeb ? 0 : 36, backgroundColor: 'transparent', + paddingHorizontal: 8, }, item: { paddingTop: 10, + paddingHorizontal: 10, + justifyContent: 'center', + }, + itemInner: { paddingBottom: 10, - paddingHorizontal: isWeb ? 8 : 0, borderBottomWidth: 3, borderBottomColor: 'transparent', - justifyContent: 'center', + }, + outerBottomBorder: { + position: 'absolute', + left: 0, + right: 0, + bottom: -1, + borderBottomWidth: 1, }, }) |