diff options
Diffstat (limited to 'packages/website/ts/pages/shared')
6 files changed, 77 insertions, 102 deletions
diff --git a/packages/website/ts/pages/shared/anchor_title.tsx b/packages/website/ts/pages/shared/anchor_title.tsx index 0c1e8f4b7..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,7 +75,7 @@ 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}} + style={{ ...styles.anchor, opacity }} onMouseOver={this._setHoverState.bind(this, true)} onMouseOut={this._setHoverState.bind(this, false)} /> diff --git a/packages/website/ts/pages/shared/markdown_code_block.tsx b/packages/website/ts/pages/shared/markdown_code_block.tsx index aded15f0c..be96fda16 100644 --- a/packages/website/ts/pages/shared/markdown_code_block.tsx +++ b/packages/website/ts/pages/shared/markdown_code_block.tsx @@ -17,12 +17,8 @@ export class MarkdownCodeBlock extends React.Component<MarkdownCodeBlockProps, M } public render() { return ( - <span style={{fontSize: 16}}> - <HighLight - className={this.props.language || 'javascript'} - > - {this.props.literal} - </HighLight> + <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 e81920fc3..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; @@ -41,7 +41,7 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd <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,20 +51,17 @@ 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> ); diff --git a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx index 6dc194010..849c33504 100644 --- a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx +++ b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx @@ -1,15 +1,15 @@ 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, Styles} from 'ts/types'; -import {colors} from 'ts/utils/colors'; -import {constants} from 'ts/utils/constants'; -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; @@ -44,20 +44,14 @@ 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.grey, cursor: 'pointer'}} - className="pb1" - > + <div style={{ color: colors.grey, cursor: 'pointer' }} className="pb1"> {finalSectionName.toUpperCase()} </div> </ScrollLink> @@ -65,34 +59,29 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N </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 : {}; + 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 ( @@ -109,9 +98,7 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N style={menuItemStyles} innerDivStyle={menuItemInnerDivStyles} > - <span style={{textTransform: 'capitalize'}}> - {menuItemName} - </span> + <span style={{ textTransform: 'capitalize' }}>{menuItemName}</span> </MenuItem> </ScrollLink> {this._renderMenuItemSubsections(menuItemName)} @@ -128,30 +115,34 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N } 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 + <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)} - style={{minHeight: 35}} - innerDivStyle={{paddingLeft: 36, fontSize: 14, lineHeight: '35px'}} > - {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> ); } diff --git a/packages/website/ts/pages/shared/section_header.tsx b/packages/website/ts/pages/shared/section_header.tsx index 5ea9fc681..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; @@ -34,7 +34,7 @@ export class SectionHeader extends React.Component<SectionHeaderProps, SectionHe <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} /> diff --git a/packages/website/ts/pages/shared/version_drop_down.tsx b/packages/website/ts/pages/shared/version_drop_down.tsx index 8d3322d72..b922e1048 100644 --- a/packages/website/ts/pages/shared/version_drop_down.tsx +++ b/packages/website/ts/pages/shared/version_drop_down.tsx @@ -14,7 +14,7 @@ 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} @@ -27,13 +27,7 @@ export class VersionDropDown extends React.Component<VersionDropDownProps, Versi } 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; } |