aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorFabio Berger <me@fabioberger.com>2018-10-03 17:52:37 +0800
committerFabio Berger <me@fabioberger.com>2018-10-03 17:52:37 +0800
commit4fb7b3515389439e1ffafebf520d0cfd84efb5d1 (patch)
tree51260dd1a1f01708a43ee647b67932c368c052f4
parentc07412a992284b2f3045be1c620ea2e0a351139a (diff)
downloaddexon-sol-tools-4fb7b3515389439e1ffafebf520d0cfd84efb5d1.tar.gz
dexon-sol-tools-4fb7b3515389439e1ffafebf520d0cfd84efb5d1.tar.zst
dexon-sol-tools-4fb7b3515389439e1ffafebf520d0cfd84efb5d1.zip
Convert remaining Links to new UI component
-rw-r--r--packages/website/ts/components/documentation/docs_logo.tsx2
-rw-r--r--packages/website/ts/components/documentation/tutorial_button.tsx3
-rw-r--r--packages/website/ts/components/ui/link.tsx30
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';