Tune the custom feed header

zio/stable
Paul Frazee 2023-05-24 19:03:59 -05:00
parent 2ba4d9bfbf
commit 629ca24e90
2 changed files with 77 additions and 25 deletions

View File

@ -136,7 +136,12 @@ export function DropdownButton({
} }
return ( return (
<View ref={ref2}> <View ref={ref2}>
<Button testID={testID} onPress={onPress} style={style} label={label}> <Button
type={type}
testID={testID}
onPress={onPress}
style={style}
label={label}>
{children} {children}
</Button> </Button>
</View> </View>

View File

@ -28,6 +28,7 @@ import {Haptics} from 'lib/haptics'
import {ComposeIcon2} from 'lib/icons' import {ComposeIcon2} from 'lib/icons'
import {FAB} from '../com/util/fab/FAB' import {FAB} from '../com/util/fab/FAB'
import {LoadLatestBtn} from 'view/com/util/load-latest/LoadLatestBtn' import {LoadLatestBtn} from 'view/com/util/load-latest/LoadLatestBtn'
import {DropdownButton, DropdownItem} from 'view/com/util/forms/DropdownButton'
import {useOnMainScroll} from 'lib/hooks/useOnMainScroll' import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
type Props = NativeStackScreenProps<CommonNavigatorParams, 'CustomFeed'> type Props = NativeStackScreenProps<CommonNavigatorParams, 'CustomFeed'>
@ -108,6 +109,22 @@ export const CustomFeedScreen = withAuthRequired(
store.shell.openComposer({}) store.shell.openComposer({})
}, [store]) }, [store])
const dropdownItems: DropdownItem[] = React.useMemo(() => {
let items: DropdownItem[] = [
{
testID: 'feedHeaderDropdownRemoveBtn',
label: 'Remove from my feeds',
onPress: onToggleSaved,
},
{
testID: 'feedHeaderDropdownShareBtn',
label: 'Share link',
onPress: onPressShare,
},
]
return items
}, [onToggleSaved, onPressShare])
const renderHeaderBtns = React.useCallback(() => { const renderHeaderBtns = React.useCallback(() => {
return ( return (
<View style={styles.headerBtns}> <View style={styles.headerBtns}>
@ -132,25 +149,46 @@ export const CustomFeedScreen = withAuthRequired(
)} )}
</Button> </Button>
<Button <Button
type={currentFeed?.isSaved ? 'default' : 'inverted'} type="default"
onPress={onToggleSaved} accessibilityLabel={isPinned ? 'Unpin this feed' : 'Pin this feed'}
accessibilityLabel={
currentFeed?.isSaved ? 'Remove from my feeds' : 'Add to my feeds'
}
accessibilityHint="" accessibilityHint=""
label={ onPress={onTogglePinned}>
currentFeed?.isSaved ? 'Remove from My Feeds' : 'Add to My Feeds' <FontAwesomeIcon
} icon="thumb-tack"
/> size={16}
color={isPinned ? colors.blue3 : pal.colors.icon}
style={styles.top1}
/>
</Button>
{currentFeed?.isSaved ? (
<DropdownButton
testID="feedHeaderDropdownBtn"
type="default"
items={dropdownItems}
menuWidth={250}>
<FontAwesomeIcon icon="ellipsis" style={[pal.text]} />
</DropdownButton>
) : (
<Button
type="inverted"
onPress={onToggleSaved}
accessibilityLabel="Add to my feeds"
accessibilityHint=""
label="Add to My Feeds"
/>
)}
</View> </View>
) )
}, [ }, [
pal, pal,
currentFeed?.isSaved, currentFeed?.isSaved,
currentFeed?.isLiked, currentFeed?.isLiked,
isPinned,
onToggleSaved, onToggleSaved,
onTogglePinned,
onToggleLiked, onToggleLiked,
onPressShare, onPressShare,
dropdownItems,
]) ])
const renderListHeaderComponent = React.useCallback(() => { const renderListHeaderComponent = React.useCallback(() => {
@ -195,6 +233,20 @@ export const CustomFeedScreen = withAuthRequired(
: 'Add to My Feeds' : 'Add to My Feeds'
} }
/> />
<Button
type="default"
accessibilityLabel={
isPinned ? 'Unpin this feed' : 'Pin this feed'
}
accessibilityHint=""
onPress={onTogglePinned}>
<FontAwesomeIcon
icon="thumb-tack"
size={15}
color={isPinned ? colors.blue3 : pal.colors.icon}
style={styles.top2}
/>
</Button>
<Button <Button
type="default" type="default"
accessibilityLabel="Like this feed" accessibilityLabel="Like this feed"
@ -246,19 +298,6 @@ export const CustomFeedScreen = withAuthRequired(
)}`} )}`}
/> />
) : null} ) : null}
<Button
type={'default'}
accessibilityLabel={
isPinned ? 'Unpin this feed' : 'Pin this feed'
}
accessibilityHint=""
onPress={onTogglePinned}>
<FontAwesomeIcon
icon="thumb-tack"
size={20}
color={isPinned ? colors.blue3 : pal.colors.icon}
/>
</Button>
</View> </View>
</View> </View>
<View style={[styles.fakeSelector, pal.border]}> <View style={[styles.fakeSelector, pal.border]}>
@ -286,7 +325,7 @@ export const CustomFeedScreen = withAuthRequired(
return ( return (
<View style={s.hContentRegion}> <View style={s.hContentRegion}>
<ViewHeader title="" renderButton={renderHeaderBtns} /> <ViewHeader title="" renderButton={currentFeed && renderHeaderBtns} />
<Feed <Feed
scrollElRef={scrollElRef} scrollElRef={scrollElRef}
feed={algoFeed} feed={algoFeed}
@ -322,7 +361,7 @@ const styles = StyleSheet.create({
}, },
headerBtns: { headerBtns: {
flexDirection: 'row', flexDirection: 'row',
gap: 8, gap: 12,
marginTop: 10, marginTop: 10,
}, },
headerDetails: { headerDetails: {
@ -346,4 +385,12 @@ const styles = StyleSheet.create({
liked: { liked: {
color: colors.red3, color: colors.red3,
}, },
top1: {
position: 'relative',
top: 1,
},
top2: {
position: 'relative',
top: 2,
},
}) })