diff options
author | Fabio Berger <me@fabioberger.com> | 2018-10-03 03:10:59 +0800 |
---|---|---|
committer | Fabio Berger <me@fabioberger.com> | 2018-10-03 03:10:59 +0800 |
commit | c07412a992284b2f3045be1c620ea2e0a351139a (patch) | |
tree | 5d1baea6ae5c1bb70b4bf61a28bd131026098f8f /packages/website/ts/components/ui/link.tsx | |
parent | 0c996803969e7ff3f62c023651f64468b3f76bd3 (diff) | |
download | dexon-0x-contracts-c07412a992284b2f3045be1c620ea2e0a351139a.tar dexon-0x-contracts-c07412a992284b2f3045be1c620ea2e0a351139a.tar.gz dexon-0x-contracts-c07412a992284b2f3045be1c620ea2e0a351139a.tar.bz2 dexon-0x-contracts-c07412a992284b2f3045be1c620ea2e0a351139a.tar.lz dexon-0x-contracts-c07412a992284b2f3045be1c620ea2e0a351139a.tar.xz dexon-0x-contracts-c07412a992284b2f3045be1c620ea2e0a351139a.tar.zst dexon-0x-contracts-c07412a992284b2f3045be1c620ea2e0a351139a.zip |
Use new Link UI component everywhere, and add complementary ALink type
Diffstat (limited to 'packages/website/ts/components/ui/link.tsx')
-rw-r--r-- | packages/website/ts/components/ui/link.tsx | 43 |
1 files changed, 27 insertions, 16 deletions
diff --git a/packages/website/ts/components/ui/link.tsx b/packages/website/ts/components/ui/link.tsx index f7bca370b..ae62aad0c 100644 --- a/packages/website/ts/components/ui/link.tsx +++ b/packages/website/ts/components/ui/link.tsx @@ -1,9 +1,10 @@ import * as React from 'react'; import { Link as ReactRounterLink } from 'react-router-dom'; +import { LinkType } from 'ts/types'; export interface LinkProps { to: string; - isExternal?: boolean; + type?: LinkType; shouldOpenInNewTab?: boolean; style?: React.CSSProperties; className?: string; @@ -17,29 +18,39 @@ export interface LinkProps { export const Link: React.StatelessComponent<LinkProps> = ({ style, className, - isExternal, + type, to, shouldOpenInNewTab, children, }) => { - if (isExternal) { - return ( - <a target={shouldOpenInNewTab && '_blank'} className={className} style={style} href={to}> - {children} - </a> - ); - } else { - return ( - <ReactRounterLink to={to} className={className} style={style}> - {children} - </ReactRounterLink> - ); + const styleWithDefault = { + textDecoration: 'none', + ...style, + }; + + switch (type) { + case LinkType.External: + return ( + <a target={shouldOpenInNewTab && '_blank'} className={className} style={styleWithDefault} href={to}> + {children} + </a> + ); + case LinkType.ReactRoute: + return ( + <ReactRounterLink to={to} className={className} style={styleWithDefault}> + {children} + </ReactRounterLink> + ); + case LinkType.ReactScroll: + return <div>TODO</div>; + default: + throw new Error(`Unrecognized LinkType: ${type}`); } }; Link.defaultProps = { - isExternal: false, - shouldOpenInNewTab: false, + type: LinkType.ReactRoute, + shouldOpenInNewTab: true, style: {}, className: '', }; |