diff options
author | Hsuan Lee <hsuan@cobinhood.com> | 2019-01-19 18:42:04 +0800 |
---|---|---|
committer | Hsuan Lee <hsuan@cobinhood.com> | 2019-01-19 18:42:04 +0800 |
commit | 7ae38906926dc09bc10670c361af0d2bf0050426 (patch) | |
tree | 5fb10ae366b987db09e4ddb4bc3ba0f75404ad08 /packages/website/ts/components/dropdowns | |
parent | b5fd3c72a08aaa6957917d74c333387a16edf66b (diff) | |
download | dexon-sol-tools-7ae38906926dc09bc10670c361af0d2bf0050426.tar dexon-sol-tools-7ae38906926dc09bc10670c361af0d2bf0050426.tar.gz dexon-sol-tools-7ae38906926dc09bc10670c361af0d2bf0050426.tar.bz2 dexon-sol-tools-7ae38906926dc09bc10670c361af0d2bf0050426.tar.lz dexon-sol-tools-7ae38906926dc09bc10670c361af0d2bf0050426.tar.xz dexon-sol-tools-7ae38906926dc09bc10670c361af0d2bf0050426.tar.zst dexon-sol-tools-7ae38906926dc09bc10670c361af0d2bf0050426.zip |
Update dependency packages
Diffstat (limited to 'packages/website/ts/components/dropdowns')
4 files changed, 0 insertions, 434 deletions
diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx deleted file mode 100644 index 079132f2b..000000000 --- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx +++ /dev/null @@ -1,162 +0,0 @@ -import { ALink, colors, Link } from '@0x/react-shared'; -import * as _ from 'lodash'; -import * as React from 'react'; -import { Container } from 'ts/components/ui/container'; -import { DropDown } from 'ts/components/ui/drop_down'; -import { Text } from 'ts/components/ui/text'; -import { Deco, Key, WebsitePaths } from 'ts/types'; -import { constants } from 'ts/utils/constants'; -import { Translate } from 'ts/utils/translate'; - -const gettingStartedKeyToLinkInfo1: ALink[] = [ - { - title: Key.BuildARelayer, - to: `${WebsitePaths.Wiki}#Build-A-Relayer`, - }, - { - title: Key.OrderBasics, - to: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`, - }, -]; -const gettingStartedKeyToLinkInfo2: ALink[] = [ - { - title: Key.DevelopOnEthereum, - to: `${WebsitePaths.Wiki}#Ethereum-Development`, - }, - { - title: Key.UseNetworkedLiquidity, - to: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, - }, -]; -const popularDocsToLinkInfos: ALink[] = [ - { - title: Key.ZeroExJs, - to: WebsitePaths.ZeroExJs, - }, - { - title: Key.Connect, - to: WebsitePaths.Connect, - }, - { - title: Key.SmartContract, - to: WebsitePaths.SmartContracts, - }, -]; -const usefulLinksToLinkInfo: ALink[] = [ - { - title: Key.Wiki, - to: WebsitePaths.Wiki, - }, - { - title: Key.Github, - to: constants.URL_GITHUB_ORG, - shouldOpenInNewTab: true, - }, - { - title: Key.ProtocolSpecification, - to: constants.URL_PROTOCOL_SPECIFICATION, - shouldOpenInNewTab: true, - }, -]; - -interface DevelopersDropDownProps { - location: Location; - translate: Translate; - menuItemStyles: React.CSSProperties; - menuIconStyle: React.CSSProperties; -} - -interface DevelopersDropDownState {} - -export class DevelopersDropDown extends React.Component<DevelopersDropDownProps, DevelopersDropDownState> { - public render(): React.ReactNode { - const activeNode = ( - <Container className="flex relative" paddingRight="10"> - <Text fontColor={this.props.menuIconStyle.color}> - {this.props.translate.get(Key.Developers, Deco.Cap)} - </Text> - </Container> - ); - return ( - <DropDown - activeNode={activeNode} - popoverContent={this._renderDropdownMenu()} - anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }} - targetOrigin={{ horizontal: 'left', vertical: 'top' }} - style={this.props.menuItemStyles} - popoverStyle={{ borderRadius: 4, width: 397, height: 373, marginTop: 0 }} - /> - ); - } - private _renderDropdownMenu(): React.ReactNode { - const sectionPadding = '26px'; - const dropdownMenu = ( - <Container> - <Container className="flex" padding={sectionPadding}> - <Container paddingRight="45px"> - {this._renderLinkSection(gettingStartedKeyToLinkInfo1, 'Getting started')} - </Container> - <Container>{this._renderLinkSection(gettingStartedKeyToLinkInfo2)}</Container> - </Container> - <Container width="100%" height="1px" backgroundColor={colors.grey300} /> - <Container className="flex" padding={sectionPadding}> - <Container paddingRight="62px"> - <Container>{this._renderLinkSection(popularDocsToLinkInfos, 'Popular docs')}</Container> - </Container> - <Container> - <Container>{this._renderLinkSection(usefulLinksToLinkInfo, 'Useful links')}</Container> - </Container> - </Container> - <Link to={WebsitePaths.Docs} fontColor={colors.lightBlueA700}> - <Container - padding="0.9rem" - backgroundColor={colors.lightBgGrey} - borderBottomLeftRadius={4} - borderBottomRightRadius={4} - > - <Text fontColor={colors.lightBlueA700} fontWeight="bold" fontSize="14px" textAlign="center"> - {this.props.translate.get(Key.ViewAllDocumentation, Deco.Upper)} - </Text> - </Container> - </Link> - </Container> - ); - return dropdownMenu; - } - private _renderLinkSection(links: ALink[], title: string = ''): React.ReactNode { - const numLinks = links.length; - let i = 0; - const renderLinks = _.map(links, (link: ALink) => { - const isWikiLink = _.startsWith(link.to, WebsitePaths.Wiki) && _.includes(link.to, '#'); - const isOnWiki = this.props.location.pathname === WebsitePaths.Wiki; - let to = link.to; - if (isWikiLink && isOnWiki) { - to = `${link.to.split('#')[1]}`; - } - i++; - const isLast = i === numLinks; - const linkText = this.props.translate.get(link.title as Key, Deco.Cap); - return ( - <Container className={`pr1 pt1 ${!isLast && 'pb1'}`} key={`dev-dropdown-link-${link.title}`}> - <Link to={to} shouldOpenInNewTab={!!link.shouldOpenInNewTab}> - <Text fontFamily="Roboto, Roboto Mono" fontColor={colors.lightBlueA700}> - {linkText} - </Text> - </Link> - </Container> - ); - }); - return ( - <Container> - <Container height="33px"> - {!_.isEmpty(title) && ( - <Text letterSpacing={1} fontColor={colors.linkSectionGrey} fontSize="14px" fontWeight={600}> - {title.toUpperCase()} - </Text> - )} - </Container> - {renderLinks} - </Container> - ); - } -} diff --git a/packages/website/ts/components/dropdowns/dropdown_developers.tsx b/packages/website/ts/components/dropdowns/dropdown_developers.tsx deleted file mode 100644 index 590d2ead9..000000000 --- a/packages/website/ts/components/dropdowns/dropdown_developers.tsx +++ /dev/null @@ -1,184 +0,0 @@ -import { Link } from '@0x/react-shared'; -import * as _ from 'lodash'; -import * as React from 'react'; -import styled, { withTheme } from 'styled-components'; - -import { Button } from 'ts/components/button'; -import { Column, FlexWrap, WrapGrid } from 'ts/components/newLayout'; -import { ThemeValuesInterface } from 'ts/components/siteWrap'; -import { Heading } from 'ts/components/text'; -import { WebsitePaths } from 'ts/types'; -import { constants } from 'ts/utils/constants'; - -interface Props { - theme: ThemeValuesInterface; -} - -interface LinkConfig { - label: string; - url: string; - shouldOpenInNewTab?: boolean; -} - -const introData: LinkConfig[] = [ - { - label: 'Build a relayer', - url: `${WebsitePaths.Wiki}#Build-A-Relayer`, - }, - { - label: 'Develop on Ethereum', - url: `${WebsitePaths.Wiki}#Ethereum-Development`, - }, - { - label: 'Make & take orders', - url: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`, - }, - { - label: 'Use networked liquidity', - url: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, - }, - { - label: 'Market making', - url: `${WebsitePaths.MarketMaker}`, - }, -]; - -const docsData: LinkConfig[] = [ - { - label: '0x.js', - url: WebsitePaths.ZeroExJs, - }, - { - label: '0x Connect', - url: WebsitePaths.Connect, - }, - { - label: 'Smart Contract', - url: WebsitePaths.SmartContracts, - }, -]; - -const linksData: LinkConfig[] = [ - { - label: 'Wiki', - url: WebsitePaths.Wiki, - }, - { - label: 'Github', - url: constants.URL_GITHUB_ORG, - shouldOpenInNewTab: true, - }, - { - label: 'Protocol specification', - url: constants.URL_PROTOCOL_SPECIFICATION, - shouldOpenInNewTab: true, - }, -]; - -export const DropdownDevelopers: React.FunctionComponent<Props> = withTheme((props: Props) => ( - <> - <DropdownWrap> - <div> - <Heading asElement="h4" size={14} color="inherit" marginBottom="15px" isMuted={0.35}> - Getting Started - </Heading> - - <StyledGrid isCentered={false} isWrapped={true}> - {_.map(introData, (item, index) => ( - <li> - <Link key={`introLink-${index}`} to={item.url}> - {item.label} - </Link> - </li> - ))} - </StyledGrid> - </div> - - <StyledWrap> - <Column width="calc(100% - 15px)"> - <Heading asElement="h4" size={14} color="inherit" marginBottom="15px" isMuted={0.35}> - Popular Docs - </Heading> - - <ul> - {_.map(docsData, (item, index) => ( - <li key={`docsLink-${index}`}> - <Link to={item.url} shouldOpenInNewTab={item.shouldOpenInNewTab}> - {item.label} - </Link> - </li> - ))} - </ul> - </Column> - - <Column width="calc(100% - 15px)"> - <Heading asElement="h4" size={14} color="inherit" marginBottom="15px" isMuted={0.35}> - Useful Links - </Heading> - - <ul> - {_.map(linksData, (item, index) => ( - <li key={`usefulLink-${index}`}> - <Link to={item.url} shouldOpenInNewTab={item.shouldOpenInNewTab}> - {item.label} - </Link> - </li> - ))} - </ul> - </Column> - </StyledWrap> - - <StyledLink - to={WebsitePaths.Docs} - bgColor={props.theme.dropdownButtonBg} - isAccentColor={true} - isNoBorder={true} - > - View All Documentation - </StyledLink> - </DropdownWrap> - </> -)); - -const DropdownWrap = styled.div` - padding: 15px 30px 75px 30px; - - a { - color: inherit; - } - - li { - margin: 8px 0; - } -`; - -const StyledGrid = styled(WrapGrid.withComponent('ul'))` - li { - width: 50%; - flex-shrink: 0; - } -`; - -const StyledWrap = styled(FlexWrap)` - padding-top: 20px; - margin-top: 30px; - position: relative; - - &:before { - content: ''; - width: 100%; - height: 1px; - background-color: ${props => props.theme.dropdownColor}; - opacity: 0.15; - position: absolute; - top: 0; - left: 0; - } -`; - -const StyledLink = styled(Button)` - width: 100%; - position: absolute; - bottom: 0; - left: 0; -`; diff --git a/packages/website/ts/components/dropdowns/dropdown_products.tsx b/packages/website/ts/components/dropdowns/dropdown_products.tsx deleted file mode 100644 index 93fd1a4fe..000000000 --- a/packages/website/ts/components/dropdowns/dropdown_products.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import * as _ from 'lodash'; -import * as React from 'react'; - -import { Link } from 'react-router-dom'; -import styled from 'styled-components'; -import { Heading, Paragraph } from 'ts/components/text'; -import { WebsitePaths } from 'ts/types'; - -const navData = [ - { - title: '0x Instant', - description: 'Simple crypto purchasing', - url: WebsitePaths.Instant, - }, - { - title: '0x Launch Kit', - description: 'Build on the 0x protocol', - url: WebsitePaths.LaunchKit, - }, -]; - -export const DropdownProducts: React.FunctionComponent<{}> = () => ( - <List> - {_.map(navData, (item, index) => ( - <li key={`productLink-${index}`}> - <Link to={item.url}> - <Heading asElement="h3" color="inherit" isNoMargin={true} size="small"> - {item.title} - </Heading> - - {item.description && ( - <Paragraph color="inherit" isNoMargin={true} size="small" isMuted={0.5}> - {item.description} - </Paragraph> - )} - </Link> - </li> - ))} - </List> -); - -const List = styled.ul` - a { - padding: 15px 30px; - display: block; - color: inherit; - } -`; diff --git a/packages/website/ts/components/dropdowns/network_drop_down.tsx b/packages/website/ts/components/dropdowns/network_drop_down.tsx deleted file mode 100644 index df2d72edc..000000000 --- a/packages/website/ts/components/dropdowns/network_drop_down.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { constants as sharedConstants } from '@0x/react-shared'; -import * as _ from 'lodash'; -import DropDownMenu from 'material-ui/DropDownMenu'; -import MenuItem from 'material-ui/MenuItem'; -import * as React from 'react'; - -interface NetworkDropDownProps { - updateSelectedNetwork: (e: any, index: number, value: number) => void; - selectedNetworkId: number; - avialableNetworkIds: number[]; -} - -interface NetworkDropDownState {} - -export class NetworkDropDown extends React.Component<NetworkDropDownProps, NetworkDropDownState> { - public render(): React.ReactNode { - return ( - <div className="mx-auto" style={{ width: 120 }}> - <DropDownMenu value={this.props.selectedNetworkId} onChange={this.props.updateSelectedNetwork}> - {this._renderDropDownItems()} - </DropDownMenu> - </div> - ); - } - private _renderDropDownItems(): React.ReactNode { - const items = _.map(this.props.avialableNetworkIds, networkId => { - const networkName = sharedConstants.NETWORK_NAME_BY_ID[networkId]; - const primaryText = ( - <div className="flex"> - <div className="pr1" style={{ width: 14, paddingTop: 2 }}> - <img src={`/images/network_icons/${networkName.toLowerCase()}.png`} style={{ width: 14 }} /> - </div> - <div>{networkName}</div> - </div> - ); - return <MenuItem key={networkId} value={networkId} primaryText={primaryText} />; - }); - return items; - } -} |