diff options
Diffstat (limited to 'packages/react-shared/src/components')
7 files changed, 0 insertions, 484 deletions
diff --git a/packages/react-shared/src/components/anchor_title.tsx b/packages/react-shared/src/components/anchor_title.tsx deleted file mode 100644 index fccd56de7..000000000 --- a/packages/react-shared/src/components/anchor_title.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import * as React from 'react'; -import styled from 'styled-components'; - -import { Link } from '../components/link'; -import { HeaderSizes, Styles } from '../types'; -import { colors } from '../utils/colors'; - -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> - ); - } -} diff --git a/packages/react-shared/src/components/link.tsx b/packages/react-shared/src/components/link.tsx deleted file mode 100644 index 2fb19ac11..000000000 --- a/packages/react-shared/src/components/link.tsx +++ /dev/null @@ -1,150 +0,0 @@ -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 '../types'; -import { constants } from '../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 (!_.isNull(this._outerReactScrollSpan)) { - this._outerReactScrollSpan.click(); - } - } -} diff --git a/packages/react-shared/src/components/markdown_code_block.tsx b/packages/react-shared/src/components/markdown_code_block.tsx deleted file mode 100644 index 3b28424cd..000000000 --- a/packages/react-shared/src/components/markdown_code_block.tsx +++ /dev/null @@ -1,24 +0,0 @@ -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> - ); - } -} diff --git a/packages/react-shared/src/components/markdown_link_block.tsx b/packages/react-shared/src/components/markdown_link_block.tsx deleted file mode 100644 index f083a91cf..000000000 --- a/packages/react-shared/src/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): 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); - } -} diff --git a/packages/react-shared/src/components/markdown_paragraph_block.tsx b/packages/react-shared/src/components/markdown_paragraph_block.tsx deleted file mode 100644 index eeaef8571..000000000 --- a/packages/react-shared/src/components/markdown_paragraph_block.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import * as _ from 'lodash'; -import * as React from 'react'; - -import { colors } from '../utils/colors'; - -export interface MarkdownParagraphBlockProps {} - -export const MarkdownParagraphBlock: React.StatelessComponent<MarkdownParagraphBlockProps> = ({ children }) => { - return <span style={{ color: colors.greyTheme, lineHeight: '26px' }}>{children}</span>; -}; diff --git a/packages/react-shared/src/components/markdown_section.tsx b/packages/react-shared/src/components/markdown_section.tsx deleted file mode 100644 index 42c910c11..000000000 --- a/packages/react-shared/src/components/markdown_section.tsx +++ /dev/null @@ -1,106 +0,0 @@ -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 '../types'; -import { colors } from '../utils/colors'; -import { utils } from '../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 = !_.isUndefined(this.props.alternativeSectionTitle) - ? 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 }}> - {!_.isUndefined(githubLink) && ( - <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, - }); - } -} diff --git a/packages/react-shared/src/components/section_header.tsx b/packages/react-shared/src/components/section_header.tsx deleted file mode 100644 index 137b63765..000000000 --- a/packages/react-shared/src/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(): 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, - }); - } -} |