tooot/src/screens/Compose/Root/Header/TextInput.tsx

73 lines
2.0 KiB
TypeScript
Raw Normal View History

2020-12-13 14:04:25 +01:00
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
2021-01-19 01:13:45 +01:00
import React, { useContext } from 'react'
import { useTranslation } from 'react-i18next'
import { StyleSheet, Text, TextInput } from 'react-native'
import formatText from '../../formatText'
import ComposeContext from '../../utils/createContext'
2020-12-04 01:17:10 +01:00
const ComposeTextInput: React.FC = () => {
const { composeState, composeDispatch } = useContext(ComposeContext)
2021-01-19 01:13:45 +01:00
const { t } = useTranslation('sharedCompose')
const { mode, theme } = useTheme()
2020-12-04 01:17:10 +01:00
return (
<TextInput
keyboardAppearance={mode}
2020-12-04 01:17:10 +01:00
style={[
styles.textInput,
{
color: theme.primaryDefault,
2020-12-06 21:42:19 +01:00
borderBottomColor: theme.border
2020-12-04 01:17:10 +01:00
}
]}
autoCapitalize='none'
autoCorrect={false}
autoFocus
enablesReturnKeyAutomatically
multiline
2021-01-19 01:13:45 +01:00
placeholder={t('content.root.header.textInput.placeholder')}
2020-12-04 01:17:10 +01:00
placeholderTextColor={theme.secondary}
onChangeText={content =>
formatText({
textInput: 'text',
2020-12-07 12:31:40 +01:00
composeDispatch,
2020-12-04 01:17:10 +01:00
content
})
}
onFocus={() =>
composeDispatch({
type: 'textInputFocus',
payload: { current: 'text' }
})
}
2020-12-04 01:17:10 +01:00
onSelectionChange={({
nativeEvent: {
selection: { start, end }
}
}) => {
2020-12-10 19:19:56 +01:00
composeDispatch({
type: 'text',
payload: { selection: { start, end } }
})
2020-12-04 01:17:10 +01:00
}}
ref={composeState.textInputFocus.refs.text}
2021-03-18 23:32:31 +01:00
scrollEnabled={false}
2020-12-04 01:17:10 +01:00
>
2020-12-07 12:31:40 +01:00
<Text>{composeState.text.formatted}</Text>
2020-12-04 01:17:10 +01:00
</TextInput>
)
}
const styles = StyleSheet.create({
textInput: {
...StyleConstants.FontStyle.M,
2020-12-04 01:17:10 +01:00
marginTop: StyleConstants.Spacing.S,
2020-12-06 21:42:19 +01:00
paddingBottom: StyleConstants.Spacing.M,
marginLeft: StyleConstants.Spacing.Global.PagePadding,
2020-12-06 23:51:13 +01:00
marginRight: StyleConstants.Spacing.Global.PagePadding
2020-12-04 01:17:10 +01:00
}
})
export default ComposeTextInput