2019-03-06 05:53:37 +02:00
|
|
|
import React from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
|
|
|
import ImmutablePureComponent from 'react-immutable-pure-component';
|
|
|
|
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
|
|
|
import IconButton from 'mastodon/components/icon_button';
|
|
|
|
import Icon from 'mastodon/components/icon';
|
2019-05-09 23:10:27 +03:00
|
|
|
import AutosuggestInput from 'mastodon/components/autosuggest_input';
|
2019-03-06 05:53:37 +02:00
|
|
|
import classNames from 'classnames';
|
|
|
|
|
|
|
|
const messages = defineMessages({
|
|
|
|
option_placeholder: { id: 'compose_form.poll.option_placeholder', defaultMessage: 'Choice {number}' },
|
|
|
|
add_option: { id: 'compose_form.poll.add_option', defaultMessage: 'Add a choice' },
|
|
|
|
remove_option: { id: 'compose_form.poll.remove_option', defaultMessage: 'Remove this choice' },
|
|
|
|
poll_duration: { id: 'compose_form.poll.duration', defaultMessage: 'Poll duration' },
|
2019-12-03 20:53:16 +02:00
|
|
|
switchToMultiple: { id: 'compose_form.poll.switch_to_multiple', defaultMessage: 'Change poll to allow multiple choices' },
|
|
|
|
switchToSingle: { id: 'compose_form.poll.switch_to_single', defaultMessage: 'Change poll to allow for a single choice' },
|
2019-03-06 05:53:37 +02:00
|
|
|
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}}' },
|
|
|
|
});
|
|
|
|
|
|
|
|
@injectIntl
|
|
|
|
class Option extends React.PureComponent {
|
|
|
|
|
|
|
|
static propTypes = {
|
|
|
|
title: PropTypes.string.isRequired,
|
|
|
|
index: PropTypes.number.isRequired,
|
|
|
|
isPollMultiple: PropTypes.bool,
|
|
|
|
onChange: PropTypes.func.isRequired,
|
|
|
|
onRemove: PropTypes.func.isRequired,
|
2019-04-22 15:56:14 +03:00
|
|
|
onToggleMultiple: PropTypes.func.isRequired,
|
2019-05-09 23:10:27 +03:00
|
|
|
suggestions: ImmutablePropTypes.list,
|
|
|
|
onClearSuggestions: PropTypes.func.isRequired,
|
|
|
|
onFetchSuggestions: PropTypes.func.isRequired,
|
|
|
|
onSuggestionSelected: PropTypes.func.isRequired,
|
2019-03-06 05:53:37 +02:00
|
|
|
intl: PropTypes.object.isRequired,
|
|
|
|
};
|
|
|
|
|
|
|
|
handleOptionTitleChange = e => {
|
|
|
|
this.props.onChange(this.props.index, e.target.value);
|
|
|
|
};
|
|
|
|
|
|
|
|
handleOptionRemove = () => {
|
|
|
|
this.props.onRemove(this.props.index);
|
|
|
|
};
|
|
|
|
|
2019-05-09 23:10:27 +03:00
|
|
|
|
2019-04-22 15:56:14 +03:00
|
|
|
handleToggleMultiple = e => {
|
|
|
|
this.props.onToggleMultiple();
|
|
|
|
e.preventDefault();
|
|
|
|
e.stopPropagation();
|
|
|
|
};
|
|
|
|
|
2019-12-03 20:53:16 +02:00
|
|
|
handleCheckboxKeypress = e => {
|
|
|
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
|
|
this.handleToggleMultiple(e);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-05-09 23:10:27 +03:00
|
|
|
onSuggestionsClearRequested = () => {
|
|
|
|
this.props.onClearSuggestions();
|
|
|
|
}
|
|
|
|
|
|
|
|
onSuggestionsFetchRequested = (token) => {
|
|
|
|
this.props.onFetchSuggestions(token);
|
|
|
|
}
|
|
|
|
|
|
|
|
onSuggestionSelected = (tokenStart, token, value) => {
|
|
|
|
this.props.onSuggestionSelected(tokenStart, token, value, ['poll', 'options', this.props.index]);
|
|
|
|
}
|
|
|
|
|
2019-03-06 05:53:37 +02:00
|
|
|
render () {
|
|
|
|
const { isPollMultiple, title, index, intl } = this.props;
|
|
|
|
|
|
|
|
return (
|
|
|
|
<li>
|
|
|
|
<label className='poll__text editable'>
|
2019-04-22 15:56:14 +03:00
|
|
|
<span
|
|
|
|
className={classNames('poll__input', { checkbox: isPollMultiple })}
|
|
|
|
onClick={this.handleToggleMultiple}
|
2019-12-03 20:53:16 +02:00
|
|
|
onKeyPress={this.handleCheckboxKeypress}
|
2019-04-22 15:56:14 +03:00
|
|
|
role='button'
|
|
|
|
tabIndex='0'
|
2019-12-17 00:55:02 +02:00
|
|
|
title={intl.formatMessage(isPollMultiple ? messages.switchToSingle : messages.switchToMultiple)}
|
|
|
|
aria-label={intl.formatMessage(isPollMultiple ? messages.switchToSingle : messages.switchToMultiple)}
|
2019-04-22 15:56:14 +03:00
|
|
|
/>
|
2019-03-06 05:53:37 +02:00
|
|
|
|
2019-05-09 23:10:27 +03:00
|
|
|
<AutosuggestInput
|
2019-03-06 05:53:37 +02:00
|
|
|
placeholder={intl.formatMessage(messages.option_placeholder, { number: index + 1 })}
|
2019-09-13 23:32:19 +03:00
|
|
|
maxLength={100}
|
2019-03-06 05:53:37 +02:00
|
|
|
value={title}
|
|
|
|
onChange={this.handleOptionTitleChange}
|
2019-05-09 23:10:27 +03:00
|
|
|
suggestions={this.props.suggestions}
|
|
|
|
onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
|
|
|
|
onSuggestionsClearRequested={this.onSuggestionsClearRequested}
|
|
|
|
onSuggestionSelected={this.onSuggestionSelected}
|
|
|
|
searchTokens={[':']}
|
2019-03-06 05:53:37 +02:00
|
|
|
/>
|
|
|
|
</label>
|
|
|
|
|
|
|
|
<div className='poll__cancel'>
|
|
|
|
<IconButton disabled={index <= 1} title={intl.formatMessage(messages.remove_option)} icon='times' onClick={this.handleOptionRemove} />
|
|
|
|
</div>
|
|
|
|
</li>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
export default
|
|
|
|
@injectIntl
|
|
|
|
class PollForm extends ImmutablePureComponent {
|
|
|
|
|
|
|
|
static propTypes = {
|
|
|
|
options: ImmutablePropTypes.list,
|
|
|
|
expiresIn: PropTypes.number,
|
|
|
|
isMultiple: PropTypes.bool,
|
|
|
|
onChangeOption: PropTypes.func.isRequired,
|
|
|
|
onAddOption: PropTypes.func.isRequired,
|
|
|
|
onRemoveOption: PropTypes.func.isRequired,
|
|
|
|
onChangeSettings: PropTypes.func.isRequired,
|
2019-05-09 23:10:27 +03:00
|
|
|
suggestions: ImmutablePropTypes.list,
|
|
|
|
onClearSuggestions: PropTypes.func.isRequired,
|
|
|
|
onFetchSuggestions: PropTypes.func.isRequired,
|
|
|
|
onSuggestionSelected: PropTypes.func.isRequired,
|
2019-03-06 05:53:37 +02:00
|
|
|
intl: PropTypes.object.isRequired,
|
|
|
|
};
|
|
|
|
|
|
|
|
handleAddOption = () => {
|
|
|
|
this.props.onAddOption('');
|
|
|
|
};
|
|
|
|
|
|
|
|
handleSelectDuration = e => {
|
|
|
|
this.props.onChangeSettings(e.target.value, this.props.isMultiple);
|
|
|
|
};
|
|
|
|
|
2019-04-22 15:56:14 +03:00
|
|
|
handleToggleMultiple = () => {
|
|
|
|
this.props.onChangeSettings(this.props.expiresIn, !this.props.isMultiple);
|
|
|
|
};
|
|
|
|
|
2019-03-06 05:53:37 +02:00
|
|
|
render () {
|
2019-05-09 23:10:27 +03:00
|
|
|
const { options, expiresIn, isMultiple, onChangeOption, onRemoveOption, intl, ...other } = this.props;
|
2019-03-06 05:53:37 +02:00
|
|
|
|
|
|
|
if (!options) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className='compose-form__poll-wrapper'>
|
|
|
|
<ul>
|
2019-05-09 23:10:27 +03:00
|
|
|
{options.map((title, i) => <Option title={title} key={i} index={i} onChange={onChangeOption} onRemove={onRemoveOption} isPollMultiple={isMultiple} onToggleMultiple={this.handleToggleMultiple} {...other} />)}
|
2019-03-06 05:53:37 +02:00
|
|
|
</ul>
|
|
|
|
|
|
|
|
<div className='poll__footer'>
|
2019-11-07 14:43:56 +02:00
|
|
|
<button disabled={options.size >= 5} className='button button-secondary' onClick={this.handleAddOption}><Icon id='plus' /> <FormattedMessage {...messages.add_option} /></button>
|
2019-03-06 05:53:37 +02:00
|
|
|
|
2020-03-08 17:02:36 +02:00
|
|
|
{/* eslint-disable-next-line jsx-a11y/no-onchange */}
|
2019-12-10 20:39:02 +02:00
|
|
|
<select value={expiresIn} onChange={this.handleSelectDuration}>
|
2019-03-06 05:53:37 +02:00
|
|
|
<option value={300}>{intl.formatMessage(messages.minutes, { number: 5 })}</option>
|
|
|
|
<option value={1800}>{intl.formatMessage(messages.minutes, { number: 30 })}</option>
|
|
|
|
<option value={3600}>{intl.formatMessage(messages.hours, { number: 1 })}</option>
|
|
|
|
<option value={21600}>{intl.formatMessage(messages.hours, { number: 6 })}</option>
|
|
|
|
<option value={86400}>{intl.formatMessage(messages.days, { number: 1 })}</option>
|
|
|
|
<option value={259200}>{intl.formatMessage(messages.days, { number: 3 })}</option>
|
|
|
|
<option value={604800}>{intl.formatMessage(messages.days, { number: 7 })}</option>
|
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|