Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | 66x 66x | import React, { ReactElement, useState } from 'react';
import { Tag } from 'antd';
import PropTypes from 'prop-types';
import { RedirectComponent } from "../../components/redirect";
import { CustomIcon } from '@config/base';
const ClickableURL = (props: {
url: string;
zIndex: number;
}): ReactElement => {
const { url, zIndex } = props;
const isAbsoluteURL = url.startsWith('http://') || url.startsWith('https://');
const isRelativeURL = url.startsWith('/');
const [redirect, setRedirect] = useState<boolean>(false);
if (isAbsoluteURL || isRelativeURL) {
return (
<div>
<a
href='/#'
target="_blank"
rel="noopener noreferrer"
onClick={(e) => {
e.preventDefault();
if (isAbsoluteURL) {
window.open(url, '_blank');
} else {
setRedirect(true);
}
}}
title="Open link in a new tab"
>
<Tag
className="action-url-tag"
icon={<CustomIcon type='icon-link' />}
>
{url}
</Tag>
</a>
{
redirect && (
<RedirectComponent
redirect={url}
zIndex={zIndex + 1}
forMultiple={false}
showText={false}
fetchDataCallback={() => setRedirect(false)}
/>
)
}
</div>
);
} else {
return <span>{url ?? ''}</span>;
}
};
ClickableURL.propTypes = {
url: PropTypes.string.isRequired,
};
export default ClickableURL;
|