2020-12-10 19:19:56 +01:00
|
|
|
import React, { Dispatch } from 'react'
|
2020-12-06 23:51:13 +01:00
|
|
|
import { StyleSheet, Text, TextInput } from 'react-native'
|
|
|
|
import { StyleConstants } from 'src/utils/styles/constants'
|
|
|
|
import { useTheme } from 'src/utils/styles/ThemeManager'
|
2020-12-07 12:31:40 +01:00
|
|
|
import { PostAction, ComposeState } from '../Compose'
|
2020-12-06 23:51:13 +01:00
|
|
|
import formatText from './formatText'
|
|
|
|
|
|
|
|
export interface Props {
|
2020-12-07 12:31:40 +01:00
|
|
|
composeState: ComposeState
|
|
|
|
composeDispatch: Dispatch<PostAction>
|
2020-12-06 23:51:13 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
const ComposeSpoilerInput: React.FC<Props> = ({
|
2020-12-07 12:31:40 +01:00
|
|
|
composeState,
|
|
|
|
composeDispatch,
|
2020-12-06 23:51:13 +01:00
|
|
|
}) => {
|
|
|
|
const { theme } = useTheme()
|
|
|
|
|
|
|
|
return (
|
|
|
|
<TextInput
|
|
|
|
style={[
|
|
|
|
styles.spoilerInput,
|
|
|
|
{
|
|
|
|
color: theme.primary,
|
|
|
|
borderBottomColor: theme.border
|
|
|
|
}
|
|
|
|
]}
|
|
|
|
autoCapitalize='none'
|
|
|
|
autoCorrect={false}
|
|
|
|
autoFocus
|
|
|
|
enablesReturnKeyAutomatically
|
|
|
|
multiline
|
|
|
|
placeholder='折叠部分的警告信息'
|
|
|
|
placeholderTextColor={theme.secondary}
|
|
|
|
onChangeText={content =>
|
|
|
|
formatText({
|
|
|
|
origin: '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={textInputRef}
|
|
|
|
scrollEnabled
|
|
|
|
>
|
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: {
|
|
|
|
fontSize: StyleConstants.Font.Size.M,
|
|
|
|
marginTop: StyleConstants.Spacing.S,
|
|
|
|
paddingBottom: StyleConstants.Spacing.M,
|
|
|
|
marginLeft: StyleConstants.Spacing.Global.PagePadding,
|
|
|
|
marginRight: StyleConstants.Spacing.Global.PagePadding,
|
|
|
|
borderBottomWidth: 0.5
|
|
|
|
}
|
|
|
|
})
|
|
|
|
|
|
|
|
export default React.memo(
|
|
|
|
ComposeSpoilerInput,
|
|
|
|
(prev, next) =>
|
2020-12-07 12:31:40 +01:00
|
|
|
prev.composeState.spoiler.formatted === next.composeState.spoiler.formatted
|
2020-12-06 23:51:13 +01:00
|
|
|
)
|