Fix composer positioning

zio/stable
Paul Frazee 2022-11-16 14:33:01 -06:00
parent 5bb8751bc1
commit 92046473f8
1 changed files with 61 additions and 57 deletions

View File

@ -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>
) )
} }