90 lines
2.2 KiB
TypeScript
90 lines
2.2 KiB
TypeScript
import React, {useState, forwardRef, useImperativeHandle} from 'react'
|
|
import {KeyboardAvoidingView, StyleSheet, TextInput, View} from 'react-native'
|
|
import Toast from '../util/Toast'
|
|
import ProgressCircle from '../util/ProgressCircle'
|
|
import {useStores} from '../../../state'
|
|
import {s} from '../../lib/styles'
|
|
import * as apilib from '../../../state/lib/api'
|
|
|
|
const MAX_TEXT_LENGTH = 256
|
|
const WARNING_TEXT_LENGTH = 200
|
|
const DANGER_TEXT_LENGTH = 255
|
|
|
|
export const Composer = forwardRef(function Composer(
|
|
{
|
|
replyTo,
|
|
}: {
|
|
replyTo: string | undefined
|
|
},
|
|
ref,
|
|
) {
|
|
const store = useStores()
|
|
const [text, setText] = useState('')
|
|
|
|
const onChangeText = (newText: string) => {
|
|
if (newText.length > MAX_TEXT_LENGTH) {
|
|
setText(newText.slice(0, MAX_TEXT_LENGTH))
|
|
} else {
|
|
setText(newText)
|
|
}
|
|
}
|
|
|
|
useImperativeHandle(ref, () => ({
|
|
async publish() {
|
|
if (text.trim().length === 0) {
|
|
return false
|
|
}
|
|
await apilib.post(store.api, 'alice.com', text, replyTo)
|
|
Toast.show(`Your ${replyTo ? 'reply' : 'post'} has been created`, {
|
|
duration: Toast.durations.LONG,
|
|
position: Toast.positions.TOP,
|
|
shadow: true,
|
|
animation: true,
|
|
hideOnPress: true,
|
|
})
|
|
return true
|
|
},
|
|
}))
|
|
|
|
const progressColor =
|
|
text.length > DANGER_TEXT_LENGTH
|
|
? '#e60000'
|
|
: text.length > WARNING_TEXT_LENGTH
|
|
? '#f7c600'
|
|
: undefined
|
|
|
|
return (
|
|
<KeyboardAvoidingView style={styles.outer} behavior="padding">
|
|
<TextInput
|
|
multiline
|
|
scrollEnabled
|
|
onChangeText={text => onChangeText(text)}
|
|
value={text}
|
|
placeholder={replyTo ? 'Write your reply' : "What's new in the scene?"}
|
|
style={styles.textInput}
|
|
/>
|
|
<View style={[s.flexRow, s.pt10, s.pb10, s.pr5]}>
|
|
<View style={s.flex1} />
|
|
<View>
|
|
<ProgressCircle
|
|
color={progressColor}
|
|
progress={text.length / MAX_TEXT_LENGTH}
|
|
/>
|
|
</View>
|
|
</View>
|
|
</KeyboardAvoidingView>
|
|
)
|
|
})
|
|
|
|
const styles = StyleSheet.create({
|
|
outer: {
|
|
flexDirection: 'column',
|
|
backgroundColor: '#fff',
|
|
padding: 10,
|
|
height: '100%',
|
|
},
|
|
textInput: {
|
|
flex: 1,
|
|
padding: 10,
|
|
},
|
|
})
|