kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
quote posts?
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>merge-requests/1160/head
marcin mikołajczak
rodzic
6023f69b2e
commit
6d4d96528c
|
|
@ -30,9 +30,10 @@ interface IAccount {
|
|||
avatarSize?: number,
|
||||
hidden?: boolean,
|
||||
hideActions?: boolean,
|
||||
id?: string,
|
||||
onActionClick?: (account: any) => void,
|
||||
showProfileHoverCard?: boolean,
|
||||
timestamp?: string,
|
||||
timestamp?: string | Date,
|
||||
timestampUrl?: string,
|
||||
withRelationship?: boolean,
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ const alignItemsOptions = {
|
|||
center: 'items-center',
|
||||
};
|
||||
|
||||
interface IStack {
|
||||
interface IStack extends React.HTMLAttributes<HTMLDivElement > {
|
||||
space?: SIZES,
|
||||
alignItems?: '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);
|
||||
Ładowanie…
Reference in New Issue