zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

Adds profile media tab (#1137)

Browse source 
* add media tab

* fix loading state

* cleanup

* update naming

* upgrade api package

* fix load state

* add scroll view to tabs

* fix overflow on mobile web
This commit is contained in:
Eric Bailey 2023-08-10 12:50:37 -05:00 • committed by GitHub
parent 03d152675e
commit cc3fcb1645
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 109 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

92
src/view/com/util/ViewSelector.tsx
View file

@ -1,5 +1,11 @@
import React, {useEffect, useState} from 'react'
import {Pressable, RefreshControl, StyleSheet, View} from 'react-native'
import {
Pressable,
RefreshControl,
StyleSheet,
View,
ScrollView,
} from 'react-native'
import {FlatList} from './Views'
import {OnScrollCb} from 'lib/hooks/useOnMainScroll'
import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
@ -131,6 +137,8 @@ export const ViewSelector = React.forwardRef<
},
)
const SCROLLBAR_OFFSET = 12
export function Selector({
selectedIndex,
items,
@ -140,6 +148,8 @@ export function Selector({
items: string[]
onSelect?: (index: number) => void
}) {
const [height, setHeight] = useState(0)
const pal = usePalette('default')
const borderColor = useColorSchemeStyle(
{borderColor: colors.black},
@ -151,37 +161,55 @@ export function Selector({
}
return (
<View style={[pal.view, styles.outer]}>
{items.map((item, i) => {
const selected = i === selectedIndex
return (
<Pressable
testID={`selector-${i}`}
key={item}
onPress={() => onPressItem(i)}
accessibilityLabel={item}
accessibilityHint={`Selects ${item}`}
// TODO: Modify the component API such that lint fails
// at the invocation site as well
>
<View
style={[
styles.item,
selected && styles.itemSelected,
borderColor,
]}>
<Text
style={
selected
? [styles.labelSelected, pal.text]
: [styles.label, pal.textLight]
}>
{item}
</Text>
</View>
</Pressable>
)
})}
<View
style={{
width: '100%',
position: 'relative',
overflow: 'hidden',
marginTop: -SCROLLBAR_OFFSET,
height,
}}>
<ScrollView
horizontal
style={{position: 'absolute', bottom: -SCROLLBAR_OFFSET}}>
<View
style={[pal.view, styles.outer, {paddingBottom: SCROLLBAR_OFFSET}]}
onLayout={e => {
const {height} = e.nativeEvent.layout
setHeight(height || 60)
}}>
{items.map((item, i) => {
const selected = i === selectedIndex
return (
<Pressable
testID={`selector-${i}`}
key={item}
onPress={() => onPressItem(i)}
accessibilityLabel={item}
accessibilityHint={`Selects ${item}`}
// TODO: Modify the component API such that lint fails
// at the invocation site as well
>
<View
style={[
styles.item,
selected && styles.itemSelected,
borderColor,
]}>
<Text
style={
selected
? [styles.labelSelected, pal.text]
: [styles.label, pal.textLight]
}>
{item}
</Text>
</View>
</Pressable>
)
})}
</View>
</ScrollView>
</View>
)
}