2020-12-26 23:05:17 +01:00
|
|
|
import Button from '@components/Button'
|
2021-01-03 02:00:26 +01:00
|
|
|
import Icon from '@components/Icon'
|
2020-12-26 23:05:17 +01:00
|
|
|
import { MenuRow } from '@components/Menu'
|
2022-05-07 00:52:32 +02:00
|
|
|
import CustomText from '@components/Text'
|
2021-01-13 01:03:46 +01:00
|
|
|
import { useActionSheet } from '@expo/react-native-action-sheet'
|
2022-12-28 23:41:36 +01:00
|
|
|
import { androidActionSheetStyles } from '@utils/helpers/androidActionSheetStyles'
|
|
|
|
import { useInstanceQuery } from '@utils/queryHooks/instance'
|
2021-01-01 17:52:14 +01:00
|
|
|
import { StyleConstants } from '@utils/styles/constants'
|
|
|
|
import { useTheme } from '@utils/styles/ThemeManager'
|
|
|
|
import React, { useContext, useEffect, useState } from 'react'
|
2021-01-19 01:13:45 +01:00
|
|
|
import { useTranslation } from 'react-i18next'
|
2022-05-07 00:52:32 +02:00
|
|
|
import { StyleSheet, TextInput, View } from 'react-native'
|
2021-01-19 01:13:45 +01:00
|
|
|
import ComposeContext from '../../utils/createContext'
|
2020-12-03 22:03:06 +01:00
|
|
|
|
2020-12-11 00:29:22 +01:00
|
|
|
const ComposePoll: React.FC = () => {
|
2021-01-13 01:03:46 +01:00
|
|
|
const { showActionSheetWithOptions } = useActionSheet()
|
2020-12-11 00:29:22 +01:00
|
|
|
const {
|
|
|
|
composeState: {
|
|
|
|
poll: { total, options, multiple, expire }
|
|
|
|
},
|
|
|
|
composeDispatch
|
|
|
|
} = useContext(ComposeContext)
|
2022-12-23 15:53:40 +01:00
|
|
|
const { t } = useTranslation(['common', 'screenCompose'])
|
2022-02-12 14:51:01 +01:00
|
|
|
const { colors, mode } = useTheme()
|
2020-12-03 22:03:06 +01:00
|
|
|
|
2022-12-28 23:41:36 +01:00
|
|
|
const { data } = useInstanceQuery()
|
|
|
|
const MAX_OPTIONS = data?.configuration?.polls.max_options || 4
|
|
|
|
const MAX_CHARS_PER_OPTION = data?.configuration?.polls.max_characters_per_option
|
|
|
|
const MIN_EXPIRATION = data?.configuration?.polls.min_expiration || 300
|
|
|
|
const MAX_EXPIRATION = data?.configuration?.polls.max_expiration || 2629746
|
2021-11-15 22:34:43 +01:00
|
|
|
|
2020-12-03 22:03:06 +01:00
|
|
|
const [firstRender, setFirstRender] = useState(true)
|
|
|
|
useEffect(() => {
|
|
|
|
setFirstRender(false)
|
|
|
|
}, [])
|
|
|
|
|
|
|
|
return (
|
2022-05-07 00:52:32 +02:00
|
|
|
<View
|
|
|
|
style={{
|
|
|
|
flex: 1,
|
|
|
|
borderWidth: StyleSheet.hairlineWidth,
|
2023-02-12 14:50:31 +01:00
|
|
|
borderRadius: StyleConstants.Spacing.S,
|
2022-05-07 00:52:32 +02:00
|
|
|
margin: StyleConstants.Spacing.Global.PagePadding,
|
|
|
|
borderColor: colors.border
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<View
|
|
|
|
style={{
|
|
|
|
marginTop: StyleConstants.Spacing.M,
|
|
|
|
marginBottom: StyleConstants.Spacing.S
|
|
|
|
}}
|
|
|
|
>
|
2023-01-23 23:05:25 +01:00
|
|
|
{[...Array(total)].map((_, i) => {
|
|
|
|
const hasConflict = options.filter((_, ii) => ii !== i && ii < total).includes(options[i])
|
2020-12-06 22:32:36 +01:00
|
|
|
return (
|
|
|
|
<View key={i} style={styles.option}>
|
2021-01-03 02:00:26 +01:00
|
|
|
<Icon
|
2023-01-25 00:15:46 +01:00
|
|
|
name={multiple ? 'square' : 'circle'}
|
2020-12-06 22:32:36 +01:00
|
|
|
size={StyleConstants.Font.Size.L}
|
2022-02-12 14:51:01 +01:00
|
|
|
color={colors.secondary}
|
2020-12-06 22:32:36 +01:00
|
|
|
/>
|
|
|
|
<TextInput
|
2021-04-09 21:43:12 +02:00
|
|
|
accessibilityLabel={t(
|
2022-12-23 15:53:40 +01:00
|
|
|
'screenCompose:content.root.footer.poll.option.placeholder.accessibilityLabel',
|
2021-04-09 21:43:12 +02:00
|
|
|
{ index: i + 1 }
|
|
|
|
)}
|
2021-03-08 23:48:09 +01:00
|
|
|
keyboardAppearance={mode}
|
2020-12-06 22:32:36 +01:00
|
|
|
{...(i === 0 && firstRender && { autoFocus: true })}
|
2022-05-07 00:52:32 +02:00
|
|
|
style={{
|
|
|
|
flex: 1,
|
|
|
|
padding: StyleConstants.Spacing.S,
|
|
|
|
borderWidth: StyleSheet.hairlineWidth,
|
|
|
|
borderRadius: 6,
|
|
|
|
...StyleConstants.FontStyle.M,
|
|
|
|
marginLeft: StyleConstants.Spacing.S,
|
|
|
|
borderColor: colors.border,
|
|
|
|
color: hasConflict ? colors.red : colors.primaryDefault
|
|
|
|
}}
|
2021-01-19 01:13:45 +01:00
|
|
|
placeholder={
|
|
|
|
multiple
|
2022-12-23 15:53:40 +01:00
|
|
|
? t('screenCompose:content.root.footer.poll.option.placeholder.multiple')
|
|
|
|
: t('screenCompose:content.root.footer.poll.option.placeholder.single')
|
2021-01-19 01:13:45 +01:00
|
|
|
}
|
2022-02-12 14:51:01 +01:00
|
|
|
placeholderTextColor={colors.disabled}
|
2021-11-15 22:34:43 +01:00
|
|
|
maxLength={MAX_CHARS_PER_OPTION}
|
2020-12-10 19:19:56 +01:00
|
|
|
value={options[i]}
|
2023-01-23 23:05:25 +01:00
|
|
|
onChangeText={e => {
|
|
|
|
const newOptions = [...options]
|
|
|
|
newOptions[i] = e
|
2020-12-07 12:31:40 +01:00
|
|
|
composeDispatch({
|
2020-12-06 22:32:36 +01:00
|
|
|
type: 'poll',
|
2023-01-23 23:05:25 +01:00
|
|
|
payload: { options: [...newOptions] }
|
2020-12-06 22:32:36 +01:00
|
|
|
})
|
2023-01-23 23:05:25 +01:00
|
|
|
}}
|
2020-12-06 22:32:36 +01:00
|
|
|
/>
|
|
|
|
</View>
|
|
|
|
)
|
|
|
|
})}
|
2020-12-03 22:03:06 +01:00
|
|
|
</View>
|
2022-05-07 00:52:32 +02:00
|
|
|
<View
|
|
|
|
style={{
|
|
|
|
flex: 1,
|
|
|
|
flexDirection: 'row',
|
|
|
|
alignItems: 'center',
|
|
|
|
justifyContent: 'flex-end',
|
|
|
|
marginRight: StyleConstants.Spacing.M
|
|
|
|
}}
|
|
|
|
>
|
2020-12-26 23:05:17 +01:00
|
|
|
<Button
|
2021-11-15 22:34:43 +01:00
|
|
|
{...(total > 2
|
|
|
|
? {
|
|
|
|
accessibilityLabel: t(
|
2022-12-23 15:53:40 +01:00
|
|
|
'screenCompose:content.root.footer.poll.quantity.reduce.accessibilityLabel',
|
2021-11-15 22:34:43 +01:00
|
|
|
{ amount: total - 1 }
|
|
|
|
)
|
|
|
|
}
|
|
|
|
: {
|
2022-12-23 15:53:40 +01:00
|
|
|
accessibilityHint: t(
|
|
|
|
'screenCompose:content.root.footer.poll.quantity.reduce.accessibilityHint',
|
|
|
|
{ amount: total }
|
|
|
|
)
|
2021-11-15 22:34:43 +01:00
|
|
|
})}
|
|
|
|
onPress={() => {
|
|
|
|
total > 2 &&
|
|
|
|
composeDispatch({
|
|
|
|
type: 'poll',
|
|
|
|
payload: { total: total - 1 }
|
|
|
|
})
|
|
|
|
}}
|
|
|
|
type='icon'
|
2023-01-25 00:15:46 +01:00
|
|
|
content='minus'
|
2021-11-15 22:34:43 +01:00
|
|
|
round
|
|
|
|
disabled={!(total > 2)}
|
|
|
|
/>
|
2022-05-07 00:52:32 +02:00
|
|
|
<CustomText
|
|
|
|
style={{
|
|
|
|
marginHorizontal: StyleConstants.Spacing.S,
|
|
|
|
color: colors.secondary
|
|
|
|
}}
|
|
|
|
>
|
2021-11-15 22:34:43 +01:00
|
|
|
{total} / {MAX_OPTIONS}
|
2022-05-07 00:52:32 +02:00
|
|
|
</CustomText>
|
2021-11-15 22:34:43 +01:00
|
|
|
<Button
|
|
|
|
{...(total < MAX_OPTIONS
|
2021-04-09 21:43:12 +02:00
|
|
|
? {
|
|
|
|
accessibilityLabel: t(
|
2022-12-23 15:53:40 +01:00
|
|
|
'screenCompose:content.root.footer.poll.quantity.increase.accessibilityLabel',
|
2021-04-09 21:43:12 +02:00
|
|
|
{ amount: total + 1 }
|
|
|
|
)
|
|
|
|
}
|
|
|
|
: {
|
|
|
|
accessibilityHint: t(
|
2022-12-23 15:53:40 +01:00
|
|
|
'screenCompose:content.root.footer.poll.quantity.increase.accessibilityHint',
|
2021-04-09 21:43:12 +02:00
|
|
|
{ amount: total }
|
|
|
|
)
|
|
|
|
})}
|
2020-12-11 00:29:22 +01:00
|
|
|
onPress={() => {
|
2021-11-15 22:34:43 +01:00
|
|
|
total < MAX_OPTIONS &&
|
2020-12-11 00:29:22 +01:00
|
|
|
composeDispatch({
|
|
|
|
type: 'poll',
|
|
|
|
payload: { total: total + 1 }
|
|
|
|
})
|
|
|
|
}}
|
2020-12-26 23:05:17 +01:00
|
|
|
type='icon'
|
2023-01-25 00:15:46 +01:00
|
|
|
content='plus'
|
2020-12-26 23:05:17 +01:00
|
|
|
round
|
2021-11-15 22:34:43 +01:00
|
|
|
disabled={!(total < MAX_OPTIONS)}
|
2020-12-03 22:03:06 +01:00
|
|
|
/>
|
|
|
|
</View>
|
2022-12-19 22:36:30 +01:00
|
|
|
<View style={{ paddingHorizontal: StyleConstants.Spacing.Global.PagePadding }}>
|
2021-05-09 23:16:53 +02:00
|
|
|
<MenuRow
|
2022-12-23 15:53:40 +01:00
|
|
|
title={t('screenCompose:content.root.footer.poll.multiple.heading')}
|
2021-05-09 23:16:53 +02:00
|
|
|
content={
|
|
|
|
multiple
|
2022-12-23 15:53:40 +01:00
|
|
|
? t('screenCompose:content.root.footer.poll.multiple.options.multiple')
|
|
|
|
: t('screenCompose:content.root.footer.poll.multiple.options.single')
|
2021-05-09 23:16:53 +02:00
|
|
|
}
|
|
|
|
onPress={() =>
|
|
|
|
showActionSheetWithOptions(
|
|
|
|
{
|
|
|
|
options: [
|
2022-12-23 15:53:40 +01:00
|
|
|
t('screenCompose:content.root.footer.poll.multiple.options.single'),
|
|
|
|
t('screenCompose:content.root.footer.poll.multiple.options.multiple'),
|
2022-11-30 22:42:42 +01:00
|
|
|
t('common:buttons.cancel')
|
2021-05-09 23:16:53 +02:00
|
|
|
],
|
2022-02-12 14:51:01 +01:00
|
|
|
cancelButtonIndex: 2,
|
2022-12-19 22:36:30 +01:00
|
|
|
...androidActionSheetStyles(colors)
|
2021-05-09 23:16:53 +02:00
|
|
|
},
|
|
|
|
index => {
|
2021-11-15 22:34:43 +01:00
|
|
|
if (index && index < 2) {
|
2021-05-09 23:16:53 +02:00
|
|
|
composeDispatch({
|
|
|
|
type: 'poll',
|
|
|
|
payload: { multiple: index === 1 }
|
|
|
|
})
|
|
|
|
}
|
2021-01-24 02:25:43 +01:00
|
|
|
}
|
2021-05-09 23:16:53 +02:00
|
|
|
)
|
|
|
|
}
|
2023-01-25 00:15:46 +01:00
|
|
|
iconBack='chevron-right'
|
2021-05-09 23:16:53 +02:00
|
|
|
/>
|
|
|
|
<MenuRow
|
2022-12-23 15:53:40 +01:00
|
|
|
title={t('screenCompose:content.root.footer.poll.expiration.heading')}
|
|
|
|
content={t(`screenCompose:content.root.footer.poll.expiration.options.${expire}`)}
|
2021-05-09 23:16:53 +02:00
|
|
|
onPress={() => {
|
2022-02-02 22:30:06 +01:00
|
|
|
const expirations = [
|
2021-11-15 22:34:43 +01:00
|
|
|
'300',
|
|
|
|
'1800',
|
|
|
|
'3600',
|
|
|
|
'21600',
|
|
|
|
'86400',
|
|
|
|
'259200',
|
|
|
|
'604800'
|
|
|
|
].filter(
|
|
|
|
expiration =>
|
2022-12-19 22:36:30 +01:00
|
|
|
parseInt(expiration) >= MIN_EXPIRATION && parseInt(expiration) <= MAX_EXPIRATION
|
2021-11-15 22:34:43 +01:00
|
|
|
)
|
2021-05-09 23:16:53 +02:00
|
|
|
showActionSheetWithOptions(
|
|
|
|
{
|
|
|
|
options: [
|
2022-12-23 15:53:40 +01:00
|
|
|
...expirations.map(e =>
|
|
|
|
t(`screenCompose:content.root.footer.poll.expiration.options.${e}` as any)
|
|
|
|
),
|
2022-11-30 22:42:42 +01:00
|
|
|
t('common:buttons.cancel')
|
2021-05-09 23:16:53 +02:00
|
|
|
],
|
2022-02-12 14:51:01 +01:00
|
|
|
cancelButtonIndex: expirations.length,
|
2022-12-19 22:36:30 +01:00
|
|
|
...androidActionSheetStyles(colors)
|
2021-05-09 23:16:53 +02:00
|
|
|
},
|
|
|
|
index => {
|
2022-05-01 00:18:18 +02:00
|
|
|
if (index !== undefined && index < expirations.length) {
|
2021-05-09 23:16:53 +02:00
|
|
|
composeDispatch({
|
|
|
|
type: 'poll',
|
2022-02-02 22:30:06 +01:00
|
|
|
// @ts-ignore
|
2021-05-09 23:16:53 +02:00
|
|
|
payload: { expire: expirations[index] }
|
|
|
|
})
|
|
|
|
}
|
2021-01-24 02:25:43 +01:00
|
|
|
}
|
2021-05-09 23:16:53 +02:00
|
|
|
)
|
|
|
|
}}
|
2023-01-25 00:15:46 +01:00
|
|
|
iconBack='chevron-right'
|
2021-05-09 23:16:53 +02:00
|
|
|
/>
|
|
|
|
</View>
|
2020-12-03 22:03:06 +01:00
|
|
|
</View>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
const styles = StyleSheet.create({
|
|
|
|
option: {
|
|
|
|
marginLeft: StyleConstants.Spacing.M,
|
|
|
|
marginRight: StyleConstants.Spacing.M,
|
|
|
|
marginBottom: StyleConstants.Spacing.S,
|
|
|
|
flexDirection: 'row',
|
|
|
|
alignItems: 'center'
|
|
|
|
}
|
|
|
|
})
|
|
|
|
|
|
|
|
export default ComposePoll
|