Change post prompt to a set of buttons (#55)

zio/stable
Paul Frazee 2023-01-19 14:08:53 -06:00 committed by GitHub
parent f10a8308d9
commit 3f95f98ef9
3 changed files with 59 additions and 4 deletions

View File

@ -12,7 +12,7 @@ import {EmptyState} from '../util/EmptyState'
import {ErrorMessage} from '../util/error/ErrorMessage'
import {FeedModel} from '../../../state/models/feed-view'
import {FeedItem} from './FeedItem'
import {ComposePrompt} from '../composer/Prompt'
import {PromptButtons} from './PromptButtons'
import {OnScrollCb} from '../../lib/hooks/useOnMainScroll'
const COMPOSE_PROMPT_ITEM = {_reactKey: '__prompt__'}
@ -41,7 +41,7 @@ export const Feed = observer(function Feed({
// like PureComponent, shouldComponentUpdate, etc
const renderItem = ({item}: {item: any}) => {
if (item === COMPOSE_PROMPT_ITEM) {
return <ComposePrompt onPressCompose={onPressCompose} />
return <PromptButtons onPressCompose={onPressCompose} />
} else if (item === EMPTY_FEED_ITEM) {
return (
<EmptyState

View File

@ -0,0 +1,48 @@
import React from 'react'
import {StyleSheet, TouchableOpacity, View} from 'react-native'
import {Text} from '../util/text/Text'
import {usePalette} from '../../lib/hooks/usePalette'
export function PromptButtons({
onPressCompose,
}: {
onPressCompose: (imagesOpen?: boolean) => void
}) {
const pal = usePalette('default')
return (
<View style={[pal.view, pal.border, styles.container]}>
<TouchableOpacity
testID="composePromptButton"
style={[styles.btn, {backgroundColor: pal.colors.backgroundLight}]}
onPress={() => onPressCompose(false)}>
<Text type="button" style={pal.textLight}>
New post
</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.btn, {backgroundColor: pal.colors.backgroundLight}]}
onPress={() => onPressCompose(true)}>
<Text type="button" style={pal.textLight}>
Share photo
</Text>
</TouchableOpacity>
</View>
)
}
const styles = StyleSheet.create({
container: {
paddingVertical: 12,
paddingBottom: 10,
paddingHorizontal: 16,
flexDirection: 'row',
alignItems: 'center',
borderTopWidth: 1,
},
btn: {
paddingVertical: 6,
paddingHorizontal: 14,
borderRadius: 30,
marginRight: 10,
},
})

View File

@ -135,8 +135,15 @@ const styles = StyleSheet.create({
fontWeight: 'normal',
},
backIcon: {width: 30, height: 30},
backIconWide: {width: 40, height: 30},
backIcon: {
width: 30,
height: 30,
},
backIconWide: {
width: 40,
height: 30,
marginLeft: 6,
},
btn: {
flexDirection: 'row',
alignItems: 'center',