diff --git a/app/soapbox/features/compose/components/poll-form.tsx b/app/soapbox/features/compose/components/poll-form.tsx index 134bc7651..c765fd5df 100644 --- a/app/soapbox/features/compose/components/poll-form.tsx +++ b/app/soapbox/features/compose/components/poll-form.tsx @@ -4,7 +4,7 @@ import React from 'react'; import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; import AutosuggestInput from 'soapbox/components/autosuggest_input'; -import { Button, Divider, HStack, Stack, Text } from 'soapbox/components/ui'; +import { Button, Divider, HStack, Stack, Text, Toggle } from 'soapbox/components/ui'; import { useAppSelector } from 'soapbox/hooks'; import DurationSelector from './polls/duration-selector'; @@ -15,12 +15,15 @@ const messages = defineMessages({ option_placeholder: { id: 'compose_form.poll.option_placeholder', defaultMessage: 'Answer #{number}' }, add_option: { id: 'compose_form.poll.add_option', defaultMessage: 'Add an answer' }, remove_option: { id: 'compose_form.poll.remove_option', defaultMessage: 'Remove this answer' }, - poll_duration: { id: 'compose_form.poll.duration', defaultMessage: 'Poll duration' }, + pollDuration: { id: 'compose_form.poll.duration', defaultMessage: 'Duration' }, + removePoll: { id: 'compose_form.poll.remove', defaultMessage: 'Remove poll' }, switchToMultiple: { id: 'compose_form.poll.switch_to_multiple', defaultMessage: 'Change poll to allow multiple answers' }, switchToSingle: { id: 'compose_form.poll.switch_to_single', defaultMessage: 'Change poll to allow for a single answer' }, minutes: { id: 'intervals.full.minutes', defaultMessage: '{number, plural, one {# minute} other {# minutes}}' }, hours: { id: 'intervals.full.hours', defaultMessage: '{number, plural, one {# hour} other {# hours}}' }, days: { id: 'intervals.full.days', defaultMessage: '{number, plural, one {# day} other {# days}}' }, + multiSelect: { id: 'compose_form.poll.multiselect', defaultMessage: 'Multi-Select' }, + multiSelectDetail: { id: 'compose_form.poll.multiselect_detail', defaultMessage: 'Allow users to select multiple answers' }, }); interface IOption { @@ -63,21 +66,8 @@ const Option = (props: IOption) => { } }; - // const handleToggleMultiple = (event: React.MouseEvent | React.KeyboardEvent) => { - // event.preventDefault(); - // event.stopPropagation(); - - // onToggleMultiple(); - // }; - const onSuggestionsClearRequested = () => onClearSuggestions(); - // const handleCheckboxKeypress = (event: React.KeyboardEvent) => { - // if (event.key === 'Enter' || event.key === ' ') { - // handleToggleMultiple(event); - // } - // }; - const onSuggestionsFetchRequested = (token: string) => onFetchSuggestions(token); const onSuggestionSelected = (tokenStart: number, token: string | null, value: AutoSuggestion) => { @@ -143,13 +133,15 @@ const PollForm = (props: IPollForm) => { ...filteredProps } = props; + const intl = useIntl(); + const pollLimits = useAppSelector((state) => state.instance.getIn(['configuration', 'polls']) as any); const maxOptions = pollLimits.get('max_options'); const maxOptionChars = pollLimits.get('max_characters_per_option'); const handleAddOption = () => onAddOption(''); const handleSelectDuration = (value: number) => onChangeSettings(value, isMultiple); - // const handleToggleMultiple = () => onChangeSettings(expiresIn, !isMultiple); + const handleToggleMultiple = () => onChangeSettings(expiresIn, !isMultiple); if (!options) { return null; @@ -189,16 +181,36 @@ const PollForm = (props: IPollForm) => { + + + + {intl.formatMessage(messages.multiSelect)} + + + + {intl.formatMessage(messages.multiSelectDetail)} + + + + + + + + {/* Duration */} - Duration + + {intl.formatMessage(messages.pollDuration)} + {/* Remove Poll */}
- +
);