diff options
author | Fabio Berger <me@fabioberger.com> | 2018-10-03 17:52:37 +0800 |
---|---|---|
committer | Fabio Berger <me@fabioberger.com> | 2018-10-03 17:52:37 +0800 |
commit | 4fb7b3515389439e1ffafebf520d0cfd84efb5d1 (patch) | |
tree | 51260dd1a1f01708a43ee647b67932c368c052f4 /packages/website/ts/components/ui | |
parent | c07412a992284b2f3045be1c620ea2e0a351139a (diff) | |
download | dexon-0x-contracts-4fb7b3515389439e1ffafebf520d0cfd84efb5d1.tar dexon-0x-contracts-4fb7b3515389439e1ffafebf520d0cfd84efb5d1.tar.gz dexon-0x-contracts-4fb7b3515389439e1ffafebf520d0cfd84efb5d1.tar.bz2 dexon-0x-contracts-4fb7b3515389439e1ffafebf520d0cfd84efb5d1.tar.lz dexon-0x-contracts-4fb7b3515389439e1ffafebf520d0cfd84efb5d1.tar.xz dexon-0x-contracts-4fb7b3515389439e1ffafebf520d0cfd84efb5d1.tar.zst dexon-0x-contracts-4fb7b3515389439e1ffafebf520d0cfd84efb5d1.zip |
Convert remaining Links to new UI component
Diffstat (limited to 'packages/website/ts/components/ui')
-rw-r--r-- | packages/website/ts/components/ui/link.tsx | 30 |
1 files changed, 28 insertions, 2 deletions
diff --git a/packages/website/ts/components/ui/link.tsx b/packages/website/ts/components/ui/link.tsx index ae62aad0c..30c76e3c9 100644 --- a/packages/website/ts/components/ui/link.tsx +++ b/packages/website/ts/components/ui/link.tsx @@ -1,3 +1,4 @@ +import * as _ from 'lodash'; import * as React from 'react'; import { Link as ReactRounterLink } from 'react-router-dom'; import { LinkType } from 'ts/types'; @@ -8,6 +9,9 @@ export interface LinkProps { shouldOpenInNewTab?: boolean; style?: React.CSSProperties; className?: string; + onMouseOver?: (event: React.MouseEvent<HTMLElement>) => void; + onMouseLeave?: (event: React.MouseEvent<HTMLElement>) => void; + onMouseEnter?: (event: React.MouseEvent<HTMLElement>) => void; } /** @@ -22,6 +26,9 @@ export const Link: React.StatelessComponent<LinkProps> = ({ to, shouldOpenInNewTab, children, + onMouseOver, + onMouseLeave, + onMouseEnter, }) => { const styleWithDefault = { textDecoration: 'none', @@ -31,13 +38,29 @@ export const Link: React.StatelessComponent<LinkProps> = ({ switch (type) { case LinkType.External: return ( - <a target={shouldOpenInNewTab && '_blank'} className={className} style={styleWithDefault} href={to}> + <a + target={shouldOpenInNewTab && '_blank'} + className={className} + style={styleWithDefault} + href={to} + onMouseOver={onMouseOver} + onMouseEnter={onMouseEnter} + onMouseLeave={onMouseLeave} + > {children} </a> ); case LinkType.ReactRoute: return ( - <ReactRounterLink to={to} className={className} style={styleWithDefault}> + <ReactRounterLink + to={to} + className={className} + style={styleWithDefault} + target={shouldOpenInNewTab && '_blank'} + onMouseOver={onMouseOver} + onMouseEnter={onMouseEnter} + onMouseLeave={onMouseLeave} + > {children} </ReactRounterLink> ); @@ -53,6 +76,9 @@ Link.defaultProps = { shouldOpenInNewTab: true, style: {}, className: '', + onMouseOver: _.noop.bind(_), + onMouseLeave: _.noop.bind(_), + onMouseEnter: _.noop.bind(_), }; Link.displayName = 'Link'; |