diff options
Diffstat (limited to 'packages/react-shared/src')
10 files changed, 34 insertions, 53 deletions
diff --git a/packages/react-shared/src/components/anchor_title.tsx b/packages/react-shared/src/components/anchor_title.tsx index f44354097..473b994bf 100644 --- a/packages/react-shared/src/components/anchor_title.tsx +++ b/packages/react-shared/src/components/anchor_title.tsx @@ -27,12 +27,6 @@ const styles: Styles = { transform: 'rotate(45deg)', cursor: 'pointer', }, - headers: { - WebkitMarginStart: 0, - WebkitMarginEnd: 0, - fontWeight: 'bold', - display: 'block', - }, h1: { fontSize: '1.8em', }, @@ -52,13 +46,24 @@ export class AnchorTitle extends React.Component<AnchorTitleProps, AnchorTitleSt isHovering: false, }; } - public render() { + public render(): React.ReactNode { 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="relative flex" + style={ + { + ...styles[this.props.headerSize], + fontWeight: 'bold', + display: 'block', + WebkitMarginStart: 0, + WebkitMarginEnd: 0, + } as any + } + > <div className="inline-block" style={{ paddingRight: 4 }}> {this.props.title} </div> @@ -79,7 +84,7 @@ export class AnchorTitle extends React.Component<AnchorTitleProps, AnchorTitleSt </div> ); } - private _setHoverState(isHovering: boolean) { + private _setHoverState(isHovering: boolean): void { this.setState({ isHovering, }); diff --git a/packages/react-shared/src/components/markdown_code_block.tsx b/packages/react-shared/src/components/markdown_code_block.tsx index 2070bb8e1..3b28424cd 100644 --- a/packages/react-shared/src/components/markdown_code_block.tsx +++ b/packages/react-shared/src/components/markdown_code_block.tsx @@ -1,4 +1,3 @@ -import * as _ from 'lodash'; import * as React from 'react'; import * as HighLight from 'react-highlight'; @@ -12,10 +11,10 @@ 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) { + public shouldComponentUpdate(nextProps: MarkdownCodeBlockProps, _nextState: MarkdownCodeBlockState): boolean { return nextProps.value !== this.props.value || nextProps.language !== this.props.language; } - public render() { + public render(): React.ReactNode { return ( <span style={{ fontSize: 14 }}> <HighLight className={this.props.language || 'javascript'}>{this.props.value}</HighLight> diff --git a/packages/react-shared/src/components/markdown_link_block.tsx b/packages/react-shared/src/components/markdown_link_block.tsx index 8f5862249..f083a91cf 100644 --- a/packages/react-shared/src/components/markdown_link_block.tsx +++ b/packages/react-shared/src/components/markdown_link_block.tsx @@ -13,10 +13,10 @@ 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) { + public shouldComponentUpdate(nextProps: MarkdownLinkBlockProps, _nextState: MarkdownLinkBlockState): boolean { return nextProps.href !== this.props.href; } - public render() { + 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 @@ -39,7 +39,7 @@ export class MarkdownLinkBlock extends React.Component<MarkdownLinkBlockProps, M return <a href={href}>{this.props.children}</a>; } } - private _onHashUrlClick(href: string) { + 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_section.tsx b/packages/react-shared/src/components/markdown_section.tsx index 449e8a045..3b65b3075 100644 --- a/packages/react-shared/src/components/markdown_section.tsx +++ b/packages/react-shared/src/components/markdown_section.tsx @@ -1,5 +1,4 @@ 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'; @@ -39,7 +38,7 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd shouldShowAnchor: false, }; } - public render() { + public render(): React.ReactNode { const { sectionName, markdownContent, headerSize, githubLink } = this.props as PropsWithDefaults; const id = utils.getIdFromName(sectionName); @@ -87,7 +86,7 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd </div> ); } - private _setAnchorVisibility(shouldShowAnchor: boolean) { + private _setAnchorVisibility(shouldShowAnchor: boolean): void { this.setState({ shouldShowAnchor, }); diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index f49d6fcf7..aa00d5985 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -41,12 +41,13 @@ const styles: Styles = { export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, NestedSidebarMenuState> { public static defaultProps: Partial<NestedSidebarMenuProps> = { shouldDisplaySectionHeaders: true, - onMenuItemClick: _.noop, + onMenuItemClick: _.noop.bind(_), }; - public render() { + public render(): React.ReactNode { const navigation = _.map(this.props.topLevelMenu, (menuItems: string[], sectionName: string) => { const finalSectionName = utils.convertDashesToSpaces(sectionName); if (this.props.shouldDisplaySectionHeaders) { + // tslint:disable-next-line:no-unused-variable const id = utils.getIdFromName(sectionName); return ( <div key={`section-${sectionName}`} className="py1" style={{ color: colors.grey800 }}> diff --git a/packages/react-shared/src/components/section_header.tsx b/packages/react-shared/src/components/section_header.tsx index 0224c2127..137b63765 100644 --- a/packages/react-shared/src/components/section_header.tsx +++ b/packages/react-shared/src/components/section_header.tsx @@ -32,8 +32,8 @@ export class SectionHeader extends React.Component<SectionHeaderProps, SectionHe shouldShowAnchor: false, }; } - public render() { - const { sectionName, headerSize } = this.props as PropsWithDefaults; + public render(): React.ReactNode { + const { headerSize } = this.props as PropsWithDefaults; const finalSectionName = utils.convertDashesToSpaces(this.props.sectionName); const id = utils.getIdFromName(finalSectionName); @@ -65,7 +65,7 @@ export class SectionHeader extends React.Component<SectionHeaderProps, SectionHe </div> ); } - private _setAnchorVisibility(shouldShowAnchor: boolean) { + private _setAnchorVisibility(shouldShowAnchor: boolean): void { this.setState({ shouldShowAnchor, }); diff --git a/packages/react-shared/src/components/version_drop_down.tsx b/packages/react-shared/src/components/version_drop_down.tsx index d9e49b205..e41590957 100644 --- a/packages/react-shared/src/components/version_drop_down.tsx +++ b/packages/react-shared/src/components/version_drop_down.tsx @@ -3,8 +3,6 @@ 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[]; @@ -14,7 +12,7 @@ export interface VersionDropDownProps { export interface VersionDropDownState {} export class VersionDropDown extends React.Component<VersionDropDownProps, VersionDropDownState> { - public render() { + public render(): React.ReactNode { return ( <div className="mx-auto" style={{ width: 120 }}> <DropDownMenu @@ -27,13 +25,13 @@ export class VersionDropDown extends React.Component<VersionDropDownProps, Versi </div> ); } - private _renderDropDownItems() { + private _renderDropDownItems(): React.ReactNode[] { 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) { + private _updateSelectedVersion(_e: any, _index: number, semver: string): void { this.props.onVersionSelected(semver); } } diff --git a/packages/react-shared/src/globals.d.ts b/packages/react-shared/src/globals.d.ts index 525563e23..94e63a32d 100644 --- a/packages/react-shared/src/globals.d.ts +++ b/packages/react-shared/src/globals.d.ts @@ -1,11 +1,3 @@ -declare module 'react-highlight'; - -// is-mobile declarations -declare function isMobile(): boolean; -declare module 'is-mobile' { - export = isMobile; -} - declare module '*.json' { const json: any; /* tslint:disable */ diff --git a/packages/react-shared/src/utils/colors.ts b/packages/react-shared/src/utils/colors.ts index 7613414ae..7d047a50e 100644 --- a/packages/react-shared/src/utils/colors.ts +++ b/packages/react-shared/src/utils/colors.ts @@ -22,12 +22,12 @@ const baseColors = { heroGrey: '#404040', projectsGrey: '#343333', darkestGrey: '#272727', - dharmaDarkGrey: '#252525', lightBlue: '#60A4F4', lightBlueA700: '#0091EA', linkBlue: '#1D5CDE', mediumBlue: '#488AEA', darkBlue: '#4D5481', + lightTurquois: '#aefcdc', turquois: '#058789', lightPurple: '#A81CA6', purple: '#690596', @@ -47,20 +47,7 @@ const baseColors = { darkYellow: '#caca03', }; -const appColors = { - // wallet specific colors - walletBoxShadow: 'rgba(56, 59, 137, 0.2)', - walletBorder: '#ededee', - walletDefaultItemBackground: '#fbfbfc', - walletFocusedItemBackground: '#f0f1f4', - allowanceToggleShadow: 'rgba(0, 0, 0, 0)', - allowanceToggleOffTrack: '#adadad', - allowanceToggleOnTrack: baseColors.mediumBlue, - wrapEtherConfirmationButton: baseColors.mediumBlue, -}; - export const colors = { ...materialUiColors, ...baseColors, - ...appColors, }; diff --git a/packages/react-shared/src/utils/utils.ts b/packages/react-shared/src/utils/utils.ts index 1538dd087..93c7e9f7b 100644 --- a/packages/react-shared/src/utils/utils.ts +++ b/packages/react-shared/src/utils/utils.ts @@ -7,7 +7,7 @@ import { EtherscanLinkSuffixes, Networks } from '../types'; import { constants } from './constants'; export const utils = { - setUrlHash(anchorId: string) { + setUrlHash(anchorId: string): void { window.location.hash = anchorId; }, scrollToHash(hash: string, containerId: string): void { @@ -26,11 +26,11 @@ export const utils = { const isUserOnMobile = isMobile(); return isUserOnMobile; }, - getIdFromName(name: string) { + getIdFromName(name: string): string { const id = name.replace(/ /g, '-'); return id; }, - convertDashesToSpaces(text: string) { + convertDashesToSpaces(text: string): string { return text.replace(/-/g, ' '); }, getEtherScanLinkIfExists( |