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 --- 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 ++++++++++++++-------- 5 files changed, 35 insertions(+), 21 deletions(-) (limited to 'packages/website/ts/pages') 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({ -- cgit v1.2.3