2022-05-07 00:52:32 +02:00
|
|
|
import CustomText from '@components/Text'
|
2022-06-05 21:17:39 +02:00
|
|
|
import PasteInput, { PastedFile } from '@mattermost/react-native-paste-input'
|
2022-05-08 12:15:16 +02:00
|
|
|
import { getInstanceConfigurationStatusMaxAttachments } from '@utils/slices/instancesSlice'
|
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'
|
2021-01-19 01:13:45 +01:00
|
|
|
import React, { useContext } from 'react'
|
|
|
|
import { useTranslation } from 'react-i18next'
|
2022-06-05 21:17:39 +02:00
|
|
|
import { Alert } from 'react-native'
|
2022-05-08 12:15:16 +02:00
|
|
|
import { useSelector } from 'react-redux'
|
2021-01-19 01:13:45 +01:00
|
|
|
import formatText from '../../formatText'
|
|
|
|
import ComposeContext from '../../utils/createContext'
|
2022-05-08 12:15:16 +02:00
|
|
|
import { uploadAttachment } from '../Footer/addAttachment'
|
2020-12-04 01:17:10 +01:00
|
|
|
|
2020-12-11 00:29:22 +01:00
|
|
|
const ComposeTextInput: 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-04 01:17:10 +01:00
|
|
|
|
2022-09-19 22:01:13 +02:00
|
|
|
const maxAttachments = useSelector(getInstanceConfigurationStatusMaxAttachments, () => true)
|
2022-05-08 12:15:16 +02:00
|
|
|
|
2022-07-09 11:40:48 +02:00
|
|
|
const adaptiveFontsize = useSelector(getSettingsFontsize)
|
2022-09-19 22:01:13 +02:00
|
|
|
const adaptedFontsize = adaptiveScale(StyleConstants.Font.Size.M, adaptiveFontsize)
|
|
|
|
const adaptedLineheight = adaptiveScale(StyleConstants.Font.LineHeight.M, adaptiveFontsize)
|
2022-07-09 11:40:48 +02:00
|
|
|
|
2020-12-04 01:17:10 +01:00
|
|
|
return (
|
2022-06-05 21:17:39 +02:00
|
|
|
<PasteInput
|
2021-03-08 23:48:09 +01:00
|
|
|
keyboardAppearance={mode}
|
2022-05-07 00:52:32 +02:00
|
|
|
style={{
|
|
|
|
...StyleConstants.FontStyle.M,
|
|
|
|
marginTop: StyleConstants.Spacing.S,
|
|
|
|
paddingBottom: StyleConstants.Spacing.M,
|
|
|
|
marginLeft: StyleConstants.Spacing.Global.PagePadding,
|
|
|
|
marginRight: StyleConstants.Spacing.Global.PagePadding,
|
|
|
|
color: colors.primaryDefault,
|
2022-07-09 11:40:48 +02:00
|
|
|
borderBottomColor: colors.border,
|
|
|
|
fontSize: adaptedFontsize,
|
|
|
|
lineHeight: adaptedLineheight
|
2022-05-07 00:52:32 +02:00
|
|
|
}}
|
2020-12-04 01:17:10 +01:00
|
|
|
autoFocus
|
|
|
|
enablesReturnKeyAutomatically
|
|
|
|
multiline
|
2021-01-19 01:13:45 +01:00
|
|
|
placeholder={t('content.root.header.textInput.placeholder')}
|
2022-02-12 14:51:01 +01:00
|
|
|
placeholderTextColor={colors.secondary}
|
2020-12-04 01:17:10 +01:00
|
|
|
onChangeText={content =>
|
|
|
|
formatText({
|
2020-12-11 00:29:22 +01:00
|
|
|
textInput: 'text',
|
2020-12-07 12:31:40 +01:00
|
|
|
composeDispatch,
|
2020-12-04 01:17:10 +01:00
|
|
|
content
|
|
|
|
})
|
|
|
|
}
|
2022-09-19 22:01:13 +02:00
|
|
|
onFocus={() => {
|
2020-12-11 00:29:22 +01:00
|
|
|
composeDispatch({
|
|
|
|
type: 'textInputFocus',
|
|
|
|
payload: { current: 'text' }
|
|
|
|
})
|
2022-09-19 22:01:13 +02:00
|
|
|
composeState.textInputFocus.isFocused.text.current = true
|
|
|
|
}}
|
|
|
|
onBlur={() => {
|
|
|
|
composeState.textInputFocus.isFocused.text.current = false
|
|
|
|
}}
|
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
|
|
|
}}
|
2020-12-11 00:29:22 +01:00
|
|
|
ref={composeState.textInputFocus.refs.text}
|
2021-03-18 23:32:31 +01:00
|
|
|
scrollEnabled={false}
|
2022-06-05 21:17:39 +02:00
|
|
|
disableCopyPaste={false}
|
|
|
|
onPaste={(error: string | null | undefined, files: PastedFile[]) => {
|
2022-09-19 22:01:13 +02:00
|
|
|
if (composeState.attachments.uploads.length + files.length > maxAttachments) {
|
2022-05-08 12:15:16 +02:00
|
|
|
Alert.alert(
|
2022-09-19 22:01:13 +02:00
|
|
|
t('content.root.header.textInput.keyboardImage.exceedMaximum.title'),
|
2022-05-08 12:15:16 +02:00
|
|
|
undefined,
|
|
|
|
[
|
|
|
|
{
|
2022-09-19 22:01:13 +02:00
|
|
|
text: t('content.root.header.textInput.keyboardImage.exceedMaximum.OK'),
|
2022-05-08 12:15:16 +02:00
|
|
|
style: 'default'
|
|
|
|
}
|
|
|
|
]
|
|
|
|
)
|
|
|
|
return
|
|
|
|
}
|
2022-06-05 21:17:39 +02:00
|
|
|
|
|
|
|
for (const file of files) {
|
2022-08-07 01:18:10 +02:00
|
|
|
uploadAttachment({ composeDispatch, media: file })
|
2022-05-08 12:15:16 +02:00
|
|
|
}
|
|
|
|
}}
|
2020-12-04 01:17:10 +01:00
|
|
|
>
|
2022-05-07 00:52:32 +02:00
|
|
|
<CustomText>{composeState.text.formatted}</CustomText>
|
2022-06-05 21:17:39 +02:00
|
|
|
</PasteInput>
|
2020-12-04 01:17:10 +01:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2020-12-11 00:29:22 +01:00
|
|
|
export default ComposeTextInput
|