From 437612f8b8c28fb384698c5c2b331e173cee8767 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 3 Oct 2018 16:37:59 +0100 Subject: Use same Link UI component for react-scroll links --- .../react-docs/src/components/documentation.tsx | 9 +- packages/react-docs/src/docs_info.ts | 54 ++++++++--- packages/react-shared/package.json | 5 +- packages/react-shared/src/components/link.tsx | 100 +++++++++++++++++++++ .../src/components/nested_sidebar_menu.tsx | 66 ++++++-------- packages/react-shared/src/index.ts | 11 ++- packages/react-shared/src/types.ts | 13 +++ packages/website/package.json | 2 - .../documentation/docs_content_top_bar.tsx | 11 ++- .../ts/components/documentation/docs_logo.tsx | 2 +- .../components/documentation/tutorial_button.tsx | 3 +- .../components/dropdowns/developers_drop_down.tsx | 5 +- packages/website/ts/components/fill_order.tsx | 3 +- packages/website/ts/components/footer.tsx | 5 +- .../ts/components/inputs/token_amount_input.tsx | 3 +- .../website/ts/components/portal/back_button.tsx | 4 +- packages/website/ts/components/portal/portal.tsx | 3 +- packages/website/ts/components/top_bar/top_bar.tsx | 24 ++--- .../ts/components/top_bar/top_bar_menu_item.tsx | 4 +- .../website/ts/components/ui/custom_menu_item.tsx | 2 +- packages/website/ts/components/ui/link.tsx | 84 ----------------- packages/website/ts/components/ui/simple_menu.tsx | 2 +- packages/website/ts/pages/about/about.tsx | 3 +- .../website/ts/pages/documentation/doc_page.tsx | 8 +- packages/website/ts/pages/documentation/home.tsx | 13 ++- packages/website/ts/pages/landing/landing.tsx | 3 +- packages/website/ts/pages/wiki/wiki.tsx | 29 +++--- packages/website/ts/types.ts | 14 +-- yarn.lock | 27 ++++++ 29 files changed, 294 insertions(+), 218 deletions(-) create mode 100644 packages/react-shared/src/components/link.tsx delete mode 100644 packages/website/ts/components/ui/link.tsx diff --git a/packages/react-docs/src/components/documentation.tsx b/packages/react-docs/src/components/documentation.tsx index 3cd14923c..1ed829b01 100644 --- a/packages/react-docs/src/components/documentation.tsx +++ b/packages/react-docs/src/components/documentation.tsx @@ -98,7 +98,10 @@ export class Documentation extends React.Component {_.isUndefined(this.props.docAgnosticFormat) ? ( @@ -128,8 +131,8 @@ export class Documentation extends React.Component diff --git a/packages/react-docs/src/docs_info.ts b/packages/react-docs/src/docs_info.ts index 6355a2f88..1c11e07de 100644 --- a/packages/react-docs/src/docs_info.ts +++ b/packages/react-docs/src/docs_info.ts @@ -1,5 +1,5 @@ -import { MenuSubsectionsBySection } from '@0xproject/react-shared'; -import { DocAgnosticFormat, TypeDefinitionByName } from '@0xproject/types'; +import { ALink, LinkType, MenuSubsectionsBySection, utils as sharedUtils } from '@0xproject/react-shared'; +import { DocAgnosticFormat, ObjectMap, TypeDefinitionByName } from '@0xproject/types'; import * as _ from 'lodash'; import { @@ -32,10 +32,10 @@ export class DocsInfo { this.sectionNameToMarkdownByVersion = config.sectionNameToMarkdownByVersion; this.contractsByVersionByNetworkId = config.contractsByVersionByNetworkId; } - public getMenuSubsectionsBySection(docAgnosticFormat?: DocAgnosticFormat): MenuSubsectionsBySection { - const menuSubsectionsBySection = {} as MenuSubsectionsBySection; + public getSubsectionNameToLinks(docAgnosticFormat?: DocAgnosticFormat): ObjectMap { + const subsectionNameToLinks: ObjectMap = {}; if (_.isUndefined(docAgnosticFormat)) { - return menuSubsectionsBySection; + return subsectionNameToLinks; } const docSections = _.keys(this.sections); @@ -56,7 +56,14 @@ export class DocsInfo { if (!_.isUndefined(this.sections.types) && sectionName === this.sections.types) { const sortedTypesNames = _.sortBy(docSection.types, 'name'); const typeNames = _.map(sortedTypesNames, t => t.name); - menuSubsectionsBySection[sectionName] = typeNames; + const typeLinks = _.map(typeNames, typeName => { + return { + to: `${sectionName}-${typeName}`, + title: typeName, + type: LinkType.ReactScroll, + }; + }); + subsectionNameToLinks[sectionName] = typeLinks; } else if (isExportedFunctionSection) { // Noop so that we don't have the method listed underneath itself. } else { @@ -71,15 +78,20 @@ export class DocsInfo { const methodNames = _.map(methodsSortedByName, m => m.name); const sortedFunctionNames = _.sortBy(docSection.functions, 'name'); const functionNames = _.map(sortedFunctionNames, m => m.name); - menuSubsectionsBySection[sectionName] = [ - ...eventNames, - ...propertyNames, - ...functionNames, - ...methodNames, - ]; + const names = [...eventNames, ...propertyNames, ...functionNames, ...methodNames]; + + const links = _.map(names, name => { + return { + to: `${sectionName}-${name}`, + title: name, + type: LinkType.ReactScroll, + }; + }); + + subsectionNameToLinks[sectionName] = links; } }); - return menuSubsectionsBySection; + return subsectionNameToLinks; } public getTypeDefinitionsByName(docAgnosticFormat: DocAgnosticFormat): { [name: string]: TypeDefinitionByName } { if (_.isUndefined(this.sections.types)) { @@ -90,4 +102,20 @@ export class DocsInfo { const typeDefinitionByName = _.keyBy(typeDocSection.types, 'name') as any; return typeDefinitionByName; } + public getSectionNameToLinks(): ObjectMap { + const sectionNameToLinks: ObjectMap = {}; + _.each(this.menu, (linkTitles, sectionName) => { + sectionNameToLinks[sectionName] = []; + _.each(linkTitles, linkTitle => { + const to = sharedUtils.getIdFromName(linkTitle); + const links = sectionNameToLinks[sectionName]; + links.push({ + title: linkTitle, + to, + type: LinkType.ReactScroll, + }); + }); + }); + return sectionNameToLinks; + } } diff --git a/packages/react-shared/package.json b/packages/react-shared/package.json index 67c644bf3..eaaa57ea2 100644 --- a/packages/react-shared/package.json +++ b/packages/react-shared/package.json @@ -33,6 +33,7 @@ "typescript": "3.0.1" }, "dependencies": { + "@0xproject/types": "^1.1.2", "@material-ui/core": "^3.0.1", "@types/is-mobile": "0.3.0", "@types/lodash": "4.14.104", @@ -40,6 +41,7 @@ "@types/node": "*", "@types/react": "*", "@types/react-dom": "*", + "@types/react-router-dom": "^4.0.4", "@types/react-scroll": "1.5.3", "basscss": "^8.0.3", "change-case": "^3.0.2", @@ -50,7 +52,8 @@ "react-dom": "^16.4.2", "react-highlight": "0xproject/react-highlight#2f40a42e0a3f0ad126f9f42d505b97b603fc7162", "react-markdown": "^3.2.2", - "react-scroll": "0xproject/react-scroll#similar-to-pr-330" + "react-scroll": "0xproject/react-scroll#similar-to-pr-330", + "react-router-dom": "^4.1.1" }, "publishConfig": { "access": "public" diff --git a/packages/react-shared/src/components/link.tsx b/packages/react-shared/src/components/link.tsx new file mode 100644 index 000000000..7425b9365 --- /dev/null +++ b/packages/react-shared/src/components/link.tsx @@ -0,0 +1,100 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import { Link as ReactRounterLink } from 'react-router-dom'; +import { Link as ScrollLink } from 'react-scroll'; + +import { LinkType } from '../types'; +import { constants } from '../utils/constants'; + +export interface LinkProps { + to: string; + type?: LinkType; + shouldOpenInNewTab?: boolean; + style?: React.CSSProperties; + className?: string; + onMouseOver?: (event: React.MouseEvent) => void; + onMouseLeave?: (event: React.MouseEvent) => void; + onMouseEnter?: (event: React.MouseEvent) => void; + containerId?: string; +} + +/** + * 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 = ({ + style, + className, + type, + to, + shouldOpenInNewTab, + children, + onMouseOver, + onMouseLeave, + onMouseEnter, + containerId, +}) => { + const styleWithDefault = { + textDecoration: 'none', + ...style, + }; + + switch (type) { + case LinkType.External: + return ( + + {children} + + ); + case LinkType.ReactRoute: + return ( + + {children} + + ); + case LinkType.ReactScroll: + return ( + + {children} + + ); + 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(_), + containerId: constants.DOCS_CONTAINER_ID, +}; + +Link.displayName = 'Link'; diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 9933f3b38..2242349df 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -1,18 +1,19 @@ +import { ObjectMap } from '@0xproject/types'; import * as _ from 'lodash'; import MenuItem from 'material-ui/MenuItem'; import * as React from 'react'; -import { Link as ScrollLink } from 'react-scroll'; -import { MenuSubsectionsBySection, Styles } from '../types'; +import { ALink, LinkType, Styles } from '../types'; import { colors } from '../utils/colors'; import { constants } from '../utils/constants'; import { utils } from '../utils/utils'; +import { Link } from './Link'; import { VersionDropDown } from './version_drop_down'; export interface NestedSidebarMenuProps { - topLevelMenu: { [topLevel: string]: string[] }; - menuSubsectionsBySection?: MenuSubsectionsBySection; + sectionNameToLinks: ObjectMap; + subsectionNameToLinks?: ObjectMap; sidebarHeader?: React.ReactNode; shouldDisplaySectionHeaders?: boolean; onMenuItemClick?: () => void; @@ -44,10 +45,10 @@ export class NestedSidebarMenu extends React.Component { + const navigation = _.map(this.props.sectionNameToLinks, (links: ALink[], sectionName: string) => { const finalSectionName = utils.convertCamelCaseToSpaces(sectionName); if (this.props.shouldDisplaySectionHeaders) { // tslint:disable-next-line:no-unused-variable @@ -56,11 +57,11 @@ export class NestedSidebarMenu extends React.Component {finalSectionName.toUpperCase()} - {this._renderMenuItems(menuItems)} + {this._renderMenuItems(links)} ); } else { - return
{this._renderMenuItems(menuItems)}
; + return
{this._renderMenuItems(links)}
; } }); const maxWidthWithScrollbar = 307; @@ -82,26 +83,18 @@ export class NestedSidebarMenu extends React.Component ); } - private _renderMenuItems(menuItemNames: string[]): React.ReactNode[] { + private _renderMenuItems(links: ALink[]): React.ReactNode[] { const menuItemStyles = this.props.shouldDisplaySectionHeaders ? styles.menuItemWithHeaders : styles.menuItemWithoutHeaders; const menuItemInnerDivStyles = this.props.shouldDisplaySectionHeaders ? styles.menuItemInnerDivWithHeaders : {}; - const menuItems = _.map(menuItemNames, menuItemName => { + const menuItems = _.map(links, link => { const finalMenuItemName = this.props.shouldReformatMenuItemNames - ? utils.convertDashesToSpaces(menuItemName) - : menuItemName; - const id = utils.getIdFromName(menuItemName); + ? utils.convertDashesToSpaces(link.title) + : link.title; return ( -
- +
+ - - {this._renderMenuItemSubsections(menuItemName)} + + {this._renderMenuItemSubsections(link.title)}
); }); @@ -124,28 +117,21 @@ export class NestedSidebarMenu extends React.Component - {_.map(entityNames, entityName => { - const name = `${menuItemName}-${entityName}`; - const id = utils.getIdFromName(name); + {_.map(links, link => { + const name = `${menuItemName}-${link.title}`; return (
  • - + - {entityName} + {link.title} - +
    • ); })} diff --git a/packages/react-shared/src/index.ts b/packages/react-shared/src/index.ts index 3b50c0117..793214a87 100644 --- a/packages/react-shared/src/index.ts +++ b/packages/react-shared/src/index.ts @@ -4,8 +4,17 @@ export { MarkdownCodeBlock } from './components/markdown_code_block'; export { MarkdownSection } from './components/markdown_section'; export { NestedSidebarMenu } from './components/nested_sidebar_menu'; export { SectionHeader } from './components/section_header'; +export { Link } from './components/link'; -export { HeaderSizes, Styles, MenuSubsectionsBySection, EtherscanLinkSuffixes, Networks } from './types'; +export { + HeaderSizes, + Styles, + MenuSubsectionsBySection, + EtherscanLinkSuffixes, + Networks, + LinkType, + ALink, +} from './types'; export { utils } from './utils/utils'; export { constants } from './utils/constants'; diff --git a/packages/react-shared/src/types.ts b/packages/react-shared/src/types.ts index 88fadcc09..b3dd4045b 100644 --- a/packages/react-shared/src/types.ts +++ b/packages/react-shared/src/types.ts @@ -23,3 +23,16 @@ export enum Networks { Ropsten = 'Ropsten', Rinkeby = 'Rinkeby', } + +export enum LinkType { + External = 'EXTERNAL', + ReactScroll = 'REACT_SCROLL', + ReactRoute = 'REACT_ROUTE', +} + +export interface ALink { + title: string; + to: string; + shouldOpenInNewTab?: boolean; + type?: LinkType; +} diff --git a/packages/website/package.json b/packages/website/package.json index ab8835248..37e75e84e 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -52,7 +52,6 @@ "react-helmet": "^5.2.0", "react-popper": "^1.0.0-beta.6", "react-redux": "^5.0.3", - "react-router-dom": "^4.1.1", "react-scroll": "0xproject/react-scroll#similar-to-pr-330", "react-tooltip": "^3.2.7", "react-typist": "^2.0.4", @@ -81,7 +80,6 @@ "@types/react-dom": "^16.0.7", "@types/react-helmet": "^5.0.6", "@types/react-redux": "^4.4.37", - "@types/react-router-dom": "^4.0.4", "@types/react-scroll": "1.5.3", "@types/react-tap-event-plugin": "0.0.30", "@types/redux": "^3.6.0", diff --git a/packages/website/ts/components/documentation/docs_content_top_bar.tsx b/packages/website/ts/components/documentation/docs_content_top_bar.tsx index 7edb51587..d3735f2be 100644 --- a/packages/website/ts/components/documentation/docs_content_top_bar.tsx +++ b/packages/website/ts/components/documentation/docs_content_top_bar.tsx @@ -1,12 +1,11 @@ -import { colors, NestedSidebarMenu } from '@0xproject/react-shared'; +import { ALink, colors, Link, NestedSidebarMenu } from '@0xproject/react-shared'; import { ObjectMap } from '@0xproject/types'; import * as _ from 'lodash'; import Drawer from 'material-ui/Drawer'; import * as React from 'react'; import { DocsLogo } from 'ts/components/documentation/docs_logo'; import { Container } from 'ts/components/ui/container'; -import { Link } from 'ts/components/ui/link'; -import { ALink, Deco, Key, WebsitePaths } from 'ts/types'; +import { Deco, Key, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; @@ -147,12 +146,12 @@ export class DocsContentTopBar extends React.Component
    TODO - {/* */} + />
    ); diff --git a/packages/website/ts/components/documentation/docs_logo.tsx b/packages/website/ts/components/documentation/docs_logo.tsx index c16499158..6f3c3c6e8 100644 --- a/packages/website/ts/components/documentation/docs_logo.tsx +++ b/packages/website/ts/components/documentation/docs_logo.tsx @@ -1,5 +1,5 @@ +import { Link } from '@0xproject/react-shared'; import * as React from 'react'; -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 42aa37bc7..a0d99e175 100644 --- a/packages/website/ts/components/documentation/tutorial_button.tsx +++ b/packages/website/ts/components/documentation/tutorial_button.tsx @@ -1,7 +1,6 @@ -import { colors } from '@0xproject/react-shared'; +import { colors, Link } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; -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'; diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx index af0ae825c..4167b3d23 100644 --- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx +++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx @@ -1,11 +1,10 @@ -import { colors } from '@0xproject/react-shared'; +import { ALink, colors, Link, LinkType } from '@0xproject/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 { Link } from 'ts/components/ui/link'; import { Text } from 'ts/components/ui/text'; -import { ALink, Deco, Key, LinkType, WebsitePaths } from 'ts/types'; +import { Deco, Key, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx index ec1d698f3..99939ce43 100644 --- a/packages/website/ts/components/fill_order.tsx +++ b/packages/website/ts/components/fill_order.tsx @@ -1,5 +1,5 @@ import { assetDataUtils, orderHashUtils } from '@0xproject/order-utils'; -import { colors } from '@0xproject/react-shared'; +import { colors, Link } from '@0xproject/react-shared'; import { BigNumber, logUtils } from '@0xproject/utils'; import { Web3Wrapper } from '@0xproject/web3-wrapper'; import * as accounting from 'accounting'; @@ -16,7 +16,6 @@ import { TokenAmountInput } from 'ts/components/inputs/token_amount_input'; import { Alert } from 'ts/components/ui/alert'; import { EthereumAddress } from 'ts/components/ui/ethereum_address'; import { Identicon } from 'ts/components/ui/identicon'; -import { Link } from 'ts/components/ui/link'; import { VisualOrder } from 'ts/components/visual_order'; import { Dispatcher } from 'ts/redux/dispatcher'; import { portalOrderSchema } from 'ts/schemas/portal_order_schema'; diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx index bec3c17f7..02770c073 100644 --- a/packages/website/ts/components/footer.tsx +++ b/packages/website/ts/components/footer.tsx @@ -1,13 +1,12 @@ -import { colors } from '@0xproject/react-shared'; +import { ALink, colors, Link, LinkType } from '@0xproject/react-shared'; import { ObjectMap } from '@0xproject/types'; import * as _ from 'lodash'; import DropDownMenu from 'material-ui/DropDownMenu'; import MenuItem from 'material-ui/MenuItem'; import * as React from 'react'; -import { Link } from 'ts/components/ui/link'; import { Dispatcher } from 'ts/redux/dispatcher'; -import { ALink, Deco, Key, Language, LinkType, WebsitePaths } from 'ts/types'; +import { Deco, Key, Language, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; diff --git a/packages/website/ts/components/inputs/token_amount_input.tsx b/packages/website/ts/components/inputs/token_amount_input.tsx index adf96f9ee..562f670e2 100644 --- a/packages/website/ts/components/inputs/token_amount_input.tsx +++ b/packages/website/ts/components/inputs/token_amount_input.tsx @@ -1,11 +1,10 @@ -import { colors } from '@0xproject/react-shared'; +import { colors, Link } from '@0xproject/react-shared'; import { BigNumber } from '@0xproject/utils'; import { Web3Wrapper } from '@0xproject/web3-wrapper'; import * as _ from 'lodash'; import * as React from 'react'; import { Blockchain } from 'ts/blockchain'; import { BalanceBoundedInput } from 'ts/components/inputs/balance_bounded_input'; -import { Link } from 'ts/components/ui/link'; import { Token, ValidatedBigNumberCallback, WebsitePaths } from 'ts/types'; interface TokenAmountInputProps { diff --git a/packages/website/ts/components/portal/back_button.tsx b/packages/website/ts/components/portal/back_button.tsx index bdbcef343..64a332e07 100644 --- a/packages/website/ts/components/portal/back_button.tsx +++ b/packages/website/ts/components/portal/back_button.tsx @@ -1,7 +1,5 @@ -import { Styles } from '@0xproject/react-shared'; +import { Link, Styles } from '@0xproject/react-shared'; import * as React from 'react'; -import { Link } from 'ts/components/ui/link'; - import { Island } from 'ts/components/ui/island'; import { colors } from 'ts/style/colors'; diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index a9ccf9e11..b8cd45661 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -1,10 +1,9 @@ -import { colors } from '@0xproject/react-shared'; +import { colors, Link } from '@0xproject/react-shared'; import { BigNumber } from '@0xproject/utils'; import * as _ from 'lodash'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; import { Route, RouteComponentProps, Switch } from 'react-router-dom'; -import { Link } from 'ts/components/ui/link'; import { Blockchain } from 'ts/blockchain'; import { BlockchainErrDialog } from 'ts/components/dialogs/blockchain_err_dialog'; diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index 3da2307e0..e25c0a0f7 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -1,11 +1,14 @@ -import { DocsInfo, DocsMenu } from '@0xproject/react-docs'; +import { DocsInfo } from '@0xproject/react-docs'; import { + ALink, colors, constants as sharedConstants, - MenuSubsectionsBySection, + Link, + LinkType, NestedSidebarMenu, Styles, } from '@0xproject/react-shared'; +import { ObjectMap } from '@0xproject/types'; import * as _ from 'lodash'; import Drawer from 'material-ui/Drawer'; import MenuItem from 'material-ui/MenuItem'; @@ -16,9 +19,8 @@ import { DrawerMenu } from 'ts/components/portal/drawer_menu'; import { ProviderDisplay } from 'ts/components/top_bar/provider_display'; import { TopBarMenuItem } from 'ts/components/top_bar/top_bar_menu_item'; import { Container } from 'ts/components/ui/container'; -import { Link } from 'ts/components/ui/link'; import { Dispatcher } from 'ts/redux/dispatcher'; -import { Deco, Key, LinkType, ProviderType, WebsitePaths } from 'ts/types'; +import { Deco, Key, ProviderType, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; @@ -40,8 +42,8 @@ export interface TopBarProps { translate: Translate; docsVersion?: string; availableDocVersions?: string[]; - menu?: DocsMenu; - menuSubsectionsBySection?: MenuSubsectionsBySection; + sectionNameToLinks?: ObjectMap; + subsectionNameToLinks?: ObjectMap; displayType?: TopBarDisplayType; docsInfo?: DocsInfo; style?: React.CSSProperties; @@ -311,14 +313,14 @@ export class TopBar extends React.Component { // because the sidebar renders `react-scroll` links which depend on the scroll container already // being rendered. const documentationContainer = document.getElementById(sharedConstants.SCROLL_CONTAINER_ID); - if (!isViewingDocsPage || _.isUndefined(this.props.menu) || _.isNull(documentationContainer)) { + if (!isViewingDocsPage || _.isUndefined(this.props.sectionNameToLinks) || _.isNull(documentationContainer)) { return undefined; } return (
    { return (
    ) => void; - onMouseLeave?: (event: React.MouseEvent) => void; - onMouseEnter?: (event: React.MouseEvent) => 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 = ({ - style, - className, - type, - to, - shouldOpenInNewTab, - children, - onMouseOver, - onMouseLeave, - onMouseEnter, -}) => { - const styleWithDefault = { - textDecoration: 'none', - ...style, - }; - - switch (type) { - case LinkType.External: - return ( - - {children} - - ); - case LinkType.ReactRoute: - return ( - - {children} - - ); - case LinkType.ReactScroll: - return
    TODO
    ; - 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'; diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx index ba1b423b9..efdf631b2 100644 --- a/packages/website/ts/pages/about/about.tsx +++ b/packages/website/ts/pages/about/about.tsx @@ -1,10 +1,9 @@ -import { colors, Styles } from '@0xproject/react-shared'; +import { colors, Link, Styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; import { Footer } from 'ts/components/footer'; import { TopBar } from 'ts/components/top_bar/top_bar'; -import { Link } from 'ts/components/ui/link'; import { Profile } from 'ts/pages/about/profile'; import { Dispatcher } from 'ts/redux/dispatcher'; import { ProfileInfo, WebsitePaths } from 'ts/types'; diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx index 6f029b6a2..9092a5cde 100644 --- a/packages/website/ts/pages/documentation/doc_page.tsx +++ b/packages/website/ts/pages/documentation/doc_page.tsx @@ -79,9 +79,9 @@ export class DocPage extends React.Component { this._isUnmounted = true; } public render(): React.ReactNode { - const menuSubsectionsBySection = _.isUndefined(this.state.docAgnosticFormat) + const subsectionNameToLinks = _.isUndefined(this.state.docAgnosticFormat) ? {} - : this.props.docsInfo.getMenuSubsectionsBySection(this.state.docAgnosticFormat); + : this.props.docsInfo.getSubsectionNameToLinks(this.state.docAgnosticFormat); const sourceUrl = this._getSourceUrl(); const iconFileName = idToIcon[this.props.docsInfo.id] || DEFAULT_ICON; const iconUrl = `/images/doc_icons/${iconFileName}`; @@ -93,8 +93,8 @@ export class DocPage extends React.Component { location={this.props.location} docsVersion={this.props.docsVersion} availableDocVersions={this.props.availableDocVersions} - menu={this.props.docsInfo.menu} - menuSubsectionsBySection={menuSubsectionsBySection} + sectionNameToLinks={this.props.docsInfo.getSectionNameToLinks()} + subsectionNameToLinks={subsectionNameToLinks} docsInfo={this.props.docsInfo} translate={this.props.translate} onVersionSelected={this._onVersionSelected.bind(this)} diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 52a486c2d..72e507a7b 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -1,4 +1,12 @@ -import { colors, constants as sharedConstants, MarkdownLinkBlock, utils as sharedUtils } from '@0xproject/react-shared'; +import { + ALink, + colors, + constants as sharedConstants, + Link, + LinkType, + MarkdownLinkBlock, + utils as sharedUtils, +} from '@0xproject/react-shared'; import { ObjectMap } from '@0xproject/types'; import * as _ from 'lodash'; import MenuItem from 'material-ui/MenuItem'; @@ -10,10 +18,9 @@ import { DocsContentTopBar } from 'ts/components/documentation/docs_content_top_ import { DocsLogo } from 'ts/components/documentation/docs_logo'; import { TutorialButton } from 'ts/components/documentation/tutorial_button'; import { Container } from 'ts/components/ui/container'; -import { Link } from 'ts/components/ui/link'; import { Text } from 'ts/components/ui/text'; import { Dispatcher } from 'ts/redux/dispatcher'; -import { ALink, Deco, Key, LinkType, ScreenWidths, TutorialInfo, WebsitePaths } from 'ts/types'; +import { Deco, Key, ScreenWidths, TutorialInfo, WebsitePaths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; import { utils } from 'ts/utils/utils'; diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx index b4462407f..c819cd8a1 100644 --- a/packages/website/ts/pages/landing/landing.tsx +++ b/packages/website/ts/pages/landing/landing.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors, Link } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import DocumentTitle = require('react-document-title'); @@ -8,7 +8,6 @@ import { TopBar } from 'ts/components/top_bar/top_bar'; import { CallToAction } from 'ts/components/ui/button'; import { Container } from 'ts/components/ui/container'; import { Image } from 'ts/components/ui/image'; -import { Link } from 'ts/components/ui/link'; import { Text } from 'ts/components/ui/text'; import { TypedText } from 'ts/components/ui/typed_text'; import { Dispatcher } from 'ts/redux/dispatcher'; diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx index 55f532b11..3d8b8ef52 100644 --- a/packages/website/ts/pages/wiki/wiki.tsx +++ b/packages/website/ts/pages/wiki/wiki.tsx @@ -1,12 +1,15 @@ import { + ALink, colors, constants as sharedConstants, HeaderSizes, + LinkType, MarkdownSection, NestedSidebarMenu, Styles, utils as sharedUtils, } from '@0xproject/react-shared'; +import { ObjectMap } from '@0xproject/types'; import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; import RaisedButton from 'material-ui/RaisedButton'; @@ -78,9 +81,10 @@ export class Wiki extends React.Component { window.removeEventListener('hashchange', this._onHashChanged.bind(this), false); } public render(): React.ReactNode { - const menuSubsectionsBySection = _.isUndefined(this.state.articlesBySection) + const sectionNameToLinks = _.isUndefined(this.state.articlesBySection) ? {} - : this._getMenuSubsectionsBySection(this.state.articlesBySection); + : this._getSectionNameToLinks(this.state.articlesBySection); + console.log('sectionNameToLinks', sectionNameToLinks); const mainContainersStyle: React.CSSProperties = { ...styles.mainContainers, overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden', @@ -92,7 +96,7 @@ export class Wiki extends React.Component { @@ -131,8 +135,7 @@ export class Wiki extends React.Component { onMouseLeave={this._onSidebarHoverOff.bind(this)} >
    @@ -223,15 +226,21 @@ export class Wiki extends React.Component { } } } - private _getMenuSubsectionsBySection(articlesBySection: ArticlesBySection): { [section: string]: string[] } { + private _getSectionNameToLinks(articlesBySection: ArticlesBySection): ObjectMap { const sectionNames = _.keys(articlesBySection); - const menuSubsectionsBySection: { [section: string]: string[] } = {}; + const sectionNameToLinks: ObjectMap = {}; for (const sectionName of sectionNames) { const articles = articlesBySection[sectionName]; - const articleNames = _.map(articles, article => article.title); - menuSubsectionsBySection[sectionName] = articleNames; + const articleLinks = _.map(articles, article => { + return { + to: sharedUtils.getIdFromName(article.title), + title: article.title, + type: LinkType.ReactScroll, + }; + }); + sectionNameToLinks[sectionName] = articleLinks; } - return menuSubsectionsBySection; + return sectionNameToLinks; } private _onSidebarHover(_event: React.FormEvent): void { this.setState({ diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index 7c79b271f..a3d248a9d 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -1,3 +1,4 @@ +import { ALink } from '@0xproject/react-shared'; import { ObjectMap, SignedOrder } from '@0xproject/types'; import { BigNumber } from '@0xproject/utils'; import { Provider } from 'ethereum-types'; @@ -618,22 +619,9 @@ export interface InjectedWeb3 { }; } -export interface ALink { - title: string; - to: string; - shouldOpenInNewTab?: boolean; - type?: LinkType; -} - export interface TutorialInfo { iconUrl: string; description: string; link: ALink; } - -export enum LinkType { - External = 'EXTERNAL', - ReactScroll = 'REACT_SCROLL', - ReactRoute = 'REACT_ROUTE', -} // tslint:disable:max-file-line-count diff --git a/yarn.lock b/yarn.lock index 9b9a04519..f2b7313ee 100644 --- a/yarn.lock +++ b/yarn.lock @@ -676,6 +676,16 @@ ethereum-types "^1.0.5" popper.js "1.14.3" +"@0xproject/typescript-typings@^2.0.2": + version "2.0.2" + resolved "https://registry.yarnpkg.com/@0xproject/typescript-typings/-/typescript-typings-2.0.2.tgz#1812f64e341f1d24c09b8b5a951cbde0e5fff9c2" + dependencies: + "@types/bn.js" "^4.11.0" + "@types/react" "*" + bignumber.js "~4.1.0" + ethereum-types "^1.0.8" + popper.js "1.14.3" + "@0xproject/utils@^0.7.3": version "0.7.3" resolved "https://registry.yarnpkg.com/@0xproject/utils/-/utils-0.7.3.tgz#ffa7c6da9bf0dd3e13694f185dcfc48a8981ff05" @@ -690,6 +700,23 @@ lodash "4.17.10" web3 "0.20.6" +"@0xproject/utils@^1.0.4": + version "1.0.11" + resolved "https://registry.yarnpkg.com/@0xproject/utils/-/utils-1.0.11.tgz#5b53e7d9d4dbe68e219049218c9db04e97c37429" + dependencies: + "@0xproject/types" "^1.1.1" + "@0xproject/typescript-typings" "^2.0.2" + "@types/node" "*" + abortcontroller-polyfill "^1.1.9" + bignumber.js "~4.1.0" + detect-node "2.0.3" + ethereum-types "^1.0.8" + ethereumjs-util "^5.1.1" + ethers "3.0.22" + isomorphic-fetch "^2.2.1" + js-sha3 "^0.7.0" + lodash "^4.17.5" + "@0xproject/web3-wrapper@^0.7.3": version "0.7.3" resolved "https://registry.yarnpkg.com/@0xproject/web3-wrapper/-/web3-wrapper-0.7.3.tgz#9bd50b034b92fd505b6766b6e225f014b6d08b08" -- cgit v1.2.3