Update compose prompt for isual balance and to include image button

zio/stable
Paul Frazee 2023-01-18 13:57:53 -06:00
parent 9d6c4698a1
commit bf03167ca6
7 changed files with 56 additions and 19 deletions

View File

@ -82,6 +82,7 @@ export interface ComposerOptsPostRef {
}
}
export interface ComposerOpts {
imagesOpen?: boolean
replyTo?: ComposerOptsPostRef
onPost?: () => void
}

View File

@ -40,10 +40,12 @@ const HITSLOP = {left: 10, top: 10, right: 10, bottom: 10}
export const ComposePost = observer(function ComposePost({
replyTo,
imagesOpen,
onPost,
onClose,
}: {
replyTo?: ComposerOpts['replyTo']
imagesOpen?: ComposerOpts['imagesOpen']
onPost?: ComposerOpts['onPost']
onClose: () => void
}) {
@ -54,7 +56,9 @@ export const ComposePost = observer(function ComposePost({
const [processingState, setProcessingState] = useState('')
const [error, setError] = useState('')
const [text, setText] = useState('')
const [isSelectingPhotos, setIsSelectingPhotos] = useState(false)
const [isSelectingPhotos, setIsSelectingPhotos] = useState(
imagesOpen || false,
)
const [selectedPhotos, setSelectedPhotos] = useState<string[]>([])
// Using default import (React.use...) instead of named import (use...) to be able to mock store's data in jest environment

View File

@ -1,5 +1,6 @@
import React from 'react'
import {StyleSheet, TouchableOpacity, View} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {Text} from '../util/text/Text'
import {usePalette} from '../../lib/hooks/usePalette'
@ -12,7 +13,7 @@ export function ComposePrompt({
text?: string
btn?: string
isReply?: boolean
onPressCompose: () => void
onPressCompose: (imagesOpen?: boolean) => void
}) {
const pal = usePalette('default')
return (
@ -24,25 +25,50 @@ export function ComposePrompt({
styles.container,
isReply ? styles.containerReply : undefined,
]}
onPress={onPressCompose}>
onPress={() => onPressCompose()}>
{!isReply && (
<FontAwesomeIcon
icon={['fas', 'pen-nib']}
size={18}
style={[pal.textLight, styles.iconLeft]}
/>
)}
<View style={styles.textContainer}>
<Text type="lg" style={[pal.textLight]}>
<Text type={isReply ? 'lg' : 'lg-medium'} style={pal.textLight}>
{text}
</Text>
</View>
<View style={[styles.btn, {backgroundColor: pal.colors.backgroundLight}]}>
<Text type="button" style={pal.textLight}>
{btn}
</Text>
</View>
{isReply ? (
<View
style={[styles.btn, {backgroundColor: pal.colors.backgroundLight}]}>
<Text type="button" style={pal.textLight}>
{btn}
</Text>
</View>
) : (
<TouchableOpacity onPress={() => onPressCompose(true)}>
<FontAwesomeIcon
icon={['far', 'image']}
size={18}
style={[pal.textLight, styles.iconRight]}
/>
</TouchableOpacity>
)}
</TouchableOpacity>
)
}
const styles = StyleSheet.create({
iconLeft: {
marginLeft: 22,
marginRight: 2,
// marginLeft: 28,
// marginRight: 14,
},
iconRight: {
marginRight: 20,
},
container: {
paddingLeft: 4,
paddingRight: 10,
paddingVertical: 14,
flexDirection: 'row',
alignItems: 'center',

View File

@ -30,7 +30,7 @@ export const Feed = observer(function Feed({
feed: FeedModel
style?: StyleProp<ViewStyle>
scrollElRef?: MutableRefObject<FlatList<any> | null>
onPressCompose: () => void
onPressCompose: (imagesOpen?: boolean) => void
onPressTryAgain?: () => void
onScroll?: OnScrollCb
testID?: string
@ -41,9 +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} text="New message" />
)
return <ComposePrompt onPressCompose={onPressCompose} />
} else if (item === EMPTY_FEED_ITEM) {
return (
<EmptyState

View File

@ -69,8 +69,8 @@ export const Home = observer(function Home({
return cleanup
}, [visible, store, navIdx, doPoll, wasVisible])
const onPressCompose = () => {
store.shell.openComposer({})
const onPressCompose = (imagesOpen?: boolean) => {
store.shell.openComposer({imagesOpen})
}
const onPressTryAgain = () => {
store.me.mainFeed.refresh()
@ -107,7 +107,7 @@ export const Home = observer(function Home({
<Text style={styles.loadLatestText}>Load new posts</Text>
</TouchableOpacity>
) : undefined}
<FAB icon="pen-nib" onPress={onPressCompose} />
<FAB icon="pen-nib" onPress={() => onPressCompose(false)} />
</View>
)
})

View File

@ -10,12 +10,14 @@ export const Composer = observer(
active,
winHeight,
replyTo,
imagesOpen,
onPost,
onClose,
}: {
active: boolean
winHeight: number
replyTo?: ComposerOpts['replyTo']
imagesOpen?: ComposerOpts['imagesOpen']
onPost?: ComposerOpts['onPost']
onClose: () => void
}) => {
@ -56,7 +58,12 @@ export const Composer = observer(
return (
<Animated.View style={[styles.wrapper, wrapperAnimStyle]}>
<ComposePost replyTo={replyTo} onPost={onPost} onClose={onClose} />
<ComposePost
replyTo={replyTo}
imagesOpen={imagesOpen}
onPost={onPost}
onClose={onClose}
/>
</Animated.View>
)
},

View File

@ -484,6 +484,7 @@ export const MobileShell: React.FC = observer(() => {
onClose={() => store.shell.closeComposer()}
winHeight={winDim.height}
replyTo={store.shell.composerOpts?.replyTo}
imagesOpen={store.shell.composerOpts?.imagesOpen}
onPost={store.shell.composerOpts?.onPost}
/>
</View>