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

81 lines
2.4 KiB
TypeScript
Raw Normal View History

import CustomText from '@components/Text'
2022-07-09 11:40:48 +02:00
import { getSettingsFontsize } from '@utils/slices/settingsSlice'
2020-12-13 14:04:25 +01:00
import { StyleConstants } from '@utils/styles/constants'
2022-07-09 11:40:48 +02:00
import { adaptiveScale } from '@utils/styles/scaling'
2020-12-13 14:04:25 +01:00
import { useTheme } from '@utils/styles/ThemeManager'
import React, { useContext } from 'react'
2021-01-19 01:13:45 +01:00
import { useTranslation } from 'react-i18next'
import { TextInput } from 'react-native'
2022-07-09 11:40:48 +02:00
import { useSelector } from 'react-redux'
2021-01-19 01:13:45 +01:00
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-03-28 23:31:10 +02:00
const { t } = useTranslation('screenCompose')
2022-02-12 14:51:01 +01:00
const { colors, mode } = useTheme()
2020-12-06 23:51:13 +01:00
2022-07-09 11:40:48 +02:00
const adaptiveFontsize = useSelector(getSettingsFontsize)
const adaptedFontsize = adaptiveScale(
StyleConstants.Font.Size.M,
adaptiveFontsize
)
const adaptedLineheight = adaptiveScale(
StyleConstants.Font.LineHeight.M,
adaptiveFontsize
)
2020-12-06 23:51:13 +01:00
return (
<TextInput
keyboardAppearance={mode}
style={{
...StyleConstants.FontStyle.M,
marginTop: StyleConstants.Spacing.S,
paddingBottom: StyleConstants.Spacing.M,
marginLeft: StyleConstants.Spacing.Global.PagePadding,
marginRight: StyleConstants.Spacing.Global.PagePadding,
borderBottomWidth: 0.5,
color: colors.primaryDefault,
2022-07-09 11:40:48 +02:00
borderBottomColor: colors.border,
fontSize: adaptedFontsize,
lineHeight: adaptedLineheight
}}
2020-12-06 23:51:13 +01:00
autoCapitalize='none'
autoCorrect={false}
autoFocus
enablesReturnKeyAutomatically
multiline
2021-01-19 01:13:45 +01:00
placeholder={t('content.root.header.spoilerInput.placeholder')}
2022-02-12 14:51:01 +01:00
placeholderTextColor={colors.secondary}
2020-12-06 23:51:13 +01:00
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 } }
})
}}
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
>
<CustomText>{composeState.spoiler.formatted}</CustomText>
2020-12-06 23:51:13 +01:00
</TextInput>
)
}
export default ComposeSpoilerInput