import React from 'react' ; import styled from 'styled-components' ; import { Link as RouterLink } from 'react-router-dom' ; import { useIntl } from 'react-intl' ; import { supportedLanguages } from '../intl' ; interface LinkProps { primary ? : boolean | undefined ; theme ? : any ; className ? : string ; href ? : string ; inline ? : boolean ; isTextLink ? : boolean ; } const styles = `
  line-height: 33px;
  color:inherit;
  display: inherit;
  text-decoration: none;
  &:hover {
    font-weight: 400;
  };
  &:focus,
  &:visited,
  &:link,
  &:active {
    text-decoration: none;
  };
 ` ; const StyledExternalLink = styled . a < Pick < LinkProps , 'primary' | 'theme' | 'inline' | 'isTextLink' > > `
  ${ styles };
  color: ${ ( props ) => props . primary ? props . theme . blue . medium : 'inherit' };
  display: ${ ( props ) => ( props . inline ? 'inline' : 'inherit' ) };
  &:after {
    display: ${ ( props ) => ( props . isTextLink ? `inline` : `none` ) };
    margin-left: 0.125em;
    margin-right: 0.3em;
    content: '↗';
    transition: all 0.1s ease-in-out;
    font-style: normal;
  }
  & > button:after {
    display: ${ ( props ) => ( props . isTextLink ? `none` : `inline` ) };
    margin-left: 0.25em;
    margin-right: 0.3em;
    content: '↗';
    font-style: normal;
  }
` ; const StyledHashLink = styled ( StyledExternalLink as any ) < Pick < LinkProps , 'primary' | 'theme' | 'inline' | 'isTextLink' > > `
  &:after {
    content: none;
  }
` ; const StyledLink = styled ( RouterLink ) `
  ${ styles };
  color: ${ ( props ) => props . primary ? props . theme . blue . medium : 'inherit' };
  display: ${ ( props ) => ( props . inline ? 'inline' : 'inherit' ) };
` ; interface LinkProps { to : string ; key ? : string ; children : React . ReactNode ; className ? : string ; primary ? : boolean | undefined ; onClick ? : ( param ? : any ) => void ; isTextLink ? : boolean ; inline ? : boolean ; shouldOpenNewTab ? : boolean ; } const HASH_PATTERN = /^#.*/ ; const isHashLink = ( to ) => HASH_PATTERN . test ( to ) ; export const Link = ( props ) => { const { children , className , to , primary , inline , isTextLink = true , shouldOpenNewTab = false , } = props ; const { locale } = useIntl ( ) ; const isExternal = to && to . includes ( 'http' ) ; const ETHEREUM_DOT_ORG = `https://ethereum.org` ; const isEthereumDotOrg = to && to . includes ( ETHEREUM_DOT_ORG ) ; const isHash = isHashLink ( to ) ; if ( isHash ) { return ( < StyledHashLink className = { className } href = { to } primary = { primary } inline = { inline } isTextLink = { isTextLink } > { children } < /StyledHashLink>); } if ( isExternal ) { let href = to ; if ( to === ETHEREUM_DOT_ORG ) { href = `${ ETHEREUM_DOT_ORG }/${ locale }` ; } else if ( isEthereumDotOrg ) { const slug = to . substr ( ETHEREUM_DOT_ORG . length + 1 ) ; const pathSplit = slug . split ( '/' ) ; if ( pathSplit [ 0 ] === locale ) { href = to ; } else if ( supportedLanguages . includes ( pathSplit [ 0 ] ) ) { href = `${ ETHEREUM_DOT_ORG }/${ locale }/${ pathSplit . slice ( 1 ) . join ( '/' ) }` ; } else { href = `${ ETHEREUM_DOT_ORG }/${ locale }/${ slug }` ; } } return ( < StyledExternalLink className = { className } href = { href } primary = { primary } target = "_blank" inline = { inline } isTextLink = { isTextLink } > { children } < /StyledExternalLink>); } const firstPath = to . split ( '/' ) [ 1 ] ; const langPath = supportedLanguages . includes ( firstPath ) ? to : `/${ locale }${ to }` ; return ( < StyledLink target = { shouldOpenNewTab ? '_blank' : '_self' } className = { className } { ... props } to = { langPath } > { children } < /StyledLink>); } ;