forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Update compose prompt for isual balance and to include image button
+56
-19
+1
src/state/models/shell-ui.ts
+1
src/state/models/shell-ui.ts
+5
-1
src/view/com/composer/ComposePost.tsx
+5
-1
src/view/com/composer/ComposePost.tsx
···
40
40
41
41
export const ComposePost = observer(function ComposePost({
42
42
replyTo,
43
+
imagesOpen,
43
44
onPost,
44
45
onClose,
45
46
}: {
46
47
replyTo?: ComposerOpts['replyTo']
48
+
imagesOpen?: ComposerOpts['imagesOpen']
47
49
onPost?: ComposerOpts['onPost']
48
50
onClose: () => void
49
51
}) {
···
54
56
const [processingState, setProcessingState] = useState('')
55
57
const [error, setError] = useState('')
56
58
const [text, setText] = useState('')
57
-
const [isSelectingPhotos, setIsSelectingPhotos] = useState(false)
59
+
const [isSelectingPhotos, setIsSelectingPhotos] = useState(
60
+
imagesOpen || false,
61
+
)
58
62
const [selectedPhotos, setSelectedPhotos] = useState<string[]>([])
59
63
60
64
// Using default import (React.use...) instead of named import (use...) to be able to mock store's data in jest environment
+36
-10
src/view/com/composer/Prompt.tsx
+36
-10
src/view/com/composer/Prompt.tsx
···
1
1
import React from 'react'
2
2
import {StyleSheet, TouchableOpacity, View} from 'react-native'
3
+
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
3
4
import {Text} from '../util/text/Text'
4
5
import {usePalette} from '../../lib/hooks/usePalette'
5
6
···
12
13
text?: string
13
14
btn?: string
14
15
isReply?: boolean
15
-
onPressCompose: () => void
16
+
onPressCompose: (imagesOpen?: boolean) => void
16
17
}) {
17
18
const pal = usePalette('default')
18
19
return (
···
24
25
styles.container,
25
26
isReply ? styles.containerReply : undefined,
26
27
]}
27
-
onPress={onPressCompose}>
28
+
onPress={() => onPressCompose()}>
29
+
{!isReply && (
30
+
<FontAwesomeIcon
31
+
icon={['fas', 'pen-nib']}
32
+
size={18}
33
+
style={[pal.textLight, styles.iconLeft]}
34
+
/>
35
+
)}
28
36
<View style={styles.textContainer}>
29
-
<Text type="lg" style={[pal.textLight]}>
37
+
<Text type={isReply ? 'lg' : 'lg-medium'} style={pal.textLight}>
30
38
{text}
31
39
</Text>
32
40
</View>
33
-
<View style={[styles.btn, {backgroundColor: pal.colors.backgroundLight}]}>
34
-
<Text type="button" style={pal.textLight}>
35
-
{btn}
36
-
</Text>
37
-
</View>
41
+
{isReply ? (
42
+
<View
43
+
style={[styles.btn, {backgroundColor: pal.colors.backgroundLight}]}>
44
+
<Text type="button" style={pal.textLight}>
45
+
{btn}
46
+
</Text>
47
+
</View>
48
+
) : (
49
+
<TouchableOpacity onPress={() => onPressCompose(true)}>
50
+
<FontAwesomeIcon
51
+
icon={['far', 'image']}
52
+
size={18}
53
+
style={[pal.textLight, styles.iconRight]}
54
+
/>
55
+
</TouchableOpacity>
56
+
)}
38
57
</TouchableOpacity>
39
58
)
40
59
}
41
60
42
61
const styles = StyleSheet.create({
62
+
iconLeft: {
63
+
marginLeft: 22,
64
+
marginRight: 2,
65
+
// marginLeft: 28,
66
+
// marginRight: 14,
67
+
},
68
+
iconRight: {
69
+
marginRight: 20,
70
+
},
43
71
container: {
44
-
paddingLeft: 4,
45
-
paddingRight: 10,
46
72
paddingVertical: 14,
47
73
flexDirection: 'row',
48
74
alignItems: 'center',
+2
-4
src/view/com/posts/Feed.tsx
+2
-4
src/view/com/posts/Feed.tsx
···
30
30
feed: FeedModel
31
31
style?: StyleProp<ViewStyle>
32
32
scrollElRef?: MutableRefObject<FlatList<any> | null>
33
-
onPressCompose: () => void
33
+
onPressCompose: (imagesOpen?: boolean) => void
34
34
onPressTryAgain?: () => void
35
35
onScroll?: OnScrollCb
36
36
testID?: string
···
41
41
// like PureComponent, shouldComponentUpdate, etc
42
42
const renderItem = ({item}: {item: any}) => {
43
43
if (item === COMPOSE_PROMPT_ITEM) {
44
-
return (
45
-
<ComposePrompt onPressCompose={onPressCompose} text="New message" />
46
-
)
44
+
return <ComposePrompt onPressCompose={onPressCompose} />
47
45
} else if (item === EMPTY_FEED_ITEM) {
48
46
return (
49
47
<EmptyState
+3
-3
src/view/screens/Home.tsx
+3
-3
src/view/screens/Home.tsx
···
69
69
return cleanup
70
70
}, [visible, store, navIdx, doPoll, wasVisible])
71
71
72
-
const onPressCompose = () => {
73
-
store.shell.openComposer({})
72
+
const onPressCompose = (imagesOpen?: boolean) => {
73
+
store.shell.openComposer({imagesOpen})
74
74
}
75
75
const onPressTryAgain = () => {
76
76
store.me.mainFeed.refresh()
···
107
107
<Text style={styles.loadLatestText}>Load new posts</Text>
108
108
</TouchableOpacity>
109
109
) : undefined}
110
-
<FAB icon="pen-nib" onPress={onPressCompose} />
110
+
<FAB icon="pen-nib" onPress={() => onPressCompose(false)} />
111
111
</View>
112
112
)
113
113
})
+8
-1
src/view/shell/mobile/Composer.tsx
+8
-1
src/view/shell/mobile/Composer.tsx
···
10
10
active,
11
11
winHeight,
12
12
replyTo,
13
+
imagesOpen,
13
14
onPost,
14
15
onClose,
15
16
}: {
16
17
active: boolean
17
18
winHeight: number
18
19
replyTo?: ComposerOpts['replyTo']
20
+
imagesOpen?: ComposerOpts['imagesOpen']
19
21
onPost?: ComposerOpts['onPost']
20
22
onClose: () => void
21
23
}) => {
···
56
58
57
59
return (
58
60
<Animated.View style={[styles.wrapper, wrapperAnimStyle]}>
59
-
<ComposePost replyTo={replyTo} onPost={onPost} onClose={onClose} />
61
+
<ComposePost
62
+
replyTo={replyTo}
63
+
imagesOpen={imagesOpen}
64
+
onPost={onPost}
65
+
onClose={onClose}
66
+
/>
60
67
</Animated.View>
61
68
)
62
69
},
+1
src/view/shell/mobile/index.tsx
+1
src/view/shell/mobile/index.tsx