lbry-desktop/ui/component/uriIndicator/view.jsx
2021-03-25 15:08:05 -04:00

96 lines
2.4 KiB
JavaScript

// @flow
import type { Node } from 'react';
import React from 'react';
import classnames from 'classnames';
import Button from 'component/button';
type Props = {
isResolvingUri: boolean,
channelUri: ?string,
link: ?boolean,
claim: ?Claim,
hideAnonymous: boolean,
// Lint thinks we aren't using these, even though we are.
// Possibly because the resolve function is an arrow function that is passed in props?
resolveUri: (string) => void,
uri: string,
// to allow for other elements to be nested within the UriIndicator
children: ?Node,
inline: boolean,
external?: boolean,
};
class UriIndicator extends React.PureComponent<Props> {
componentDidMount() {
this.resolve(this.props);
}
componentDidUpdate() {
this.resolve(this.props);
}
resolve = (props: Props) => {
const { isResolvingUri, resolveUri, claim, uri } = props;
if (!isResolvingUri && claim === undefined && uri) {
resolveUri(uri);
}
};
render() {
const { link, isResolvingUri, claim, children, inline, hideAnonymous = false, external = false } = this.props;
if (!claim) {
return <span className="empty">{isResolvingUri ? 'Validating...' : 'Unused'}</span>;
}
const isChannelClaim = claim.value_type === 'channel';
if (!claim.signing_channel && !isChannelClaim) {
if (hideAnonymous) {
return null;
}
return (
<span dir="auto" className={classnames('channel-name', { 'channel-name--inline': inline })}>
Anonymous
</span>
);
}
const channelClaim = isChannelClaim ? claim : claim.signing_channel;
if (channelClaim) {
const { name } = channelClaim;
const channelLink = link ? channelClaim.canonical_url || channelClaim.permanent_url : false;
const inner = (
<span dir="auto" className={classnames('channel-name', { 'channel-name--inline': inline })}>
{name}
</span>
);
if (!channelLink) {
return inner;
}
if (children) {
return (
<Button target={external ? '_blank' : undefined} navigate={channelLink}>
{children}
</Button>
);
} else {
return (
<Button className="button--uri-indicator" navigate={channelLink} target={external ? '_blank' : undefined}>
{inner}
</Button>
);
}
} else {
return null;
}
}
}
export default UriIndicator;