Tune the custom feed header
parent
2ba4d9bfbf
commit
629ca24e90
|
@ -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>
|
||||||
|
|
|
@ -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,
|
||||||
|
},
|
||||||
})
|
})
|
||||||
|
|
Loading…
Reference in New Issue