lbry-desktop/ui/component/claimMenuList/view.jsx

115 lines
3.1 KiB
React
Raw Normal View History

// @flow
import * as ICONS from 'constants/icons';
import React from 'react';
import classnames from 'classnames';
import { Menu, MenuButton, MenuList, MenuItem } from '@reach/menu-button';
import Icon from 'component/common/icon';
import { convertToShareLink } from 'lbry-redux';
type Props = {
claim: ?Claim,
inline?: boolean,
claimIsMine: boolean,
channelIsMuted: boolean,
channelIsBlocked: boolean,
doToggleMuteChannel: (string) => void,
doCommentModBlock: (string) => void,
doCommentModUnBlock: (string) => void,
};
function ClaimMenuList(props: Props) {
const {
claim,
inline = false,
claimIsMine,
doToggleMuteChannel,
channelIsMuted,
channelIsBlocked,
doCommentModBlock,
doCommentModUnBlock,
} = props;
const channelUri =
claim &&
(claim.value_type === 'channel'
? claim.permanent_url
: claim.signing_channel && claim.signing_channel.permanent_url);
if (!channelUri || !claim) {
return null;
}
function handleToggleMute() {
doToggleMuteChannel(channelUri);
}
function handleToggleBlock() {
if (channelIsBlocked) {
doCommentModUnBlock(channelUri);
} else {
doCommentModBlock(channelUri);
}
}
function handleCopyLink() {
const shareLink = convertToShareLink(claim.canonical_url || claim.permanent_url);
navigator.clipboard.writeText(shareLink);
}
function handleReportContent() {
window.open(`https://lbry.com/dmca/${claim.claim_id}`, '_blank', 'noopener');
}
return (
<Menu>
<MenuButton
className={classnames('menu__button', { 'claim__menu-button': !inline, 'claim__menu-button--inline': inline })}
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
}}
>
<Icon size={20} icon={ICONS.MORE_VERTICAL} />
</MenuButton>
<MenuList className="menu__list">
{!claimIsMine && (
<>
<MenuItem className="comment__menu-option" onSelect={handleToggleBlock}>
<div className="menu__link">
<Icon aria-hidden icon={ICONS.BLOCK} />
{channelIsBlocked ? __('Unblock Channel') : __('Block Channel')}
</div>
</MenuItem>
<MenuItem className="comment__menu-option" onSelect={handleToggleMute}>
<div className="menu__link">
<Icon aria-hidden icon={ICONS.MUTE} />
{channelIsMuted ? __('Unmute Channel') : __('Mute Channel')}
</div>
</MenuItem>
<hr className="menu__separator" />
</>
)}
<MenuItem className="comment__menu-option" onSelect={handleCopyLink}>
<div className="menu__link">
<Icon aria-hidden icon={ICONS.SHARE} />
{__('Copy Link')}
</div>
</MenuItem>
{!claimIsMine && (
<MenuItem className="comment__menu-option" onSelect={handleReportContent}>
<div className="menu__link">
<Icon aria-hidden icon={ICONS.REPORT} />
{__('Report Content')}
</div>
</MenuItem>
)}
</MenuList>
</Menu>
);
}
export default ClaimMenuList;