diff options
Diffstat (limited to 'packages/react-shared/src/ts/components')
7 files changed, 0 insertions, 523 deletions
diff --git a/packages/react-shared/src/ts/components/anchor_title.tsx b/packages/react-shared/src/ts/components/anchor_title.tsx deleted file mode 100644 index f44354097..000000000 --- a/packages/react-shared/src/ts/components/anchor_title.tsx +++ /dev/null @@ -1,87 +0,0 @@ -import * as React from 'react'; -import { Link as ScrollLink } from 'react-scroll'; - -import { HeaderSizes, Styles } from '../types'; -import { constants } from '../utils/constants'; -import { utils } from '../utils/utils'; - -const headerSizeToScrollOffset: { [headerSize: string]: number } = { - h2: -20, - h3: 0, -}; - -export interface AnchorTitleProps { - title: string | React.ReactNode; - id: string; - headerSize: HeaderSizes; - shouldShowAnchor: boolean; -} - -export interface AnchorTitleState { - 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', - }, - h2: { - fontSize: '1.5em', - fontWeight: 400, - }, - h3: { - fontSize: '1.17em', - }, -}; - -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, - }); - } -} diff --git a/packages/react-shared/src/ts/components/markdown_code_block.tsx b/packages/react-shared/src/ts/components/markdown_code_block.tsx deleted file mode 100644 index 2070bb8e1..000000000 --- a/packages/react-shared/src/ts/components/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'; - -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) { - 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/react-shared/src/ts/components/markdown_link_block.tsx b/packages/react-shared/src/ts/components/markdown_link_block.tsx deleted file mode 100644 index 8f5862249..000000000 --- a/packages/react-shared/src/ts/components/markdown_link_block.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import * as _ from 'lodash'; -import * as React from 'react'; - -import { constants } from '../utils/constants'; -import { utils } from '../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) { - 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, constants.SCROLL_CONTAINER_ID); - utils.setUrlHash(hash); - } -} diff --git a/packages/react-shared/src/ts/components/markdown_section.tsx b/packages/react-shared/src/ts/components/markdown_section.tsx deleted file mode 100644 index d24a43dcb..000000000 --- a/packages/react-shared/src/ts/components/markdown_section.tsx +++ /dev/null @@ -1,94 +0,0 @@ -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 { HeaderSizes } from '../types'; -import { colors } from '../utils/colors'; -import { utils } from '../utils/utils'; - -import { AnchorTitle } from './anchor_title'; -import { MarkdownCodeBlock } from './markdown_code_block'; -import { MarkdownLinkBlock } from './markdown_link_block'; - -export interface MarkdownSectionProps { - sectionName: string; - markdownContent: string; - headerSize?: HeaderSizes; - githubLink?: 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() { - const { sectionName, markdownContent, headerSize, githubLink } = this.props as PropsWithDefaults; - - 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={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(githubLink) && ( - <a - href={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={markdownContent} - escapeHtml={false} - renderers={{ - code: MarkdownCodeBlock, - link: MarkdownLinkBlock, - }} - /> - </ScrollElement> - </div> - ); - } - private _setAnchorVisibility(shouldShowAnchor: boolean) { - this.setState({ - shouldShowAnchor, - }); - } -} diff --git a/packages/react-shared/src/ts/components/nested_sidebar_menu.tsx b/packages/react-shared/src/ts/components/nested_sidebar_menu.tsx deleted file mode 100644 index 2225bd197..000000000 --- a/packages/react-shared/src/ts/components/nested_sidebar_menu.tsx +++ /dev/null @@ -1,158 +0,0 @@ -import * as _ from 'lodash'; -import MenuItem from 'material-ui/MenuItem'; -import * as React from 'react'; -import { Link as ScrollLink } from 'react-scroll'; - -import { MenuSubsectionsBySection, Styles } from '../types'; -import { colors } from '../utils/colors'; -import { constants } from '../utils/constants'; -import { utils } from '../utils/utils'; - -import { VersionDropDown } from './version_drop_down'; - -export interface NestedSidebarMenuProps { - topLevelMenu: { [topLevel: string]: string[] }; - menuSubsectionsBySection: MenuSubsectionsBySection; - sidebarHeader?: React.ReactNode; - shouldDisplaySectionHeaders?: boolean; - onMenuItemClick?: () => void; - selectedVersion?: string; - versions?: string[]; - onVersionSelected?: (semver: string) => void; -} - -export interface NestedSidebarMenuState {} - -const styles: Styles = { - menuItemWithHeaders: { - minHeight: 0, - }, - menuItemWithoutHeaders: { - minHeight: 48, - }, - menuItemInnerDivWithHeaders: { - color: colors.grey800, - fontSize: 14, - lineHeight: 2, - padding: 0, - }, -}; - -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>; - } - }); - const maxWidthWithScrollbar = 307; - return ( - <div> - {this.props.sidebarHeader} - {!_.isUndefined(this.props.versions) && - !_.isUndefined(this.props.selectedVersion) && - !_.isUndefined(this.props.onVersionSelected) && ( - <div style={{ maxWidth: maxWidthWithScrollbar }}> - <VersionDropDown - selectedVersion={this.props.selectedVersion} - versions={this.props.versions} - onVersionSelected={this.props.onVersionSelected} - /> - </div> - )} - <div className="pl1">{navigation}</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); - utils.setUrlHash(id); - if (!_.isUndefined(this.props.onMenuItemClick)) { - this.props.onMenuItemClick(); - } - } -} diff --git a/packages/react-shared/src/ts/components/section_header.tsx b/packages/react-shared/src/ts/components/section_header.tsx deleted file mode 100644 index ee34a6c09..000000000 --- a/packages/react-shared/src/ts/components/section_header.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import * as React from 'react'; -import { Element as ScrollElement } from 'react-scroll'; - -import { HeaderSizes } from '../types'; -import { colors } from '../utils/colors'; -import { utils } from '../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() { - const { sectionName, headerSize } = this.props as PropsWithDefaults; - - const finalSectionName = this.props.sectionName.replace(/-/g, ' '); - 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: 'uppercase', - color: colors.grey, - fontFamily: 'Roboto Mono', - fontWeight: 300, - fontSize: 27, - }} - > - {finalSectionName} - </span> - } - id={id} - shouldShowAnchor={this.state.shouldShowAnchor} - /> - </ScrollElement> - </div> - ); - } - private _setAnchorVisibility(shouldShowAnchor: boolean) { - this.setState({ - shouldShowAnchor, - }); - } -} diff --git a/packages/react-shared/src/ts/components/version_drop_down.tsx b/packages/react-shared/src/ts/components/version_drop_down.tsx deleted file mode 100644 index d9e49b205..000000000 --- a/packages/react-shared/src/ts/components/version_drop_down.tsx +++ /dev/null @@ -1,39 +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 '../utils/utils'; - -export interface VersionDropDownProps { - selectedVersion: string; - versions: string[]; - onVersionSelected: (semver: string) => void; -} - -export 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) { - this.props.onVersionSelected(semver); - } -} |