diff options
3 files changed, 31 insertions, 4 deletions
diff --git a/packages/website/ts/components/documentation/docs_logo.tsx b/packages/website/ts/components/documentation/docs_logo.tsx index 9bd742749..c16499158 100644 --- a/packages/website/ts/components/documentation/docs_logo.tsx +++ b/packages/website/ts/components/documentation/docs_logo.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Link } from 'react-router-dom'; +import { Link } from 'ts/components/ui/link'; import { WebsitePaths } from 'ts/types'; export interface DocsLogoProps { diff --git a/packages/website/ts/components/documentation/tutorial_button.tsx b/packages/website/ts/components/documentation/tutorial_button.tsx index 7ed9c6e4e..42aa37bc7 100644 --- a/packages/website/ts/components/documentation/tutorial_button.tsx +++ b/packages/website/ts/components/documentation/tutorial_button.tsx @@ -1,7 +1,7 @@ import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; -import { Link } from 'react-router-dom'; +import { Link } from 'ts/components/ui/link'; import { Text } from 'ts/components/ui/text'; import { Deco, Key, TutorialInfo } from 'ts/types'; import { Translate } from 'ts/utils/translate'; @@ -26,6 +26,7 @@ export class TutorialButton extends React.Component<TutorialButtonProps, Tutoria return ( <Link to={this.props.tutorialInfo.link.to} + shouldOpenInNewTab={this.props.tutorialInfo.link.shouldOpenInNewTab} onMouseEnter={this._onHover.bind(this)} onMouseOver={this._onHover.bind(this)} onMouseLeave={this._onHoverOff.bind(this)} 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'; |