|
|
|
@ -40,31 +40,12 @@ const PollPercentageBar: React.FC<IPollPercentageBar> = ({ percent, leading }):
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
interface IPollOption {
|
|
|
|
|
poll: PollEntity,
|
|
|
|
|
option: PollOptionEntity,
|
|
|
|
|
index: number,
|
|
|
|
|
showResults?: boolean,
|
|
|
|
|
disabled?: boolean,
|
|
|
|
|
active: boolean,
|
|
|
|
|
onToggle: (value: number) => void,
|
|
|
|
|
interface IPollOptionText extends IPollOption {
|
|
|
|
|
percent: number,
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const PollOption: React.FC<IPollOption> = ({
|
|
|
|
|
poll,
|
|
|
|
|
option,
|
|
|
|
|
index,
|
|
|
|
|
showResults,
|
|
|
|
|
disabled,
|
|
|
|
|
active,
|
|
|
|
|
onToggle,
|
|
|
|
|
}): JSX.Element | null => {
|
|
|
|
|
const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active, disabled, percent, showResults, onToggle }) => {
|
|
|
|
|
const intl = useIntl();
|
|
|
|
|
|
|
|
|
|
if (!poll) return null;
|
|
|
|
|
|
|
|
|
|
const percent = poll.votes_count === 0 ? 0 : (option.votes_count / poll.votes_count) * 100;
|
|
|
|
|
const leading = poll.options.filterNot(other => other.title === option.title).every(other => option.votes_count >= other.votes_count);
|
|
|
|
|
const voted = poll.own_votes?.includes(index);
|
|
|
|
|
|
|
|
|
|
const handleOptionChange = (): void => {
|
|
|
|
@ -80,11 +61,6 @@ const PollOption: React.FC<IPollOption> = ({
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<li key={option.title}>
|
|
|
|
|
{showResults && (
|
|
|
|
|
<PollPercentageBar percent={percent} leading={leading} />
|
|
|
|
|
)}
|
|
|
|
|
|
|
|
|
|
<label className={classNames('poll__text', { selectable: !showResults })}>
|
|
|
|
|
<input
|
|
|
|
|
name='vote-options'
|
|
|
|
@ -116,6 +92,33 @@ const PollOption: React.FC<IPollOption> = ({
|
|
|
|
|
|
|
|
|
|
<span dangerouslySetInnerHTML={{ __html: option.title_emojified }} />
|
|
|
|
|
</label>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
interface IPollOption {
|
|
|
|
|
poll: PollEntity,
|
|
|
|
|
option: PollOptionEntity,
|
|
|
|
|
index: number,
|
|
|
|
|
showResults?: boolean,
|
|
|
|
|
disabled?: boolean,
|
|
|
|
|
active: boolean,
|
|
|
|
|
onToggle: (value: number) => void,
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const PollOption: React.FC<IPollOption> = (props): JSX.Element | null => {
|
|
|
|
|
const { poll, option, showResults } = props;
|
|
|
|
|
if (!poll) return null;
|
|
|
|
|
|
|
|
|
|
const percent = poll.votes_count === 0 ? 0 : (option.votes_count / poll.votes_count) * 100;
|
|
|
|
|
const leading = poll.options.filterNot(other => other.title === option.title).every(other => option.votes_count >= other.votes_count);
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<li key={option.title}>
|
|
|
|
|
{showResults && (
|
|
|
|
|
<PollPercentageBar percent={percent} leading={leading} />
|
|
|
|
|
)}
|
|
|
|
|
|
|
|
|
|
<PollOptionText percent={percent} {...props} />
|
|
|
|
|
</li>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|