aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/ui
diff options
context:
space:
mode:
authorFabio Berger <me@fabioberger.com>2018-10-03 23:37:59 +0800
committerFabio Berger <me@fabioberger.com>2018-10-03 23:37:59 +0800
commit437612f8b8c28fb384698c5c2b331e173cee8767 (patch)
tree5f182d44c0fa3bc2e29667d9b12e58b1cd2542d1 /packages/website/ts/components/ui
parentab855cdd1cfa2e4fcc45499508dca9c9e8733b61 (diff)
downloaddexon-0x-contracts-437612f8b8c28fb384698c5c2b331e173cee8767.tar.gz
dexon-0x-contracts-437612f8b8c28fb384698c5c2b331e173cee8767.tar.zst
dexon-0x-contracts-437612f8b8c28fb384698c5c2b331e173cee8767.zip
Use same Link UI component for react-scroll links
Diffstat (limited to 'packages/website/ts/components/ui')
-rw-r--r--packages/website/ts/components/ui/custom_menu_item.tsx2
-rw-r--r--packages/website/ts/components/ui/link.tsx84
-rw-r--r--packages/website/ts/components/ui/simple_menu.tsx2
3 files changed, 2 insertions, 86 deletions
diff --git a/packages/website/ts/components/ui/custom_menu_item.tsx b/packages/website/ts/components/ui/custom_menu_item.tsx
index c51095709..11f61b336 100644
--- a/packages/website/ts/components/ui/custom_menu_item.tsx
+++ b/packages/website/ts/components/ui/custom_menu_item.tsx
@@ -1,6 +1,6 @@
+import { Link } from '@0xproject/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
-import { Link } from 'ts/components/ui/link';
interface CustomMenuItemProps {
to: string;
diff --git a/packages/website/ts/components/ui/link.tsx b/packages/website/ts/components/ui/link.tsx
deleted file mode 100644
index ad98efa6c..000000000
--- a/packages/website/ts/components/ui/link.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-import { Link as ReactRounterLink } from 'react-router-dom';
-import { LinkType } from 'ts/types';
-
-export interface LinkProps {
- to: string;
- type?: LinkType;
- 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;
-}
-
-/**
- * A generic link component which let's the developer render internal & external links, and their associated
- * behaviors with a single link component. Many times we want a menu including both internal & external links
- * and this abstracts away the differences of rendering both types of links.
- */
-export const Link: React.StatelessComponent<LinkProps> = ({
- style,
- className,
- type,
- to,
- shouldOpenInNewTab,
- children,
- onMouseOver,
- onMouseLeave,
- onMouseEnter,
-}) => {
- const styleWithDefault = {
- textDecoration: 'none',
- ...style,
- };
-
- switch (type) {
- case LinkType.External:
- return (
- <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}
- target={shouldOpenInNewTab ? '_blank' : ''}
- onMouseOver={onMouseOver}
- onMouseEnter={onMouseEnter}
- onMouseLeave={onMouseLeave}
- >
- {children}
- </ReactRounterLink>
- );
- case LinkType.ReactScroll:
- return <div>TODO</div>;
- default:
- throw new Error(`Unrecognized LinkType: ${type}`);
- }
-};
-
-Link.defaultProps = {
- type: LinkType.ReactRoute,
- shouldOpenInNewTab: false,
- style: {},
- className: '',
- onMouseOver: _.noop.bind(_),
- onMouseLeave: _.noop.bind(_),
- onMouseEnter: _.noop.bind(_),
-};
-
-Link.displayName = 'Link';
diff --git a/packages/website/ts/components/ui/simple_menu.tsx b/packages/website/ts/components/ui/simple_menu.tsx
index 767da3675..bdaf0701e 100644
--- a/packages/website/ts/components/ui/simple_menu.tsx
+++ b/packages/website/ts/components/ui/simple_menu.tsx
@@ -1,7 +1,7 @@
+import { Link } from '@0xproject/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
import * as CopyToClipboard from 'react-copy-to-clipboard';
-import { Link } from 'ts/components/ui/link';
import { Container } from 'ts/components/ui/container';
import { Text } from 'ts/components/ui/text';