diff options
Diffstat (limited to 'packages/website/ts/pages/shared')
6 files changed, 113 insertions, 131 deletions
diff --git a/packages/website/ts/pages/shared/anchor_title.tsx b/packages/website/ts/pages/shared/anchor_title.tsx index 0a3674fd9..db5be1f59 100644 --- a/packages/website/ts/pages/shared/anchor_title.tsx +++ b/packages/website/ts/pages/shared/anchor_title.tsx @@ -1,16 +1,16 @@ import * as React from 'react'; -import {Link as ScrollLink} from 'react-scroll'; -import {HeaderSizes, Styles} from 'ts/types'; -import {constants} from 'ts/utils/constants'; -import {utils} from 'ts/utils/utils'; +import { Link as ScrollLink } from 'react-scroll'; +import { HeaderSizes, Styles } from 'ts/types'; +import { constants } from 'ts/utils/constants'; +import { utils } from 'ts/utils/utils'; -const headerSizeToScrollOffset: {[headerSize: string]: number} = { +const headerSizeToScrollOffset: { [headerSize: string]: number } = { h2: -20, h3: 0, }; interface AnchorTitleProps { - title: string|React.ReactNode; + title: string | React.ReactNode; id: string; headerSize: HeaderSizes; shouldShowAnchor: boolean; @@ -62,11 +62,8 @@ export class AnchorTitle extends React.Component<AnchorTitleProps, AnchorTitleSt 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}} - > + <div className="relative flex" style={{ ...styles[this.props.headerSize], ...styles.headers }}> + <div className="inline-block" style={{ paddingRight: 4 }}> {this.props.title} </div> <ScrollLink @@ -78,15 +75,15 @@ export class AnchorTitle extends React.Component<AnchorTitleProps, AnchorTitleSt <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)} + style={{ ...styles.anchor, opacity }} + onMouseOver={this._setHoverState.bind(this, true)} + onMouseOut={this._setHoverState.bind(this, false)} /> </ScrollLink> </div> ); } - private setHoverState(isHovering: boolean) { + 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 621e5b606..be96fda16 100644 --- a/packages/website/ts/pages/shared/markdown_code_block.tsx +++ b/packages/website/ts/pages/shared/markdown_code_block.tsx @@ -7,14 +7,19 @@ interface MarkdownCodeBlockProps { language: string; } -export function MarkdownCodeBlock(props: MarkdownCodeBlockProps) { - return ( - <span style={{fontSize: 16}}> - <HighLight - className={props.language || 'js'} - > - {props.literal} - </HighLight> - </span> - ); +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> + ); + } } diff --git a/packages/website/ts/pages/shared/markdown_section.tsx b/packages/website/ts/pages/shared/markdown_section.tsx index 8686e80b6..5487dc8cc 100644 --- a/packages/website/ts/pages/shared/markdown_section.tsx +++ b/packages/website/ts/pages/shared/markdown_section.tsx @@ -2,11 +2,11 @@ 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 {AnchorTitle} from 'ts/pages/shared/anchor_title'; -import {MarkdownCodeBlock} from 'ts/pages/shared/markdown_code_block'; -import {HeaderSizes} from 'ts/types'; -import {utils} from 'ts/utils/utils'; +import { Element as ScrollElement } from 'react-scroll'; +import { AnchorTitle } from 'ts/pages/shared/anchor_title'; +import { MarkdownCodeBlock } from 'ts/pages/shared/markdown_code_block'; +import { HeaderSizes } from 'ts/types'; +import { utils } from 'ts/utils/utils'; interface MarkdownSectionProps { sectionName: string; @@ -35,13 +35,13 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd return ( <div className="pt2 pr3 md-pl2 sm-pl3 overflow-hidden" - onMouseOver={this.setAnchorVisibility.bind(this, true)} - onMouseOut={this.setAnchorVisibility.bind(this, false)} + 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'}}> + <span style={{ textTransform: 'capitalize' }}> <AnchorTitle headerSize={this.props.headerSize} title={sectionName} @@ -51,25 +51,22 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd </span> </div> <div className="col col-4 sm-hide xs-hide py2 right-align"> - {!_.isUndefined(this.props.githubLink) && + {!_.isUndefined(this.props.githubLink) && ( <RaisedButton href={this.props.githubLink} target="_blank" label="Edit on Github" - icon={<i className="zmdi zmdi-github" style={{fontSize: 23}} />} + icon={<i className="zmdi zmdi-github" style={{ fontSize: 23 }} />} /> - } + )} </div> </div> - <ReactMarkdown - source={this.props.markdownContent} - renderers={{CodeBlock: MarkdownCodeBlock}} - /> + <ReactMarkdown source={this.props.markdownContent} renderers={{ CodeBlock: MarkdownCodeBlock }} /> </ScrollElement> </div> ); } - private setAnchorVisibility(shouldShowAnchor: boolean) { + 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 cbb863f3e..849c33504 100644 --- a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx +++ b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx @@ -1,16 +1,15 @@ import * as _ from 'lodash'; import MenuItem from 'material-ui/MenuItem'; -import {colors} from 'material-ui/styles'; import * as React from 'react'; -import {Link as ScrollLink} from 'react-scroll'; -import {VersionDropDown} from 'ts/pages/shared/version_drop_down'; -import {Docs, MenuSubsectionsBySection, Styles} from 'ts/types'; -import {constants} from 'ts/utils/constants'; -import {typeDocUtils} from 'ts/utils/typedoc_utils'; -import {utils} from 'ts/utils/utils'; +import { Link as ScrollLink } from 'react-scroll'; +import { VersionDropDown } from 'ts/pages/shared/version_drop_down'; +import { MenuSubsectionsBySection, Styles } from 'ts/types'; +import { colors } from 'ts/utils/colors'; +import { constants } from 'ts/utils/constants'; +import { utils } from 'ts/utils/utils'; interface NestedSidebarMenuProps { - topLevelMenu: {[topLevel: string]: string[]}; + topLevelMenu: { [topLevel: string]: string[] }; menuSubsectionsBySection: MenuSubsectionsBySection; shouldDisplaySectionHeaders?: boolean; onMenuItemClick?: () => void; @@ -45,55 +44,44 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N if (this.props.shouldDisplaySectionHeaders) { const id = utils.getIdFromName(sectionName); return ( - <div - key={`section-${sectionName}`} - className="py1" - > + <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.grey500, cursor: 'pointer'}} - className="pb1" - > + <div style={{ color: colors.grey, cursor: 'pointer' }} className="pb1"> {finalSectionName.toUpperCase()} </div> </ScrollLink> - {this.renderMenuItems(menuItems)} + {this._renderMenuItems(menuItems)} </div> ); } else { - return ( - <div key={`section-${sectionName}`} > - {this.renderMenuItems(menuItems)} - </div> - ); + 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} - /> - } + !_.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 : {}; + 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 ( @@ -106,57 +94,60 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N containerId={constants.DOCS_CONTAINER_ID} > <MenuItem - onTouchTap={this.onMenuItemClick.bind(this, menuItemName)} + onTouchTap={this._onMenuItemClick.bind(this, menuItemName)} style={menuItemStyles} innerDivStyle={menuItemInnerDivStyles} > - <span style={{textTransform: 'capitalize'}}> - {menuItemName} - </span> + <span style={{ textTransform: 'capitalize' }}>{menuItemName}</span> </MenuItem> </ScrollLink> - {this.renderMenuItemSubsections(menuItemName)} + {this._renderMenuItemSubsections(menuItemName)} </div> ); }); return menuItems; } - private renderMenuItemSubsections(menuItemName: string): React.ReactNode { + private _renderMenuItemSubsections(menuItemName: string): React.ReactNode { if (_.isUndefined(this.props.menuSubsectionsBySection[menuItemName])) { return null; } - return this.renderMenuSubsectionsBySection(menuItemName, this.props.menuSubsectionsBySection[menuItemName]); + return this._renderMenuSubsectionsBySection(menuItemName, this.props.menuSubsectionsBySection[menuItemName]); } - private renderMenuSubsectionsBySection(menuItemName: string, entityNames: string[]): React.ReactNode { + private _renderMenuSubsectionsBySection(menuItemName: string, entityNames: string[]): React.ReactNode { return ( - <ul style={{margin: 0, listStyleType: 'none', paddingLeft: 0}} key={menuItemName}> - {_.map(entityNames, entityName => { - const id = utils.getIdFromName(entityName); - 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, entityName)} - > - <MenuItem - onTouchTap={this.onMenuItemClick.bind(this, menuItemName)} - style={{minHeight: 35}} - innerDivStyle={{paddingLeft: 36, fontSize: 14, lineHeight: '35px'}} + <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)} > - {entityName} - </MenuItem> - </ScrollLink> - </li> - ); - })} + <MenuItem + onTouchTap={this._onMenuItemClick.bind(this, name)} + style={{ minHeight: 35 }} + innerDivStyle={{ + paddingLeft: 36, + fontSize: 14, + lineHeight: '35px', + }} + > + {entityName} + </MenuItem> + </ScrollLink> + </li> + ); + })} </ul> ); } - private onMenuItemClick(menuItemName: string): void { - const id = utils.getIdFromName(menuItemName); + 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 b5119b128..a5f5f52cf 100644 --- a/packages/website/ts/pages/shared/section_header.tsx +++ b/packages/website/ts/pages/shared/section_header.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import {Element as ScrollElement} from 'react-scroll'; -import {AnchorTitle} from 'ts/pages/shared/anchor_title'; -import {HeaderSizes} from 'ts/types'; -import {utils} from 'ts/utils/utils'; +import { Element as ScrollElement } from 'react-scroll'; +import { AnchorTitle } from 'ts/pages/shared/anchor_title'; +import { HeaderSizes } from 'ts/types'; +import { utils } from 'ts/utils/utils'; interface SectionHeaderProps { sectionName: string; @@ -28,13 +28,13 @@ export class SectionHeader extends React.Component<SectionHeaderProps, SectionHe const id = utils.getIdFromName(sectionName); return ( <div - onMouseOver={this.setAnchorVisibility.bind(this, true)} - onMouseOut={this.setAnchorVisibility.bind(this, false)} + 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>} + title={<span style={{ textTransform: 'capitalize' }}>{sectionName}</span>} id={id} shouldShowAnchor={this.state.shouldShowAnchor} /> @@ -42,7 +42,7 @@ export class SectionHeader extends React.Component<SectionHeaderProps, SectionHe </div> ); } - private setAnchorVisibility(shouldShowAnchor: boolean) { + 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 4af9a834f..b922e1048 100644 --- a/packages/website/ts/pages/shared/version_drop_down.tsx +++ b/packages/website/ts/pages/shared/version_drop_down.tsx @@ -2,8 +2,6 @@ import * as _ from 'lodash'; import DropDownMenu from 'material-ui/DropDownMenu'; import MenuItem from 'material-ui/MenuItem'; import * as React from 'react'; -import {Docs} from 'ts/types'; -import {constants} from 'ts/utils/constants'; interface VersionDropDownProps { selectedVersion: string; @@ -16,30 +14,24 @@ interface VersionDropDownState {} export class VersionDropDown extends React.Component<VersionDropDownProps, VersionDropDownState> { public render() { return ( - <div className="mx-auto" style={{width: 120}}> + <div className="mx-auto" style={{ width: 120 }}> <DropDownMenu maxHeight={300} value={this.props.selectedVersion} - onChange={this.updateSelectedVersion.bind(this)} + onChange={this._updateSelectedVersion.bind(this)} > - {this.renderDropDownItems()} + {this._renderDropDownItems()} </DropDownMenu> </div> ); } - private renderDropDownItems() { + private _renderDropDownItems() { const items = _.map(this.props.versions, version => { - return ( - <MenuItem - key={version} - value={version} - primaryText={`v${version}`} - /> - ); + return <MenuItem key={version} value={version} primaryText={`v${version}`} />; }); return items; } - private updateSelectedVersion(e: any, index: number, value: string) { + private _updateSelectedVersion(e: any, index: number, value: string) { window.location.href = `${this.props.docPath}/${value}${window.location.hash}`; } } |