diff options
Diffstat (limited to 'packages/website/ts/components/ui')
-rw-r--r-- | packages/website/ts/components/ui/custom_menu_item.tsx | 2 | ||||
-rw-r--r-- | packages/website/ts/components/ui/link.tsx | 84 | ||||
-rw-r--r-- | packages/website/ts/components/ui/simple_menu.tsx | 2 |
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'; |