|
|
@ -1,32 +1,33 @@
|
|
|
|
'use strict';
|
|
|
|
'use strict';
|
|
|
|
|
|
|
|
|
|
|
|
import classNames from 'classnames';
|
|
|
|
|
|
|
|
import React from 'react';
|
|
|
|
import React from 'react';
|
|
|
|
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
|
|
|
|
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
|
|
|
|
|
|
|
|
|
|
|
|
import AutosuggestInput from 'soapbox/components/autosuggest_input';
|
|
|
|
import AutosuggestInput from 'soapbox/components/autosuggest_input';
|
|
|
|
import Icon from 'soapbox/components/icon';
|
|
|
|
import { Button, Divider, HStack, Stack, Text, Toggle } from 'soapbox/components/ui';
|
|
|
|
import IconButton from 'soapbox/components/icon_button';
|
|
|
|
|
|
|
|
import { HStack } from 'soapbox/components/ui';
|
|
|
|
|
|
|
|
import { useAppSelector } from 'soapbox/hooks';
|
|
|
|
import { useAppSelector } from 'soapbox/hooks';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
import DurationSelector from './polls/duration-selector';
|
|
|
|
|
|
|
|
|
|
|
|
import type { AutoSuggestion } from 'soapbox/components/autosuggest_input';
|
|
|
|
import type { AutoSuggestion } from 'soapbox/components/autosuggest_input';
|
|
|
|
|
|
|
|
|
|
|
|
const messages = defineMessages({
|
|
|
|
const messages = defineMessages({
|
|
|
|
option_placeholder: { id: 'compose_form.poll.option_placeholder', defaultMessage: 'Choice {number}' },
|
|
|
|
option_placeholder: { id: 'compose_form.poll.option_placeholder', defaultMessage: 'Answer #{number}' },
|
|
|
|
add_option: { id: 'compose_form.poll.add_option', defaultMessage: 'Add a choice' },
|
|
|
|
add_option: { id: 'compose_form.poll.add_option', defaultMessage: 'Add an answer' },
|
|
|
|
remove_option: { id: 'compose_form.poll.remove_option', defaultMessage: 'Remove this choice' },
|
|
|
|
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' },
|
|
|
|
switchToMultiple: { id: 'compose_form.poll.switch_to_multiple', defaultMessage: 'Change poll to allow multiple choices' },
|
|
|
|
removePoll: { id: 'compose_form.poll.remove', defaultMessage: 'Remove poll' },
|
|
|
|
switchToSingle: { id: 'compose_form.poll.switch_to_single', defaultMessage: 'Change poll to allow for a single choice' },
|
|
|
|
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}}' },
|
|
|
|
minutes: { id: 'intervals.full.minutes', defaultMessage: '{number, plural, one {# minute} other {# minutes}}' },
|
|
|
|
hours: { id: 'intervals.full.hours', defaultMessage: '{number, plural, one {# hour} other {# hours}}' },
|
|
|
|
hours: { id: 'intervals.full.hours', defaultMessage: '{number, plural, one {# hour} other {# hours}}' },
|
|
|
|
days: { id: 'intervals.full.days', defaultMessage: '{number, plural, one {# day} other {# days}}' },
|
|
|
|
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 {
|
|
|
|
interface IOption {
|
|
|
|
index: number
|
|
|
|
index: number
|
|
|
|
isPollMultiple?: boolean
|
|
|
|
|
|
|
|
maxChars: number
|
|
|
|
maxChars: number
|
|
|
|
numOptions: number
|
|
|
|
numOptions: number
|
|
|
|
onChange(index: number, value: string): void
|
|
|
|
onChange(index: number, value: string): void
|
|
|
@ -35,7 +36,6 @@ interface IOption {
|
|
|
|
onRemove(index: number): void
|
|
|
|
onRemove(index: number): void
|
|
|
|
onRemovePoll(): void
|
|
|
|
onRemovePoll(): void
|
|
|
|
onSuggestionSelected(tokenStart: number, token: string, value: string, key: (string | number)[]): void
|
|
|
|
onSuggestionSelected(tokenStart: number, token: string, value: string, key: (string | number)[]): void
|
|
|
|
onToggleMultiple(): void
|
|
|
|
|
|
|
|
suggestions?: any // list
|
|
|
|
suggestions?: any // list
|
|
|
|
title: string
|
|
|
|
title: string
|
|
|
|
}
|
|
|
|
}
|
|
|
@ -43,7 +43,6 @@ interface IOption {
|
|
|
|
const Option = (props: IOption) => {
|
|
|
|
const Option = (props: IOption) => {
|
|
|
|
const {
|
|
|
|
const {
|
|
|
|
index,
|
|
|
|
index,
|
|
|
|
isPollMultiple,
|
|
|
|
|
|
|
|
maxChars,
|
|
|
|
maxChars,
|
|
|
|
numOptions,
|
|
|
|
numOptions,
|
|
|
|
onChange,
|
|
|
|
onChange,
|
|
|
@ -51,7 +50,6 @@ const Option = (props: IOption) => {
|
|
|
|
onFetchSuggestions,
|
|
|
|
onFetchSuggestions,
|
|
|
|
onRemove,
|
|
|
|
onRemove,
|
|
|
|
onRemovePoll,
|
|
|
|
onRemovePoll,
|
|
|
|
onToggleMultiple,
|
|
|
|
|
|
|
|
suggestions,
|
|
|
|
suggestions,
|
|
|
|
title,
|
|
|
|
title,
|
|
|
|
} = props;
|
|
|
|
} = props;
|
|
|
@ -68,21 +66,8 @@ const Option = (props: IOption) => {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const handleToggleMultiple = (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => {
|
|
|
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
|
|
|
event.stopPropagation();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
onToggleMultiple();
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const onSuggestionsClearRequested = () => onClearSuggestions();
|
|
|
|
const onSuggestionsClearRequested = () => onClearSuggestions();
|
|
|
|
|
|
|
|
|
|
|
|
const handleCheckboxKeypress = (event: React.KeyboardEvent<HTMLElement>) => {
|
|
|
|
|
|
|
|
if (event.key === 'Enter' || event.key === ' ') {
|
|
|
|
|
|
|
|
handleToggleMultiple(event);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const onSuggestionsFetchRequested = (token: string) => onFetchSuggestions(token);
|
|
|
|
const onSuggestionsFetchRequested = (token: string) => onFetchSuggestions(token);
|
|
|
|
|
|
|
|
|
|
|
|
const onSuggestionSelected = (tokenStart: number, token: string | null, value: AutoSuggestion) => {
|
|
|
|
const onSuggestionSelected = (tokenStart: number, token: string | null, value: AutoSuggestion) => {
|
|
|
@ -92,19 +77,14 @@ const Option = (props: IOption) => {
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<li>
|
|
|
|
<HStack alignItems='center' justifyContent='between' space={4}>
|
|
|
|
<label className='poll__text editable'>
|
|
|
|
<HStack alignItems='center' space={2} grow>
|
|
|
|
<span
|
|
|
|
<div className='w-6'>
|
|
|
|
className={classNames('poll__input', { checkbox: isPollMultiple })}
|
|
|
|
<Text weight='bold'>{index + 1}.</Text>
|
|
|
|
onClick={handleToggleMultiple}
|
|
|
|
</div>
|
|
|
|
onKeyPress={handleCheckboxKeypress}
|
|
|
|
|
|
|
|
role='button'
|
|
|
|
|
|
|
|
tabIndex={0}
|
|
|
|
|
|
|
|
title={intl.formatMessage(isPollMultiple ? messages.switchToSingle : messages.switchToMultiple)}
|
|
|
|
|
|
|
|
aria-label={intl.formatMessage(isPollMultiple ? messages.switchToSingle : messages.switchToMultiple)}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<AutosuggestInput
|
|
|
|
<AutosuggestInput
|
|
|
|
|
|
|
|
className='rounded-md'
|
|
|
|
placeholder={intl.formatMessage(messages.option_placeholder, { number: index + 1 })}
|
|
|
|
placeholder={intl.formatMessage(messages.option_placeholder, { number: index + 1 })}
|
|
|
|
maxLength={maxChars}
|
|
|
|
maxLength={maxChars}
|
|
|
|
value={title}
|
|
|
|
value={title}
|
|
|
@ -114,18 +94,16 @@ const Option = (props: IOption) => {
|
|
|
|
onSuggestionsClearRequested={onSuggestionsClearRequested}
|
|
|
|
onSuggestionsClearRequested={onSuggestionsClearRequested}
|
|
|
|
onSuggestionSelected={onSuggestionSelected}
|
|
|
|
onSuggestionSelected={onSuggestionSelected}
|
|
|
|
searchTokens={[':']}
|
|
|
|
searchTokens={[':']}
|
|
|
|
autoFocus
|
|
|
|
autoFocus={index === 0}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</label>
|
|
|
|
</HStack>
|
|
|
|
|
|
|
|
|
|
|
|
<div className='poll__cancel'>
|
|
|
|
{index > 1 && (
|
|
|
|
<IconButton
|
|
|
|
<div>
|
|
|
|
title={intl.formatMessage(messages.remove_option)}
|
|
|
|
<Button theme='danger' size='sm' onClick={handleOptionRemove}>Delete</Button>
|
|
|
|
src={require('@tabler/icons/icons/x.svg')}
|
|
|
|
|
|
|
|
onClick={handleOptionRemove}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</li>
|
|
|
|
)}
|
|
|
|
|
|
|
|
</HStack>
|
|
|
|
);
|
|
|
|
);
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
@ -163,10 +141,7 @@ const PollForm = (props: IPollForm) => {
|
|
|
|
const maxOptionChars = pollLimits.get('max_characters_per_option');
|
|
|
|
const maxOptionChars = pollLimits.get('max_characters_per_option');
|
|
|
|
|
|
|
|
|
|
|
|
const handleAddOption = () => onAddOption('');
|
|
|
|
const handleAddOption = () => onAddOption('');
|
|
|
|
|
|
|
|
const handleSelectDuration = (value: number) => onChangeSettings(value, isMultiple);
|
|
|
|
const handleSelectDuration = (event: React.ChangeEvent<HTMLSelectElement>) =>
|
|
|
|
|
|
|
|
onChangeSettings(event.target.value, isMultiple);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const handleToggleMultiple = () => onChangeSettings(expiresIn, !isMultiple);
|
|
|
|
const handleToggleMultiple = () => onChangeSettings(expiresIn, !isMultiple);
|
|
|
|
|
|
|
|
|
|
|
|
if (!options) {
|
|
|
|
if (!options) {
|
|
|
@ -174,8 +149,8 @@ const PollForm = (props: IPollForm) => {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<div className='compose-form__poll-wrapper'>
|
|
|
|
<Stack space={4}>
|
|
|
|
<ul>
|
|
|
|
<Stack space={2}>
|
|
|
|
{options.map((title: string, i: number) => (
|
|
|
|
{options.map((title: string, i: number) => (
|
|
|
|
<Option
|
|
|
|
<Option
|
|
|
|
title={title}
|
|
|
|
title={title}
|
|
|
@ -183,34 +158,64 @@ const PollForm = (props: IPollForm) => {
|
|
|
|
index={i}
|
|
|
|
index={i}
|
|
|
|
onChange={onChangeOption}
|
|
|
|
onChange={onChangeOption}
|
|
|
|
onRemove={onRemoveOption}
|
|
|
|
onRemove={onRemoveOption}
|
|
|
|
isPollMultiple={isMultiple}
|
|
|
|
|
|
|
|
onToggleMultiple={handleToggleMultiple}
|
|
|
|
|
|
|
|
maxChars={maxOptionChars}
|
|
|
|
maxChars={maxOptionChars}
|
|
|
|
numOptions={options.size}
|
|
|
|
numOptions={options.size}
|
|
|
|
{...filteredProps}
|
|
|
|
{...filteredProps}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
))}
|
|
|
|
))}
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<HStack className='text-black dark:text-white' space={2}>
|
|
|
|
<HStack space={2}>
|
|
|
|
|
|
|
|
<div className='w-6' />
|
|
|
|
|
|
|
|
|
|
|
|
{options.size < maxOptions && (
|
|
|
|
{options.size < maxOptions && (
|
|
|
|
<button className='button button-secondary' onClick={handleAddOption}>
|
|
|
|
<Button
|
|
|
|
<Icon src={require('@tabler/icons/icons/plus.svg')} />
|
|
|
|
theme='secondary'
|
|
|
|
|
|
|
|
onClick={handleAddOption}
|
|
|
|
|
|
|
|
size='sm'
|
|
|
|
|
|
|
|
block
|
|
|
|
|
|
|
|
>
|
|
|
|
<FormattedMessage {...messages.add_option} />
|
|
|
|
<FormattedMessage {...messages.add_option} />
|
|
|
|
</button>
|
|
|
|
</Button>
|
|
|
|
)}
|
|
|
|
)}
|
|
|
|
|
|
|
|
</HStack>
|
|
|
|
|
|
|
|
</Stack>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<Divider />
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<button onClick={handleToggleMultiple} className='text-left'>
|
|
|
|
|
|
|
|
<HStack alignItems='center' justifyContent='between'>
|
|
|
|
|
|
|
|
<Stack>
|
|
|
|
|
|
|
|
<Text weight='medium'>
|
|
|
|
|
|
|
|
{intl.formatMessage(messages.multiSelect)}
|
|
|
|
|
|
|
|
</Text>
|
|
|
|
|
|
|
|
|
|
|
|
<select value={expiresIn} onChange={handleSelectDuration}>
|
|
|
|
<Text theme='muted' size='sm'>
|
|
|
|
<option value={300}>{intl.formatMessage(messages.minutes, { number: 5 })}</option>
|
|
|
|
{intl.formatMessage(messages.multiSelectDetail)}
|
|
|
|
<option value={1800}>{intl.formatMessage(messages.minutes, { number: 30 })}</option>
|
|
|
|
</Text>
|
|
|
|
<option value={3600}>{intl.formatMessage(messages.hours, { number: 1 })}</option>
|
|
|
|
</Stack>
|
|
|
|
<option value={21600}>{intl.formatMessage(messages.hours, { number: 6 })}</option>
|
|
|
|
|
|
|
|
<option value={86400}>{intl.formatMessage(messages.days, { number: 1 })}</option>
|
|
|
|
<Toggle checked={isMultiple} onChange={handleToggleMultiple} />
|
|
|
|
<option value={259200}>{intl.formatMessage(messages.days, { number: 3 })}</option>
|
|
|
|
|
|
|
|
<option value={604800}>{intl.formatMessage(messages.days, { number: 7 })}</option>
|
|
|
|
|
|
|
|
</select>
|
|
|
|
|
|
|
|
</HStack>
|
|
|
|
</HStack>
|
|
|
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<Divider />
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{/* Duration */}
|
|
|
|
|
|
|
|
<Stack space={2}>
|
|
|
|
|
|
|
|
<Text weight='medium'>
|
|
|
|
|
|
|
|
{intl.formatMessage(messages.pollDuration)}
|
|
|
|
|
|
|
|
</Text>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<DurationSelector onDurationChange={handleSelectDuration} />
|
|
|
|
|
|
|
|
</Stack>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{/* Remove Poll */}
|
|
|
|
|
|
|
|
<div className='text-center'>
|
|
|
|
|
|
|
|
<Button theme='danger' size='sm' onClick={props.onRemovePoll}>
|
|
|
|
|
|
|
|
{intl.formatMessage(messages.removePoll)}
|
|
|
|
|
|
|
|
</Button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</Stack>
|
|
|
|
);
|
|
|
|
);
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|