crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove react-shared package and fold it into website

Browse Source
This commit is contained in:
fabioberger
2019-07-25 11:18:42 +02:00
parent cc7dec7a99
commit ec7f9d8a63
122 changed files with 322 additions and 1458 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
packages/website/ts/components/documentation/.DS_Store vendored Normal file
View File

Binary file not shown.

2
packages/website/ts/components/documentation/docs_logo.tsx
View File

@@ -1,5 +1,5 @@
import { Link } from '@0x/react-shared';
import * as React from 'react';
import { Link } from 'ts/components/documentation/shared/link';
import { styled } from 'ts/style/theme';
import { WebsitePaths } from 'ts/types';

5
packages/website/ts/components/documentation/docs_top_bar.tsx
View File

@@ -1,11 +1,12 @@
import { ALink, colors, Link } from '@0x/react-shared';
import * as _ from 'lodash';
import Drawer from 'material-ui/Drawer';
import * as React from 'react';
import { DocsLogo } from 'ts/components/documentation/docs_logo';
import { Link } from 'ts/components/documentation/shared/link';
import { Container } from 'ts/components/ui/container';
import { Text } from 'ts/components/ui/text';
import { Deco, Key, ScreenWidths } from 'ts/types';
import { ALink, Deco, Key, ScreenWidths } from 'ts/types';
import { colors } from 'ts/utils/colors';
import { constants } from 'ts/utils/constants';
import { Translate } from 'ts/utils/translate';

9
packages/website/ts/components/documentation/overview_content.tsx
View File

