diff options
| -rw-r--r-- | packages/react-shared/src/components/link.tsx | 13 | ||||
| -rw-r--r-- | packages/react-shared/src/index.ts | 2 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/header.tsx | 85 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/link.tsx | 22 |
4 files changed, 71 insertions, 51 deletions
diff --git a/packages/react-shared/src/components/link.tsx b/packages/react-shared/src/components/link.tsx index 089e6e2ba..2fb19ac11 100644 --- a/packages/react-shared/src/components/link.tsx +++ b/packages/react-shared/src/components/link.tsx @@ -1,13 +1,13 @@ import * as _ from 'lodash'; import * as React from 'react'; -import { Link as ReactRounterLink } from 'react-router-dom'; +import { NavLink as ReactRounterLink } from 'react-router-dom'; import { Link as ScrollLink } from 'react-scroll'; import * as validUrl from 'valid-url'; import { LinkType } from '../types'; import { constants } from '../utils/constants'; -interface BaseLinkProps { +export interface BaseLinkProps { to: string; shouldOpenInNewTab?: boolean; className?: string; @@ -18,11 +18,15 @@ interface BaseLinkProps { fontColor?: string; } -interface ScrollLinkProps extends BaseLinkProps { +export interface ScrollLinkProps extends BaseLinkProps { onActivityChanged?: (isActive: boolean) => void; } -type LinkProps = BaseLinkProps & ScrollLinkProps; +export interface ReactLinkProps extends BaseLinkProps { + activeStyle?: React.CSSProperties; +} + +export type LinkProps = ReactLinkProps & ScrollLinkProps; export interface LinkState {} @@ -94,6 +98,7 @@ export class Link extends React.Component<LinkProps, LinkState> { onMouseOver={this.props.onMouseOver} onMouseEnter={this.props.onMouseEnter} onMouseLeave={this.props.onMouseLeave} + activeStyle={this.props.activeStyle} > {this.props.children} </ReactRounterLink> diff --git a/packages/react-shared/src/index.ts b/packages/react-shared/src/index.ts index a693f2a36..285e1c6b4 100644 --- a/packages/react-shared/src/index.ts +++ b/packages/react-shared/src/index.ts @@ -3,7 +3,7 @@ export { MarkdownLinkBlock } from './components/markdown_link_block'; export { MarkdownCodeBlock } from './components/markdown_code_block'; export { MarkdownSection } from './components/markdown_section'; export { SectionHeader } from './components/section_header'; -export { Link } from './components/link'; +export { Link, LinkProps } from './components/link'; export { HeaderSizes, Styles, EtherscanLinkSuffixes, Networks, ALink } from './types'; diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index 544a7daf1..00d45f123 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -1,8 +1,8 @@ +import { Link } from '@0x/react-shared'; import _ from 'lodash'; import * as React from 'react'; import MediaQuery from 'react-responsive'; -import { NavLink as ReactRouterLink } from 'react-router-dom'; -import styled, { withTheme } from 'styled-components'; +import styled, { css, withTheme } from 'styled-components'; import Headroom from 'react-headroom'; @@ -29,6 +29,7 @@ interface NavItemProps { text?: string; dropdownWidth?: number; dropdownComponent?: React.ReactNode; + shouldOpenInNewTab?: boolean; } interface DropdownWrapInterface { @@ -43,14 +44,12 @@ const navItems: NavItemProps[] = [ }, { id: 'products', - url: '#', text: 'Products', dropdownComponent: DropdownProducts, dropdownWidth: 280, }, { id: 'developers', - url: '#', text: 'Developers', dropdownComponent: DropdownDevelopers, dropdownWidth: 480, @@ -62,7 +61,8 @@ const navItems: NavItemProps[] = [ }, { id: 'blog', - url: 'https://blog.0x.org/latest', + url: 'https://blog.0xproject.com/latest', + shouldOpenInNewTab: true, text: 'Blog', }, ]; @@ -72,7 +72,7 @@ class HeaderBase extends React.Component<HeaderProps> { if (this.props.isNavToggled) { this.props.toggleMobileNav(); } - } + }; public render(): React.ReactNode { const { isNavToggled, toggleMobileNav, theme } = this.props; @@ -81,25 +81,16 @@ class HeaderBase extends React.Component<HeaderProps> { <Headroom onUnpin={this.onUnpin} downTolerance={4} upTolerance={10}> <StyledHeader isNavToggled={isNavToggled}> <HeaderWrap> - <ReactRouterLink to={WebsitePaths.Home}> + <Link to={WebsitePaths.Home}> <Logo /> - </ReactRouterLink> + </Link> <NavLinks> - {_.map(navItems, (link, index) => ( - <NavItem - key={`navlink-${index}`} - link={link} - /> - ))} + {_.map(navItems, (link, index) => <NavItem key={`navlink-${index}`} link={link} />)} </NavLinks> <MediaQuery minWidth={990}> - <TradeButton - bgColor={theme.headerButtonBg} - color="#ffffff" - href="/portal" - > + <TradeButton bgColor={theme.headerButtonBg} color="#ffffff" href="/portal"> Trade on 0x </TradeButton> </MediaQuery> @@ -118,23 +109,30 @@ export const Header = withTheme(HeaderBase); const NavItem = (props: { link: NavItemProps; key: string }) => { const { link } = props; const Subnav = link.dropdownComponent; - + const linkElement = _.isUndefined(link.url) ? ( + <StyledAnchor href="#">{link.text}</StyledAnchor> + ) : ( + <StyledNavLink to={link.url} shouldOpenInNewTab={link.shouldOpenInNewTab}> + {link.text} + </StyledNavLink> + ); return ( <LinkWrap> - <StyledNavLink to={link.url}> - {link.text} - </StyledNavLink> + {linkElement} - {link.dropdownComponent && + {link.dropdownComponent && ( <DropdownWrap width={link.dropdownWidth}> <Subnav /> </DropdownWrap> - } + )} </LinkWrap> ); }; -const StyledHeader = styled.header<HeaderProps>` +const StyledHeader = + styled.header < + HeaderProps > + ` padding: 30px; background-color: ${props => props.theme.bgColor}; `; @@ -157,9 +155,7 @@ const LinkWrap = styled.li` } `; -const StyledNavLink = styled(ReactRouterLink).attrs({ - activeStyle: { opacity: 1 }, -})` +const linkStyles = css` color: ${props => props.theme.textColor}; opacity: 0.5; transition: opacity 0.35s; @@ -171,15 +167,25 @@ const StyledNavLink = styled(ReactRouterLink).attrs({ } `; +const StyledNavLink = styled(Link).attrs({ + activeStyle: { opacity: 1 }, +})` + ${linkStyles}; +`; + +const StyledAnchor = styled.a` + ${linkStyles}; +`; + const HeaderWrap = styled(FlexWrap)` - justify-content: space-between; - align-items: center; - - @media (max-width: 800px) { - padding-top: 0; - display: flex; - padding-bottom: 0; - } + justify-content: space-between; + align-items: center; + + @media (max-width: 800px) { + padding-top: 0; + display: flex; + padding-bottom: 0; + } `; const NavLinks = styled.ul` @@ -192,7 +198,10 @@ const NavLinks = styled.ul` } `; -const DropdownWrap = styled.div<DropdownWrapInterface>` +const DropdownWrap = + styled.div < + DropdownWrapInterface > + ` width: ${props => props.width || 280}px; padding: 15px 0; border: 1px solid transparent; diff --git a/packages/website/ts/@next/components/link.tsx b/packages/website/ts/@next/components/link.tsx index c3633987a..6ca1e44c1 100644 --- a/packages/website/ts/@next/components/link.tsx +++ b/packages/website/ts/@next/components/link.tsx @@ -1,5 +1,5 @@ +import { Link as SmartLink } from '@0x/react-shared'; import * as React from 'react'; -import { Link as ReactRouterLink } from 'react-router-dom'; import styled from 'styled-components'; interface LinkInterface { @@ -16,16 +16,19 @@ interface LinkInterface { } export const Link = (props: LinkInterface) => { - const { - children, - isNoArrow, - href, - } = props; + const { children, isNoArrow, href } = props; return ( <StyledLink to={href} {...props}> {children} - {!isNoArrow && <svg width="25" height="25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.484 5.246l.023 1.411 8.147.053L4.817 18.547l.996.996L17.65 7.706l.052 8.146 1.411.024-.068-10.561-10.561-.069z" fill="currentColor"/></svg>} + {!isNoArrow && ( + <svg width="25" height="25" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path + d="M8.484 5.246l.023 1.411 8.147.053L4.817 18.547l.996.996L17.65 7.706l.052 8.146 1.411.024-.068-10.561-10.561-.069z" + fill="currentColor" + /> + </svg> + )} </StyledLink> ); }; @@ -39,7 +42,10 @@ export const LinkWrap = styled.div` } `; -const StyledLink = styled(ReactRouterLink)<LinkInterface>` +const StyledLink = + styled(SmartLink) < + LinkInterface > + ` display: ${props => !props.isBlock && 'inline-flex'}; color: ${props => props.color || props.theme.linkColor}; text-align: center; |