aboutsummaryrefslogtreecommitdiffstats
path: root/packages/react-shared
diff options
context:
space:
mode:
Diffstat (limited to 'packages/react-shared')
-rw-r--r--packages/react-shared/CHANGELOG.json12
-rw-r--r--packages/react-shared/package.json9
-rw-r--r--packages/react-shared/src/components/anchor_title.tsx76
-rw-r--r--packages/react-shared/src/components/link.tsx131
-rw-r--r--packages/react-shared/src/components/markdown_paragraph_block.tsx10
-rw-r--r--packages/react-shared/src/components/markdown_section.tsx38
-rw-r--r--packages/react-shared/src/components/nested_sidebar_menu.tsx180
-rw-r--r--packages/react-shared/src/components/version_drop_down.tsx37
-rw-r--r--packages/react-shared/src/index.ts3
-rw-r--r--packages/react-shared/src/types.ts16
-rw-r--r--packages/react-shared/src/utils/colors.ts10
-rw-r--r--packages/react-shared/src/utils/constants.ts3
12 files changed, 319 insertions, 206 deletions
diff --git a/packages/react-shared/CHANGELOG.json b/packages/react-shared/CHANGELOG.json
index d1907e785..ee0352561 100644
--- a/packages/react-shared/CHANGELOG.json
+++ b/packages/react-shared/CHANGELOG.json
@@ -1,7 +1,6 @@
[
{
- "timestamp": 1538693146,
- "version": "1.0.15",
+ "version": "1.0.17",
"changes": [
{
"note": "Dependencies updated"
@@ -9,6 +8,15 @@
]
},
{
+ "timestamp": 1538693146,
+ "version": "1.0.16",
+ "changes": [
+ {
+ "note": "Unpublished package"
+ }
+ ]
+ },
+ {
"timestamp": 1538475601,
"version": "1.0.14",
"changes": [
diff --git a/packages/react-shared/package.json b/packages/react-shared/package.json
index afed68c42..847946eb1 100644
--- a/packages/react-shared/package.json
+++ b/packages/react-shared/package.json
@@ -33,6 +33,7 @@
"typescript": "3.0.1"
},
"dependencies": {
+ "@0xproject/types": "^1.1.2",
"@material-ui/core": "^3.0.1",
"@types/is-mobile": "0.3.0",
"@types/lodash": "4.14.104",
@@ -40,7 +41,10 @@
"@types/node": "*",
"@types/react": "*",
"@types/react-dom": "*",
+ "@types/react-router-dom": "^4.0.4",
"@types/react-scroll": "1.5.3",
+ "@types/valid-url": "^1.0.2",
+ "@types/styled-components": "^4.0.0",
"basscss": "^8.0.3",
"change-case": "^3.0.2",
"is-mobile": "^0.2.2",
@@ -50,7 +54,10 @@
"react-dom": "^16.4.2",
"react-highlight": "0xproject/react-highlight#2f40a42e0a3f0ad126f9f42d505b97b603fc7162",
"react-markdown": "^3.2.2",
- "react-scroll": "0xproject/react-scroll#similar-to-pr-330"
+ "react-scroll": "0xproject/react-scroll#similar-to-pr-330-but-with-replace-state",
+ "react-router-dom": "^4.1.1",
+ "styled-components": "^3.3.0",
+ "valid-url": "^1.0.9"
},
"publishConfig": {
"access": "public"
diff --git a/packages/react-shared/src/components/anchor_title.tsx b/packages/react-shared/src/components/anchor_title.tsx
index 8f7e4af27..bd99edcab 100644
--- a/packages/react-shared/src/components/anchor_title.tsx
+++ b/packages/react-shared/src/components/anchor_title.tsx
@@ -1,7 +1,9 @@
import * as React from 'react';
import { Link as ScrollLink } from 'react-scroll';
+import styled from 'styled-components';
import { HeaderSizes, Styles } from '../types';
+import { colors } from '../utils/colors';
import { constants } from '../utils/constants';
const headerSizeToScrollOffset: { [headerSize: string]: number } = {
@@ -14,20 +16,14 @@ export interface AnchorTitleProps {
id: string;
headerSize: HeaderSizes;
shouldShowAnchor: boolean;
+ isDisabled: boolean;
}
-export interface AnchorTitleState {
- isHovering: boolean;
-}
+export interface AnchorTitleState {}
const styles: Styles = {
- anchor: {
- fontSize: 20,
- transform: 'rotate(45deg)',
- cursor: 'pointer',
- },
h1: {
- fontSize: '1.8em',
+ fontSize: '1.875em',
},
h2: {
fontSize: '1.5em',
@@ -38,18 +34,28 @@ const styles: Styles = {
},
};
+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> {
- constructor(props: AnchorTitleProps) {
- super(props);
- this.state = {
- isHovering: false,
- };
- }
+ public static defaultProps: Partial<AnchorTitleProps> = {
+ isDisabled: false,
+ };
public render(): React.ReactNode {
- let opacity = 0;
- if (this.props.shouldShowAnchor) {
- opacity = this.state.isHovering ? 0.6 : 1;
- }
return (
<div
className="relative flex"
@@ -63,29 +69,21 @@ export class AnchorTitle extends React.Component<AnchorTitleProps, AnchorTitleSt
} as any
}
>
- <div className="inline-block" style={{ paddingRight: 4 }}>
+ <div className="inline-block" style={{ paddingRight: 4, color: colors.darkestGrey }}>
{this.props.title}
</div>
- <ScrollLink
- to={this.props.id}
- hashSpy={true}
- offset={headerSizeToScrollOffset[this.props.headerSize]}
- duration={constants.DOCS_SCROLL_DURATION_MS}
- containerId={constants.DOCS_CONTAINER_ID}
- >
- <i
- className="zmdi zmdi-link"
- style={{ ...styles.anchor, opacity }}
- onMouseOver={this._setHoverState.bind(this, true)}
- onMouseOut={this._setHoverState.bind(this, false)}
- />
- </ScrollLink>
+ {!this.props.isDisabled && (
+ <ScrollLink
+ to={this.props.id}
+ hashSpy={true}
+ offset={headerSizeToScrollOffset[this.props.headerSize]}
+ duration={constants.DOCS_SCROLL_DURATION_MS}
+ containerId={constants.SCROLL_CONTAINER_ID}
+ >
+ <AnchorIcon className="zmdi zmdi-link" shouldShowAnchor={this.props.shouldShowAnchor} />
+ </ScrollLink>
+ )}
</div>
);
}
- private _setHoverState(isHovering: boolean): void {
- this.setState({
- isHovering,
- });
- }
}
diff --git a/packages/react-shared/src/components/link.tsx b/packages/react-shared/src/components/link.tsx
new file mode 100644
index 000000000..5a456109b
--- /dev/null
+++ b/packages/react-shared/src/components/link.tsx
@@ -0,0 +1,131 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import { Link 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';
+
+interface LinkProps {
+ 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 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}
+ >
+ {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}
+ hashSpy={true}
+ duration={constants.DOCS_SCROLL_DURATION_MS}
+ containerId={constants.SCROLL_CONTAINER_ID}
+ className={this.props.className}
+ style={styleWithDefault}
+ >
+ <span onClick={this._onClickPropagateClickEventAroundScrollLink.bind(this)}>
+ {this.props.children}
+ </span>
+ </ScrollLink>
+ </span>
+ );
+ default:
+ throw new Error(`Unrecognized LinkType: ${type}`);
+ }
+ }
+ // 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_paragraph_block.tsx b/packages/react-shared/src/components/markdown_paragraph_block.tsx
new file mode 100644
index 000000000..eeaef8571
--- /dev/null
+++ b/packages/react-shared/src/components/markdown_paragraph_block.tsx
@@ -0,0 +1,10 @@
+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
index 09b214548..e6a7d80d5 100644
--- a/packages/react-shared/src/components/markdown_section.tsx
+++ b/packages/react-shared/src/components/markdown_section.tsx
@@ -8,14 +8,17 @@ 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 {
@@ -42,20 +45,23 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd
const { sectionName, markdownContent, headerSize, githubLink } = this.props as PropsWithDefaults;
const id = utils.getIdFromName(sectionName);
- const finalSectionName = utils.convertCamelCaseToSpaces(sectionName);
+ const formattedSectionName = utils.convertCamelCaseToSpaces(sectionName);
+ const title = !_.isUndefined(this.props.alternativeSectionTitle)
+ ? this.props.alternativeSectionTitle
+ : 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}>
- <div className="clearfix pt3">
+ <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={{ textTransform: 'capitalize', color: colors.grey700 }}>
+ <span style={{ color: colors.grey700 }}>
<AnchorTitle
headerSize={headerSize}
- title={finalSectionName}
+ title={_.capitalize(title)}
id={id}
shouldShowAnchor={this.state.shouldShowAnchor}
/>
@@ -63,23 +69,29 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd
</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 style={{ lineHeight: 2.1 }}>
+ <Link to={githubLink} shouldOpenInNewTab={true} fontColor={colors.linkBlue}>
+ Edit on Github
+ </Link>
+ </div>
)}
</div>
</div>
- <hr style={{ border: `1px solid ${colors.lightestGrey}` }} />
<ReactMarkdown
source={markdownContent}
escapeHtml={false}
renderers={{
code: MarkdownCodeBlock,
link: MarkdownLinkBlock,
+ paragraph: MarkdownParagraphBlock,
+ }}
+ />
+ <div
+ style={{
+ width: '100%',
+ height: 1,
+ backgroundColor: colors.grey300,
+ marginTop: 32,
}}
/>
</ScrollElement>
diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx
index c8bddb59a..f734dc654 100644
--- a/packages/react-shared/src/components/nested_sidebar_menu.tsx
+++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx
@@ -1,149 +1,119 @@
+import { ObjectMap } from '@0xproject/types';
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 { ALink, Styles } from '../types';
import { colors } from '../utils/colors';
-import { constants } from '../utils/constants';
import { utils } from '../utils/utils';
-import { VersionDropDown } from './version_drop_down';
+import { Link } from './link';
export interface NestedSidebarMenuProps {
- topLevelMenu: { [topLevel: string]: string[] };
- menuSubsectionsBySection: MenuSubsectionsBySection;
+ sectionNameToLinks: ObjectMap<ALink[]>;
sidebarHeader?: React.ReactNode;
- shouldDisplaySectionHeaders?: boolean;
- onMenuItemClick?: () => void;
- selectedVersion?: string;
- versions?: string[];
- onVersionSelected?: (semver: string) => void;
+ shouldReformatMenuItemNames?: boolean;
}
-export interface NestedSidebarMenuState {}
+export interface NestedSidebarMenuState {
+ scrolledToId?: string;
+}
const styles: Styles = {
- menuItemWithHeaders: {
+ menuItem: {
minHeight: 0,
+ paddingLeft: 8,
+ borderRadius: 6,
},
- menuItemWithoutHeaders: {
- minHeight: 48,
- },
- menuItemInnerDivWithHeaders: {
+ menuItemInnerDiv: {
color: colors.grey800,
fontSize: 14,
lineHeight: 2,
padding: 0,
+ whiteSpace: 'nowrap',
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
},
};
export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, NestedSidebarMenuState> {
public static defaultProps: Partial<NestedSidebarMenuProps> = {
- shouldDisplaySectionHeaders: true,
- onMenuItemClick: _.noop.bind(_),
+ shouldReformatMenuItemNames: true,
};
+ private _urlIntervalCheckId: number | undefined = undefined;
+ constructor(props: NestedSidebarMenuProps) {
+ super(props);
+ this.state = {};
+ }
+ public componentDidMount(): void {
+ this._urlIntervalCheckId = window.setInterval(() => {
+ const scrollId = location.hash.slice(1);
+ if (scrollId !== this.state.scrolledToId) {
+ this.setState({
+ scrolledToId: scrollId,
+ });
+ }
+ }, 200);
+ }
+ public componentWillUnmount(): void {
+ window.clearInterval(this._urlIntervalCheckId);
+ }
public render(): React.ReactNode {
- const navigation = _.map(this.props.topLevelMenu, (menuItems: string[], sectionName: string) => {
+ const navigation = _.map(this.props.sectionNameToLinks, (links: ALink[], sectionName: string) => {
const finalSectionName = utils.convertCamelCaseToSpaces(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 }}>
- <div style={{ fontWeight: 'bold', fontSize: 15 }} className="py1">
- {finalSectionName.toUpperCase()}
- </div>
- {this._renderMenuItems(menuItems)}
+ // tslint:disable-next-line:no-unused-variable
+ return (
+ <div key={`section-${sectionName}`} className="py1" style={{ color: colors.greyTheme }}>
+ <div style={{ fontSize: 14, letterSpacing: 0.5 }} className="py1 pl1">
+ {finalSectionName.toUpperCase()}
</div>
- );
- } else {
- return <div key={`section-${sectionName}`}>{this._renderMenuItems(menuItems)}</div>;
- }
+ {this._renderMenuItems(links)}
+ </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>{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 finalMenuItemName = utils.convertDashesToSpaces(menuItemName);
- const id = utils.getIdFromName(menuItemName);
+ private _renderMenuItems(links: ALink[]): React.ReactNode[] {
+ const scrolledToId = this.state.scrolledToId;
+ const menuItems = _.map(links, link => {
+ const finalMenuItemName = this.props.shouldReformatMenuItemNames
+ ? utils.convertDashesToSpaces(link.title)
+ : link.title;
+ let menuItemStyle = styles.menuItem;
+ let menuItemInnerDivStyle = styles.menuItemInnerDiv;
+ const isScrolledTo = link.to === scrolledToId;
+ if (isScrolledTo) {
+ menuItemStyle = {
+ ...menuItemStyle,
+ backgroundColor: colors.lightLinkBlue,
+ };
+ menuItemInnerDivStyle = {
+ ...menuItemInnerDivStyle,
+ color: colors.white,
+ fontWeight: 'bold',
+ };
+ }
return (
- <div key={menuItemName}>
- <ScrollLink
- key={`menuItem-${menuItemName}`}
- to={id}
- offset={0}
- hashSpy={true}
- duration={constants.DOCS_SCROLL_DURATION_MS}
- containerId={constants.DOCS_CONTAINER_ID}
- >
- <MenuItem style={menuItemStyles} innerDivStyle={menuItemInnerDivStyles}>
- <span style={{ textTransform: 'capitalize' }}>{finalMenuItemName}</span>
+ <div key={`menuItem-${finalMenuItemName}`}>
+ <Link to={link.to} shouldOpenInNewTab={link.shouldOpenInNewTab}>
+ <MenuItem style={menuItemStyle} innerDivStyle={menuItemInnerDivStyle}>
+ <span
+ style={{
+ textTransform: this.props.shouldReformatMenuItemNames ? 'capitalize' : 'none',
+ }}
+ >
+ {finalMenuItemName}
+ </span>
</MenuItem>
- </ScrollLink>
- {this._renderMenuItemSubsections(menuItemName)}
+ </Link>
</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={`menuSubsectionItem-${name}`}>
- <ScrollLink
- to={id}
- offset={0}
- hashSpy={true}
- duration={constants.DOCS_SCROLL_DURATION_MS}
- containerId={constants.DOCS_CONTAINER_ID}
- >
- <MenuItem
- style={{ minHeight: 35 }}
- innerDivStyle={{
- paddingLeft: 16,
- fontSize: 14,
- lineHeight: '35px',
- }}
- >
- {entityName}
- </MenuItem>
- </ScrollLink>
- </li>
- );
- })}
- </ul>
- );
- }
}
diff --git a/packages/react-shared/src/components/version_drop_down.tsx b/packages/react-shared/src/components/version_drop_down.tsx
deleted file mode 100644
index 5ff4bed54..000000000
--- a/packages/react-shared/src/components/version_drop_down.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import MenuItem from '@material-ui/core/MenuItem';
-import Select from '@material-ui/core/Select';
-import * as _ from 'lodash';
-import * as React from 'react';
-
-export interface VersionDropDownProps {
- selectedVersion: string;
- versions: string[];
- onVersionSelected: (semver: string) => void;
-}
-
-export interface VersionDropDownState {}
-
-export class VersionDropDown extends React.Component<VersionDropDownProps, VersionDropDownState> {
- public render(): React.ReactNode {
- return (
- <div className="mx-auto" style={{ width: 120 }}>
- <Select value={this.props.selectedVersion} onChange={this._updateSelectedVersion.bind(this)}>
- {this._renderDropDownItems()}
- </Select>
- </div>
- );
- }
- private _renderDropDownItems(): React.ReactNode[] {
- const items = _.map(this.props.versions, version => {
- return (
- <MenuItem key={version} value={version}>
- v{version}
- </MenuItem>
- );
- });
- return items;
- }
- private _updateSelectedVersion(event: React.ChangeEvent<HTMLSelectElement>): void {
- this.props.onVersionSelected(event.target.value);
- }
-}
diff --git a/packages/react-shared/src/index.ts b/packages/react-shared/src/index.ts
index 3b50c0117..e33b09f19 100644
--- a/packages/react-shared/src/index.ts
+++ b/packages/react-shared/src/index.ts
@@ -4,8 +4,9 @@ export { MarkdownCodeBlock } from './components/markdown_code_block';
export { MarkdownSection } from './components/markdown_section';
export { NestedSidebarMenu } from './components/nested_sidebar_menu';
export { SectionHeader } from './components/section_header';
+export { Link } from './components/link';
-export { HeaderSizes, Styles, MenuSubsectionsBySection, EtherscanLinkSuffixes, Networks } from './types';
+export { HeaderSizes, Styles, EtherscanLinkSuffixes, Networks, ALink } from './types';
export { utils } from './utils/utils';
export { constants } from './utils/constants';
diff --git a/packages/react-shared/src/types.ts b/packages/react-shared/src/types.ts
index 88fadcc09..9e8dcb6b6 100644
--- a/packages/react-shared/src/types.ts
+++ b/packages/react-shared/src/types.ts
@@ -8,10 +8,6 @@ export enum HeaderSizes {
H3 = 'h3',
}
-export interface MenuSubsectionsBySection {
- [section: string]: string[];
-}
-
export enum EtherscanLinkSuffixes {
Address = 'address',
Tx = 'tx',
@@ -23,3 +19,15 @@ export enum Networks {
Ropsten = 'Ropsten',
Rinkeby = 'Rinkeby',
}
+
+export enum LinkType {
+ External = 'EXTERNAL',
+ ReactScroll = 'REACT_SCROLL',
+ ReactRoute = 'REACT_ROUTE',
+}
+
+export interface ALink {
+ title: string;
+ to: string;
+ shouldOpenInNewTab?: boolean;
+}
diff --git a/packages/react-shared/src/utils/colors.ts b/packages/react-shared/src/utils/colors.ts
index 7d047a50e..a4dd7fefa 100644
--- a/packages/react-shared/src/utils/colors.ts
+++ b/packages/react-shared/src/utils/colors.ts
@@ -8,13 +8,17 @@ const baseColors = {
greyishPink: '#E6E5E5',
grey300: '#E0E0E0',
beigeWhite: '#E4E4E4',
- grey350: '#cacaca',
+ lightBgGrey: '#EDEDED',
+ grey325: '#dfdfdf',
+ grey350: '#CACACA',
grey400: '#BDBDBD',
lightGrey: '#BBBBBB',
grey500: '#9E9E9E',
grey: '#A5A5A5',
darkGrey: '#818181',
landingLinkGrey: '#919191',
+ linkSectionGrey: '#999999',
+ greyTheme: '#666666',
grey700: '#616161',
grey750: '#515151',
grey800: '#424242',
@@ -22,10 +26,12 @@ const baseColors = {
heroGrey: '#404040',
projectsGrey: '#343333',
darkestGrey: '#272727',
+ lightestBlue: '#E7F1FD',
lightBlue: '#60A4F4',
lightBlueA700: '#0091EA',
- linkBlue: '#1D5CDE',
+ lightLinkBlue: '#3289F1',
mediumBlue: '#488AEA',
+ linkBlue: '#1D5CDE',
darkBlue: '#4D5481',
lightTurquois: '#aefcdc',
turquois: '#058789',
diff --git a/packages/react-shared/src/utils/constants.ts b/packages/react-shared/src/utils/constants.ts
index 562ab776b..2dca1a078 100644
--- a/packages/react-shared/src/utils/constants.ts
+++ b/packages/react-shared/src/utils/constants.ts
@@ -2,8 +2,7 @@ import { Networks } from '../types';
export const constants = {
DOCS_SCROLL_DURATION_MS: 0,
- DOCS_CONTAINER_ID: 'documentation',
- SCROLL_CONTAINER_ID: 'documentation',
+ SCROLL_CONTAINER_ID: 'scroll_container',
SCROLL_TOP_ID: 'pageScrollTop',
NETWORK_NAME_BY_ID: {
1: Networks.Mainnet,
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-06 16:11:09 +0800