quote posts?
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak
parent
6023f69b2e
commit
6d4d96528c
|
|
@ -30,9 +30,10 @@ interface IAccount {
|
||||||
avatarSize?: number,
|
avatarSize?: number,
|
||||||
hidden?: boolean,
|
hidden?: boolean,
|
||||||
hideActions?: boolean,
|
hideActions?: boolean,
|
||||||
|
id?: string,
|
||||||
onActionClick?: (account: any) => void,
|
onActionClick?: (account: any) => void,
|
||||||
showProfileHoverCard?: boolean,
|
showProfileHoverCard?: boolean,
|
||||||
timestamp?: string,
|
timestamp?: string | Date,
|
||||||
timestampUrl?: string,
|
timestampUrl?: string,
|
||||||
withRelationship?: boolean,
|
withRelationship?: boolean,
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -21,7 +21,7 @@ const alignItemsOptions = {
|
||||||
center: 'items-center',
|
center: 'items-center',
|
||||||
};
|
};
|
||||||
|
|
||||||
interface IStack {
|
interface IStack extends React.HTMLAttributes<HTMLDivElement > {
|
||||||
space?: SIZES,
|
space?: SIZES,
|
||||||
alignItems?: 'center',
|
alignItems?: 'center',
|
||||||
justifyContent?: 'center',
|
justifyContent?: 'center',
|
||||||
|
|
|
||||||
|
|
@ -1,162 +0,0 @@
|
||||||
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 { NavLink, withRouter } from 'react-router-dom';
|
|
||||||
|
|
||||||
import AttachmentThumbs from 'soapbox/components/attachment_thumbs';
|
|
||||||
import Avatar from 'soapbox/components/avatar';
|
|
||||||
import DisplayName from 'soapbox/components/display_name';
|
|
||||||
import IconButton from 'soapbox/components/icon_button';
|
|
||||||
import RelativeTimestamp from 'soapbox/components/relative_timestamp';
|
|
||||||
import { isRtl } from 'soapbox/rtl';
|
|
||||||
|
|
||||||
const messages = defineMessages({
|
|
||||||
cancel: { id: 'reply_indicator.cancel', defaultMessage: 'Cancel' },
|
|
||||||
});
|
|
||||||
|
|
||||||
export default @injectIntl @withRouter
|
|
||||||
class QuotedStatus extends ImmutablePureComponent {
|
|
||||||
|
|
||||||
static propTypes = {
|
|
||||||
status: ImmutablePropTypes.record,
|
|
||||||
onCancel: PropTypes.func,
|
|
||||||
intl: PropTypes.object.isRequired,
|
|
||||||
compose: PropTypes.bool,
|
|
||||||
history: PropTypes.object,
|
|
||||||
};
|
|
||||||
|
|
||||||
handleExpandClick = e => {
|
|
||||||
const { compose, status } = this.props;
|
|
||||||
|
|
||||||
if (!compose && e.button === 0) {
|
|
||||||
if (!this.props.history) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.props.history.push(`/@${status.getIn(['account', 'acct'])}/posts/${status.get('id')}`);
|
|
||||||
|
|
||||||
e.preventDefault();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
handleClose = e => {
|
|
||||||
this.props.onCancel();
|
|
||||||
|
|
||||||
e.preventDefault();
|
|
||||||
}
|
|
||||||
|
|
||||||
renderReplyMentions = () => {
|
|
||||||
const { status } = this.props;
|
|
||||||
|
|
||||||
if (!status.get('in_reply_to_id')) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
const to = status.get('mentions', []);
|
|
||||||
|
|
||||||
if (to.size === 0) {
|
|
||||||
if (status.get('in_reply_to_account_id') === status.getIn(['account', 'id'])) {
|
|
||||||
return (
|
|
||||||
<div className='reply-mentions'>
|
|
||||||
<FormattedMessage
|
|
||||||
id='reply_mentions.reply'
|
|
||||||
defaultMessage='Replying to {accounts}{more}'
|
|
||||||
values={{
|
|
||||||
accounts: `@${status.getIn(['account', 'username'])}`,
|
|
||||||
more: false,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
return (
|
|
||||||
<div className='reply-mentions'>
|
|
||||||
<FormattedMessage id='reply_mentions.reply_empty' defaultMessage='Replying to post' />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className='reply-mentions'>
|
|
||||||
<FormattedMessage
|
|
||||||
id='reply_mentions.reply'
|
|
||||||
defaultMessage='Replying to {accounts}{more}'
|
|
||||||
values={{
|
|
||||||
accounts: to.slice(0, 2).map(account => `@${account.get('username')} `),
|
|
||||||
more: to.size > 2 && <FormattedMessage id='reply_mentions.more' defaultMessage='and {count} more' values={{ count: to.size - 2 }} />,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { status, onCancel, intl, compose } = this.props;
|
|
||||||
|
|
||||||
if (!status) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
const content = { __html: status.get('contentHtml') };
|
|
||||||
const style = {
|
|
||||||
direction: isRtl(status.get('search_index')) ? 'rtl' : 'ltr',
|
|
||||||
};
|
|
||||||
|
|
||||||
const displayName = (<>
|
|
||||||
<div className='quoted-status__display-avatar'><Avatar account={status.get('account')} size={24} /></div>
|
|
||||||
<DisplayName account={status.get('account')} />
|
|
||||||
</>);
|
|
||||||
|
|
||||||
const quotedStatus = (
|
|
||||||
<div className='quoted-status' onClick={this.handleExpandClick} role='presentation'>
|
|
||||||
<div className='quoted-status__info'>
|
|
||||||
{onCancel
|
|
||||||
? (
|
|
||||||
<div className='reply-indicator__cancel'>
|
|
||||||
<IconButton title={intl.formatMessage(messages.cancel)} src={require('@tabler/icons/icons/x.svg')} onClick={this.handleClose} inverted />
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className='quoted-status__relative-time'>
|
|
||||||
<RelativeTimestamp timestamp={status.get('created_at')} />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{compose ? (
|
|
||||||
<div className='quoted-status__display-name'>
|
|
||||||
{displayName}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<NavLink to={`/@${status.getIn(['account', 'acct'])}`} className='quoted-status__display-name'>
|
|
||||||
{displayName}
|
|
||||||
</NavLink>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{this.renderReplyMentions()}
|
|
||||||
|
|
||||||
<div className='quoted-status__content' style={style} dangerouslySetInnerHTML={content} />
|
|
||||||
|
|
||||||
{status.get('media_attachments').size > 0 && (
|
|
||||||
<AttachmentThumbs
|
|
||||||
compact
|
|
||||||
media={status.get('media_attachments')}
|
|
||||||
sensitive={status.get('sensitive')}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
if (compose) {
|
|
||||||
return (
|
|
||||||
<div className='compose-form__quoted-status-wrapper'>
|
|
||||||
{quotedStatus}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return quotedStatus;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -0,0 +1,155 @@
|
||||||
|
import classNames from 'classnames';
|
||||||
|
import { History } from 'history';
|
||||||
|
import React from 'react';
|
||||||
|
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||||
|
import { defineMessages, injectIntl, FormattedMessage, IntlShape } from 'react-intl';
|
||||||
|
import { withRouter } from 'react-router-dom';
|
||||||
|
|
||||||
|
import AttachmentThumbs from 'soapbox/components/attachment_thumbs';
|
||||||
|
import { Stack, Text } from 'soapbox/components/ui';
|
||||||
|
import AccountContainer from 'soapbox/containers/account_container';
|
||||||
|
import { Account as AccountEntity, Status as StatusEntity } from 'soapbox/types/entities';
|
||||||
|
|
||||||
|
const messages = defineMessages({
|
||||||
|
cancel: { id: 'reply_indicator.cancel', defaultMessage: 'Cancel' },
|
||||||
|
});
|
||||||
|
|
||||||
|
interface IQuotedStatus {
|
||||||
|
status?: StatusEntity,
|
||||||
|
onCancel?: Function,
|
||||||
|
intl: IntlShape,
|
||||||
|
compose?: boolean,
|
||||||
|
history: History,
|
||||||
|
}
|
||||||
|
|
||||||
|
class QuotedStatus extends ImmutablePureComponent<IQuotedStatus> {
|
||||||
|
|
||||||
|
handleExpandClick = (e: React.MouseEvent<HTMLDivElement>) => {
|
||||||
|
const { compose, status } = this.props;
|
||||||
|
|
||||||
|
if (!status) return;
|
||||||
|
|
||||||
|
const account = status.account as AccountEntity;
|
||||||
|
|
||||||
|
if (!compose && e.button === 0) {
|
||||||
|
if (!this.props.history) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.props.history.push(`/@${account.acct}/posts/${status.id}`);
|
||||||
|
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
handleClose = () => {
|
||||||
|
if (this.props.onCancel) {
|
||||||
|
this.props.onCancel();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
renderReplyMentions = () => {
|
||||||
|
const { status } = this.props;
|
||||||
|
|
||||||
|
if (!status?.in_reply_to_id) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const account = status.account as AccountEntity;
|
||||||
|
|
||||||
|
const to = status.mentions || [];
|
||||||
|
|
||||||
|
if (to.size === 0) {
|
||||||
|
if (status.in_reply_to_account_id === account.id) {
|
||||||
|
return (
|
||||||
|
<div className='reply-mentions'>
|
||||||
|
<FormattedMessage
|
||||||
|
id='reply_mentions.reply'
|
||||||
|
defaultMessage='Replying to {accounts}{more}'
|
||||||
|
values={{
|
||||||
|
accounts: `@${account.username}`,
|
||||||
|
more: false,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
return (
|
||||||
|
<div className='reply-mentions'>
|
||||||
|
<FormattedMessage id='reply_mentions.reply_empty' defaultMessage='Replying to post' />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='reply-mentions'>
|
||||||
|
<FormattedMessage
|
||||||
|
id='reply_mentions.reply'
|
||||||
|
defaultMessage='Replying to {accounts}{more}'
|
||||||
|
values={{
|
||||||
|
accounts: to.slice(0, 2).map(account => `@${account.username} `),
|
||||||
|
more: to.size > 2 && <FormattedMessage id='reply_mentions.more' defaultMessage='and {count} more' values={{ count: to.size - 2 }} />,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { status, onCancel, intl, compose } = this.props;
|
||||||
|
|
||||||
|
if (!status) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const account = status.account as AccountEntity;
|
||||||
|
|
||||||
|
let actions = {};
|
||||||
|
if (onCancel) {
|
||||||
|
actions = {
|
||||||
|
onActionClick: this.handleClose,
|
||||||
|
actionIcon: require('@tabler/icons/icons/x.svg'),
|
||||||
|
actionAlignment: 'top',
|
||||||
|
actionTitle: intl.formatMessage(messages.cancel),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const quotedStatus = (
|
||||||
|
<Stack
|
||||||
|
space={2}
|
||||||
|
className={classNames('mt-3 p-4 rounded-lg border border-solid border-gray-100 dark:border-slate-700 cursor-pointer', {
|
||||||
|
'hover:bg-gray-100 dark:hover:bg-slate-700': !compose,
|
||||||
|
})}
|
||||||
|
onClick={this.handleExpandClick}
|
||||||
|
>
|
||||||
|
<AccountContainer
|
||||||
|
{...actions}
|
||||||
|
id={account.id}
|
||||||
|
timestamp={status.created_at}
|
||||||
|
showProfileHoverCard={!compose}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{this.renderReplyMentions()}
|
||||||
|
|
||||||
|
<Text
|
||||||
|
size='sm'
|
||||||
|
dangerouslySetInnerHTML={{ __html: status.contentHtml }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{status.media_attachments.size > 0 && (
|
||||||
|
<AttachmentThumbs
|
||||||
|
compact
|
||||||
|
media={status.media_attachments}
|
||||||
|
sensitive={status.sensitive}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Stack>
|
||||||
|
);
|
||||||
|
|
||||||
|
return quotedStatus;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export default withRouter(injectIntl(QuotedStatus) as any);
|
||||||
Loading…
Reference in New Issue