refactor: create PureSensitiveContentOverlay component, used in PureStatus component
This commit is contained in:
P. Reis
parent
4632cb4964
commit
e1cb14ecf8
|
|
@ -9,6 +9,7 @@ import { Link, useHistory } from 'react-router-dom';
|
|||
import { openModal } from 'soapbox/actions/modals.ts';
|
||||
import { unfilterStatus } from 'soapbox/actions/statuses.ts';
|
||||
import PureStatusReplyMentions from 'soapbox/components/pure-status-reply-mentions.tsx';
|
||||
import PureSensitiveContentOverlay from 'soapbox/components/statuses/pure-sensitive-content-overlay.tsx';
|
||||
import TranslateButton from 'soapbox/components/translate-button.tsx';
|
||||
import { Card } from 'soapbox/components/ui/card.tsx';
|
||||
import Icon from 'soapbox/components/ui/icon.tsx';
|
||||
|
|
@ -34,7 +35,6 @@ import EventPreview from './event-preview.tsx';
|
|||
import StatusActionBar from './status-action-bar.tsx';
|
||||
import StatusContent from './status-content.tsx';
|
||||
import StatusMedia from './status-media.tsx';
|
||||
import SensitiveContentOverlay from './statuses/sensitive-content-overlay.tsx';
|
||||
import StatusInfo from './statuses/status-info.tsx';
|
||||
import Tombstone from './tombstone.tsx';
|
||||
|
||||
|
|
@ -458,8 +458,8 @@ const PureStatus: React.FC<IPureStatus> = (props) => {
|
|||
style={{ minHeight: isUnderReview || isSensitive ? Math.max(minHeight, 208) + 12 : undefined }}
|
||||
>
|
||||
{(isUnderReview || isSensitive) && (
|
||||
<SensitiveContentOverlay
|
||||
status={statusImmutable} // fix later
|
||||
<PureSensitiveContentOverlay
|
||||
status={status}
|
||||
visible={showMedia}
|
||||
onToggleVisibility={handleToggleMediaVisibility}
|
||||
ref={overlay}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,186 @@
|
|||
import dotsIcon from '@tabler/icons/outline/dots.svg';
|
||||
import eyeOffIcon from '@tabler/icons/outline/eye-off.svg';
|
||||
import eyeIcon from '@tabler/icons/outline/eye.svg';
|
||||
import headsetIcon from '@tabler/icons/outline/headset.svg';
|
||||
import trashIcon from '@tabler/icons/outline/trash.svg';
|
||||
import clsx from 'clsx';
|
||||
import { forwardRef, useEffect, useMemo, useState } from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
|
||||
import { openModal } from 'soapbox/actions/modals.ts';
|
||||
import { deleteStatus } from 'soapbox/actions/statuses.ts';
|
||||
import DropdownMenu from 'soapbox/components/dropdown-menu/index.ts';
|
||||
import Button from 'soapbox/components/ui/button.tsx';
|
||||
import HStack from 'soapbox/components/ui/hstack.tsx';
|
||||
import Text from 'soapbox/components/ui/text.tsx';
|
||||
import { Entities, EntityTypes } from 'soapbox/entity-store/entities.ts';
|
||||
import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
|
||||
import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
|
||||
import { useSettings } from 'soapbox/hooks/useSettings.ts';
|
||||
import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
|
||||
import { emojifyText } from 'soapbox/utils/emojify.tsx';
|
||||
import { defaultMediaVisibility } from 'soapbox/utils/status.ts';
|
||||
|
||||
|
||||
const messages = defineMessages({
|
||||
delete: { id: 'status.delete', defaultMessage: 'Delete' },
|
||||
deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
|
||||
deleteHeading: { id: 'confirmations.delete.heading', defaultMessage: 'Delete post' },
|
||||
deleteMessage: { id: 'confirmations.delete.message', defaultMessage: 'Are you sure you want to delete this post?' },
|
||||
hide: { id: 'moderation_overlay.hide', defaultMessage: 'Hide content' },
|
||||
sensitiveTitle: { id: 'status.sensitive_warning', defaultMessage: 'Sensitive content' },
|
||||
underReviewTitle: { id: 'moderation_overlay.title', defaultMessage: 'Content Under Review' },
|
||||
underReviewSubtitle: { id: 'moderation_overlay.subtitle', defaultMessage: 'This Post has been sent to Moderation for review and is only visible to you. If you believe this is an error please contact Support.' },
|
||||
sensitiveSubtitle: { id: 'status.sensitive_warning.subtitle', defaultMessage: 'This content may not be suitable for all audiences.' },
|
||||
contact: { id: 'moderation_overlay.contact', defaultMessage: 'Contact' },
|
||||
show: { id: 'moderation_overlay.show', defaultMessage: 'Show Content' },
|
||||
});
|
||||
|
||||
interface IPureSensitiveContentOverlay {
|
||||
status: EntityTypes[Entities.STATUSES];
|
||||
onToggleVisibility?(): void;
|
||||
visible?: boolean;
|
||||
}
|
||||
|
||||
const PureSensitiveContentOverlay = forwardRef<HTMLDivElement, IPureSensitiveContentOverlay>((props, ref) => {
|
||||
const { onToggleVisibility, status } = props;
|
||||
|
||||
const { account } = useOwnAccount();
|
||||
const dispatch = useAppDispatch();
|
||||
const intl = useIntl();
|
||||
const { displayMedia, deleteModal } = useSettings();
|
||||
const { links } = useSoapboxConfig();
|
||||
|
||||
const isUnderReview = status.visibility === 'self';
|
||||
const isOwnStatus = status.account.id === account?.id;
|
||||
|
||||
const [visible, setVisible] = useState<boolean>(defaultMediaVisibility(status, displayMedia));
|
||||
|
||||
const toggleVisibility = (event: React.MouseEvent<HTMLButtonElement>) => {
|
||||
event.stopPropagation();
|
||||
|
||||
if (onToggleVisibility) {
|
||||
onToggleVisibility();
|
||||
} else {
|
||||
setVisible((prevValue) => !prevValue);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteStatus = () => {
|
||||
if (!deleteModal) {
|
||||
dispatch(deleteStatus(status.id, false));
|
||||
} else {
|
||||
dispatch(openModal('CONFIRM', {
|
||||
icon: trashIcon,
|
||||
heading: intl.formatMessage(messages.deleteHeading),
|
||||
message: intl.formatMessage(messages.deleteMessage),
|
||||
confirm: intl.formatMessage(messages.deleteConfirm),
|
||||
onConfirm: () => dispatch(deleteStatus(status.id, false)),
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const menu = useMemo(() => {
|
||||
return [
|
||||
{
|
||||
text: intl.formatMessage(messages.delete),
|
||||
action: handleDeleteStatus,
|
||||
icon: trashIcon,
|
||||
destructive: true,
|
||||
},
|
||||
];
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof props.visible !== 'undefined') {
|
||||
setVisible(!!props.visible);
|
||||
}
|
||||
}, [props.visible]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={clsx('absolute z-40', {
|
||||
'cursor-default backdrop-blur-lg rounded-lg w-full h-full border-0 flex justify-center': !visible,
|
||||
'bg-gray-800/75 inset-0': !visible,
|
||||
'bottom-1 right-1': visible,
|
||||
})}
|
||||
data-testid='sensitive-overlay'
|
||||
>
|
||||
{visible ? (
|
||||
<Button
|
||||
text={intl.formatMessage(messages.hide)}
|
||||
icon={eyeOffIcon}
|
||||
onClick={toggleVisibility}
|
||||
theme='primary'
|
||||
size='sm'
|
||||
/>
|
||||
) : (
|
||||
<div className='flex max-h-screen items-center justify-center'>
|
||||
<div className='mx-auto w-3/4 space-y-4 text-center' ref={ref}>
|
||||
<div className='space-y-1'>
|
||||
<Text theme='white' weight='semibold'>
|
||||
{intl.formatMessage(isUnderReview ? messages.underReviewTitle : messages.sensitiveTitle)}
|
||||
</Text>
|
||||
|
||||
<Text theme='white' size='sm' weight='medium'>
|
||||
{intl.formatMessage(isUnderReview ? messages.underReviewSubtitle : messages.sensitiveSubtitle)}
|
||||
</Text>
|
||||
|
||||
{status.spoiler_text && (
|
||||
<div className='py-4 italic'>
|
||||
{/* eslint-disable formatjs/no-literal-string-in-jsx */}
|
||||
<Text className='line-clamp-6' theme='white' size='md' weight='medium'>
|
||||
“<span>{emojifyText(status.spoiler_text, status.emojis)}</span>”
|
||||
</Text>
|
||||
{/* eslint-enable formatjs/no-literal-string-in-jsx */}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<HStack alignItems='center' justifyContent='center' space={2}>
|
||||
{isUnderReview ? (
|
||||
<>
|
||||
{links.get('support') && (
|
||||
<a
|
||||
href={links.get('support')}
|
||||
target='_blank'
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
>
|
||||
<Button
|
||||
type='button'
|
||||
theme='outline'
|
||||
size='sm'
|
||||
icon={headsetIcon}
|
||||
>
|
||||
{intl.formatMessage(messages.contact)}
|
||||
</Button>
|
||||
</a>
|
||||
)}
|
||||
</>
|
||||
) : null}
|
||||
|
||||
<Button
|
||||
type='button'
|
||||
theme='outline'
|
||||
size='sm'
|
||||
icon={eyeIcon}
|
||||
onClick={toggleVisibility}
|
||||
>
|
||||
{intl.formatMessage(messages.show)}
|
||||
</Button>
|
||||
|
||||
{(isUnderReview && isOwnStatus) ? (
|
||||
<DropdownMenu
|
||||
items={menu}
|
||||
src={dotsIcon}
|
||||
/>
|
||||
) : null}
|
||||
</HStack>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export default PureSensitiveContentOverlay;
|
||||
Loading…
Reference in New Issue