2020-12-03 22:03:06 +01:00
|
|
|
import { Feather } from '@expo/vector-icons'
|
2020-12-06 21:42:19 +01:00
|
|
|
import React, { Dispatch, useCallback, useMemo } from 'react'
|
2020-12-10 19:19:56 +01:00
|
|
|
import { ActionSheetIOS, StyleSheet, TextInput, View } from 'react-native'
|
2020-12-03 22:03:06 +01:00
|
|
|
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-03 22:03:06 +01:00
|
|
|
import addAttachments from './addAttachments'
|
|
|
|
|
|
|
|
export interface Props {
|
|
|
|
textInputRef: React.RefObject<TextInput>
|
2020-12-07 12:31:40 +01:00
|
|
|
composeState: ComposeState
|
|
|
|
composeDispatch: Dispatch<PostAction>
|
2020-12-03 22:03:06 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
const ComposeActions: React.FC<Props> = ({
|
|
|
|
textInputRef,
|
2020-12-07 12:31:40 +01:00
|
|
|
composeState,
|
|
|
|
composeDispatch
|
2020-12-03 22:03:06 +01:00
|
|
|
}) => {
|
|
|
|
const { theme } = useTheme()
|
|
|
|
|
2020-12-06 21:42:19 +01:00
|
|
|
const attachmentColor = useMemo(() => {
|
2020-12-07 12:31:40 +01:00
|
|
|
if (composeState.poll.active) return theme.disabled
|
|
|
|
if (composeState.attachmentUploadProgress) return theme.primary
|
2020-12-06 21:42:19 +01:00
|
|
|
|
2020-12-07 12:31:40 +01:00
|
|
|
if (composeState.attachments.uploads.length) {
|
2020-12-06 21:42:19 +01:00
|
|
|
return theme.primary
|
|
|
|
} else {
|
|
|
|
return theme.secondary
|
|
|
|
}
|
|
|
|
}, [
|
2020-12-07 12:31:40 +01:00
|
|
|
composeState.poll.active,
|
|
|
|
composeState.attachments.uploads,
|
|
|
|
composeState.attachmentUploadProgress
|
2020-12-06 21:42:19 +01:00
|
|
|
])
|
|
|
|
const attachmentOnPress = useCallback(async () => {
|
2020-12-07 12:31:40 +01:00
|
|
|
if (composeState.poll.active) return
|
|
|
|
if (composeState.attachmentUploadProgress) return
|
2020-12-06 21:42:19 +01:00
|
|
|
|
2020-12-07 12:31:40 +01:00
|
|
|
if (!composeState.attachments.uploads.length) {
|
|
|
|
return await addAttachments({ composeState, composeDispatch })
|
2020-12-06 21:42:19 +01:00
|
|
|
}
|
|
|
|
}, [
|
2020-12-07 12:31:40 +01:00
|
|
|
composeState.poll.active,
|
|
|
|
composeState.attachments.uploads,
|
|
|
|
composeState.attachmentUploadProgress
|
2020-12-06 21:42:19 +01:00
|
|
|
])
|
|
|
|
|
|
|
|
const pollColor = useMemo(() => {
|
2020-12-07 12:31:40 +01:00
|
|
|
if (composeState.attachments.uploads.length) return theme.disabled
|
|
|
|
if (composeState.attachmentUploadProgress) return theme.disabled
|
2020-12-06 21:42:19 +01:00
|
|
|
|
2020-12-07 12:31:40 +01:00
|
|
|
if (composeState.poll.active) {
|
2020-12-06 21:42:19 +01:00
|
|
|
return theme.primary
|
|
|
|
} else {
|
|
|
|
return theme.secondary
|
|
|
|
}
|
|
|
|
}, [
|
2020-12-07 12:31:40 +01:00
|
|
|
composeState.poll.active,
|
|
|
|
composeState.attachments.uploads,
|
|
|
|
composeState.attachmentUploadProgress
|
2020-12-06 21:42:19 +01:00
|
|
|
])
|
|
|
|
const pollOnPress = useCallback(() => {
|
2020-12-07 00:23:26 +01:00
|
|
|
if (
|
2020-12-07 12:31:40 +01:00
|
|
|
!composeState.attachments.uploads.length &&
|
|
|
|
!composeState.attachmentUploadProgress
|
2020-12-07 00:23:26 +01:00
|
|
|
) {
|
2020-12-07 12:31:40 +01:00
|
|
|
composeDispatch({
|
2020-12-06 21:42:19 +01:00
|
|
|
type: 'poll',
|
2020-12-07 12:31:40 +01:00
|
|
|
payload: { ...composeState.poll, active: !composeState.poll.active }
|
2020-12-06 21:42:19 +01:00
|
|
|
})
|
|
|
|
}
|
2020-12-07 12:31:40 +01:00
|
|
|
if (composeState.poll.active) {
|
2020-12-06 21:42:19 +01:00
|
|
|
textInputRef.current?.focus()
|
|
|
|
}
|
|
|
|
}, [
|
2020-12-07 12:31:40 +01:00
|
|
|
composeState.poll.active,
|
|
|
|
composeState.attachments.uploads,
|
|
|
|
composeState.attachmentUploadProgress
|
2020-12-06 21:42:19 +01:00
|
|
|
])
|
|
|
|
|
2020-12-10 19:19:56 +01:00
|
|
|
const visibilityIcon = useMemo(() => {
|
|
|
|
switch (composeState.visibility) {
|
|
|
|
case 'public':
|
|
|
|
return 'globe'
|
|
|
|
case 'unlisted':
|
|
|
|
return 'unlock'
|
|
|
|
case 'private':
|
|
|
|
return 'lock'
|
|
|
|
case 'direct':
|
|
|
|
return 'mail'
|
|
|
|
}
|
|
|
|
}, [composeState.visibility])
|
|
|
|
const visibilityOnPress = useCallback(
|
|
|
|
() =>
|
|
|
|
ActionSheetIOS.showActionSheetWithOptions(
|
|
|
|
{
|
|
|
|
options: ['公开', '不公开', '仅关注着', '私信', '取消'],
|
|
|
|
cancelButtonIndex: 4
|
|
|
|
},
|
|
|
|
buttonIndex => {
|
|
|
|
switch (buttonIndex) {
|
|
|
|
case 0:
|
|
|
|
composeDispatch({ type: 'visibility', payload: 'public' })
|
|
|
|
break
|
|
|
|
case 1:
|
|
|
|
composeDispatch({ type: 'visibility', payload: 'unlisted' })
|
|
|
|
break
|
|
|
|
case 2:
|
|
|
|
composeDispatch({ type: 'visibility', payload: 'private' })
|
|
|
|
break
|
|
|
|
case 3:
|
|
|
|
composeDispatch({ type: 'visibility', payload: 'direct' })
|
|
|
|
break
|
|
|
|
}
|
|
|
|
}
|
|
|
|
),
|
|
|
|
[]
|
|
|
|
)
|
|
|
|
|
|
|
|
const spoilerOnPress = useCallback(
|
|
|
|
() =>
|
|
|
|
composeDispatch({
|
|
|
|
type: 'spoiler',
|
|
|
|
payload: { active: !composeState.spoiler.active }
|
|
|
|
}),
|
|
|
|
[composeState.spoiler.active]
|
|
|
|
)
|
|
|
|
|
2020-12-06 22:32:36 +01:00
|
|
|
const emojiColor = useMemo(() => {
|
2020-12-07 12:31:40 +01:00
|
|
|
if (!composeState.emoji.emojis) return theme.disabled
|
|
|
|
if (composeState.emoji.active) {
|
2020-12-06 22:32:36 +01:00
|
|
|
return theme.primary
|
|
|
|
} else {
|
|
|
|
return theme.secondary
|
|
|
|
}
|
2020-12-07 12:31:40 +01:00
|
|
|
}, [composeState.emoji.active, composeState.emoji.emojis])
|
2020-12-06 22:32:36 +01:00
|
|
|
const emojiOnPress = useCallback(() => {
|
2020-12-07 12:31:40 +01:00
|
|
|
if (composeState.emoji.emojis) {
|
|
|
|
if (composeState.emoji.active) {
|
|
|
|
composeDispatch({
|
2020-12-06 22:32:36 +01:00
|
|
|
type: 'emoji',
|
2020-12-07 12:31:40 +01:00
|
|
|
payload: { ...composeState.emoji, active: false }
|
2020-12-06 22:32:36 +01:00
|
|
|
})
|
|
|
|
} else {
|
2020-12-07 12:31:40 +01:00
|
|
|
composeDispatch({
|
2020-12-06 22:32:36 +01:00
|
|
|
type: 'emoji',
|
2020-12-07 12:31:40 +01:00
|
|
|
payload: { ...composeState.emoji, active: true }
|
2020-12-06 22:32:36 +01:00
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
2020-12-07 12:31:40 +01:00
|
|
|
}, [composeState.emoji.active, composeState.emoji.emojis])
|
2020-12-06 22:32:36 +01:00
|
|
|
|
2020-12-03 22:03:06 +01:00
|
|
|
return (
|
2020-12-10 19:19:56 +01:00
|
|
|
<View
|
2020-12-03 22:03:06 +01:00
|
|
|
style={[
|
|
|
|
styles.additions,
|
|
|
|
{ backgroundColor: theme.background, borderTopColor: theme.border }
|
|
|
|
]}
|
|
|
|
>
|
|
|
|
<Feather
|
|
|
|
name='aperture'
|
|
|
|
size={24}
|
2020-12-06 21:42:19 +01:00
|
|
|
color={attachmentColor}
|
|
|
|
onPress={attachmentOnPress}
|
2020-12-03 22:03:06 +01:00
|
|
|
/>
|
|
|
|
<Feather
|
|
|
|
name='bar-chart-2'
|
|
|
|
size={24}
|
2020-12-06 21:42:19 +01:00
|
|
|
color={pollColor}
|
|
|
|
onPress={pollOnPress}
|
2020-12-03 22:03:06 +01:00
|
|
|
/>
|
|
|
|
<Feather
|
2020-12-10 19:19:56 +01:00
|
|
|
name={visibilityIcon}
|
2020-12-03 22:03:06 +01:00
|
|
|
size={24}
|
2020-12-06 12:52:29 +01:00
|
|
|
color={theme.secondary}
|
2020-12-10 19:19:56 +01:00
|
|
|
onPress={visibilityOnPress}
|
2020-12-03 22:03:06 +01:00
|
|
|
/>
|
2020-12-06 23:51:13 +01:00
|
|
|
<Feather
|
|
|
|
name='alert-triangle'
|
|
|
|
size={24}
|
2020-12-07 12:31:40 +01:00
|
|
|
color={composeState.spoiler.active ? theme.primary : theme.secondary}
|
2020-12-10 19:19:56 +01:00
|
|
|
onPress={spoilerOnPress}
|
2020-12-06 23:51:13 +01:00
|
|
|
/>
|
2020-12-03 22:03:06 +01:00
|
|
|
<Feather
|
|
|
|
name='smile'
|
|
|
|
size={24}
|
2020-12-06 22:32:36 +01:00
|
|
|
color={emojiColor}
|
|
|
|
onPress={emojiOnPress}
|
2020-12-03 22:03:06 +01:00
|
|
|
/>
|
2020-12-10 19:19:56 +01:00
|
|
|
</View>
|
2020-12-03 22:03:06 +01:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
const styles = StyleSheet.create({
|
|
|
|
additions: {
|
|
|
|
height: 45,
|
|
|
|
borderTopWidth: StyleSheet.hairlineWidth,
|
|
|
|
flexDirection: 'row',
|
|
|
|
justifyContent: 'space-around',
|
|
|
|
alignItems: 'center'
|
|
|
|
},
|
|
|
|
count: {
|
|
|
|
textAlign: 'center',
|
|
|
|
fontSize: StyleConstants.Font.Size.M,
|
|
|
|
fontWeight: StyleConstants.Font.Weight.Bold
|
|
|
|
}
|
|
|
|
})
|
|
|
|
|
|
|
|
export default ComposeActions
|