@@ -1,14 +1,17 @@
import { colors, Link, MarkdownLinkBlock, utils as sharedUtils } from '@0x/react-shared';
import { ObjectMap } from '@0x/types';
import * as _ from 'lodash';
import * as React from 'react';
import * as ReactMarkdown from 'react-markdown';
import { Element as ScrollElement } from 'react-scroll';
import { Link } from 'ts/components/documentation/shared/link';
import { MarkdownLinkBlock } from 'ts/components/documentation/shared/markdown_link_block';
import { TutorialButton } from 'ts/components/documentation/tutorial_button';
import { Container } from 'ts/components/ui/container';
import { Text } from 'ts/components/ui/text';
import { Deco, Key, Package, TutorialInfo } from 'ts/types';
import { colors } from 'ts/utils/colors';
import { Translate } from 'ts/utils/translate';
import { utils } from 'ts/utils/utils';
export interface OverviewContentProps {
translate: Translate;
@@ -28,7 +31,7 @@ export class OverviewContent extends React.Component<OverviewContentProps, Overv
<Container marginTop="36px">
{_.map(this.props.tutorials, tutorialInfo => (
<ScrollElement
name={sharedUtils.getIdFromName(
name={utils.getIdFromName(
this.props.translate.get(tutorialInfo.link.title as Key, Deco.Cap),
)}
key={`tutorial-${tutorialInfo.link.title}`}
@@ -63,7 +66,7 @@ export class OverviewContent extends React.Component<OverviewContentProps, Overv
);
}
private _renderPackage(pkg: Package): React.ReactNode {
const id = sharedUtils.getIdFromName(pkg.link.title);
const id = utils.getIdFromName(pkg.link.title);
return (
<ScrollElement name={id} key={`package-${pkg.link.title}`}>
<Container className="pb2">

2
packages/website/ts/components/documentation/reference/badge.tsx
View File

@@ -1,5 +1,5 @@
import { Styles } from '@0x/react-shared';
import * as React from 'react';
import { Styles } from 'ts/types';
const styles: Styles = {
badge: {

3
packages/website/ts/components/documentation/reference/comment.tsx
View File

@@ -1,6 +1,7 @@
import { colors, MarkdownCodeBlock } from '@0x/react-shared';
import * as React from 'react';
import * as ReactMarkdown from 'react-markdown';
import { MarkdownCodeBlock } from 'ts/components/documentation/shared/markdown_code_block';
import { colors } from 'ts/utils/colors';
export interface CommentProps {
comment: string;

30
packages/website/ts/components/documentation/reference/doc_reference.tsx
View File

@@ -1,14 +1,3 @@
import {
colors,
constants as sharedConstants,
EtherscanLinkSuffixes,
HeaderSizes,
Link,
MarkdownSection,
Networks,
SectionHeader,
utils as sharedUtils,
} from '@0x/react-shared';
import {
DocAgnosticFormat,
Event,
@@ -22,10 +11,15 @@ import {
import * as _ from 'lodash';
import * as React from 'react';
import * as semver from 'semver';
import { Link } from 'ts/components/documentation/shared/link';
import { MarkdownSection } from 'ts/components/documentation/shared/markdown_section';
import { SectionHeader } from 'ts/components/documentation/shared/section_header';
import { AddressByContractName, EtherscanLinkSuffixes, HeaderSizes, Networks, SupportedDocJson } from 'ts/types';
import { colors } from 'ts/utils/colors';
import { constants } from 'ts/utils/constants';
import { utils } from 'ts/utils/utils';
import { AddressByContractName, SupportedDocJson } from '../../../types';
import { constants } from '../../../utils/constants';
import { DocsInfo } from '../../../utils/docs_info';
import { DocsInfo } from 'ts/utils/docs_info';
import { Badge } from './badge';
import { Comment } from './comment';
@@ -55,7 +49,7 @@ export class DocReference extends React.Component<DocReferenceProps, DocReferenc
public componentDidUpdate(prevProps: DocReferenceProps, _prevState: DocReferenceState): void {
if (!_.isEqual(prevProps.docAgnosticFormat, this.props.docAgnosticFormat)) {
const hash = window.location.hash.slice(1);
sharedUtils.scrollToHash(hash, sharedConstants.SCROLL_CONTAINER_ID);
utils.scrollToHash(hash, constants.SCROLL_CONTAINER_ID);
}
}
public render(): React.ReactNode {
@@ -67,7 +61,7 @@ export class DocReference extends React.Component<DocReferenceProps, DocReferenc
return (
<div>
<div id={sharedConstants.SCROLL_TOP_ID} />
<div id={constants.SCROLL_TOP_ID} />
{renderedSections}
</div>
);
@@ -250,9 +244,9 @@ export class DocReference extends React.Component<DocReferenceProps, DocReferenc
if (contractAddress === undefined) {
return null;
}
const linkIfExists = sharedUtils.getEtherScanLinkIfExists(
const linkIfExists = utils.getEtherScanLinkIfExists(
contractAddress,
sharedConstants.NETWORK_ID_BY_NAME[networkName],
constants.NETWORK_ID_BY_NAME[networkName],
EtherscanLinkSuffixes.Address,
);
return (

2
packages/website/ts/components/documentation/reference/enum.tsx
View File

@@ -1,7 +1,7 @@
import * as _ from 'lodash';
import * as React from 'react';
import { EnumValue } from '../../../types';
import { EnumValue } from 'ts/types';
export interface EnumProps {
values: EnumValue[];

6
packages/website/ts/components/documentation/reference/event_definition.tsx
View File

@@ -1,9 +1,11 @@
import { AnchorTitle, colors, HeaderSizes } from '@0x/react-shared';
import { Event, EventArg } from '@0x/types';
import * as _ from 'lodash';
import * as React from 'react';
import { AnchorTitle } from 'ts/components/documentation/shared/anchor_title';
import { HeaderSizes } from 'ts/types';
import { colors } from 'ts/utils/colors';
import { DocsInfo } from '../../../utils/docs_info';
import { DocsInfo } from 'ts/utils/docs_info';
import { Type } from './type';

2
packages/website/ts/components/documentation/reference/interface.tsx
View File

@@ -3,7 +3,7 @@ import * as React from 'react';
import { CustomType, TypeDefinitionByName } from '@0x/types';
import { DocsInfo } from '../../../utils/docs_info';
import { DocsInfo } from 'ts/utils/docs_info';
import { Signature } from './signature';
import { Type } from './type';

7
packages/website/ts/components/documentation/reference/property_block.tsx
View File

@@ -1,9 +1,10 @@
import { AnchorTitle, HeaderSizes } from '@0x/react-shared';
import { Property, TypeDefinitionByName } from '@0x/types';
import * as React from 'react';
import { AnchorTitle } from 'ts/components/documentation/shared/anchor_title';
import { constants } from '../../../utils/constants';
import { DocsInfo } from '../../../utils/docs_info';
import { HeaderSizes } from 'ts/types';
import { constants } from 'ts/utils/constants';
import { DocsInfo } from 'ts/utils/docs_info';
import { Comment } from './comment';
import { SourceLink } from './source_link';

2
packages/website/ts/components/documentation/reference/signature.tsx
View File

@@ -3,7 +3,7 @@ import * as React from 'react';
import { Parameter, Type as TypeDef, TypeDefinitionByName, TypeParameter } from '@0x/types';
import { DocsInfo } from '../../../utils/docs_info';
import { DocsInfo } from 'ts/utils/docs_info';
import { Type } from './type';

8
packages/website/ts/components/documentation/reference/signature_block.tsx
View File

@@ -1,10 +1,12 @@
import { AnchorTitle, colors, HeaderSizes, Styles } from '@0x/react-shared';
import { Parameter, SolidityMethod, TypeDefinitionByName, TypescriptFunction, TypescriptMethod } from '@0x/types';
import * as _ from 'lodash';
import * as React from 'react';
import { AnchorTitle } from 'ts/components/documentation/shared/anchor_title';
import { colors } from 'ts/utils/colors';
import { constants } from '../../../utils/constants';
import { DocsInfo } from '../../../utils/docs_info';
import { HeaderSizes, Styles } from 'ts/types';
import { constants } from 'ts/utils/constants';
import { DocsInfo } from 'ts/utils/docs_info';
import { Comment } from './comment';
import { Signature } from './signature';

4
packages/website/ts/components/documentation/reference/source_link.tsx
View File

@@ -1,6 +1,8 @@
import { colors, Link } from '@0x/react-shared';
import { Source } from '@0x/types';
import * as React from 'react';
import { colors } from 'ts/utils/colors';
import { Link } from '../shared/link';
export interface SourceLinkProps {
source: Source;

8
packages/website/ts/components/documentation/reference/type.tsx
View File

@@ -1,11 +1,13 @@
import { colors, Link, utils as sharedUtils } from '@0x/react-shared';
import { Type as TypeDef, TypeDefinitionByName, TypeDocTypes } from '@0x/types';
import { errorUtils } from '@0x/utils';
import * as _ from 'lodash';
import * as React from 'react';
import * as ReactTooltip from 'react-tooltip';
import { colors } from 'ts/utils/colors';
import { DocsInfo } from 'ts/utils/docs_info';
import { utils } from 'ts/utils/utils';
import { DocsInfo } from '../../../utils/docs_info';
import { Link } from '../shared/link';
import { Signature } from './signature';
import { TypeDefinition } from './type_definition';
@@ -223,7 +225,7 @@ export const Type: React.SFC<TypeProps> = (props: TypeProps): any => {
: `${props.docsInfo.typeSectionName}-${typeName}`;
typeName = (
<span>
{sharedUtils.isUserOnMobile() || props.isInPopover || isExportedClassReference ? (
{utils.isUserOnMobile() || props.isInPopover || isExportedClassReference ? (
<span style={{ color: colors.lightBlueA700, cursor: 'pointer' }}>{typeName}</span>
) : (
<Link to={typeDefinitionAnchorId}>

9
packages/website/ts/components/documentation/reference/type_definition.tsx
View File

@@ -1,12 +1,13 @@
import { AnchorTitle, colors, HeaderSizes } from '@0x/react-shared';
import { CustomType, CustomTypeChild, TypeDefinitionByName, TypeDocTypes } from '@0x/types';
import { errorUtils } from '@0x/utils';
import * as _ from 'lodash';
import * as React from 'react';
import { AnchorTitle } from 'ts/components/documentation/shared/anchor_title';
import { KindString, SupportedDocJson } from '../../../types';
import { constants } from '../../../utils/constants';
import { DocsInfo } from '../../../utils/docs_info';
import { HeaderSizes, KindString, SupportedDocJson } from 'ts/types';
import { colors } from 'ts/utils/colors';
import { constants } from 'ts/utils/constants';
import { DocsInfo } from 'ts/utils/docs_info';
import { Comment } from './comment';
import { CustomEnum } from './custom_enum';

BIN
packages/website/ts/components/documentation/shared/.DS_Store vendored Normal file
View File

Binary file not shown.

75
packages/website/ts/components/documentation/shared/anchor_title.tsx Normal file
View File

@@ -0,0 +1,75 @@
import * as React from 'react';
import styled from 'styled-components';
import { HeaderSizes, Styles } from 'ts/types';
import { colors } from 'ts/utils/colors';
import { Link } from './link';
export interface AnchorTitleProps {
title: string | React.ReactNode;
id: string;
headerSize: HeaderSizes;
shouldShowAnchor: boolean;
isDisabled: boolean;
}
export interface AnchorTitleState {}
const styles: Styles = {
h1: {
fontSize: '1.875em',
},
h2: {
fontSize: '1.5em',
fontWeight: 400,
},
h3: {
fontSize: '1.17em',
},
};
interface AnchorIconProps {
shouldShowAnchor: boolean;
}
const AnchorIcon = styled.i<AnchorIconProps>`
opacity: ${props => (props.shouldShowAnchor ? 1 : 0)};
&:hover {
opacity: ${props => (props.shouldShowAnchor ? 0.6 : 0)};
}
font-size: 20px;
transform: rotate(45deg);
cursor: pointer;
`;
export class AnchorTitle extends React.Component<AnchorTitleProps, AnchorTitleState> {
public static defaultProps: Partial<AnchorTitleProps> = {
isDisabled: false,
};
public render(): React.ReactNode {
return (
<div
className="relative flex"
style={
{
...styles[this.props.headerSize],
fontWeight: 'bold',
display: 'block',
WebkitMarginStart: 0,
WebkitMarginEnd: 0,
} as any
}
>
<div className="inline-block" style={{ paddingRight: 4, color: colors.darkestGrey }}>
{this.props.title}
</div>
{!this.props.isDisabled && (
<Link to={this.props.id}>
<AnchorIcon className="zmdi zmdi-link" shouldShowAnchor={this.props.shouldShowAnchor} />
</Link>
)}
</div>
);
}
}

150
packages/website/ts/components/documentation/shared/link.tsx Normal file
View File

@@ -0,0 +1,150 @@
import * as _ from 'lodash';
import * as React from 'react';
import { NavLink as ReactRounterLink } from 'react-router-dom';
import { Link as ScrollLink } from 'react-scroll';
import * as validUrl from 'valid-url';
import { LinkType } from 'ts/types';
import { constants } from 'ts/utils/constants';
export interface BaseLinkProps {
to: string;
shouldOpenInNewTab?: boolean;
className?: string;
onMouseOver?: (event: React.MouseEvent<HTMLElement>) => void;
onMouseLeave?: (event: React.MouseEvent<HTMLElement>) => void;
onMouseEnter?: (event: React.MouseEvent<HTMLElement>) => void;
textDecoration?: string;
fontColor?: string;
}
export interface ScrollLinkProps extends BaseLinkProps {
onActivityChanged?: (isActive: boolean) => void;
}
export interface ReactLinkProps extends BaseLinkProps {
activeStyle?: React.CSSProperties;
}
export type LinkProps = ReactLinkProps & ScrollLinkProps;
export interface LinkState {}
/**
* A generic link component which let's the developer render internal, external and scroll-to-hash links, and
* their associated behaviors with a single link component. Many times we want a menu including a combination of
* internal, external and scroll links and the abstraction of the differences of rendering each types of link
* makes it much easier to do so.
*/
export class Link extends React.Component<LinkProps, LinkState> {
public static defaultProps: Partial<LinkProps> = {
shouldOpenInNewTab: false,
className: '',
onMouseOver: _.noop.bind(_),
onMouseLeave: _.noop.bind(_),
onMouseEnter: _.noop.bind(_),
textDecoration: 'none',
fontColor: 'inherit',
};
private _outerReactScrollSpan: HTMLSpanElement | null;
constructor(props: LinkProps) {
super(props);
this._outerReactScrollSpan = null;
}
public render(): React.ReactNode {
let type: LinkType;
const isReactRoute = _.startsWith(this.props.to, '/');
const isExternal = validUrl.isWebUri(this.props.to) || _.startsWith(this.props.to, 'mailto:');
if (isReactRoute) {
type = LinkType.ReactRoute;
} else if (isExternal) {
type = LinkType.External;
} else {
type = LinkType.ReactScroll;
}
if (type === LinkType.ReactScroll && this.props.shouldOpenInNewTab) {
throw new Error(`Cannot open LinkType.ReactScroll links in new tab. link.to: ${this.props.to}`);
}
const styleWithDefault = {
textDecoration: this.props.textDecoration,
cursor: 'pointer',
color: this.props.fontColor,
};
switch (type) {
case LinkType.External:
return (
<a
target={this.props.shouldOpenInNewTab ? '_blank' : ''}
className={this.props.className}
style={styleWithDefault}
href={this.props.to}
onMouseOver={this.props.onMouseOver}
onMouseEnter={this.props.onMouseEnter}
onMouseLeave={this.props.onMouseLeave}
>
{this.props.children}
</a>
);
case LinkType.ReactRoute:
return (
<ReactRounterLink
to={this.props.to}
className={this.props.className}
style={styleWithDefault}
target={this.props.shouldOpenInNewTab ? '_blank' : ''}
onMouseOver={this.props.onMouseOver}
onMouseEnter={this.props.onMouseEnter}
onMouseLeave={this.props.onMouseLeave}
activeStyle={this.props.activeStyle}
>
{this.props.children}
</ReactRounterLink>
);
case LinkType.ReactScroll:
return (
<span
ref={input => (this._outerReactScrollSpan = input)}
onMouseOver={this.props.onMouseOver}
onMouseEnter={this.props.onMouseEnter}
onMouseLeave={this.props.onMouseLeave}
>
<ScrollLink
to={this.props.to}
offset={0}
spy={true}
hashSpy={true}
duration={constants.DOCS_SCROLL_DURATION_MS}
containerId={constants.SCROLL_CONTAINER_ID}
className={this.props.className}
style={styleWithDefault}
onSetActive={this._onActivityChanged.bind(this, true)}
onSetInactive={this._onActivityChanged.bind(this, false)}
>
<span onClick={this._onClickPropagateClickEventAroundScrollLink.bind(this)}>
{this.props.children}
</span>
</ScrollLink>
</span>
);
default:
throw new Error(`Unrecognized LinkType: ${type}`);
}
}
private _onActivityChanged(isActive: boolean): void {
if (this.props.onActivityChanged) {
this.props.onActivityChanged(isActive);
}
}
// HACK(fabio): For some reason, the react-scroll link decided to stop the propagation of click events.
// We do however rely on these events being propagated in certain scenarios (e.g when the link
// is within a dropdown we want to close upon being clicked). Because of this, we register the
// click event of an inner span, and pass it around the react-scroll link to an outer span.
private _onClickPropagateClickEventAroundScrollLink(): void {
if (this._outerReactScrollSpan !== null) {
this._outerReactScrollSpan.click();
}
}
}

24
packages/website/ts/components/documentation/shared/markdown_code_block.tsx Normal file
View File

@@ -0,0 +1,24 @@
import * as React from 'react';
import * as HighLight from 'react-highlight';
export interface MarkdownCodeBlockProps {
value: string;
language: string;
}
export 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): boolean {
return nextProps.value !== this.props.value || nextProps.language !== this.props.language;
}
public render(): React.ReactNode {
return (
<span style={{ fontSize: 14 }}>
<HighLight className={this.props.language || 'javascript'}>{this.props.value}</HighLight>
</span>
);
}
}

47
packages/website/ts/components/documentation/shared/markdown_link_block.tsx Normal file
View File

@@ -0,0 +1,47 @@
import * as _ from 'lodash';
import * as React from 'react';
import { constants } from 'ts/utils/constants';
import { utils } from 'ts/utils/utils';
export interface MarkdownLinkBlockProps {
href: string;
}
export 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): boolean {
return nextProps.href !== this.props.href;
}
public render(): React.ReactNode {
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): void {
const hash = href.split('#')[1];
utils.scrollToHash(hash, constants.SCROLL_CONTAINER_ID);
utils.setUrlHash(hash);
}
}

14
packages/website/ts/components/documentation/shared/markdown_paragraph_block.tsx Normal file
View File

@@ -0,0 +1,14 @@
import * as _ from 'lodash';
import * as React from 'react';
import { colors } from 'ts/utils/colors';
export interface MarkdownParagraphBlockProps {}
export const MarkdownParagraphBlock: React.StatelessComponent<MarkdownParagraphBlockProps> = ({ children }) => {
return (
<span style={{ color: colors.greyTheme, lineHeight: '26px', display: 'block', paddingBottom: 15 }}>
{children}
</span>
);
};

107
packages/website/ts/components/documentation/shared/markdown_section.tsx Normal file
View File

@@ -0,0 +1,107 @@
import * as _ from 'lodash';
import * as React from 'react';
import * as ReactMarkdown from 'react-markdown';
import { Element as ScrollElement } from 'react-scroll';
import { HeaderSizes } from 'ts/types';
import { colors } from 'ts/utils/colors';
import { utils } from 'ts/utils/utils';
import { AnchorTitle } from './anchor_title';
import { Link } from './link';
import { MarkdownCodeBlock } from './markdown_code_block';
import { MarkdownLinkBlock } from './markdown_link_block';
import { MarkdownParagraphBlock } from './markdown_paragraph_block';
export interface MarkdownSectionProps {
sectionName: string;
markdownContent: string;
headerSize?: HeaderSizes;
githubLink?: string;
alternativeSectionTitle?: string;
}
interface DefaultMarkdownSectionProps {
headerSize: HeaderSizes;
}
type PropsWithDefaults = MarkdownSectionProps & DefaultMarkdownSectionProps;
export 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(): React.ReactNode {
const { sectionName, markdownContent, headerSize, githubLink } = this.props as PropsWithDefaults;
const id = utils.getIdFromName(sectionName);
const formattedSectionName = utils.convertCamelCaseToSpaces(sectionName);
const title =
this.props.alternativeSectionTitle !== undefined
? this.props.alternativeSectionTitle
: _.capitalize(formattedSectionName);
return (
<div
className="md-px1 sm-px2 overflow-hidden"
onMouseOver={this._setAnchorVisibility.bind(this, true)}
onMouseOut={this._setAnchorVisibility.bind(this, false)}
>
<ScrollElement name={id} style={{ paddingBottom: 20 }}>
<div className="clearfix" style={{ paddingTop: 30, paddingBottom: 20 }}>
<div className="col lg-col-8 md-col-8 sm-col-12">
<span style={{ color: colors.grey700 }}>
<AnchorTitle
headerSize={headerSize}
title={title}
id={id}
shouldShowAnchor={this.state.shouldShowAnchor}
/>
</span>
</div>
<div className="col col-4 sm-hide xs-hide right-align pr3" style={{ height: 28 }}>
{githubLink !== undefined && (
<div style={{ lineHeight: 2.1 }}>
<Link to={githubLink} shouldOpenInNewTab={true} fontColor={colors.linkBlue}>
Edit on Github
</Link>
</div>
)}
</div>
</div>
<ReactMarkdown
source={markdownContent}
escapeHtml={false}
renderers={{
code: MarkdownCodeBlock,
link: MarkdownLinkBlock,
paragraph: MarkdownParagraphBlock,
}}
/>
<div
style={{
width: '100%',
height: 1,
backgroundColor: colors.grey300,
marginTop: 32,
}}
/>
</ScrollElement>
</div>
);
}
private _setAnchorVisibility(shouldShowAnchor: boolean): void {
this.setState({
shouldShowAnchor,
});
}
}

73
packages/website/ts/components/documentation/shared/section_header.tsx Normal file
View File

@@ -0,0 +1,73 @@
import * as React from 'react';
import { Element as ScrollElement } from 'react-scroll';
import { HeaderSizes } from 'ts/types';
import { colors } from 'ts/utils/colors';
import { utils } from 'ts/utils/utils';
import { AnchorTitle } from './anchor_title';
export interface SectionHeaderProps {
sectionName: string;
headerSize?: HeaderSizes;
}
interface DefaultSectionHeaderProps {
headerSize: HeaderSizes;
}
type PropsWithDefaults = SectionHeaderProps & DefaultSectionHeaderProps;
export 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(): React.ReactNode {
const { headerSize } = this.props as PropsWithDefaults;
const finalSectionName = utils.convertDashesToSpaces(this.props.sectionName);
const id = utils.getIdFromName(finalSectionName);
return (
<div
onMouseOver={this._setAnchorVisibility.bind(this, true)}
onMouseOut={this._setAnchorVisibility.bind(this, false)}
>
<ScrollElement name={id}>
<AnchorTitle
headerSize={headerSize}
title={
<span
style={{
textTransform: 'capitalize',
color: colors.grey,
fontFamily: 'Roboto Mono',
fontWeight: 300,
fontSize: 27,
}}
>
{finalSectionName}
</span>
}
id={id}
shouldShowAnchor={this.state.shouldShowAnchor}
/>
</ScrollElement>
</div>
);
}
private _setAnchorVisibility(shouldShowAnchor: boolean): void {
this.setState({
shouldShowAnchor,
});
}
}

2
packages/website/ts/components/documentation/sidebar_header.tsx
View File

@@ -1,10 +1,10 @@
import { colors } from '@0x/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
import { VersionDropDown } from 'ts/components/documentation/version_drop_down';
import { Container } from 'ts/components/ui/container';
import { Text } from 'ts/components/ui/text';
import { ScreenWidths } from 'ts/types';
import { colors } from 'ts/utils/colors';
export interface SidebarHeaderProps {
screenWidth: ScreenWidths;

5
packages/website/ts/components/documentation/tutorial_button.tsx
View File

@@ -1,12 +1,13 @@
import { colors, Link } from '@0x/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
import { Container } from 'ts/components/ui/container';
import { Text } from 'ts/components/ui/text';
import { styled } from 'ts/style/theme';
import { Deco, Key, TutorialInfo } from 'ts/types';
import { colors } from 'ts/utils/colors';
import { Translate } from 'ts/utils/translate';
import { styled } from 'ts/style/theme';
import { Link } from './shared/link';
export interface TutorialButtonProps {
className?: string;

2
packages/website/ts/components/documentation/version_drop_down.tsx
View File

@@ -1,4 +1,3 @@
import { colors } from '@0x/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
import { Button } from 'ts/components/ui/button';
@@ -6,6 +5,7 @@ import { Container } from 'ts/components/ui/container';
import { DropDown, DropdownMouseEvent } from 'ts/components/ui/drop_down';
import { Text } from 'ts/components/ui/text';
import { styled } from 'ts/style/theme';
import { colors } from 'ts/utils/colors';
interface ActiveNodeProps {
className?: string;