Refactor polls
This commit is contained in:
Justin
parent
fb9796b0c4
commit
b124705bfd
5 changed files with 327 additions and 291 deletions
|
|
@ -1,290 +0,0 @@
|
|||
import classNames from 'classnames';
|
||||
import React, { useState } from 'react';
|
||||
import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
|
||||
import { spring } from 'react-motion';
|
||||
import { useDispatch } from 'react-redux';
|
||||
|
||||
import { openModal } from 'soapbox/actions/modals';
|
||||
import { vote, fetchPoll } from 'soapbox/actions/polls';
|
||||
import { Text, Button, Icon, Stack, HStack } from 'soapbox/components/ui';
|
||||
import Motion from 'soapbox/features/ui/util/optional_motion';
|
||||
import { useAppSelector } from 'soapbox/hooks';
|
||||
|
||||
import RelativeTimestamp from './relative_timestamp';
|
||||
|
||||
import type { Poll as PollEntity, PollOption as PollOptionEntity } from 'soapbox/types/entities';
|
||||
|
||||
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}}' },
|
||||
});
|
||||
|
||||
const PollPercentageBar: React.FC<{ percent: number, leading: boolean }> = ({ percent, leading }): JSX.Element => {
|
||||
return (
|
||||
<Motion defaultStyle={{ width: 0 }} style={{ width: spring(percent, { stiffness: 180, damping: 12 }) }}>
|
||||
{({ width }) => (
|
||||
<span
|
||||
className={classNames('absolute inset-0 h-full inline-block rounded bg-gray-300 dark:bg-slate-900', {
|
||||
'bg-primary-300 dark:bg-primary-400': leading,
|
||||
})}
|
||||
style={{ width: `${width}%` }}
|
||||
/>
|
||||
)}
|
||||
</Motion>
|
||||
);
|
||||
};
|
||||
|
||||
interface IPollOptionText extends IPollOption {
|
||||
percent: number,
|
||||
}
|
||||
|
||||
const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active, percent, showResults, onToggle }) => {
|
||||
const intl = useIntl();
|
||||
const voted = poll.own_votes?.includes(index);
|
||||
const message = intl.formatMessage(messages.votes, { votes: option.votes_count });
|
||||
|
||||
const handleOptionChange: React.EventHandler<React.ChangeEvent> = () => {
|
||||
onToggle(index);
|
||||
};
|
||||
|
||||
const handleOptionKeyPress: React.EventHandler<React.KeyboardEvent> = e => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
onToggle(index);
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<label
|
||||
className={classNames({
|
||||
'relative flex rounded-full border border-solid bg-white p-2 hover:bg-primary-50': true,
|
||||
'border-primary-600 ring-1 ring-primary-600 bg-primary-50': active,
|
||||
'border-primary-300': !active,
|
||||
'cursor-pointer': !showResults,
|
||||
})}
|
||||
title={showResults ? message : undefined}
|
||||
>
|
||||
<input
|
||||
className='hidden'
|
||||
name='vote-options'
|
||||
type={poll.multiple ? 'checkbox' : 'radio'}
|
||||
value={index}
|
||||
checked={active}
|
||||
onChange={handleOptionChange}
|
||||
/>
|
||||
|
||||
<div className='grid items-center w-full'>
|
||||
<div className='col-start-1 row-start-1 justify-self-center ml-4 mr-6'>
|
||||
<Text
|
||||
theme='primary'
|
||||
weight='semibold'
|
||||
dangerouslySetInnerHTML={{ __html: option.title_emojified }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='col-start-1 row-start-1 justify-self-end flex items-center'>
|
||||
{showResults ? (
|
||||
<HStack space={2} alignItems='center' className='mr-2.5'>
|
||||
{voted ? (
|
||||
<Icon src={require('@tabler/icons/icons/check.svg')} alt={intl.formatMessage(messages.voted)} />
|
||||
) : (
|
||||
<div className='svg-icon' />
|
||||
)}
|
||||
<span className='font-bold'>{Math.round(percent)}%</span>
|
||||
</HStack>
|
||||
) : (
|
||||
<span
|
||||
className={classNames('flex items-center justify-center w-6 h-6 flex-none border border-solid rounded-full', {
|
||||
'bg-primary-600 border-primary-600': active,
|
||||
'border-primary-300 bg-white': !active,
|
||||
})}
|
||||
tabIndex={0}
|
||||
role={poll.multiple ? 'checkbox' : 'radio'}
|
||||
onKeyPress={handleOptionKeyPress}
|
||||
aria-checked={active}
|
||||
aria-label={option.title}
|
||||
>
|
||||
{active && (
|
||||
<Icon src={require('@tabler/icons/icons/check.svg')} className='text-white w-4 h-4' />
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
);
|
||||
};
|
||||
|
||||
interface IPollOption {
|
||||
poll: PollEntity,
|
||||
option: PollOptionEntity,
|
||||
index: number,
|
||||
showResults?: 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 (
|
||||
<div className='relative' key={option.title}>
|
||||
{showResults && (
|
||||
<PollPercentageBar percent={percent} leading={leading} />
|
||||
)}
|
||||
|
||||
<PollOptionText percent={percent} {...props} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const RefreshButton: React.FC<{ poll: PollEntity }> = ({ poll }): JSX.Element => {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const handleRefresh: React.EventHandler<React.MouseEvent> = (e) => {
|
||||
dispatch(fetchPoll(poll.id));
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
return (
|
||||
<span>
|
||||
<button className='underline' onClick={handleRefresh}>
|
||||
<Text><FormattedMessage id='poll.refresh' defaultMessage='Refresh' /></Text>
|
||||
</button>
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
const VoteButton: React.FC<{ poll: PollEntity, selected: Selected }> = ({ poll, selected }): JSX.Element => {
|
||||
const dispatch = useDispatch();
|
||||
const handleVote = () => dispatch(vote(poll.id, Object.keys(selected)));
|
||||
|
||||
return (
|
||||
<Button onClick={handleVote} theme='primary' block>
|
||||
<FormattedMessage id='poll.vote' defaultMessage='Vote' />
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
|
||||
interface IPollFooter {
|
||||
poll: PollEntity,
|
||||
showResults: boolean,
|
||||
selected: Selected,
|
||||
}
|
||||
|
||||
const PollFooter: React.FC<IPollFooter> = ({ poll, showResults, selected }): JSX.Element => {
|
||||
const intl = useIntl();
|
||||
const timeRemaining = poll.expired ? intl.formatMessage(messages.closed) : <RelativeTimestamp weight='medium' timestamp={poll.expires_at} futureDate />;
|
||||
|
||||
return (
|
||||
<Stack space={4}>
|
||||
{!showResults && <div><VoteButton poll={poll} selected={selected} /></div>}
|
||||
|
||||
<HStack space={1.5} alignItems='center'>
|
||||
{showResults && (
|
||||
<>
|
||||
<RefreshButton poll={poll} />
|
||||
<Text theme='muted'>·</Text>
|
||||
</>
|
||||
)}
|
||||
|
||||
<Text theme='muted' weight='medium'>
|
||||
<FormattedMessage
|
||||
id='poll.total_votes'
|
||||
defaultMessage='{count, plural, one {# vote} other {# votes}}'
|
||||
values={{ count: poll.votes_count }}
|
||||
/>
|
||||
</Text>
|
||||
|
||||
{poll.expires_at && (
|
||||
<>
|
||||
<Text theme='muted'>·</Text>
|
||||
<Text weight='medium' theme='muted'>{timeRemaining}</Text>
|
||||
</>
|
||||
)}
|
||||
</HStack>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
type Selected = Record<number, boolean>;
|
||||
|
||||
interface IPoll {
|
||||
id: string,
|
||||
status?: string,
|
||||
}
|
||||
|
||||
const Poll: React.FC<IPoll> = ({ id, status }): JSX.Element | null => {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const me = useAppSelector((state) => state.me);
|
||||
const poll = useAppSelector((state) => state.polls.get(id));
|
||||
|
||||
const [selected, setSelected] = useState({} as Selected);
|
||||
|
||||
const openUnauthorizedModal = () => {
|
||||
dispatch(openModal('UNAUTHORIZED', {
|
||||
action: 'POLL_VOTE',
|
||||
ap_id: status,
|
||||
}));
|
||||
};
|
||||
|
||||
const toggleOption = (value: number) => {
|
||||
if (me) {
|
||||
if (poll?.multiple) {
|
||||
const tmp = { ...selected };
|
||||
if (tmp[value]) {
|
||||
delete tmp[value];
|
||||
} else {
|
||||
tmp[value] = true;
|
||||
}
|
||||
setSelected(tmp);
|
||||
} else {
|
||||
const tmp: Selected = {};
|
||||
tmp[value] = true;
|
||||
setSelected(tmp);
|
||||
}
|
||||
} else {
|
||||
openUnauthorizedModal();
|
||||
}
|
||||
};
|
||||
|
||||
if (!poll) return null;
|
||||
|
||||
const showResults = poll.voted || poll.expired;
|
||||
|
||||
return (
|
||||
<div onClick={e => e.stopPropagation()}>
|
||||
<Stack space={4} className={classNames('mt-4', { voted: poll.voted })}>
|
||||
<Stack space={2}>
|
||||
{poll.options.map((option, i) => (
|
||||
<PollOption
|
||||
key={i}
|
||||
poll={poll}
|
||||
option={option}
|
||||
index={i}
|
||||
showResults={showResults}
|
||||
active={!!selected[i]}
|
||||
onToggle={toggleOption}
|
||||
/>
|
||||
))}
|
||||
</Stack>
|
||||
|
||||
<PollFooter
|
||||
poll={poll}
|
||||
showResults={showResults}
|
||||
selected={selected}
|
||||
/>
|
||||
</Stack>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Poll;
|
||||
79
app/soapbox/components/polls/poll-footer.tsx
Normal file
79
app/soapbox/components/polls/poll-footer.tsx
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
import React from 'react';
|
||||
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
|
||||
|
||||
import { fetchPoll, vote } from 'soapbox/actions/polls';
|
||||
import { useAppDispatch } from 'soapbox/hooks';
|
||||
|
||||
import RelativeTimestamp from '../relative_timestamp';
|
||||
import { Button, HStack, Stack, Text } from '../ui';
|
||||
|
||||
import type { Selected } from './poll';
|
||||
import type { Poll as PollEntity } from 'soapbox/types/entities';
|
||||
|
||||
const messages = defineMessages({
|
||||
closed: { id: 'poll.closed', defaultMessage: 'Closed' },
|
||||
});
|
||||
|
||||
interface IPollFooter {
|
||||
poll: PollEntity,
|
||||
showResults: boolean,
|
||||
selected: Selected,
|
||||
}
|
||||
|
||||
const PollFooter: React.FC<IPollFooter> = ({ poll, showResults, selected }): JSX.Element => {
|
||||
const dispatch = useAppDispatch();
|
||||
const intl = useIntl();
|
||||
|
||||
const handleVote = () => dispatch(vote(poll.id, Object.keys(selected)));
|
||||
|
||||
const handleRefresh: React.EventHandler<React.MouseEvent> = (e) => {
|
||||
dispatch(fetchPoll(poll.id));
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
const timeRemaining = poll.expired ?
|
||||
intl.formatMessage(messages.closed) :
|
||||
<RelativeTimestamp weight='medium' timestamp={poll.expires_at} futureDate />;
|
||||
|
||||
return (
|
||||
<Stack space={4}>
|
||||
{(!showResults && poll?.multiple) && (
|
||||
<Button onClick={handleVote} theme='primary' block>
|
||||
<FormattedMessage id='poll.vote' defaultMessage='Vote' />
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<HStack space={1.5} alignItems='center'>
|
||||
{showResults && (
|
||||
<>
|
||||
<button className='text-gray-600 underline' onClick={handleRefresh}>
|
||||
<Text theme='muted' weight='medium'>
|
||||
<FormattedMessage id='poll.refresh' defaultMessage='Refresh' />
|
||||
</Text>
|
||||
</button>
|
||||
|
||||
<Text theme='muted'>·</Text>
|
||||
</>
|
||||
)}
|
||||
|
||||
<Text theme='muted' weight='medium'>
|
||||
<FormattedMessage
|
||||
id='poll.total_votes'
|
||||
defaultMessage='{count, plural, one {# vote} other {# votes}}'
|
||||
values={{ count: poll.votes_count }}
|
||||
/>
|
||||
</Text>
|
||||
|
||||
{poll.expires_at && (
|
||||
<>
|
||||
<Text theme='muted'>·</Text>
|
||||
<Text weight='medium' theme='muted'>{timeRemaining}</Text>
|
||||
</>
|
||||
)}
|
||||
</HStack>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
export default PollFooter;
|
||||
157
app/soapbox/components/polls/poll-option.tsx
Normal file
157
app/soapbox/components/polls/poll-option.tsx
Normal file
|
|
@ -0,0 +1,157 @@
|
|||
import classNames from 'classnames';
|
||||
import React from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
import { Motion, presets, spring } from 'react-motion';
|
||||
|
||||
import { HStack, Icon, Text } from '../ui';
|
||||
|
||||
import type {
|
||||
Poll as PollEntity,
|
||||
PollOption as PollOptionEntity,
|
||||
} from 'soapbox/types/entities';
|
||||
|
||||
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}}' },
|
||||
});
|
||||
|
||||
const PollPercentageBar: React.FC<{ percent: number, leading: boolean }> = ({ percent, leading }): JSX.Element => {
|
||||
return (
|
||||
<Motion defaultStyle={{ width: 0 }} style={{ width: spring(percent, { ...presets.gentle, precision: 0.1 }) }}>
|
||||
{({ width }) => (
|
||||
<span
|
||||
className='absolute inset-0 h-full inline-block bg-primary-100 rounded-l-md'
|
||||
style={{ width: `${width}%` }}
|
||||
/>
|
||||
)}
|
||||
</Motion>
|
||||
);
|
||||
};
|
||||
|
||||
interface IPollOptionText extends IPollOption {
|
||||
percent: number,
|
||||
}
|
||||
|
||||
const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active, onToggle }) => {
|
||||
const handleOptionChange: React.EventHandler<React.ChangeEvent> = () => onToggle(index);
|
||||
|
||||
const handleOptionKeyPress: React.EventHandler<React.KeyboardEvent> = e => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
onToggle(index);
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<label
|
||||
className={
|
||||
classNames('flex relative p-2 bg-white cursor-pointer rounded-full border border-solid hover:bg-primary-50', {
|
||||
'border-primary-600 ring-1 ring-primary-600 bg-primary-50': active,
|
||||
'border-primary-300': !active,
|
||||
})
|
||||
}
|
||||
>
|
||||
<input
|
||||
className='hidden'
|
||||
name='vote-options'
|
||||
type={poll.multiple ? 'checkbox' : 'radio'}
|
||||
value={index}
|
||||
checked={active}
|
||||
onChange={handleOptionChange}
|
||||
/>
|
||||
|
||||
<div className='grid items-center w-full'>
|
||||
<div className='col-start-1 row-start-1 justify-self-center ml-4 mr-6'>
|
||||
<Text
|
||||
theme='primary'
|
||||
weight='medium'
|
||||
dangerouslySetInnerHTML={{ __html: option.title_emojified }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='col-start-1 row-start-1 justify-self-end flex items-center'>
|
||||
<span
|
||||
className={classNames('flex items-center justify-center w-6 h-6 flex-none border border-solid rounded-full', {
|
||||
'bg-primary-600 border-primary-600': active,
|
||||
'border-primary-300 bg-white': !active,
|
||||
})}
|
||||
tabIndex={0}
|
||||
role={poll.multiple ? 'checkbox' : 'radio'}
|
||||
onKeyPress={handleOptionKeyPress}
|
||||
aria-checked={active}
|
||||
aria-label={option.title}
|
||||
>
|
||||
{active && (
|
||||
<Icon src={require('@tabler/icons/icons/check.svg')} className='text-white w-4 h-4' />
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
);
|
||||
};
|
||||
|
||||
interface IPollOption {
|
||||
poll: PollEntity,
|
||||
option: PollOptionEntity,
|
||||
index: number,
|
||||
showResults?: boolean,
|
||||
active: boolean,
|
||||
onToggle: (value: number) => void,
|
||||
}
|
||||
|
||||
const PollOption: React.FC<IPollOption> = (props): JSX.Element | null => {
|
||||
const { index, poll, option, showResults } = props;
|
||||
|
||||
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 message = intl.formatMessage(messages.votes, { votes: option.votes_count });
|
||||
|
||||
return (
|
||||
<div key={option.title}>
|
||||
{showResults ? (
|
||||
<div title={voted ? message : undefined}>
|
||||
<HStack
|
||||
justifyContent='between'
|
||||
alignItems='center'
|
||||
className='relative p-2 w-full bg-white rounded-md overflow-hidden'
|
||||
>
|
||||
<PollPercentageBar percent={percent} leading={leading} />
|
||||
|
||||
<Text
|
||||
theme='primary'
|
||||
weight='medium'
|
||||
dangerouslySetInnerHTML={{ __html: option.title_emojified }}
|
||||
className='relative'
|
||||
/>
|
||||
|
||||
<HStack space={2} alignItems='center' className='relative'>
|
||||
{voted ? (
|
||||
<Icon
|
||||
src={require('@tabler/icons/icons/circle-check.svg')}
|
||||
alt={intl.formatMessage(messages.voted)}
|
||||
className='text-primary-600 w-4 h-4'
|
||||
/>
|
||||
) : (
|
||||
<div className='svg-icon' />
|
||||
)}
|
||||
|
||||
<Text weight='medium' theme='primary'>{Math.round(percent)}%</Text>
|
||||
</HStack>
|
||||
</HStack>
|
||||
</div>
|
||||
) : (
|
||||
<PollOptionText percent={percent} {...props} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PollOption;
|
||||
89
app/soapbox/components/polls/poll.tsx
Normal file
89
app/soapbox/components/polls/poll.tsx
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
import classNames from 'classnames';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import { openModal } from 'soapbox/actions/modals';
|
||||
import { vote } from 'soapbox/actions/polls';
|
||||
import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
|
||||
|
||||
import { Stack } from '../ui';
|
||||
|
||||
import PollFooter from './poll-footer';
|
||||
import PollOption from './poll-option';
|
||||
|
||||
export type Selected = Record<number, boolean>;
|
||||
|
||||
interface IPoll {
|
||||
id: string,
|
||||
status?: string,
|
||||
}
|
||||
|
||||
const Poll: React.FC<IPoll> = ({ id, status }): JSX.Element | null => {
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
const isLoggedIn = useAppSelector((state) => state.me);
|
||||
const poll = useAppSelector((state) => state.polls.get(id));
|
||||
|
||||
const [selected, setSelected] = useState({} as Selected);
|
||||
|
||||
const openUnauthorizedModal = () =>
|
||||
dispatch(openModal('UNAUTHORIZED', {
|
||||
action: 'POLL_VOTE',
|
||||
ap_id: status,
|
||||
}));
|
||||
|
||||
const handleVote = (selectedId: number) => dispatch(vote(id, [selectedId]));
|
||||
|
||||
const toggleOption = (value: number) => {
|
||||
if (isLoggedIn) {
|
||||
if (poll?.multiple) {
|
||||
const tmp = { ...selected };
|
||||
if (tmp[value]) {
|
||||
delete tmp[value];
|
||||
} else {
|
||||
tmp[value] = true;
|
||||
}
|
||||
setSelected(tmp);
|
||||
} else {
|
||||
const tmp: Selected = {};
|
||||
tmp[value] = true;
|
||||
setSelected(tmp);
|
||||
handleVote(value);
|
||||
}
|
||||
} else {
|
||||
openUnauthorizedModal();
|
||||
}
|
||||
};
|
||||
|
||||
if (!poll) return null;
|
||||
|
||||
const showResults = poll.voted || poll.expired;
|
||||
|
||||
return (
|
||||
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
||||
<div onClick={e => e.stopPropagation()}>
|
||||
<Stack space={4} className={classNames('mt-4', { voted: poll.voted })}>
|
||||
<Stack space={2}>
|
||||
{poll.options.map((option, i) => (
|
||||
<PollOption
|
||||
key={i}
|
||||
poll={poll}
|
||||
option={option}
|
||||
index={i}
|
||||
showResults={showResults}
|
||||
active={!!selected[i]}
|
||||
onToggle={toggleOption}
|
||||
/>
|
||||
))}
|
||||
</Stack>
|
||||
|
||||
<PollFooter
|
||||
poll={poll}
|
||||
showResults={showResults}
|
||||
selected={selected}
|
||||
/>
|
||||
</Stack>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Poll;
|
||||
|
|
@ -4,13 +4,14 @@ import { FormattedMessage } from 'react-intl';
|
|||
import { useHistory } from 'react-router-dom';
|
||||
|
||||
import Icon from 'soapbox/components/icon';
|
||||
import Poll from 'soapbox/components/poll';
|
||||
import { useSoapboxConfig } from 'soapbox/hooks';
|
||||
import { addGreentext } from 'soapbox/utils/greentext';
|
||||
import { onlyEmoji as isOnlyEmoji } from 'soapbox/utils/rich_content';
|
||||
|
||||
import { isRtl } from '../rtl';
|
||||
|
||||
import Poll from './polls/poll';
|
||||
|
||||
import type { Status, Mention } from 'soapbox/types/entities';
|
||||
|
||||
const MAX_HEIGHT = 642; // 20px * 32 (+ 2px padding at the top)
|
||||
|
|
|
|||
Loading…
Reference in a new issue