Fix composer positioning
parent
5bb8751bc1
commit
92046473f8
|
@ -2,6 +2,7 @@ import React, {useEffect, useMemo, useState} from 'react'
|
||||||
import {
|
import {
|
||||||
ActivityIndicator,
|
ActivityIndicator,
|
||||||
KeyboardAvoidingView,
|
KeyboardAvoidingView,
|
||||||
|
SafeAreaView,
|
||||||
StyleSheet,
|
StyleSheet,
|
||||||
Text,
|
Text,
|
||||||
TextInput,
|
TextInput,
|
||||||
|
@ -136,69 +137,72 @@ export function ComposePost({
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<KeyboardAvoidingView behavior="padding" style={styles.outer}>
|
<KeyboardAvoidingView behavior="padding" style={styles.outer}>
|
||||||
<View style={styles.topbar}>
|
<SafeAreaView style={s.flex1}>
|
||||||
<TouchableOpacity onPress={onPressCancel}>
|
<View style={styles.topbar}>
|
||||||
<Text style={[s.blue3, s.f16]}>Cancel</Text>
|
<TouchableOpacity onPress={onPressCancel}>
|
||||||
</TouchableOpacity>
|
<Text style={[s.blue3, s.f16]}>Cancel</Text>
|
||||||
<View style={s.flex1} />
|
|
||||||
{isProcessing ? (
|
|
||||||
<View style={styles.postBtn}>
|
|
||||||
<ActivityIndicator />
|
|
||||||
</View>
|
|
||||||
) : canPost ? (
|
|
||||||
<TouchableOpacity onPress={onPressPublish}>
|
|
||||||
<LinearGradient
|
|
||||||
colors={[gradients.primary.start, gradients.primary.end]}
|
|
||||||
start={{x: 0, y: 0}}
|
|
||||||
end={{x: 1, y: 1}}
|
|
||||||
style={styles.postBtn}>
|
|
||||||
<Text style={[s.white, s.f16, s.bold]}>Post</Text>
|
|
||||||
</LinearGradient>
|
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
) : (
|
<View style={s.flex1} />
|
||||||
<View style={[styles.postBtn, {backgroundColor: colors.gray1}]}>
|
{isProcessing ? (
|
||||||
<Text style={[s.gray5, s.f16, s.bold]}>Post</Text>
|
<View style={styles.postBtn}>
|
||||||
|
<ActivityIndicator />
|
||||||
|
</View>
|
||||||
|
) : canPost ? (
|
||||||
|
<TouchableOpacity onPress={onPressPublish}>
|
||||||
|
<LinearGradient
|
||||||
|
colors={[gradients.primary.start, gradients.primary.end]}
|
||||||
|
start={{x: 0, y: 0}}
|
||||||
|
end={{x: 1, y: 1}}
|
||||||
|
style={styles.postBtn}>
|
||||||
|
<Text style={[s.white, s.f16, s.bold]}>Post</Text>
|
||||||
|
</LinearGradient>
|
||||||
|
</TouchableOpacity>
|
||||||
|
) : (
|
||||||
|
<View style={[styles.postBtn, {backgroundColor: colors.gray1}]}>
|
||||||
|
<Text style={[s.gray5, s.f16, s.bold]}>Post</Text>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
{error !== '' && (
|
||||||
|
<View style={styles.errorLine}>
|
||||||
|
<View style={styles.errorIcon}>
|
||||||
|
<FontAwesomeIcon
|
||||||
|
icon="exclamation"
|
||||||
|
style={{color: colors.red4}}
|
||||||
|
size={10}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<Text style={s.red4}>{error}</Text>
|
||||||
</View>
|
</View>
|
||||||
)}
|
)}
|
||||||
</View>
|
<TextInput
|
||||||
{error !== '' && (
|
multiline
|
||||||
<View style={styles.errorLine}>
|
scrollEnabled
|
||||||
<View style={styles.errorIcon}>
|
autoFocus
|
||||||
<FontAwesomeIcon
|
onChangeText={(text: string) => onChangeText(text)}
|
||||||
icon="exclamation"
|
placeholder={replyTo ? 'Write your reply' : "What's new?"}
|
||||||
style={{color: colors.red4}}
|
style={styles.textInput}>
|
||||||
size={10}
|
{textDecorated}
|
||||||
|
</TextInput>
|
||||||
|
<View
|
||||||
|
style={[s.flexRow, {alignItems: 'center'}, s.pt10, s.pb10, s.pr5]}>
|
||||||
|
<View style={s.flex1} />
|
||||||
|
<Text style={[s.mr10, {color: progressColor}]}>
|
||||||
|
{text.length} / {MAX_TEXT_LENGTH}
|
||||||
|
</Text>
|
||||||
|
<View>
|
||||||
|
<ProgressCircle
|
||||||
|
color={progressColor}
|
||||||
|
progress={text.length / MAX_TEXT_LENGTH}
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
<Text style={s.red4}>{error}</Text>
|
|
||||||
</View>
|
</View>
|
||||||
)}
|
<Autocomplete
|
||||||
<TextInput
|
active={autocompleteOptions.length > 0}
|
||||||
multiline
|
items={autocompleteOptions}
|
||||||
scrollEnabled
|
onSelect={onSelectAutocompleteItem}
|
||||||
autoFocus
|
/>
|
||||||
onChangeText={(text: string) => onChangeText(text)}
|
</SafeAreaView>
|
||||||
placeholder={replyTo ? 'Write your reply' : "What's new?"}
|
|
||||||
style={styles.textInput}>
|
|
||||||
{textDecorated}
|
|
||||||
</TextInput>
|
|
||||||
<View style={[s.flexRow, {alignItems: 'center'}, s.pt10, s.pb10, s.pr5]}>
|
|
||||||
<View style={s.flex1} />
|
|
||||||
<Text style={[s.mr10, {color: progressColor}]}>
|
|
||||||
{text.length} / {MAX_TEXT_LENGTH}
|
|
||||||
</Text>
|
|
||||||
<View>
|
|
||||||
<ProgressCircle
|
|
||||||
color={progressColor}
|
|
||||||
progress={text.length / MAX_TEXT_LENGTH}
|
|
||||||
/>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
<Autocomplete
|
|
||||||
active={autocompleteOptions.length > 0}
|
|
||||||
items={autocompleteOptions}
|
|
||||||
onSelect={onSelectAutocompleteItem}
|
|
||||||
/>
|
|
||||||
</KeyboardAvoidingView>
|
</KeyboardAvoidingView>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue