Convert PollForm to TSX
This commit is contained in:
Justin
parent
d0b9de6341
commit
6f030011ba
4 changed files with 215 additions and 215 deletions
213
app/soapbox/features/compose/components/poll-form.tsx
Normal file
213
app/soapbox/features/compose/components/poll-form.tsx
Normal file
|
|
@ -0,0 +1,213 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
import classNames from 'classnames';
|
||||||
|
import React from 'react';
|
||||||
|
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
|
||||||
|
|
||||||
|
import AutosuggestInput from 'soapbox/components/autosuggest_input';
|
||||||
|
import Icon from 'soapbox/components/icon';
|
||||||
|
import IconButton from 'soapbox/components/icon_button';
|
||||||
|
import { HStack } from 'soapbox/components/ui';
|
||||||
|
import { useAppSelector } from 'soapbox/hooks';
|
||||||
|
|
||||||
|
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' },
|
||||||
|
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' },
|
||||||
|
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}}' },
|
||||||
|
});
|
||||||
|
|
||||||
|
interface IOption {
|
||||||
|
index: number
|
||||||
|
isPollMultiple?: boolean
|
||||||
|
maxChars: number
|
||||||
|
numOptions: number
|
||||||
|
onChange(index: number, value: string): void
|
||||||
|
onClearSuggestions(): void
|
||||||
|
onFetchSuggestions(token: string): void
|
||||||
|
onRemove(index: number): void
|
||||||
|
onRemovePoll(): void
|
||||||
|
onSuggestionSelected(tokenStart: number, token: string, value: string, key: (string | number)[]): void
|
||||||
|
onToggleMultiple(): void
|
||||||
|
suggestions?: any // list
|
||||||
|
title: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const Option = (props: IOption) => {
|
||||||
|
const {
|
||||||
|
index,
|
||||||
|
isPollMultiple,
|
||||||
|
maxChars,
|
||||||
|
numOptions,
|
||||||
|
onChange,
|
||||||
|
onClearSuggestions,
|
||||||
|
onFetchSuggestions,
|
||||||
|
onRemove,
|
||||||
|
onRemovePoll,
|
||||||
|
onToggleMultiple,
|
||||||
|
suggestions,
|
||||||
|
title,
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
const intl = useIntl();
|
||||||
|
|
||||||
|
const handleOptionTitleChange = (event: React.ChangeEvent<HTMLInputElement>) => onChange(index, event.target.value);
|
||||||
|
|
||||||
|
const handleOptionRemove = () => {
|
||||||
|
if (numOptions > 2) {
|
||||||
|
onRemove(index);
|
||||||
|
} else {
|
||||||
|
onRemovePoll();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleToggleMultiple = (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => {
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
|
||||||
|
onToggleMultiple();
|
||||||
|
};
|
||||||
|
|
||||||
|
const onSuggestionsClearRequested = () => onClearSuggestions();
|
||||||
|
|
||||||
|
const handleCheckboxKeypress = (event: React.KeyboardEvent<HTMLElement>) => {
|
||||||
|
if (event.key === 'Enter' || event.key === ' ') {
|
||||||
|
handleToggleMultiple(event);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const onSuggestionsFetchRequested = (token: string) => onFetchSuggestions(token);
|
||||||
|
|
||||||
|
const onSuggestionSelected = (tokenStart: number, token: string, value: string) =>
|
||||||
|
props.onSuggestionSelected(tokenStart, token, value, ['poll', 'options', index]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<li>
|
||||||
|
<label className='poll__text editable'>
|
||||||
|
<span
|
||||||
|
className={classNames('poll__input', { checkbox: isPollMultiple })}
|
||||||
|
onClick={handleToggleMultiple}
|
||||||
|
onKeyPress={handleCheckboxKeypress}
|
||||||
|
role='button'
|
||||||
|
tabIndex={0}
|
||||||
|
title={intl.formatMessage(isPollMultiple ? messages.switchToSingle : messages.switchToMultiple)}
|
||||||
|
aria-label={intl.formatMessage(isPollMultiple ? messages.switchToSingle : messages.switchToMultiple)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<AutosuggestInput
|
||||||
|
placeholder={intl.formatMessage(messages.option_placeholder, { number: index + 1 })}
|
||||||
|
maxLength={maxChars}
|
||||||
|
value={title}
|
||||||
|
onChange={handleOptionTitleChange}
|
||||||
|
suggestions={suggestions}
|
||||||
|
onSuggestionsFetchRequested={onSuggestionsFetchRequested}
|
||||||
|
onSuggestionsClearRequested={onSuggestionsClearRequested}
|
||||||
|
onSuggestionSelected={onSuggestionSelected}
|
||||||
|
searchTokens={[':']}
|
||||||
|
autoFocus
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div className='poll__cancel'>
|
||||||
|
<IconButton
|
||||||
|
title={intl.formatMessage(messages.remove_option)}
|
||||||
|
src={require('@tabler/icons/icons/x.svg')}
|
||||||
|
onClick={handleOptionRemove}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
interface IPollForm {
|
||||||
|
expiresIn?: number
|
||||||
|
isMultiple?: boolean
|
||||||
|
onAddOption(value: string): void
|
||||||
|
onChangeOption(): void
|
||||||
|
onChangeSettings(value: string | number | undefined, isMultiple?: boolean): void
|
||||||
|
onClearSuggestions(): void
|
||||||
|
onFetchSuggestions(token: string): void
|
||||||
|
onRemoveOption(): void
|
||||||
|
onRemovePoll(): void
|
||||||
|
onSuggestionSelected(tokenStart: number, token: string, value: string, key: (string | number)[]): void
|
||||||
|
options?: any
|
||||||
|
suggestions?: any // list
|
||||||
|
}
|
||||||
|
|
||||||
|
const PollForm = (props: IPollForm) => {
|
||||||
|
const {
|
||||||
|
expiresIn,
|
||||||
|
isMultiple,
|
||||||
|
onAddOption,
|
||||||
|
onChangeOption,
|
||||||
|
onChangeSettings,
|
||||||
|
onRemoveOption,
|
||||||
|
options,
|
||||||
|
...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 = (event: React.ChangeEvent<HTMLSelectElement>) =>
|
||||||
|
onChangeSettings(event.target.value, isMultiple);
|
||||||
|
|
||||||
|
const handleToggleMultiple = () => onChangeSettings(expiresIn, !isMultiple);
|
||||||
|
|
||||||
|
|
||||||
|
if (!options) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='compose-form__poll-wrapper'>
|
||||||
|
<ul>
|
||||||
|
{options.map((title: string, i: number) => (
|
||||||
|
<Option
|
||||||
|
title={title}
|
||||||
|
key={i}
|
||||||
|
index={i}
|
||||||
|
onChange={onChangeOption}
|
||||||
|
onRemove={onRemoveOption}
|
||||||
|
isPollMultiple={isMultiple}
|
||||||
|
onToggleMultiple={handleToggleMultiple}
|
||||||
|
maxChars={maxOptionChars}
|
||||||
|
numOptions={options.size}
|
||||||
|
{...filteredProps}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<HStack className='text-black dark:text-white' space={2}>
|
||||||
|
{options.size < maxOptions && (
|
||||||
|
<button className='button button-secondary' onClick={handleAddOption}>
|
||||||
|
<Icon src={require('@tabler/icons/icons/plus.svg')} />
|
||||||
|
<FormattedMessage {...messages.add_option} />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<select value={expiresIn} onChange={handleSelectDuration}>
|
||||||
|
<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>
|
||||||
|
</HStack>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PollForm;
|
||||||
|
|
@ -1,213 +0,0 @@
|
||||||
'use strict';
|
|
||||||
|
|
||||||
import classNames from 'classnames';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import React from 'react';
|
|
||||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
|
||||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
|
||||||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
|
||||||
import { connect } from 'react-redux';
|
|
||||||
|
|
||||||
import AutosuggestInput from 'soapbox/components/autosuggest_input';
|
|
||||||
import Icon from 'soapbox/components/icon';
|
|
||||||
import IconButton from 'soapbox/components/icon_button';
|
|
||||||
import { HStack } from 'soapbox/components/ui';
|
|
||||||
|
|
||||||
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' },
|
|
||||||
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' },
|
|
||||||
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,
|
|
||||||
onToggleMultiple: PropTypes.func.isRequired,
|
|
||||||
suggestions: ImmutablePropTypes.list,
|
|
||||||
onClearSuggestions: PropTypes.func.isRequired,
|
|
||||||
onFetchSuggestions: PropTypes.func.isRequired,
|
|
||||||
onSuggestionSelected: PropTypes.func.isRequired,
|
|
||||||
intl: PropTypes.object.isRequired,
|
|
||||||
maxChars: PropTypes.number.isRequired,
|
|
||||||
onRemovePoll: PropTypes.func.isRequired,
|
|
||||||
numOptions: PropTypes.number.isRequired,
|
|
||||||
};
|
|
||||||
|
|
||||||
handleOptionTitleChange = e => {
|
|
||||||
this.props.onChange(this.props.index, e.target.value);
|
|
||||||
};
|
|
||||||
|
|
||||||
handleOptionRemove = () => {
|
|
||||||
if (this.props.numOptions > 2)
|
|
||||||
this.props.onRemove(this.props.index);
|
|
||||||
else
|
|
||||||
this.props.onRemovePoll();
|
|
||||||
};
|
|
||||||
|
|
||||||
handleToggleMultiple = e => {
|
|
||||||
this.props.onToggleMultiple();
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
};
|
|
||||||
|
|
||||||
onSuggestionsClearRequested = () => {
|
|
||||||
this.props.onClearSuggestions();
|
|
||||||
}
|
|
||||||
|
|
||||||
handleCheckboxKeypress = e => {
|
|
||||||
if (e.key === 'Enter' || e.key === ' ') {
|
|
||||||
this.handleToggleMultiple(e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onSuggestionsFetchRequested = (token) => {
|
|
||||||
this.props.onFetchSuggestions(token);
|
|
||||||
}
|
|
||||||
|
|
||||||
onSuggestionSelected = (tokenStart, token, value) => {
|
|
||||||
this.props.onSuggestionSelected(tokenStart, token, value, ['poll', 'options', this.props.index]);
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { isPollMultiple, title, index, maxChars, intl } = this.props;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<li>
|
|
||||||
<label className='poll__text editable'>
|
|
||||||
<span
|
|
||||||
className={classNames('poll__input', { checkbox: isPollMultiple })}
|
|
||||||
onClick={this.handleToggleMultiple}
|
|
||||||
onKeyPress={this.handleCheckboxKeypress}
|
|
||||||
role='button'
|
|
||||||
tabIndex='0'
|
|
||||||
title={intl.formatMessage(isPollMultiple ? messages.switchToSingle : messages.switchToMultiple)}
|
|
||||||
aria-label={intl.formatMessage(isPollMultiple ? messages.switchToSingle : messages.switchToMultiple)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<AutosuggestInput
|
|
||||||
placeholder={intl.formatMessage(messages.option_placeholder, { number: index + 1 })}
|
|
||||||
maxLength={maxChars}
|
|
||||||
value={title}
|
|
||||||
onChange={this.handleOptionTitleChange}
|
|
||||||
suggestions={this.props.suggestions}
|
|
||||||
onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
|
|
||||||
onSuggestionsClearRequested={this.onSuggestionsClearRequested}
|
|
||||||
onSuggestionSelected={this.onSuggestionSelected}
|
|
||||||
searchTokens={[':']}
|
|
||||||
autoFocus
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<div className='poll__cancel'>
|
|
||||||
<IconButton title={intl.formatMessage(messages.remove_option)} src={require('@tabler/icons/icons/x.svg')} onClick={this.handleOptionRemove} />
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
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,
|
|
||||||
suggestions: ImmutablePropTypes.list,
|
|
||||||
onClearSuggestions: PropTypes.func.isRequired,
|
|
||||||
onFetchSuggestions: PropTypes.func.isRequired,
|
|
||||||
onSuggestionSelected: PropTypes.func.isRequired,
|
|
||||||
intl: PropTypes.object.isRequired,
|
|
||||||
maxOptions: PropTypes.number.isRequired,
|
|
||||||
maxOptionChars: PropTypes.number.isRequired,
|
|
||||||
maxExpiration: PropTypes.number,
|
|
||||||
minExpiration: PropTypes.number,
|
|
||||||
};
|
|
||||||
|
|
||||||
handleAddOption = () => {
|
|
||||||
this.props.onAddOption('');
|
|
||||||
};
|
|
||||||
|
|
||||||
handleSelectDuration = e => {
|
|
||||||
this.props.onChangeSettings(e.target.value, this.props.isMultiple);
|
|
||||||
};
|
|
||||||
|
|
||||||
handleToggleMultiple = () => {
|
|
||||||
this.props.onChangeSettings(this.props.expiresIn, !this.props.isMultiple);
|
|
||||||
};
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { options, expiresIn, isMultiple, onChangeOption, onRemoveOption, maxOptions, maxOptionChars, intl, ...other } = this.props;
|
|
||||||
|
|
||||||
if (!options) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className='compose-form__poll-wrapper'>
|
|
||||||
<ul>
|
|
||||||
{options.map((title, i) => (
|
|
||||||
<Option
|
|
||||||
title={title}
|
|
||||||
key={i}
|
|
||||||
index={i}
|
|
||||||
onChange={onChangeOption}
|
|
||||||
onRemove={onRemoveOption}
|
|
||||||
isPollMultiple={isMultiple}
|
|
||||||
onToggleMultiple={this.handleToggleMultiple}
|
|
||||||
maxChars={maxOptionChars}
|
|
||||||
numOptions={options.size}
|
|
||||||
{...other}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<HStack className='text-black dark:text-white' space={2}>
|
|
||||||
{options.size < maxOptions && (
|
|
||||||
<button className='button button-secondary' onClick={this.handleAddOption}><Icon src={require('@tabler/icons/icons/plus.svg')} /> <FormattedMessage {...messages.add_option} /></button>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<select value={expiresIn} onChange={this.handleSelectDuration}>
|
|
||||||
<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>
|
|
||||||
</HStack>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
const mapStateToProps = state => {
|
|
||||||
const pollLimits = state.getIn(['instance', 'configuration', 'polls']);
|
|
||||||
|
|
||||||
return {
|
|
||||||
maxOptions: pollLimits.get('max_options'),
|
|
||||||
maxOptionChars: pollLimits.get('max_characters_per_option'),
|
|
||||||
maxExpiration: pollLimits.get('max_expiration'),
|
|
||||||
minExpiration: pollLimits.get('min_expiration'),
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
export default injectIntl(connect(mapStateToProps)(PollForm));
|
|
||||||
|
|
@ -6,7 +6,7 @@ import {
|
||||||
fetchComposeSuggestions,
|
fetchComposeSuggestions,
|
||||||
selectComposeSuggestion,
|
selectComposeSuggestion,
|
||||||
} from '../../../actions/compose';
|
} from '../../../actions/compose';
|
||||||
import PollForm from '../components/poll_form';
|
import PollForm from '../components/poll-form';
|
||||||
|
|
||||||
const mapStateToProps = state => ({
|
const mapStateToProps = state => ({
|
||||||
suggestions: state.getIn(['compose', 'suggestions']),
|
suggestions: state.getIn(['compose', 'suggestions']),
|
||||||
|
|
|
||||||
|
|
@ -2411,7 +2411,7 @@
|
||||||
"id": "intervals.full.days"
|
"id": "intervals.full.days"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"path": "app/soapbox/features/compose/components/poll_form.json"
|
"path": "app/soapbox/features/compose/components/poll-form.json"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"descriptors": [
|
"descriptors": [
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue