aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/pages
diff options
context:
space:
mode:
authorFabio Berger <me@fabioberger.com>2018-03-05 20:53:13 +0800
committerFabio Berger <me@fabioberger.com>2018-03-05 20:53:13 +0800
commit5a90fece8020f9be5c0f52f6ccf65dacb824b1cd (patch)
tree3597cbdbdf0fe1ef1ffadf164ce372db09812529 /packages/website/ts/pages
parent874e6678491d25aa7db300d68bdcb73863685c62 (diff)
downloaddexon-sol-tools-5a90fece8020f9be5c0f52f6ccf65dacb824b1cd.tar
dexon-sol-tools-5a90fece8020f9be5c0f52f6ccf65dacb824b1cd.tar.gz
dexon-sol-tools-5a90fece8020f9be5c0f52f6ccf65dacb824b1cd.tar.bz2
dexon-sol-tools-5a90fece8020f9be5c0f52f6ccf65dacb824b1cd.tar.lz
dexon-sol-tools-5a90fece8020f9be5c0f52f6ccf65dacb824b1cd.tar.xz
dexon-sol-tools-5a90fece8020f9be5c0f52f6ccf65dacb824b1cd.tar.zst
dexon-sol-tools-5a90fece8020f9be5c0f52f6ccf65dacb824b1cd.zip
Moved over all pages/shared components and dependencies to react-shared
Diffstat (limited to 'packages/website/ts/pages')
-rw-r--r--packages/website/ts/pages/about/about.tsx3
-rw-r--r--packages/website/ts/pages/about/profile.tsx3
-rw-r--r--packages/website/ts/pages/documentation/comment.tsx2
-rw-r--r--packages/website/ts/pages/documentation/doc_page.tsx3
-rw-r--r--packages/website/ts/pages/documentation/docs_info.ts2
-rw-r--r--packages/website/ts/pages/documentation/documentation.tsx23
-rw-r--r--packages/website/ts/pages/documentation/event_definition.tsx3
-rw-r--r--packages/website/ts/pages/documentation/method_block.tsx3
-rw-r--r--packages/website/ts/pages/documentation/source_link.tsx2
-rw-r--r--packages/website/ts/pages/documentation/type.tsx3
-rw-r--r--packages/website/ts/pages/documentation/type_definition.tsx3
-rw-r--r--packages/website/ts/pages/faq/faq.tsx3
-rw-r--r--packages/website/ts/pages/faq/question.tsx2
-rw-r--r--packages/website/ts/pages/landing/landing.tsx2
-rw-r--r--packages/website/ts/pages/shared/markdown_code_block.tsx25
-rw-r--r--packages/website/ts/pages/shared/markdown_link_block.tsx47
-rw-r--r--packages/website/ts/pages/shared/markdown_section.tsx84
-rw-r--r--packages/website/ts/pages/shared/nested_sidebar_menu.tsx177
-rw-r--r--packages/website/ts/pages/shared/section_header.tsx62
-rw-r--r--packages/website/ts/pages/shared/version_drop_down.tsx45
-rw-r--r--packages/website/ts/pages/wiki/wiki.tsx21
21 files changed, 40 insertions, 478 deletions
diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx
index 65dcdfa7b..7f1e0bf80 100644
--- a/packages/website/ts/pages/about/about.tsx
+++ b/packages/website/ts/pages/about/about.tsx
@@ -1,4 +1,4 @@
-import { Styles } from '@0xproject/react-shared';
+import { colors, Styles } from '@0xproject/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
import * as DocumentTitle from 'react-document-title';
@@ -7,7 +7,6 @@ import { TopBar } from 'ts/components/top_bar/top_bar';
import { Profile } from 'ts/pages/about/profile';
import { Dispatcher } from 'ts/redux/dispatcher';
import { ProfileInfo } from 'ts/types';
-import { colors } from 'ts/utils/colors';
import { constants } from 'ts/utils/constants';
import { Translate } from 'ts/utils/translate';
import { utils } from 'ts/utils/utils';
diff --git a/packages/website/ts/pages/about/profile.tsx b/packages/website/ts/pages/about/profile.tsx
index 6d9d10272..4361da103 100644
--- a/packages/website/ts/pages/about/profile.tsx
+++ b/packages/website/ts/pages/about/profile.tsx
@@ -1,8 +1,7 @@
-import { Styles } from '@0xproject/react-shared';
+import { colors, Styles } from '@0xproject/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
import { ProfileInfo } from 'ts/types';
-import { colors } from 'ts/utils/colors';
const IMAGE_DIMENSION = 149;
const styles: Styles = {
diff --git a/packages/website/ts/pages/documentation/comment.tsx b/packages/website/ts/pages/documentation/comment.tsx
index 5f177e97e..b8902679a 100644
--- a/packages/website/ts/pages/documentation/comment.tsx
+++ b/packages/website/ts/pages/documentation/comment.tsx
@@ -1,7 +1,7 @@
+import { MarkdownCodeBlock } from '@0xproject/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
import * as ReactMarkdown from 'react-markdown';
-import { MarkdownCodeBlock } from 'ts/pages/shared/markdown_code_block';
interface CommentProps {
comment: string;
diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx
index 2c8f1c103..b3b58c0c8 100644
--- a/packages/website/ts/pages/documentation/doc_page.tsx
+++ b/packages/website/ts/pages/documentation/doc_page.tsx
@@ -1,3 +1,4 @@
+import { MenuSubsectionsBySection } from '@0xproject/react-shared';
import findVersions = require('find-versions');
import * as _ from 'lodash';
import * as React from 'react';
@@ -7,7 +8,7 @@ import { TopBar } from 'ts/components/top_bar/top_bar';
import { DocsInfo } from 'ts/pages/documentation/docs_info';
import { Documentation } from 'ts/pages/documentation/documentation';
import { Dispatcher } from 'ts/redux/dispatcher';
-import { DocAgnosticFormat, DocPackages, DoxityDocObj, Environments, MenuSubsectionsBySection } from 'ts/types';
+import { DocAgnosticFormat, DocPackages, DoxityDocObj, Environments } from 'ts/types';
import { configs } from 'ts/utils/configs';
import { constants } from 'ts/utils/constants';
import { docUtils } from 'ts/utils/doc_utils';
diff --git a/packages/website/ts/pages/documentation/docs_info.ts b/packages/website/ts/pages/documentation/docs_info.ts
index 31e151fe8..09fb7a2bc 100644
--- a/packages/website/ts/pages/documentation/docs_info.ts
+++ b/packages/website/ts/pages/documentation/docs_info.ts
@@ -1,3 +1,4 @@
+import { MenuSubsectionsBySection } from '@0xproject/react-shared';
import compareVersions = require('compare-versions');
import * as _ from 'lodash';
import {
@@ -6,7 +7,6 @@ import {
DocsInfoConfig,
DocsMenu,
DoxityDocObj,
- MenuSubsectionsBySection,
SectionsMap,
SupportedDocJson,
TypeDocNode,
diff --git a/packages/website/ts/pages/documentation/documentation.tsx b/packages/website/ts/pages/documentation/documentation.tsx
index 88331d1a7..3229bbd93 100644
--- a/packages/website/ts/pages/documentation/documentation.tsx
+++ b/packages/website/ts/pages/documentation/documentation.tsx
@@ -1,4 +1,13 @@
-import { Styles } from '@0xproject/react-shared';
+import {
+ colors,
+ constants as sharedConstants,
+ MarkdownSection,
+ MenuSubsectionsBySection,
+ NestedSidebarMenu,
+ SectionHeader,
+ Styles,
+ utils as sharedUtils,
+} from '@0xproject/react-shared';
import * as _ from 'lodash';
import CircularProgress from 'material-ui/CircularProgress';
import * as React from 'react';
@@ -11,16 +20,12 @@ import { MethodBlock } from 'ts/pages/documentation/method_block';
import { SourceLink } from 'ts/pages/documentation/source_link';
import { Type } from 'ts/pages/documentation/type';
import { TypeDefinition } from 'ts/pages/documentation/type_definition';
-import { MarkdownSection } from 'ts/pages/shared/markdown_section';
-import { NestedSidebarMenu } from 'ts/pages/shared/nested_sidebar_menu';
-import { SectionHeader } from 'ts/pages/shared/section_header';
import {
AddressByContractName,
DocAgnosticFormat,
DoxityDocObj,
EtherscanLinkSuffixes,
Event,
- MenuSubsectionsBySection,
Networks,
Property,
SolidityMethod,
@@ -28,8 +33,6 @@ import {
TypeDefinitionByName,
TypescriptMethod,
} from 'ts/types';
-import { colors } from 'ts/utils/colors';
-import { configs } from 'ts/utils/configs';
import { constants } from 'ts/utils/constants';
import { utils } from 'ts/utils/utils';
@@ -77,7 +80,7 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
public componentDidUpdate(prevProps: DocumentationProps, prevState: DocumentationState) {
if (!_.isEqual(prevProps.docAgnosticFormat, this.props.docAgnosticFormat)) {
const hash = this.props.location.hash.slice(1);
- utils.scrollToHash(hash, configs.SCROLL_CONTAINER_ID);
+ sharedUtils.scrollToHash(hash, sharedConstants.SCROLL_CONTAINER_ID);
}
}
public render() {
@@ -117,11 +120,11 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
style={{ backgroundColor: colors.white }}
>
<div
- id={configs.SCROLL_CONTAINER_ID}
+ id={sharedConstants.SCROLL_CONTAINER_ID}
style={styles.mainContainers}
className="absolute px1"
>
- <div id={configs.SCROLL_TOP_ID} />
+ <div id={sharedConstants.SCROLL_TOP_ID} />
{this._renderDocumentation()}
</div>
</div>
diff --git a/packages/website/ts/pages/documentation/event_definition.tsx b/packages/website/ts/pages/documentation/event_definition.tsx
index aead27d78..06d8a3d79 100644
--- a/packages/website/ts/pages/documentation/event_definition.tsx
+++ b/packages/website/ts/pages/documentation/event_definition.tsx
@@ -1,10 +1,9 @@
-import { AnchorTitle, HeaderSizes } from '@0xproject/react-shared';
+import { AnchorTitle, colors, HeaderSizes } from '@0xproject/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
import { DocsInfo } from 'ts/pages/documentation/docs_info';
import { Type } from 'ts/pages/documentation/type';
import { Event, EventArg } from 'ts/types';
-import { colors } from 'ts/utils/colors';
interface EventDefinitionProps {
event: Event;
diff --git a/packages/website/ts/pages/documentation/method_block.tsx b/packages/website/ts/pages/documentation/method_block.tsx
index a1f0b38ab..a52ab55c3 100644
--- a/packages/website/ts/pages/documentation/method_block.tsx
+++ b/packages/website/ts/pages/documentation/method_block.tsx
@@ -1,4 +1,4 @@
-import { AnchorTitle, HeaderSizes, Styles } from '@0xproject/react-shared';
+import { AnchorTitle, colors, HeaderSizes, Styles } from '@0xproject/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
import { Comment } from 'ts/pages/documentation/comment';
@@ -6,7 +6,6 @@ import { DocsInfo } from 'ts/pages/documentation/docs_info';
import { MethodSignature } from 'ts/pages/documentation/method_signature';
import { SourceLink } from 'ts/pages/documentation/source_link';
import { Parameter, SolidityMethod, TypeDefinitionByName, TypescriptMethod } from 'ts/types';
-import { colors } from 'ts/utils/colors';
import { typeDocUtils } from 'ts/utils/typedoc_utils';
interface MethodBlockProps {
diff --git a/packages/website/ts/pages/documentation/source_link.tsx b/packages/website/ts/pages/documentation/source_link.tsx
index 31f80aba3..d39ad14c4 100644
--- a/packages/website/ts/pages/documentation/source_link.tsx
+++ b/packages/website/ts/pages/documentation/source_link.tsx
@@ -1,7 +1,7 @@
+import { colors } from '@0xproject/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
import { Source } from 'ts/types';
-import { colors } from 'ts/utils/colors';
interface SourceLinkProps {
source: Source;
diff --git a/packages/website/ts/pages/documentation/type.tsx b/packages/website/ts/pages/documentation/type.tsx
index 2fec4c95f..2c90a0567 100644
--- a/packages/website/ts/pages/documentation/type.tsx
+++ b/packages/website/ts/pages/documentation/type.tsx
@@ -1,4 +1,4 @@
-import { constants as sharedConstants, utils as sharedUtils } from '@0xproject/react-shared';
+import { colors, constants as sharedConstants, utils as sharedUtils } from '@0xproject/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
import { Link as ScrollLink } from 'react-scroll';
@@ -6,7 +6,6 @@ import * as ReactTooltip from 'react-tooltip';
import { DocsInfo } from 'ts/pages/documentation/docs_info';
import { TypeDefinition } from 'ts/pages/documentation/type_definition';
import { Type as TypeDef, TypeDefinitionByName, TypeDocTypes } from 'ts/types';
-import { colors } from 'ts/utils/colors';
import { constants } from 'ts/utils/constants';
import { utils } from 'ts/utils/utils';
diff --git a/packages/website/ts/pages/documentation/type_definition.tsx b/packages/website/ts/pages/documentation/type_definition.tsx
index dd83d120d..60f307c68 100644
--- a/packages/website/ts/pages/documentation/type_definition.tsx
+++ b/packages/website/ts/pages/documentation/type_definition.tsx
@@ -1,4 +1,4 @@
-import { AnchorTitle, HeaderSizes } from '@0xproject/react-shared';
+import { AnchorTitle, colors, HeaderSizes } from '@0xproject/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
import { Comment } from 'ts/pages/documentation/comment';
@@ -9,7 +9,6 @@ import { Interface } from 'ts/pages/documentation/interface';
import { MethodSignature } from 'ts/pages/documentation/method_signature';
import { Type } from 'ts/pages/documentation/type';
import { CustomType, CustomTypeChild, KindString, TypeDocTypes } from 'ts/types';
-import { colors } from 'ts/utils/colors';
import { utils } from 'ts/utils/utils';
interface TypeDefinitionProps {
diff --git a/packages/website/ts/pages/faq/faq.tsx b/packages/website/ts/pages/faq/faq.tsx
index 70d116622..1be3c3565 100644
--- a/packages/website/ts/pages/faq/faq.tsx
+++ b/packages/website/ts/pages/faq/faq.tsx
@@ -1,4 +1,4 @@
-import { Styles } from '@0xproject/react-shared';
+import { colors, Styles } from '@0xproject/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
import * as DocumentTitle from 'react-document-title';
@@ -7,7 +7,6 @@ import { TopBar } from 'ts/components/top_bar/top_bar';
import { Question } from 'ts/pages/faq/question';
import { Dispatcher } from 'ts/redux/dispatcher';
import { FAQQuestion, FAQSection, WebsitePaths } from 'ts/types';
-import { colors } from 'ts/utils/colors';
import { configs } from 'ts/utils/configs';
import { constants } from 'ts/utils/constants';
import { Translate } from 'ts/utils/translate';
diff --git a/packages/website/ts/pages/faq/question.tsx b/packages/website/ts/pages/faq/question.tsx
index 988c04bc9..240dae910 100644
--- a/packages/website/ts/pages/faq/question.tsx
+++ b/packages/website/ts/pages/faq/question.tsx
@@ -1,7 +1,7 @@
+import { colors } from '@0xproject/react-shared';
import * as _ from 'lodash';
import { Card, CardHeader, CardText } from 'material-ui/Card';
import * as React from 'react';
-import { colors } from 'ts/utils/colors';
export interface QuestionProps {
prompt: string;
diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx
index 044f0b41f..6699e4e6f 100644
--- a/packages/website/ts/pages/landing/landing.tsx
+++ b/packages/website/ts/pages/landing/landing.tsx
@@ -1,3 +1,4 @@
+import { colors } from '@0xproject/react-shared';
import * as _ from 'lodash';
import RaisedButton from 'material-ui/RaisedButton';
import * as React from 'react';
@@ -7,7 +8,6 @@ import { Footer } from 'ts/components/footer';
import { TopBar } from 'ts/components/top_bar/top_bar';
import { Dispatcher } from 'ts/redux/dispatcher';
import { Deco, Key, Language, ScreenWidths, WebsitePaths } from 'ts/types';
-import { colors } from 'ts/utils/colors';
import { constants } from 'ts/utils/constants';
import { Translate } from 'ts/utils/translate';
import { utils } from 'ts/utils/utils';
diff --git a/packages/website/ts/pages/shared/markdown_code_block.tsx b/packages/website/ts/pages/shared/markdown_code_block.tsx
deleted file mode 100644
index 6dfb74554..000000000
--- a/packages/website/ts/pages/shared/markdown_code_block.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-import * as HighLight from 'react-highlight';
-
-interface MarkdownCodeBlockProps {
- value: string;
- language: string;
-}
-
-interface MarkdownCodeBlockState {}
-
-export class MarkdownCodeBlock extends React.Component<MarkdownCodeBlockProps, MarkdownCodeBlockState> {
- // Re-rendering a codeblock causes any use selection to become de-selected. This is annoying when trying
- // to copy-paste code examples. We therefore noop re-renders on this component if it's props haven't changed.
- public shouldComponentUpdate(nextProps: MarkdownCodeBlockProps, nextState: MarkdownCodeBlockState) {
- return nextProps.value !== this.props.value || nextProps.language !== this.props.language;
- }
- public render() {
- return (
- <span style={{ fontSize: 14 }}>
- <HighLight className={this.props.language || 'javascript'}>{this.props.value}</HighLight>
- </span>
- );
- }
-}
diff --git a/packages/website/ts/pages/shared/markdown_link_block.tsx b/packages/website/ts/pages/shared/markdown_link_block.tsx
deleted file mode 100644
index b1f68c915..000000000
--- a/packages/website/ts/pages/shared/markdown_link_block.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { utils as sharedUtils } from '@0xproject/react-shared';
-import * as _ from 'lodash';
-import * as React from 'react';
-import { configs } from 'ts/utils/configs';
-import { utils } from 'ts/utils/utils';
-
-interface MarkdownLinkBlockProps {
- href: string;
-}
-
-interface MarkdownLinkBlockState {}
-
-export class MarkdownLinkBlock extends React.Component<MarkdownLinkBlockProps, MarkdownLinkBlockState> {
- // Re-rendering a linkBlock causes it to remain unclickable.
- // We therefore noop re-renders on this component if it's props haven't changed.
- public shouldComponentUpdate(nextProps: MarkdownLinkBlockProps, nextState: MarkdownLinkBlockState) {
- return nextProps.href !== this.props.href;
- }
- public render() {
- const href = this.props.href;
- const isLinkToSection = _.startsWith(href, '#');
- // If protocol is http or https, we can open in a new tab, otherwise don't for security reasons
- if (_.startsWith(href, 'http') || _.startsWith(href, 'https')) {
- return (
- <a href={href} target="_blank" rel="nofollow noreferrer noopener">
- {this.props.children}
- </a>
- );
- } else if (isLinkToSection) {
- return (
- <a
- style={{ cursor: 'pointer', textDecoration: 'underline' }}
- onClick={this._onHashUrlClick.bind(this, href)}
- >
- {this.props.children}
- </a>
- );
- } else {
- return <a href={href}>{this.props.children}</a>;
- }
- }
- private _onHashUrlClick(href: string) {
- const hash = href.split('#')[1];
- utils.scrollToHash(hash, configs.SCROLL_CONTAINER_ID);
- sharedUtils.setUrlHash(hash);
- }
-}
diff --git a/packages/website/ts/pages/shared/markdown_section.tsx b/packages/website/ts/pages/shared/markdown_section.tsx
deleted file mode 100644
index d03b30f4b..000000000
--- a/packages/website/ts/pages/shared/markdown_section.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { AnchorTitle, HeaderSizes } from '@0xproject/react-shared';
-import * as _ from 'lodash';
-import RaisedButton from 'material-ui/RaisedButton';
-import * as React from 'react';
-import * as ReactMarkdown from 'react-markdown';
-import { Element as ScrollElement } from 'react-scroll';
-import { MarkdownCodeBlock } from 'ts/pages/shared/markdown_code_block';
-import { MarkdownLinkBlock } from 'ts/pages/shared/markdown_link_block';
-import { colors } from 'ts/utils/colors';
-import { utils } from 'ts/utils/utils';
-
-interface MarkdownSectionProps {
- sectionName: string;
- markdownContent: string;
- headerSize?: HeaderSizes;
- githubLink?: string;
-}
-
-interface MarkdownSectionState {
- shouldShowAnchor: boolean;
-}
-
-export class MarkdownSection extends React.Component<MarkdownSectionProps, MarkdownSectionState> {
- public static defaultProps: Partial<MarkdownSectionProps> = {
- headerSize: HeaderSizes.H3,
- };
- constructor(props: MarkdownSectionProps) {
- super(props);
- this.state = {
- shouldShowAnchor: false,
- };
- }
- public render() {
- const sectionName = this.props.sectionName;
- const id = utils.getIdFromName(sectionName);
- return (
- <div
- className="md-px1 sm-px2 overflow-hidden"
- onMouseOver={this._setAnchorVisibility.bind(this, true)}
- onMouseOut={this._setAnchorVisibility.bind(this, false)}
- >
- <ScrollElement name={id}>
- <div className="clearfix pt3">
- <div className="col lg-col-8 md-col-8 sm-col-12">
- <span style={{ textTransform: 'capitalize', color: colors.grey700 }}>
- <AnchorTitle
- headerSize={this.props.headerSize}
- title={sectionName}
- id={id}
- shouldShowAnchor={this.state.shouldShowAnchor}
- />
- </span>
- </div>
- <div className="col col-4 sm-hide xs-hide right-align pr3" style={{ height: 28 }}>
- {!_.isUndefined(this.props.githubLink) && (
- <a
- href={this.props.githubLink}
- target="_blank"
- style={{ color: colors.linkBlue, textDecoration: 'none', lineHeight: 2.1 }}
- >
- Edit on Github
- </a>
- )}
- </div>
- </div>
- <hr style={{ border: `1px solid ${colors.lightestGrey}` }} />
- <ReactMarkdown
- source={this.props.markdownContent}
- escapeHtml={false}
- renderers={{
- code: MarkdownCodeBlock,
- link: MarkdownLinkBlock,
- }}
- />
- </ScrollElement>
- </div>
- );
- }
- private _setAnchorVisibility(shouldShowAnchor: boolean) {
- this.setState({
- shouldShowAnchor,
- });
- }
-}
diff --git a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
deleted file mode 100644
index abbd34c98..000000000
--- a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
+++ /dev/null
@@ -1,177 +0,0 @@
-import { constants, Styles, utils as sharedUtils } from '@0xproject/react-shared';
-import * as _ from 'lodash';
-import MenuItem from 'material-ui/MenuItem';
-import * as React from 'react';
-import { Link as ScrollLink } from 'react-scroll';
-import { VersionDropDown } from 'ts/pages/shared/version_drop_down';
-import { MenuSubsectionsBySection } from 'ts/types';
-import { colors } from 'ts/utils/colors';
-import { utils } from 'ts/utils/utils';
-
-interface NestedSidebarMenuProps {
- topLevelMenu: { [topLevel: string]: string[] };
- menuSubsectionsBySection: MenuSubsectionsBySection;
- title: string;
- shouldDisplaySectionHeaders?: boolean;
- onMenuItemClick?: () => void;
- selectedVersion?: string;
- versions?: string[];
-}
-
-interface NestedSidebarMenuState {}
-
-const styles: Styles = {
- menuItemWithHeaders: {
- minHeight: 0,
- },
- menuItemWithoutHeaders: {
- minHeight: 48,
- },
- menuItemInnerDivWithHeaders: {
- color: colors.grey800,
- fontSize: 14,
- lineHeight: 2,
- padding: 0,
- },
-};
-
-const titleToIcon: { [title: string]: string } = {
- '0x.js': 'zeroExJs.png',
- '0x Connect': 'connect.png',
- '0x Smart Contracts': 'contracts.png',
- Wiki: 'wiki.png',
-};
-
-export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, NestedSidebarMenuState> {
- public static defaultProps: Partial<NestedSidebarMenuProps> = {
- shouldDisplaySectionHeaders: true,
- onMenuItemClick: _.noop,
- };
- public render() {
- const navigation = _.map(this.props.topLevelMenu, (menuItems: string[], sectionName: string) => {
- const finalSectionName = sectionName.replace(/-/g, ' ');
- if (this.props.shouldDisplaySectionHeaders) {
- const id = utils.getIdFromName(sectionName);
- return (
- <div key={`section-${sectionName}`} className="py1" style={{ color: colors.grey800 }}>
- <div style={{ fontWeight: 'bold', fontSize: 15 }} className="py1">
- {finalSectionName.toUpperCase()}
- </div>
- {this._renderMenuItems(menuItems)}
- </div>
- );
- } else {
- return <div key={`section-${sectionName}`}>{this._renderMenuItems(menuItems)}</div>;
- }
- });
- return (
- <div>
- {this._renderEmblem()}
- {!_.isUndefined(this.props.versions) &&
- !_.isUndefined(this.props.selectedVersion) && (
- <VersionDropDown selectedVersion={this.props.selectedVersion} versions={this.props.versions} />
- )}
- <div className="pl1">{navigation}</div>
- </div>
- );
- }
- private _renderEmblem() {
- return (
- <div className="pt2 md-px1 sm-px2" style={{ color: colors.black, paddingBottom: 18 }}>
- <div className="flex" style={{ fontSize: 25 }}>
- <div className="robotoMono" style={{ fontWeight: 'bold' }}>
- 0x
- </div>
- <div className="pl2" style={{ lineHeight: 1.4, fontWeight: 300 }}>
- docs
- </div>
- </div>
- <div className="pl1" style={{ color: colors.grey350, paddingBottom: 9, paddingLeft: 10, height: 17 }}>
- |
- </div>
- <div className="flex">
- <div>
- <img src={`/images/doc_icons/${titleToIcon[this.props.title]}`} width="22" />
- </div>
- <div className="pl1" style={{ fontWeight: 600, fontSize: 20, lineHeight: 1.2 }}>
- {this.props.title}
- </div>
- </div>
- </div>
- );
- }
- private _renderMenuItems(menuItemNames: string[]): React.ReactNode[] {
- const menuItemStyles = this.props.shouldDisplaySectionHeaders
- ? styles.menuItemWithHeaders
- : styles.menuItemWithoutHeaders;
- const menuItemInnerDivStyles = this.props.shouldDisplaySectionHeaders ? styles.menuItemInnerDivWithHeaders : {};
- const menuItems = _.map(menuItemNames, menuItemName => {
- const id = utils.getIdFromName(menuItemName);
- return (
- <div key={menuItemName}>
- <ScrollLink
- key={`menuItem-${menuItemName}`}
- to={id}
- offset={-10}
- duration={constants.DOCS_SCROLL_DURATION_MS}
- containerId={constants.DOCS_CONTAINER_ID}
- >
- <MenuItem
- onTouchTap={this._onMenuItemClick.bind(this, menuItemName)}
- style={menuItemStyles}
- innerDivStyle={menuItemInnerDivStyles}
- >
- <span style={{ textTransform: 'capitalize' }}>{menuItemName}</span>
- </MenuItem>
- </ScrollLink>
- {this._renderMenuItemSubsections(menuItemName)}
- </div>
- );
- });
- return menuItems;
- }
- private _renderMenuItemSubsections(menuItemName: string): React.ReactNode {
- if (_.isUndefined(this.props.menuSubsectionsBySection[menuItemName])) {
- return null;
- }
- return this._renderMenuSubsectionsBySection(menuItemName, this.props.menuSubsectionsBySection[menuItemName]);
- }
- private _renderMenuSubsectionsBySection(menuItemName: string, entityNames: string[]): React.ReactNode {
- return (
- <ul style={{ margin: 0, listStyleType: 'none', paddingLeft: 0 }} key={menuItemName}>
- {_.map(entityNames, entityName => {
- const name = `${menuItemName}-${entityName}`;
- const id = utils.getIdFromName(name);
- return (
- <li key={`menuItem-${entityName}`}>
- <ScrollLink
- to={id}
- offset={0}
- duration={constants.DOCS_SCROLL_DURATION_MS}
- containerId={constants.DOCS_CONTAINER_ID}
- onTouchTap={this._onMenuItemClick.bind(this, name)}
- >
- <MenuItem
- onTouchTap={this._onMenuItemClick.bind(this, name)}
- style={{ minHeight: 35 }}
- innerDivStyle={{
- paddingLeft: 16,
- fontSize: 14,
- lineHeight: '35px',
- }}
- >
- {entityName}
- </MenuItem>
- </ScrollLink>
- </li>
- );
- })}
- </ul>
- );
- }
- private _onMenuItemClick(name: string): void {
- const id = utils.getIdFromName(name);
- sharedUtils.setUrlHash(id);
- this.props.onMenuItemClick();
- }
-}
diff --git a/packages/website/ts/pages/shared/section_header.tsx b/packages/website/ts/pages/shared/section_header.tsx
deleted file mode 100644
index 3f661a1e5..000000000
--- a/packages/website/ts/pages/shared/section_header.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { AnchorTitle, HeaderSizes } from '@0xproject/react-shared';
-import * as React from 'react';
-import { Element as ScrollElement } from 'react-scroll';
-import { colors } from 'ts/utils/colors';
-import { utils } from 'ts/utils/utils';
-
-interface SectionHeaderProps {
- sectionName: string;
- headerSize?: HeaderSizes;
-}
-
-interface SectionHeaderState {
- shouldShowAnchor: boolean;
-}
-
-export class SectionHeader extends React.Component<SectionHeaderProps, SectionHeaderState> {
- public static defaultProps: Partial<SectionHeaderProps> = {
- headerSize: HeaderSizes.H2,
- };
- constructor(props: SectionHeaderProps) {
- super(props);
- this.state = {
- shouldShowAnchor: false,
- };
- }
- public render() {
- const sectionName = this.props.sectionName.replace(/-/g, ' ');
- const id = utils.getIdFromName(sectionName);
- return (
- <div
- onMouseOver={this._setAnchorVisibility.bind(this, true)}
- onMouseOut={this._setAnchorVisibility.bind(this, false)}
- >
- <ScrollElement name={id}>
- <AnchorTitle
- headerSize={this.props.headerSize}
- title={
- <span
- style={{
- textTransform: 'uppercase',
- color: colors.grey,
- fontFamily: 'Roboto Mono',
- fontWeight: 300,
- fontSize: 27,
- }}
- >
- {sectionName}
- </span>
- }
- id={id}
- shouldShowAnchor={this.state.shouldShowAnchor}
- />
- </ScrollElement>
- </div>
- );
- }
- private _setAnchorVisibility(shouldShowAnchor: boolean) {
- this.setState({
- shouldShowAnchor,
- });
- }
-}
diff --git a/packages/website/ts/pages/shared/version_drop_down.tsx b/packages/website/ts/pages/shared/version_drop_down.tsx
deleted file mode 100644
index 1b4dbb375..000000000
--- a/packages/website/ts/pages/shared/version_drop_down.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import * as _ from 'lodash';
-import DropDownMenu from 'material-ui/DropDownMenu';
-import MenuItem from 'material-ui/MenuItem';
-import * as React from 'react';
-import { utils } from 'ts/utils/utils';
-
-interface VersionDropDownProps {
- selectedVersion: string;
- versions: string[];
-}
-
-interface VersionDropDownState {}
-
-export class VersionDropDown extends React.Component<VersionDropDownProps, VersionDropDownState> {
- public render() {
- return (
- <div className="mx-auto" style={{ width: 120 }}>
- <DropDownMenu
- maxHeight={300}
- value={this.props.selectedVersion}
- onChange={this._updateSelectedVersion.bind(this)}
- >
- {this._renderDropDownItems()}
- </DropDownMenu>
- </div>
- );
- }
- private _renderDropDownItems() {
- const items = _.map(this.props.versions, version => {
- return <MenuItem key={version} value={version} primaryText={`v${version}`} />;
- });
- return items;
- }
- private _updateSelectedVersion(e: any, index: number, semver: string) {
- let path = window.location.pathname;
- const lastChar = path[path.length - 1];
- if (_.isFinite(_.parseInt(lastChar))) {
- const pathSections = path.split('/');
- pathSections.pop();
- path = pathSections.join('/');
- }
- const baseUrl = utils.getCurrentBaseUrl();
- window.location.href = `${baseUrl}${path}/${semver}${window.location.hash}`;
- }
-}
diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx
index b22ce5826..f338ed9c2 100644
--- a/packages/website/ts/pages/wiki/wiki.tsx
+++ b/packages/website/ts/pages/wiki/wiki.tsx
@@ -1,4 +1,13 @@
-import { HeaderSizes, Styles } from '@0xproject/react-shared';
+import {
+ colors,
+ constants as sharedConstants,
+ HeaderSizes,
+ MarkdownSection,
+ NestedSidebarMenu,
+ SectionHeader,
+ Styles,
+ utils as sharedUtils,
+} from '@0xproject/react-shared';
import * as _ from 'lodash';
import CircularProgress from 'material-ui/CircularProgress';
import RaisedButton from 'material-ui/RaisedButton';
@@ -6,12 +15,8 @@ import * as React from 'react';
import DocumentTitle = require('react-document-title');
import { scroller } from 'react-scroll';
import { TopBar } from 'ts/components/top_bar/top_bar';
-import { MarkdownSection } from 'ts/pages/shared/markdown_section';
-import { NestedSidebarMenu } from 'ts/pages/shared/nested_sidebar_menu';
-import { SectionHeader } from 'ts/pages/shared/section_header';
import { Dispatcher } from 'ts/redux/dispatcher';
import { Article, ArticlesBySection, WebsitePaths } from 'ts/types';
-import { colors } from 'ts/utils/colors';
import { configs } from 'ts/utils/configs';
import { constants } from 'ts/utils/constants';
import { Translate } from 'ts/utils/translate';
@@ -136,11 +141,11 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
}}
>
<div
- id={configs.SCROLL_CONTAINER_ID}
+ id={sharedConstants.SCROLL_CONTAINER_ID}
style={{ ...mainContainersStyle, overflow: 'auto' }}
className="absolute"
>
- <div id={configs.SCROLL_TOP_ID} />
+ <div id={sharedConstants.SCROLL_TOP_ID} />
<div id="wiki" style={{ paddingRight: 2 }}>
{this._renderWikiArticles()}
</div>
@@ -215,7 +220,7 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
async () => {
await utils.onPageLoadAsync();
const hash = this.props.location.hash.slice(1);
- utils.scrollToHash(hash, configs.SCROLL_CONTAINER_ID);
+ sharedUtils.scrollToHash(hash, sharedConstants.SCROLL_CONTAINER_ID);
},
);
}