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

111 lines
2.6 KiB
React
Raw Normal View History

2018-03-26 23:32:43 +02:00
// @flow
import type { Node } from 'react';
import React from 'react';
2020-01-21 23:38:10 +01:00
import classnames from 'classnames';
2018-03-26 23:32:43 +02:00
import Button from 'component/button';
2017-05-02 07:25:31 +02:00
2018-03-26 23:32:43 +02:00
type Props = {
isResolvingUri: boolean,
2019-04-24 16:02:08 +02:00
channelUri: ?string,
link: ?boolean,
2019-06-11 20:10:58 +02:00
claim: ?Claim,
2020-01-29 16:26:39 +01:00
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,
2018-03-26 23:32:43 +02:00
uri: string,
// to allow for other elements to be nested within the UriIndicator
children: ?Node,
2020-01-21 23:38:10 +01:00
inline: boolean,
external?: boolean,
className?: string,
2018-03-26 23:32:43 +02:00
};
class UriIndicator extends React.PureComponent<Props> {
2019-06-11 20:10:58 +02:00
componentDidMount() {
2017-06-06 23:19:12 +02:00
this.resolve(this.props);
2017-05-21 16:42:34 +02:00
}
2017-05-02 07:25:31 +02:00
2019-06-11 20:10:58 +02:00
componentDidUpdate() {
this.resolve(this.props);
2017-05-10 05:06:48 +02:00
}
2018-03-26 23:32:43 +02:00
resolve = (props: Props) => {
2017-06-06 23:19:12 +02:00
const { isResolvingUri, resolveUri, claim, uri } = props;
2017-05-10 05:06:48 +02:00
2017-06-06 23:19:12 +02:00
if (!isResolvingUri && claim === undefined && uri) {
resolveUri(uri);
2017-05-21 16:42:34 +02:00
}
2018-03-26 23:32:43 +02:00
};
2017-05-02 07:25:31 +02:00
2017-05-21 16:42:34 +02:00
render() {
const {
link,
isResolvingUri,
claim,
children,
inline,
hideAnonymous = false,
external = false,
className,
} = this.props;
2019-04-24 16:02:08 +02:00
2017-05-21 16:42:34 +02:00
if (!claim) {
2019-03-25 07:18:22 +01:00
return <span className="empty">{isResolvingUri ? 'Validating...' : 'Unused'}</span>;
2017-05-21 16:42:34 +02:00
}
2019-06-11 20:10:58 +02:00
const isChannelClaim = claim.value_type === 'channel';
if (!claim.signing_channel && !isChannelClaim) {
2020-01-29 16:26:39 +01:00
if (hideAnonymous) {
return null;
}
return (
<span dir="auto" className={classnames('channel-name', className, { 'channel-name--inline': inline })}>
Anonymous
</span>
);
2017-05-21 16:42:34 +02:00
}
2019-06-11 20:10:58 +02:00
const channelClaim = isChannelClaim ? claim : claim.signing_channel;
2017-05-21 16:42:34 +02:00
2019-06-11 20:10:58 +02:00
if (channelClaim) {
2019-09-04 06:22:31 +02:00
const { name } = channelClaim;
const channelLink = link ? channelClaim.canonical_url || channelClaim.permanent_url : false;
2017-09-17 22:33:52 +02:00
const inner = (
<span dir="auto" className={classnames('channel-name', { 'channel-name--inline': inline })}>
{name}
</span>
);
2019-06-11 20:10:58 +02:00
if (!channelLink) {
return inner;
}
2017-09-17 22:33:52 +02:00
if (children) {
return (
<Button className={className} target={external ? '_blank' : undefined} navigate={channelLink}>
{children}
</Button>
);
} else {
return (
<Button
className={classnames(className, 'button--uri-indicator')}
navigate={channelLink}
target={external ? '_blank' : undefined}
>
{inner}
</Button>
);
}
2019-06-11 20:10:58 +02:00
} else {
return null;
}
2017-05-21 16:42:34 +02:00
}
2017-05-02 07:25:31 +02:00
}
2017-06-06 06:21:55 +02:00
export default UriIndicator;