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

74 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-06 23:51:13 +01:00
const ComposeSpoilerInput: 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-06 23:51:13 +01:00
return (
<TextInput
keyboardAppearance={mode}
2020-12-06 23:51:13 +01:00
style={[
styles.spoilerInput,
{
color: theme.primaryDefault,
2020-12-06 23:51:13 +01:00
borderBottomColor: theme.border
}
]}
autoCapitalize='none'
autoCorrect={false}
autoFocus
enablesReturnKeyAutomatically
multiline
2021-01-19 01:13:45 +01:00
placeholder={t('content.root.header.spoilerInput.placeholder')}
2020-12-06 23:51:13 +01:00
placeholderTextColor={theme.secondary}
onChangeText={content =>
formatText({
textInput: 'spoiler',
2020-12-07 12:31:40 +01:00
composeDispatch,
2020-12-06 23:51:13 +01:00
content
})
}
onSelectionChange={({
nativeEvent: {
selection: { start, end }
}
}) => {
2020-12-07 12:31:40 +01:00
composeDispatch({
2020-12-06 23:51:13 +01:00
type: 'spoiler',
payload: { selection: { start, end } }
})
}}
ref={composeState.textInputFocus.refs.spoiler}
2021-03-18 23:32:31 +01:00
scrollEnabled={false}
2020-12-26 00:40:27 +01:00
onFocus={() =>
composeDispatch({
type: 'textInputFocus',
payload: { current: 'spoiler' }
})
}
2020-12-06 23:51:13 +01:00
>
2020-12-07 12:31:40 +01:00
<Text>{composeState.spoiler.formatted}</Text>
2020-12-06 23:51:13 +01:00
</TextInput>
)
}
const styles = StyleSheet.create({
spoilerInput: {
...StyleConstants.FontStyle.M,
2020-12-06 23:51:13 +01:00
marginTop: StyleConstants.Spacing.S,
paddingBottom: StyleConstants.Spacing.M,
marginLeft: StyleConstants.Spacing.Global.PagePadding,
marginRight: StyleConstants.Spacing.Global.PagePadding,
borderBottomWidth: 0.5
}
})
export default ComposeSpoilerInput