aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/pages/shared
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/pages/shared')
-rw-r--r--packages/website/ts/pages/shared/anchor_title.tsx142
-rw-r--r--packages/website/ts/pages/shared/markdown_code_block.tsx28
-rw-r--r--packages/website/ts/pages/shared/markdown_section.tsx112
-rw-r--r--packages/website/ts/pages/shared/nested_sidebar_menu.tsx268
-rw-r--r--packages/website/ts/pages/shared/section_header.tsx72
-rw-r--r--packages/website/ts/pages/shared/version_drop_down.tsx50
6 files changed, 336 insertions, 336 deletions
diff --git a/packages/website/ts/pages/shared/anchor_title.tsx b/packages/website/ts/pages/shared/anchor_title.tsx
index db5be1f59..118aa0ea5 100644
--- a/packages/website/ts/pages/shared/anchor_title.tsx
+++ b/packages/website/ts/pages/shared/anchor_title.tsx
@@ -5,87 +5,87 @@ import { constants } from 'ts/utils/constants';
import { utils } from 'ts/utils/utils';
const headerSizeToScrollOffset: { [headerSize: string]: number } = {
- h2: -20,
- h3: 0,
+ h2: -20,
+ h3: 0,
};
interface AnchorTitleProps {
- title: string | React.ReactNode;
- id: string;
- headerSize: HeaderSizes;
- shouldShowAnchor: boolean;
+ title: string | React.ReactNode;
+ id: string;
+ headerSize: HeaderSizes;
+ shouldShowAnchor: boolean;
}
interface AnchorTitleState {
- isHovering: boolean;
+ isHovering: boolean;
}
const styles: Styles = {
- anchor: {
- fontSize: 20,
- transform: 'rotate(45deg)',
- cursor: 'pointer',
- },
- headers: {
- WebkitMarginStart: 0,
- WebkitMarginEnd: 0,
- fontWeight: 'bold',
- display: 'block',
- },
- h1: {
- fontSize: '1.8em',
- WebkitMarginBefore: '0.83em',
- WebkitMarginAfter: '0.83em',
- },
- h2: {
- fontSize: '1.5em',
- WebkitMarginBefore: '0.83em',
- WebkitMarginAfter: '0.83em',
- },
- h3: {
- fontSize: '1.17em',
- WebkitMarginBefore: '1em',
- WebkitMarginAfter: '1em',
- },
+ anchor: {
+ fontSize: 20,
+ transform: 'rotate(45deg)',
+ cursor: 'pointer',
+ },
+ headers: {
+ WebkitMarginStart: 0,
+ WebkitMarginEnd: 0,
+ fontWeight: 'bold',
+ display: 'block',
+ },
+ h1: {
+ fontSize: '1.8em',
+ WebkitMarginBefore: '0.83em',
+ WebkitMarginAfter: '0.83em',
+ },
+ h2: {
+ fontSize: '1.5em',
+ WebkitMarginBefore: '0.83em',
+ WebkitMarginAfter: '0.83em',
+ },
+ h3: {
+ fontSize: '1.17em',
+ WebkitMarginBefore: '1em',
+ WebkitMarginAfter: '1em',
+ },
};
export class AnchorTitle extends React.Component<AnchorTitleProps, AnchorTitleState> {
- constructor(props: AnchorTitleProps) {
- super(props);
- this.state = {
- isHovering: false,
- };
- }
- public render() {
- let opacity = 0;
- if (this.props.shouldShowAnchor) {
- opacity = this.state.isHovering ? 0.6 : 1;
- }
- return (
- <div className="relative flex" style={{ ...styles[this.props.headerSize], ...styles.headers }}>
- <div className="inline-block" style={{ paddingRight: 4 }}>
- {this.props.title}
- </div>
- <ScrollLink
- to={this.props.id}
- offset={headerSizeToScrollOffset[this.props.headerSize]}
- duration={constants.DOCS_SCROLL_DURATION_MS}
- containerId={constants.DOCS_CONTAINER_ID}
- >
- <i
- className="zmdi zmdi-link"
- onClick={utils.setUrlHash.bind(utils, this.props.id)}
- style={{ ...styles.anchor, opacity }}
- onMouseOver={this._setHoverState.bind(this, true)}
- onMouseOut={this._setHoverState.bind(this, false)}
- />
- </ScrollLink>
- </div>
- );
- }
- private _setHoverState(isHovering: boolean) {
- this.setState({
- isHovering,
- });
- }
+ constructor(props: AnchorTitleProps) {
+ super(props);
+ this.state = {
+ isHovering: false,
+ };
+ }
+ public render() {
+ let opacity = 0;
+ if (this.props.shouldShowAnchor) {
+ opacity = this.state.isHovering ? 0.6 : 1;
+ }
+ return (
+ <div className="relative flex" style={{ ...styles[this.props.headerSize], ...styles.headers }}>
+ <div className="inline-block" style={{ paddingRight: 4 }}>
+ {this.props.title}
+ </div>
+ <ScrollLink
+ to={this.props.id}
+ offset={headerSizeToScrollOffset[this.props.headerSize]}
+ duration={constants.DOCS_SCROLL_DURATION_MS}
+ containerId={constants.DOCS_CONTAINER_ID}
+ >
+ <i
+ className="zmdi zmdi-link"
+ onClick={utils.setUrlHash.bind(utils, this.props.id)}
+ style={{ ...styles.anchor, opacity }}
+ onMouseOver={this._setHoverState.bind(this, true)}
+ onMouseOut={this._setHoverState.bind(this, false)}
+ />
+ </ScrollLink>
+ </div>
+ );
+ }
+ private _setHoverState(isHovering: boolean) {
+ this.setState({
+ isHovering,
+ });
+ }
}
diff --git a/packages/website/ts/pages/shared/markdown_code_block.tsx b/packages/website/ts/pages/shared/markdown_code_block.tsx
index be96fda16..a9d95979b 100644
--- a/packages/website/ts/pages/shared/markdown_code_block.tsx
+++ b/packages/website/ts/pages/shared/markdown_code_block.tsx
@@ -3,23 +3,23 @@ import * as React from 'react';
import * as HighLight from 'react-highlight';
interface MarkdownCodeBlockProps {
- literal: string;
- language: string;
+ literal: 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.literal !== this.props.literal || nextProps.language !== this.props.language;
- }
- public render() {
- return (
- <span style={{ fontSize: 16 }}>
- <HighLight className={this.props.language || 'javascript'}>{this.props.literal}</HighLight>
- </span>
- );
- }
+ // 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.literal !== this.props.literal || nextProps.language !== this.props.language;
+ }
+ public render() {
+ return (
+ <span style={{ fontSize: 16 }}>
+ <HighLight className={this.props.language || 'javascript'}>{this.props.literal}</HighLight>
+ </span>
+ );
+ }
}
diff --git a/packages/website/ts/pages/shared/markdown_section.tsx b/packages/website/ts/pages/shared/markdown_section.tsx
index 5487dc8cc..c875ab736 100644
--- a/packages/website/ts/pages/shared/markdown_section.tsx
+++ b/packages/website/ts/pages/shared/markdown_section.tsx
@@ -9,66 +9,66 @@ import { HeaderSizes } from 'ts/types';
import { utils } from 'ts/utils/utils';
interface MarkdownSectionProps {
- sectionName: string;
- markdownContent: string;
- headerSize?: HeaderSizes;
- githubLink?: string;
+ sectionName: string;
+ markdownContent: string;
+ headerSize?: HeaderSizes;
+ githubLink?: string;
}
interface MarkdownSectionState {
- shouldShowAnchor: boolean;
+ 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="pt2 pr3 md-pl2 sm-pl3 overflow-hidden"
- onMouseOver={this._setAnchorVisibility.bind(this, true)}
- onMouseOut={this._setAnchorVisibility.bind(this, false)}
- >
- <ScrollElement name={id}>
- <div className="clearfix">
- <div className="col lg-col-8 md-col-8 sm-col-12">
- <span style={{ textTransform: 'capitalize' }}>
- <AnchorTitle
- headerSize={this.props.headerSize}
- title={sectionName}
- id={id}
- shouldShowAnchor={this.state.shouldShowAnchor}
- />
- </span>
- </div>
- <div className="col col-4 sm-hide xs-hide py2 right-align">
- {!_.isUndefined(this.props.githubLink) && (
- <RaisedButton
- href={this.props.githubLink}
- target="_blank"
- label="Edit on Github"
- icon={<i className="zmdi zmdi-github" style={{ fontSize: 23 }} />}
- />
- )}
- </div>
- </div>
- <ReactMarkdown source={this.props.markdownContent} renderers={{ CodeBlock: MarkdownCodeBlock }} />
- </ScrollElement>
- </div>
- );
- }
- private _setAnchorVisibility(shouldShowAnchor: boolean) {
- this.setState({
- shouldShowAnchor,
- });
- }
+ 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="pt2 pr3 md-pl2 sm-pl3 overflow-hidden"
+ onMouseOver={this._setAnchorVisibility.bind(this, true)}
+ onMouseOut={this._setAnchorVisibility.bind(this, false)}
+ >
+ <ScrollElement name={id}>
+ <div className="clearfix">
+ <div className="col lg-col-8 md-col-8 sm-col-12">
+ <span style={{ textTransform: 'capitalize' }}>
+ <AnchorTitle
+ headerSize={this.props.headerSize}
+ title={sectionName}
+ id={id}
+ shouldShowAnchor={this.state.shouldShowAnchor}
+ />
+ </span>
+ </div>
+ <div className="col col-4 sm-hide xs-hide py2 right-align">
+ {!_.isUndefined(this.props.githubLink) && (
+ <RaisedButton
+ href={this.props.githubLink}
+ target="_blank"
+ label="Edit on Github"
+ icon={<i className="zmdi zmdi-github" style={{ fontSize: 23 }} />}
+ />
+ )}
+ </div>
+ </div>
+ <ReactMarkdown source={this.props.markdownContent} renderers={{ CodeBlock: MarkdownCodeBlock }} />
+ </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
index 849c33504..cd7ea68e6 100644
--- a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
+++ b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
@@ -9,146 +9,146 @@ import { constants } from 'ts/utils/constants';
import { utils } from 'ts/utils/utils';
interface NestedSidebarMenuProps {
- topLevelMenu: { [topLevel: string]: string[] };
- menuSubsectionsBySection: MenuSubsectionsBySection;
- shouldDisplaySectionHeaders?: boolean;
- onMenuItemClick?: () => void;
- selectedVersion?: string;
- versions?: string[];
- docPath?: string;
- isSectionHeaderClickable?: boolean;
+ topLevelMenu: { [topLevel: string]: string[] };
+ menuSubsectionsBySection: MenuSubsectionsBySection;
+ shouldDisplaySectionHeaders?: boolean;
+ onMenuItemClick?: () => void;
+ selectedVersion?: string;
+ versions?: string[];
+ docPath?: string;
+ isSectionHeaderClickable?: boolean;
}
interface NestedSidebarMenuState {}
const styles: Styles = {
- menuItemWithHeaders: {
- minHeight: 0,
- },
- menuItemWithoutHeaders: {
- minHeight: 48,
- },
- menuItemInnerDivWithHeaders: {
- lineHeight: 2,
- },
+ menuItemWithHeaders: {
+ minHeight: 0,
+ },
+ menuItemWithoutHeaders: {
+ minHeight: 48,
+ },
+ menuItemInnerDivWithHeaders: {
+ lineHeight: 2,
+ },
};
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">
- <ScrollLink
- to={id}
- offset={-20}
- duration={constants.DOCS_SCROLL_DURATION_MS}
- containerId={constants.DOCS_CONTAINER_ID}
- >
- <div style={{ color: colors.grey, cursor: 'pointer' }} className="pb1">
- {finalSectionName.toUpperCase()}
- </div>
- </ScrollLink>
- {this._renderMenuItems(menuItems)}
- </div>
- );
- } else {
- return <div key={`section-${sectionName}`}>{this._renderMenuItems(menuItems)}</div>;
- }
- });
- return (
- <div>
- {!_.isUndefined(this.props.versions) &&
- !_.isUndefined(this.props.selectedVersion) &&
- !_.isUndefined(this.props.docPath) && (
- <VersionDropDown
- selectedVersion={this.props.selectedVersion}
- versions={this.props.versions}
- docPath={this.props.docPath}
- />
- )}
- {navigation}
- </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: 36,
- fontSize: 14,
- lineHeight: '35px',
- }}
- >
- {entityName}
- </MenuItem>
- </ScrollLink>
- </li>
- );
- })}
- </ul>
- );
- }
- private _onMenuItemClick(name: string): void {
- const id = utils.getIdFromName(name);
- utils.setUrlHash(id);
- this.props.onMenuItemClick();
- }
+ 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">
+ <ScrollLink
+ to={id}
+ offset={-20}
+ duration={constants.DOCS_SCROLL_DURATION_MS}
+ containerId={constants.DOCS_CONTAINER_ID}
+ >
+ <div style={{ color: colors.grey, cursor: 'pointer' }} className="pb1">
+ {finalSectionName.toUpperCase()}
+ </div>
+ </ScrollLink>
+ {this._renderMenuItems(menuItems)}
+ </div>
+ );
+ } else {
+ return <div key={`section-${sectionName}`}>{this._renderMenuItems(menuItems)}</div>;
+ }
+ });
+ return (
+ <div>
+ {!_.isUndefined(this.props.versions) &&
+ !_.isUndefined(this.props.selectedVersion) &&
+ !_.isUndefined(this.props.docPath) && (
+ <VersionDropDown
+ selectedVersion={this.props.selectedVersion}
+ versions={this.props.versions}
+ docPath={this.props.docPath}
+ />
+ )}
+ {navigation}
+ </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: 36,
+ fontSize: 14,
+ lineHeight: '35px',
+ }}
+ >
+ {entityName}
+ </MenuItem>
+ </ScrollLink>
+ </li>
+ );
+ })}
+ </ul>
+ );
+ }
+ private _onMenuItemClick(name: string): void {
+ const id = utils.getIdFromName(name);
+ utils.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
index a5f5f52cf..f9aa1a5e6 100644
--- a/packages/website/ts/pages/shared/section_header.tsx
+++ b/packages/website/ts/pages/shared/section_header.tsx
@@ -5,46 +5,46 @@ import { HeaderSizes } from 'ts/types';
import { utils } from 'ts/utils/utils';
interface SectionHeaderProps {
- sectionName: string;
- headerSize?: HeaderSizes;
+ sectionName: string;
+ headerSize?: HeaderSizes;
}
interface SectionHeaderState {
- shouldShowAnchor: boolean;
+ 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: 'capitalize' }}>{sectionName}</span>}
- id={id}
- shouldShowAnchor={this.state.shouldShowAnchor}
- />
- </ScrollElement>
- </div>
- );
- }
- private _setAnchorVisibility(shouldShowAnchor: boolean) {
- this.setState({
- shouldShowAnchor,
- });
- }
+ 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: 'capitalize' }}>{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
index b922e1048..a647252ba 100644
--- a/packages/website/ts/pages/shared/version_drop_down.tsx
+++ b/packages/website/ts/pages/shared/version_drop_down.tsx
@@ -4,34 +4,34 @@ import MenuItem from 'material-ui/MenuItem';
import * as React from 'react';
interface VersionDropDownProps {
- selectedVersion: string;
- versions: string[];
- docPath: string;
+ selectedVersion: string;
+ versions: string[];
+ docPath: 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, value: string) {
- window.location.href = `${this.props.docPath}/${value}${window.location.hash}`;
- }
+ 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, value: string) {
+ window.location.href = `${this.props.docPath}/${value}${window.location.hash}`;
+ }
}