mirror of
https://github.com/mastodon/mastodon.git
synced 2024-12-23 04:02:07 +01:00
Convert <Poll> to Typescript
This commit is contained in:
Renaud Chaput
parent
f721e76d13
commit
e79f016d33
5 changed files with 336 additions and 251 deletions
|
|
@ -13,7 +13,7 @@ export interface ApiPollJSON {
|
||||||
expired: boolean;
|
expired: boolean;
|
||||||
multiple: boolean;
|
multiple: boolean;
|
||||||
votes_count: number;
|
votes_count: number;
|
||||||
voters_count: number;
|
voters_count: null | number;
|
||||||
|
|
||||||
options: ApiPollOptionJSON[];
|
options: ApiPollOptionJSON[];
|
||||||
emojis: ApiCustomEmojiJSON[];
|
emojis: ApiCustomEmojiJSON[];
|
||||||
|
|
|
||||||
|
|
@ -1,248 +0,0 @@
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
|
|
||||||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
|
||||||
|
|
||||||
import classNames from 'classnames';
|
|
||||||
|
|
||||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
|
||||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
|
||||||
|
|
||||||
import escapeTextContentForBrowser from 'escape-html';
|
|
||||||
import spring from 'react-motion/lib/spring';
|
|
||||||
|
|
||||||
import CheckIcon from '@/material-icons/400-24px/check.svg?react';
|
|
||||||
import { Icon } from 'mastodon/components/icon';
|
|
||||||
import emojify from 'mastodon/features/emoji/emoji';
|
|
||||||
import Motion from 'mastodon/features/ui/util/optional_motion';
|
|
||||||
import { identityContextPropShape, withIdentity } from 'mastodon/identity_context';
|
|
||||||
|
|
||||||
import { RelativeTimestamp } from './relative_timestamp';
|
|
||||||
|
|
||||||
const messages = defineMessages({
|
|
||||||
closed: {
|
|
||||||
id: 'poll.closed',
|
|
||||||
defaultMessage: 'Closed',
|
|
||||||
},
|
|
||||||
voted: {
|
|
||||||
id: 'poll.voted',
|
|
||||||
defaultMessage: 'You voted for this answer',
|
|
||||||
},
|
|
||||||
votes: {
|
|
||||||
id: 'poll.votes',
|
|
||||||
defaultMessage: '{votes, plural, one {# vote} other {# votes}}',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
class Poll extends ImmutablePureComponent {
|
|
||||||
static propTypes = {
|
|
||||||
identity: identityContextPropShape,
|
|
||||||
poll: ImmutablePropTypes.record.isRequired,
|
|
||||||
status: ImmutablePropTypes.map.isRequired,
|
|
||||||
lang: PropTypes.string,
|
|
||||||
intl: PropTypes.object.isRequired,
|
|
||||||
disabled: PropTypes.bool,
|
|
||||||
refresh: PropTypes.func,
|
|
||||||
onVote: PropTypes.func,
|
|
||||||
onInteractionModal: PropTypes.func,
|
|
||||||
};
|
|
||||||
|
|
||||||
state = {
|
|
||||||
selected: {},
|
|
||||||
expired: null,
|
|
||||||
};
|
|
||||||
|
|
||||||
static getDerivedStateFromProps (props, state) {
|
|
||||||
const { poll } = props;
|
|
||||||
const expires_at = poll.get('expires_at');
|
|
||||||
const expired = poll.get('expired') || expires_at !== null && (new Date(expires_at)).getTime() < Date.now();
|
|
||||||
return (expired === state.expired) ? null : { expired };
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount () {
|
|
||||||
this._setupTimer();
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidUpdate () {
|
|
||||||
this._setupTimer();
|
|
||||||
}
|
|
||||||
|
|
||||||
componentWillUnmount () {
|
|
||||||
clearTimeout(this._timer);
|
|
||||||
}
|
|
||||||
|
|
||||||
_setupTimer () {
|
|
||||||
const { poll } = this.props;
|
|
||||||
clearTimeout(this._timer);
|
|
||||||
if (!this.state.expired) {
|
|
||||||
const delay = (new Date(poll.get('expires_at'))).getTime() - Date.now();
|
|
||||||
this._timer = setTimeout(() => {
|
|
||||||
this.setState({ expired: true });
|
|
||||||
}, delay);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
_toggleOption = value => {
|
|
||||||
if (this.props.poll.get('multiple')) {
|
|
||||||
const tmp = { ...this.state.selected };
|
|
||||||
if (tmp[value]) {
|
|
||||||
delete tmp[value];
|
|
||||||
} else {
|
|
||||||
tmp[value] = true;
|
|
||||||
}
|
|
||||||
this.setState({ selected: tmp });
|
|
||||||
} else {
|
|
||||||
const tmp = {};
|
|
||||||
tmp[value] = true;
|
|
||||||
this.setState({ selected: tmp });
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
handleOptionChange = ({ target: { value } }) => {
|
|
||||||
this._toggleOption(value);
|
|
||||||
};
|
|
||||||
|
|
||||||
handleOptionKeyPress = (e) => {
|
|
||||||
if (e.key === 'Enter' || e.key === ' ') {
|
|
||||||
this._toggleOption(e.target.getAttribute('data-index'));
|
|
||||||
e.stopPropagation();
|
|
||||||
e.preventDefault();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
handleVote = () => {
|
|
||||||
if (this.props.disabled) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.props.identity.signedIn) {
|
|
||||||
this.props.onVote(Object.keys(this.state.selected));
|
|
||||||
} else {
|
|
||||||
this.props.onInteractionModal('vote', this.props.status);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
handleRefresh = () => {
|
|
||||||
if (this.props.disabled) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.props.refresh();
|
|
||||||
};
|
|
||||||
|
|
||||||
handleReveal = () => {
|
|
||||||
this.setState({ revealed: true });
|
|
||||||
};
|
|
||||||
|
|
||||||
renderOption (option, optionIndex, showResults) {
|
|
||||||
const { poll, lang, disabled, intl } = this.props;
|
|
||||||
const pollVotesCount = poll.get('voters_count') || poll.get('votes_count');
|
|
||||||
const percent = pollVotesCount === 0 ? 0 : (option.get('votes_count') / pollVotesCount) * 100;
|
|
||||||
const leading = poll.get('options').filterNot(other => other.get('title') === option.get('title')).every(other => option.get('votes_count') >= other.get('votes_count'));
|
|
||||||
const active = !!this.state.selected[`${optionIndex}`];
|
|
||||||
const voted = option.get('voted') || (poll.get('own_votes') && poll.get('own_votes').includes(optionIndex));
|
|
||||||
|
|
||||||
const title = option.getIn(['translation', 'title']) || option.get('title');
|
|
||||||
let titleHtml = option.getIn(['translation', 'titleHtml']) || option.get('titleHtml');
|
|
||||||
|
|
||||||
if (!titleHtml) {
|
|
||||||
const emojiMap = emojiMap(poll);
|
|
||||||
titleHtml = emojify(escapeTextContentForBrowser(title), emojiMap);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<li key={option.get('title')}>
|
|
||||||
<label className={classNames('poll__option', { selectable: !showResults })}>
|
|
||||||
<input
|
|
||||||
name='vote-options'
|
|
||||||
type={poll.get('multiple') ? 'checkbox' : 'radio'}
|
|
||||||
value={optionIndex}
|
|
||||||
checked={active}
|
|
||||||
onChange={this.handleOptionChange}
|
|
||||||
disabled={disabled}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{!showResults && (
|
|
||||||
<span
|
|
||||||
className={classNames('poll__input', { checkbox: poll.get('multiple'), active })}
|
|
||||||
tabIndex={0}
|
|
||||||
role={poll.get('multiple') ? 'checkbox' : 'radio'}
|
|
||||||
onKeyPress={this.handleOptionKeyPress}
|
|
||||||
aria-checked={active}
|
|
||||||
aria-label={title}
|
|
||||||
lang={lang}
|
|
||||||
data-index={optionIndex}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{showResults && (
|
|
||||||
<span
|
|
||||||
className='poll__number'
|
|
||||||
title={intl.formatMessage(messages.votes, {
|
|
||||||
votes: option.get('votes_count'),
|
|
||||||
})}
|
|
||||||
>
|
|
||||||
{Math.round(percent)}%
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<span
|
|
||||||
className='poll__option__text translate'
|
|
||||||
lang={lang}
|
|
||||||
dangerouslySetInnerHTML={{ __html: titleHtml }}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{!!voted && <span className='poll__voted'>
|
|
||||||
<Icon id='check' icon={CheckIcon} className='poll__voted__mark' title={intl.formatMessage(messages.voted)} />
|
|
||||||
</span>}
|
|
||||||
</label>
|
|
||||||
|
|
||||||
{showResults && (
|
|
||||||
<Motion defaultStyle={{ width: 0 }} style={{ width: spring(percent, { stiffness: 180, damping: 12 }) }}>
|
|
||||||
{({ width }) =>
|
|
||||||
<span className={classNames('poll__chart', { leading })} style={{ width: `${width}%` }} />
|
|
||||||
}
|
|
||||||
</Motion>
|
|
||||||
)}
|
|
||||||
</li>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
render () {
|
|
||||||
const { poll, intl } = this.props;
|
|
||||||
const { revealed, expired } = this.state;
|
|
||||||
|
|
||||||
if (!poll) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
const timeRemaining = expired ? intl.formatMessage(messages.closed) : <RelativeTimestamp timestamp={poll.get('expires_at')} futureDate />;
|
|
||||||
const showResults = poll.get('voted') || revealed || expired;
|
|
||||||
const disabled = this.props.disabled || Object.entries(this.state.selected).every(item => !item);
|
|
||||||
|
|
||||||
let votesCount = null;
|
|
||||||
|
|
||||||
if (poll.get('voters_count') !== null && poll.get('voters_count') !== undefined) {
|
|
||||||
votesCount = <FormattedMessage id='poll.total_people' defaultMessage='{count, plural, one {# person} other {# people}}' values={{ count: poll.get('voters_count') }} />;
|
|
||||||
} else {
|
|
||||||
votesCount = <FormattedMessage id='poll.total_votes' defaultMessage='{count, plural, one {# vote} other {# votes}}' values={{ count: poll.get('votes_count') }} />;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className='poll'>
|
|
||||||
<ul>
|
|
||||||
{poll.get('options').map((option, i) => this.renderOption(option, i, showResults))}
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<div className='poll__footer'>
|
|
||||||
{!showResults && <button className='button button-secondary' disabled={disabled} onClick={this.handleVote}><FormattedMessage id='poll.vote' defaultMessage='Vote' /></button>}
|
|
||||||
{!showResults && <><button className='poll__link' onClick={this.handleReveal}><FormattedMessage id='poll.reveal' defaultMessage='See results' /></button> · </>}
|
|
||||||
{showResults && !this.props.disabled && <><button className='poll__link' onClick={this.handleRefresh}><FormattedMessage id='poll.refresh' defaultMessage='Refresh' /></button> · </>}
|
|
||||||
{votesCount}
|
|
||||||
{poll.get('expires_at') && <> · {timeRemaining}</>}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
export default injectIntl(withIdentity(Poll));
|
|
||||||
333
app/javascript/mastodon/components/poll.tsx
Normal file
333
app/javascript/mastodon/components/poll.tsx
Normal file
|
|
@ -0,0 +1,333 @@
|
||||||
|
import { useCallback, useEffect, useState } from 'react';
|
||||||
|
|
||||||
|
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
|
||||||
|
|
||||||
|
import classNames from 'classnames';
|
||||||
|
|
||||||
|
import { spring } from 'react-motion';
|
||||||
|
|
||||||
|
import CheckIcon from '@/material-icons/400-24px/check.svg?react';
|
||||||
|
import { Icon } from 'mastodon/components/icon';
|
||||||
|
import Motion from 'mastodon/features/ui/util/optional_motion';
|
||||||
|
import { useIdentity } from 'mastodon/identity_context';
|
||||||
|
import type {
|
||||||
|
Poll as PollModel,
|
||||||
|
PollOption as PollOptionModel,
|
||||||
|
} from 'mastodon/models/poll';
|
||||||
|
import type { Status } from 'mastodon/models/status';
|
||||||
|
|
||||||
|
import { RelativeTimestamp } from './relative_timestamp';
|
||||||
|
|
||||||
|
const messages = defineMessages({
|
||||||
|
closed: {
|
||||||
|
id: 'poll.closed',
|
||||||
|
defaultMessage: 'Closed',
|
||||||
|
},
|
||||||
|
voted: {
|
||||||
|
id: 'poll.voted',
|
||||||
|
defaultMessage: 'You voted for this answer',
|
||||||
|
},
|
||||||
|
votes: {
|
||||||
|
id: 'poll.votes',
|
||||||
|
defaultMessage: '{votes, plural, one {# vote} other {# votes}}',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export const PollOption: React.FC<{
|
||||||
|
option: PollOptionModel;
|
||||||
|
optionIndex: number;
|
||||||
|
showResults: boolean;
|
||||||
|
percent: number;
|
||||||
|
voted: boolean;
|
||||||
|
leading: boolean;
|
||||||
|
multiple: boolean;
|
||||||
|
lang: string;
|
||||||
|
disabled: boolean;
|
||||||
|
active: boolean;
|
||||||
|
toggleOption: () => void;
|
||||||
|
}> = ({
|
||||||
|
option,
|
||||||
|
optionIndex,
|
||||||
|
percent,
|
||||||
|
leading,
|
||||||
|
voted,
|
||||||
|
multiple,
|
||||||
|
showResults,
|
||||||
|
lang,
|
||||||
|
disabled,
|
||||||
|
active,
|
||||||
|
toggleOption,
|
||||||
|
}) => {
|
||||||
|
const intl = useIntl();
|
||||||
|
const title = option.translation?.title ?? option.title;
|
||||||
|
const titleHtml = option.translation?.titleHtml ?? option.titleHtml;
|
||||||
|
|
||||||
|
const handleOptionKeyPress = useCallback<
|
||||||
|
React.KeyboardEventHandler<HTMLElement>
|
||||||
|
>(
|
||||||
|
(e) => {
|
||||||
|
if (e.key === 'Enter' || e.key === ' ') {
|
||||||
|
toggleOption();
|
||||||
|
e.stopPropagation();
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[toggleOption],
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<li key={option.title}>
|
||||||
|
<label
|
||||||
|
className={classNames('poll__option', { selectable: !showResults })}
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
name='vote-options'
|
||||||
|
type={multiple ? 'checkbox' : 'radio'}
|
||||||
|
value={optionIndex}
|
||||||
|
checked={active}
|
||||||
|
onChange={toggleOption}
|
||||||
|
disabled={disabled}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{showResults ? (
|
||||||
|
<span
|
||||||
|
className='poll__number'
|
||||||
|
title={intl.formatMessage(messages.votes, {
|
||||||
|
votes: option.votes_count,
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
{Math.round(percent)}%
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<span
|
||||||
|
className={classNames('poll__input', {
|
||||||
|
checkbox: multiple,
|
||||||
|
active,
|
||||||
|
})}
|
||||||
|
tabIndex={0}
|
||||||
|
role={multiple ? 'checkbox' : 'radio'}
|
||||||
|
onKeyPress={handleOptionKeyPress}
|
||||||
|
aria-checked={active}
|
||||||
|
aria-label={title}
|
||||||
|
lang={lang}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<span
|
||||||
|
className='poll__option__text translate'
|
||||||
|
lang={lang}
|
||||||
|
dangerouslySetInnerHTML={{ __html: titleHtml }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{!!voted && (
|
||||||
|
<span className='poll__voted'>
|
||||||
|
<Icon
|
||||||
|
id='check'
|
||||||
|
icon={CheckIcon}
|
||||||
|
className='poll__voted__mark'
|
||||||
|
title={intl.formatMessage(messages.voted)}
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</label>
|
||||||
|
|
||||||
|
{showResults && (
|
||||||
|
<Motion
|
||||||
|
defaultStyle={{ width: 0 }}
|
||||||
|
style={{ width: spring(percent, { stiffness: 180, damping: 12 }) }}
|
||||||
|
>
|
||||||
|
{({ width }) => (
|
||||||
|
<span
|
||||||
|
className={classNames('poll__chart', { leading })}
|
||||||
|
style={{ width: `${width}%` }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Motion>
|
||||||
|
)}
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Poll: React.FC<{
|
||||||
|
poll: PollModel;
|
||||||
|
status: Status;
|
||||||
|
lang: string;
|
||||||
|
disabled?: boolean;
|
||||||
|
refresh?: () => void;
|
||||||
|
onVote: (votes: string[]) => void;
|
||||||
|
onInteractionModal: (interactionType: string, status: Status) => void;
|
||||||
|
}> = ({
|
||||||
|
poll,
|
||||||
|
lang,
|
||||||
|
disabled,
|
||||||
|
refresh,
|
||||||
|
onVote,
|
||||||
|
onInteractionModal,
|
||||||
|
status,
|
||||||
|
}) => {
|
||||||
|
const intl = useIntl();
|
||||||
|
|
||||||
|
const expires_at = poll.expires_at;
|
||||||
|
const [expired, setExpired] = useState(
|
||||||
|
poll.expired ||
|
||||||
|
(!!expires_at && new Date(expires_at).getTime() < Date.now()),
|
||||||
|
);
|
||||||
|
|
||||||
|
const [revealed, setRevealed] = useState(false);
|
||||||
|
|
||||||
|
const handleReveal = useCallback(() => {
|
||||||
|
setRevealed(true);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const [selected, setSelected] = useState<Set<string>>(new Set());
|
||||||
|
|
||||||
|
const toggleOption = useCallback(
|
||||||
|
(option: string) => {
|
||||||
|
setSelected((prev) => {
|
||||||
|
const next = new Set(prev);
|
||||||
|
|
||||||
|
if (poll.multiple) {
|
||||||
|
if (next.has(option)) next.delete(option);
|
||||||
|
else next.add(option);
|
||||||
|
} else {
|
||||||
|
next.add(option);
|
||||||
|
}
|
||||||
|
return next;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
[poll.multiple],
|
||||||
|
);
|
||||||
|
|
||||||
|
const makeToggleOption = (option: string) => () => {
|
||||||
|
toggleOption(option);
|
||||||
|
};
|
||||||
|
|
||||||
|
const { signedIn } = useIdentity();
|
||||||
|
|
||||||
|
const handleRefresh = useCallback(() => {
|
||||||
|
if (disabled) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
refresh?.();
|
||||||
|
}, [refresh, disabled]);
|
||||||
|
|
||||||
|
const handleVote = useCallback(() => {
|
||||||
|
if (disabled) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (signedIn) {
|
||||||
|
onVote(Array.from(selected));
|
||||||
|
} else {
|
||||||
|
onInteractionModal('vote', status);
|
||||||
|
}
|
||||||
|
|
||||||
|
onVote(Array.from(selected));
|
||||||
|
}, [disabled, onVote, selected, signedIn, onInteractionModal, status]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (expired || !expires_at) return () => undefined;
|
||||||
|
|
||||||
|
const delay = new Date(expires_at).getTime() - Date.now();
|
||||||
|
const timer = setTimeout(() => {
|
||||||
|
setExpired(true);
|
||||||
|
}, delay);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
clearTimeout(timer);
|
||||||
|
};
|
||||||
|
}, [expired, expires_at]);
|
||||||
|
|
||||||
|
const timeRemaining =
|
||||||
|
expired || !expires_at ? (
|
||||||
|
intl.formatMessage(messages.closed)
|
||||||
|
) : (
|
||||||
|
<RelativeTimestamp timestamp={expires_at} futureDate />
|
||||||
|
);
|
||||||
|
const showResults = poll.voted || revealed || expired;
|
||||||
|
|
||||||
|
let votesCount = null;
|
||||||
|
|
||||||
|
if (poll.voters_count) {
|
||||||
|
votesCount = (
|
||||||
|
<FormattedMessage
|
||||||
|
id='poll.total_people'
|
||||||
|
defaultMessage='{count, plural, one {# person} other {# people}}'
|
||||||
|
values={{ count: poll.voters_count }}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
votesCount = (
|
||||||
|
<FormattedMessage
|
||||||
|
id='poll.total_votes'
|
||||||
|
defaultMessage='{count, plural, one {# vote} other {# votes}}'
|
||||||
|
values={{ count: poll.votes_count }}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='poll'>
|
||||||
|
<ul>
|
||||||
|
{poll.options.map((option, i) => {
|
||||||
|
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- we want `votes_count` if `voters_count` is 0
|
||||||
|
const pollVotesCount = poll.voters_count || poll.votes_count;
|
||||||
|
const percent =
|
||||||
|
pollVotesCount === 0
|
||||||
|
? 0
|
||||||
|
: (option.votes_count / pollVotesCount) * 100;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PollOption
|
||||||
|
option={option}
|
||||||
|
optionIndex={i}
|
||||||
|
key={option.title}
|
||||||
|
active={selected.has(option.title)}
|
||||||
|
showResults={showResults}
|
||||||
|
lang={lang}
|
||||||
|
toggleOption={makeToggleOption(option.title)}
|
||||||
|
multiple={poll.multiple}
|
||||||
|
voted={option.voted || poll.own_votes?.includes(i) || false}
|
||||||
|
leading={poll.options
|
||||||
|
.filterNot((other) => other.title === option.title)
|
||||||
|
.every((other) => option.votes_count >= other.votes_count)}
|
||||||
|
percent={percent}
|
||||||
|
disabled={disabled || selected.size === 0}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div className='poll__footer'>
|
||||||
|
{!showResults && (
|
||||||
|
<button
|
||||||
|
className='button button-secondary'
|
||||||
|
disabled={disabled}
|
||||||
|
onClick={handleVote}
|
||||||
|
>
|
||||||
|
<FormattedMessage id='poll.vote' defaultMessage='Vote' />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
{!showResults && (
|
||||||
|
<>
|
||||||
|
<button className='poll__link' onClick={handleReveal}>
|
||||||
|
<FormattedMessage id='poll.reveal' defaultMessage='See results' />
|
||||||
|
</button>{' '}
|
||||||
|
·{' '}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{showResults && !disabled && (
|
||||||
|
<>
|
||||||
|
<button className='poll__link' onClick={handleRefresh}>
|
||||||
|
<FormattedMessage id='poll.refresh' defaultMessage='Refresh' />
|
||||||
|
</button>{' '}
|
||||||
|
·{' '}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{votesCount}
|
||||||
|
{poll.expires_at && <> · {timeRemaining}</>}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import Motion from 'react-motion/lib/Motion';
|
import { Motion } from 'react-motion';
|
||||||
|
|
||||||
import { reduceMotion } from '../../../initial_state';
|
import { reduceMotion } from '../../../initial_state';
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { Component } from 'react';
|
import { Component } from 'react';
|
||||||
|
|
||||||
import Motion from 'react-motion/lib/Motion';
|
import { Motion } from 'react-motion';
|
||||||
|
|
||||||
const stylesToKeep = ['opacity', 'backgroundOpacity'];
|
const stylesToKeep = ['opacity', 'backgroundOpacity'];
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue