import { Link, LocationProvider } from '@reach/router';
import router from '@elementor/router';
import { arrayToClassName } from 'elementor-app/utils/utils.js';
import './inline-link.scss';
export default function InlineLink( props ) {
const baseClassName = 'eps-inline-link',
colorClassName = `${ baseClassName }--color-${ props.color }`,
underlineClassName = 'none' !== props.underline ? `${ baseClassName }--underline-${ props.underline }` : '',
italicClassName = props.italic ? `${ baseClassName }--italic` : '',
classes = [
baseClassName,
colorClassName,
underlineClassName,
italicClassName,
props.className,
],
className = arrayToClassName( classes ),
getRouterLink = () => (
<LocationProvider history={ router.appHistory }>
<Link
to={ props.url }
className={ className }
>
{ props.children }
</Link>
</LocationProvider>
),
getExternalLink = () => (
<a
href={ props.url }
target={ props.target }
rel={ props.rel }
className={ className }
onClick={ props.onClick }
>
{ props.children }
</a>
),
getActionLink = () => (
<button className={ className } onClick={ props.onClick }>
{ props.children }
</button>
);
if ( ! props.url ) {
return getActionLink();
}
return props.url.includes( 'http' ) ? getExternalLink() : getRouterLink();
}
InlineLink.propTypes = {
className: PropTypes.string,
children: PropTypes.any,
url: PropTypes.string,
target: PropTypes.string,
rel: PropTypes.string,
text: PropTypes.string,
color: PropTypes.oneOf( [ 'primary', 'secondary', 'cta', 'link', 'disabled' ] ),
underline: PropTypes.oneOf( [ 'none', 'hover', 'always' ] ),
italic: PropTypes.bool,
onClick: PropTypes.func,
};
InlineLink.defaultProps = {
className: '',
color: 'link',
underline: 'always',
target: '_blank',
rel: 'noopener noreferrer',
};