From d8c68b000b977ce940eb95c234f0ecb435c697d6 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 26 Sep 2018 13:38:22 +0100 Subject: Implement dev home --- packages/react-shared/src/utils/colors.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'packages/react-shared') diff --git a/packages/react-shared/src/utils/colors.ts b/packages/react-shared/src/utils/colors.ts index 5a20eeaa1..778a5bc20 100644 --- a/packages/react-shared/src/utils/colors.ts +++ b/packages/react-shared/src/utils/colors.ts @@ -26,8 +26,9 @@ const baseColors = { darkestGrey: '#272727', lightBlue: '#60A4F4', lightBlueA700: '#0091EA', - linkBlue: '#1D5CDE', + lightLinkBlue: '#3289F1', mediumBlue: '#488AEA', + linkBlue: '#1D5CDE', darkBlue: '#4D5481', lightTurquois: '#aefcdc', turquois: '#058789', -- cgit v1.2.3 From 12cfa6b45063b40e39a2f2e6c169fc2102843a16 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 28 Sep 2018 14:28:06 +0100 Subject: Make sidebar menu item formatting optional so package names (with hyphens) render properly --- .../src/components/nested_sidebar_menu.tsx | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) (limited to 'packages/react-shared') diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index c8bddb59a..3c61fb0b1 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -19,6 +19,7 @@ export interface NestedSidebarMenuProps { selectedVersion?: string; versions?: string[]; onVersionSelected?: (semver: string) => void; + shouldReformatMenuItemNames?: boolean; } export interface NestedSidebarMenuState {} @@ -42,16 +43,16 @@ export class NestedSidebarMenu extends React.Component = { shouldDisplaySectionHeaders: true, onMenuItemClick: _.noop.bind(_), + shouldReformatMenuItemNames: true, }; public render(): React.ReactNode { const navigation = _.map(this.props.topLevelMenu, (menuItems: string[], sectionName: string) => { const finalSectionName = utils.convertCamelCaseToSpaces(sectionName); if (this.props.shouldDisplaySectionHeaders) { // tslint:disable-next-line:no-unused-variable - const id = utils.getIdFromName(sectionName); return ( -
-
+
+
{finalSectionName.toUpperCase()}
{this._renderMenuItems(menuItems)} @@ -86,7 +87,9 @@ export class NestedSidebarMenu extends React.Component { - const finalMenuItemName = utils.convertDashesToSpaces(menuItemName); + const finalMenuItemName = this.props.shouldReformatMenuItemNames + ? utils.convertDashesToSpaces(menuItemName) + : menuItemName; const id = utils.getIdFromName(menuItemName); return (
@@ -99,7 +102,13 @@ export class NestedSidebarMenu extends React.Component - {finalMenuItemName} + + {finalMenuItemName} + {this._renderMenuItemSubsections(menuItemName)} -- cgit v1.2.3 From 54f535b37547fe02e5c832fff9c9e82458d76649 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 28 Sep 2018 15:16:17 +0100 Subject: Add back ability to listen for menu click events from the sidebar --- packages/react-shared/src/components/nested_sidebar_menu.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) (limited to 'packages/react-shared') diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 3c61fb0b1..14b233cd6 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -101,7 +101,11 @@ export class NestedSidebarMenu extends React.Component - + {entityName} @@ -155,4 +160,9 @@ export class NestedSidebarMenu extends React.Component ); } + private _onMenuItemClick(): void { + if (!_.isUndefined(this.props.onMenuItemClick)) { + this.props.onMenuItemClick(); + } + } } -- cgit v1.2.3 From 136ef3827700005b50df0e99b2ee67923d80c206 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 1 Oct 2018 22:04:21 +0100 Subject: Move colors to colors.ts file --- packages/react-shared/src/utils/colors.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'packages/react-shared') diff --git a/packages/react-shared/src/utils/colors.ts b/packages/react-shared/src/utils/colors.ts index 778a5bc20..596c17e83 100644 --- a/packages/react-shared/src/utils/colors.ts +++ b/packages/react-shared/src/utils/colors.ts @@ -9,7 +9,8 @@ const baseColors = { grey300: '#E0E0E0', beigeWhite: '#E4E4E4', lightBgGrey: '#EDEDED', - grey350: '#cacaca', + grey325: '#dfdfdf', + grey350: '#CACACA', grey400: '#BDBDBD', lightGrey: '#BBBBBB', grey500: '#9E9E9E', @@ -24,6 +25,7 @@ const baseColors = { heroGrey: '#404040', projectsGrey: '#343333', darkestGrey: '#272727', + lightestBlue: '#E7F1FD', lightBlue: '#60A4F4', lightBlueA700: '#0091EA', lightLinkBlue: '#3289F1', -- cgit v1.2.3 From 3a9791e7943c5572d24b257217bfe1558beff5fc Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 1 Oct 2018 22:26:06 +0100 Subject: Make menuSubsectionsBySection optional --- packages/react-shared/src/components/nested_sidebar_menu.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) (limited to 'packages/react-shared') diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 14b233cd6..9933f3b38 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -12,7 +12,7 @@ import { VersionDropDown } from './version_drop_down'; export interface NestedSidebarMenuProps { topLevelMenu: { [topLevel: string]: string[] }; - menuSubsectionsBySection: MenuSubsectionsBySection; + menuSubsectionsBySection?: MenuSubsectionsBySection; sidebarHeader?: React.ReactNode; shouldDisplaySectionHeaders?: boolean; onMenuItemClick?: () => void; @@ -44,6 +44,7 @@ export class NestedSidebarMenu extends React.Component { @@ -122,7 +123,10 @@ export class NestedSidebarMenu extends React.Component Date: Wed, 3 Oct 2018 16:37:59 +0100 Subject: Use same Link UI component for react-scroll links --- packages/react-shared/package.json | 5 +- packages/react-shared/src/components/link.tsx | 100 +++++++++++++++++++++ .../src/components/nested_sidebar_menu.tsx | 66 ++++++-------- packages/react-shared/src/index.ts | 11 ++- packages/react-shared/src/types.ts | 13 +++ 5 files changed, 153 insertions(+), 42 deletions(-) create mode 100644 packages/react-shared/src/components/link.tsx (limited to 'packages/react-shared') diff --git a/packages/react-shared/package.json b/packages/react-shared/package.json index 67c644bf3..eaaa57ea2 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,6 +41,7 @@ "@types/node": "*", "@types/react": "*", "@types/react-dom": "*", + "@types/react-router-dom": "^4.0.4", "@types/react-scroll": "1.5.3", "basscss": "^8.0.3", "change-case": "^3.0.2", @@ -50,7 +52,8 @@ "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", + "react-router-dom": "^4.1.1" }, "publishConfig": { "access": "public" diff --git a/packages/react-shared/src/components/link.tsx b/packages/react-shared/src/components/link.tsx new file mode 100644 index 000000000..7425b9365 --- /dev/null +++ b/packages/react-shared/src/components/link.tsx @@ -0,0 +1,100 @@ +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 { LinkType } from '../types'; +import { constants } from '../utils/constants'; + +export interface LinkProps { + to: string; + type?: LinkType; + shouldOpenInNewTab?: boolean; + style?: React.CSSProperties; + className?: string; + onMouseOver?: (event: React.MouseEvent) => void; + onMouseLeave?: (event: React.MouseEvent) => void; + onMouseEnter?: (event: React.MouseEvent) => void; + containerId?: string; +} + +/** + * A generic link component which let's the developer render internal & external links, and their associated + * behaviors with a single link component. Many times we want a menu including both internal & external links + * and this abstracts away the differences of rendering both types of links. + */ +export const Link: React.StatelessComponent = ({ + style, + className, + type, + to, + shouldOpenInNewTab, + children, + onMouseOver, + onMouseLeave, + onMouseEnter, + containerId, +}) => { + const styleWithDefault = { + textDecoration: 'none', + ...style, + }; + + switch (type) { + case LinkType.External: + return ( + + {children} + + ); + case LinkType.ReactRoute: + return ( + + {children} + + ); + case LinkType.ReactScroll: + return ( + + {children} + + ); + default: + throw new Error(`Unrecognized LinkType: ${type}`); + } +}; + +Link.defaultProps = { + type: LinkType.ReactRoute, + shouldOpenInNewTab: false, + style: {}, + className: '', + onMouseOver: _.noop.bind(_), + onMouseLeave: _.noop.bind(_), + onMouseEnter: _.noop.bind(_), + containerId: constants.DOCS_CONTAINER_ID, +}; + +Link.displayName = 'Link'; diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 9933f3b38..2242349df 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -1,18 +1,19 @@ +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, LinkType, Styles } from '../types'; import { colors } from '../utils/colors'; import { constants } from '../utils/constants'; import { utils } from '../utils/utils'; +import { Link } from './Link'; import { VersionDropDown } from './version_drop_down'; export interface NestedSidebarMenuProps { - topLevelMenu: { [topLevel: string]: string[] }; - menuSubsectionsBySection?: MenuSubsectionsBySection; + sectionNameToLinks: ObjectMap; + subsectionNameToLinks?: ObjectMap; sidebarHeader?: React.ReactNode; shouldDisplaySectionHeaders?: boolean; onMenuItemClick?: () => void; @@ -44,10 +45,10 @@ export class NestedSidebarMenu extends React.Component { + 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 @@ -56,11 +57,11 @@ export class NestedSidebarMenu extends React.Component {finalSectionName.toUpperCase()}
- {this._renderMenuItems(menuItems)} + {this._renderMenuItems(links)}
); } else { - return
{this._renderMenuItems(menuItems)}
; + return
{this._renderMenuItems(links)}
; } }); const maxWidthWithScrollbar = 307; @@ -82,26 +83,18 @@ export class NestedSidebarMenu extends React.Component ); } - private _renderMenuItems(menuItemNames: string[]): React.ReactNode[] { + private _renderMenuItems(links: ALink[]): React.ReactNode[] { const menuItemStyles = this.props.shouldDisplaySectionHeaders ? styles.menuItemWithHeaders : styles.menuItemWithoutHeaders; const menuItemInnerDivStyles = this.props.shouldDisplaySectionHeaders ? styles.menuItemInnerDivWithHeaders : {}; - const menuItems = _.map(menuItemNames, menuItemName => { + const menuItems = _.map(links, link => { const finalMenuItemName = this.props.shouldReformatMenuItemNames - ? utils.convertDashesToSpaces(menuItemName) - : menuItemName; - const id = utils.getIdFromName(menuItemName); + ? utils.convertDashesToSpaces(link.title) + : link.title; return ( -
- +
+ - - {this._renderMenuItemSubsections(menuItemName)} + + {this._renderMenuItemSubsections(link.title)}
); }); @@ -124,28 +117,21 @@ export class NestedSidebarMenu extends React.Component - {_.map(entityNames, entityName => { - const name = `${menuItemName}-${entityName}`; - const id = utils.getIdFromName(name); + {_.map(links, link => { + const name = `${menuItemName}-${link.title}`; return (
  • - + - {entityName} + {link.title} - +
    • ); })} diff --git a/packages/react-shared/src/index.ts b/packages/react-shared/src/index.ts index 3b50c0117..793214a87 100644 --- a/packages/react-shared/src/index.ts +++ b/packages/react-shared/src/index.ts @@ -4,8 +4,17 @@ 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, + MenuSubsectionsBySection, + EtherscanLinkSuffixes, + Networks, + LinkType, + 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..b3dd4045b 100644 --- a/packages/react-shared/src/types.ts +++ b/packages/react-shared/src/types.ts @@ -23,3 +23,16 @@ 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; + type?: LinkType; +} -- cgit v1.2.3 From 8d6bffa96ca26e59b0c10f9f46f6f1e03e3518e9 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 3 Oct 2018 17:03:05 +0100 Subject: Use nestedSidebarMenu component for Dev home --- .../react-shared/src/components/nested_sidebar_menu.tsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) (limited to 'packages/react-shared') diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 2242349df..c871e77d4 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -94,7 +94,12 @@ export class NestedSidebarMenu extends React.Component - + - + Date: Wed, 3 Oct 2018 17:17:16 +0100 Subject: Improve comment --- packages/react-shared/src/components/link.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'packages/react-shared') diff --git a/packages/react-shared/src/components/link.tsx b/packages/react-shared/src/components/link.tsx index 7425b9365..6200bfbd3 100644 --- a/packages/react-shared/src/components/link.tsx +++ b/packages/react-shared/src/components/link.tsx @@ -19,9 +19,10 @@ export interface LinkProps { } /** - * A generic link component which let's the developer render internal & external links, and their associated - * behaviors with a single link component. Many times we want a menu including both internal & external links - * and this abstracts away the differences of rendering both types of links. + * 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 const Link: React.StatelessComponent = ({ style, -- cgit v1.2.3 From 46764c2d3f491e7558eede0f501c767c6e57f568 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 3 Oct 2018 17:23:43 +0100 Subject: Fix linter --- packages/react-shared/src/components/nested_sidebar_menu.tsx | 6 +++--- packages/react-shared/src/index.ts | 10 +--------- packages/react-shared/src/types.ts | 4 ---- 3 files changed, 4 insertions(+), 16 deletions(-) (limited to 'packages/react-shared') diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index c871e77d4..ec42c8265 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -3,7 +3,7 @@ import * as _ from 'lodash'; import MenuItem from 'material-ui/MenuItem'; import * as React from 'react'; -import { ALink, LinkType, Styles } from '../types'; +import { ALink, Styles } from '../types'; import { colors } from '../utils/colors'; import { constants } from '../utils/constants'; import { utils } from '../utils/utils'; @@ -127,9 +127,9 @@ export class NestedSidebarMenu extends React.Component {_.map(links, link => { diff --git a/packages/react-shared/src/index.ts b/packages/react-shared/src/index.ts index 793214a87..1842e8af3 100644 --- a/packages/react-shared/src/index.ts +++ b/packages/react-shared/src/index.ts @@ -6,15 +6,7 @@ export { NestedSidebarMenu } from './components/nested_sidebar_menu'; export { SectionHeader } from './components/section_header'; export { Link } from './components/link'; -export { - HeaderSizes, - Styles, - MenuSubsectionsBySection, - EtherscanLinkSuffixes, - Networks, - LinkType, - ALink, -} from './types'; +export { HeaderSizes, Styles, EtherscanLinkSuffixes, Networks, LinkType, 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 b3dd4045b..daae7b115 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', -- cgit v1.2.3 From 7197f264945da4bfc6b1c90f1e4314ad41884d72 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 3 Oct 2018 17:25:23 +0100 Subject: rename for clarity --- packages/react-shared/src/components/nested_sidebar_menu.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'packages/react-shared') diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index ec42c8265..0e6a06a3b 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -127,9 +127,9 @@ export class NestedSidebarMenu extends React.Component {_.map(links, link => { -- cgit v1.2.3 From 60ba8d57d45aedde7a08e4638215453f899b8e0d Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 5 Oct 2018 10:13:19 +0100 Subject: Fix react warning --- packages/react-shared/src/components/nested_sidebar_menu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/react-shared') diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 0e6a06a3b..709d0ace9 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -8,7 +8,7 @@ import { colors } from '../utils/colors'; import { constants } from '../utils/constants'; import { utils } from '../utils/utils'; -import { Link } from './Link'; +import { Link } from './link'; import { VersionDropDown } from './version_drop_down'; export interface NestedSidebarMenuProps { -- cgit v1.2.3 From 055763cceb9951b038b07488ddc7ae35210f1efe Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 5 Oct 2018 11:13:33 +0100 Subject: Fix bug where wiki links in dev dropdown weren't working when on the wiki --- packages/react-shared/src/components/link.tsx | 154 ++++++++++++++------------ 1 file changed, 82 insertions(+), 72 deletions(-) (limited to 'packages/react-shared') diff --git a/packages/react-shared/src/components/link.tsx b/packages/react-shared/src/components/link.tsx index 6200bfbd3..7b22dc4fa 100644 --- a/packages/react-shared/src/components/link.tsx +++ b/packages/react-shared/src/components/link.tsx @@ -18,84 +18,94 @@ export interface LinkProps { containerId?: 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 const Link: React.StatelessComponent = ({ - style, - className, - type, - to, - shouldOpenInNewTab, - children, - onMouseOver, - onMouseLeave, - onMouseEnter, - containerId, -}) => { - const styleWithDefault = { - textDecoration: 'none', - ...style, +export class Link extends React.Component { + public static defaultProps: Partial = { + type: LinkType.ReactRoute, + shouldOpenInNewTab: false, + style: {}, + className: '', + onMouseOver: _.noop.bind(_), + onMouseLeave: _.noop.bind(_), + onMouseEnter: _.noop.bind(_), + containerId: constants.DOCS_CONTAINER_ID, }; - - switch (type) { - case LinkType.External: - return ( - - {children} - - ); - case LinkType.ReactRoute: - return ( - - {children} - - ); - case LinkType.ReactScroll: - return ( - - {children} - - ); - default: - throw new Error(`Unrecognized LinkType: ${type}`); + private _outerReactScrollSpan: HTMLSpanElement | null; + constructor(props: LinkProps) { + super(props); + this._outerReactScrollSpan = null; } -}; - -Link.defaultProps = { - type: LinkType.ReactRoute, - shouldOpenInNewTab: false, - style: {}, - className: '', - onMouseOver: _.noop.bind(_), - onMouseLeave: _.noop.bind(_), - onMouseEnter: _.noop.bind(_), - containerId: constants.DOCS_CONTAINER_ID, -}; + public render(): React.ReactNode { + const styleWithDefault = { + textDecoration: 'none', + cursor: 'pointer', + ...this.props.style, + }; -Link.displayName = 'Link'; + switch (this.props.type) { + case LinkType.External: + return ( + + {this.props.children} + + ); + case LinkType.ReactRoute: + return ( + + {this.props.children} + + ); + case LinkType.ReactScroll: + return ( + (this._outerReactScrollSpan = input)}> + + + {this.props.children} + + + + ); + default: + throw new Error(`Unrecognized LinkType: ${this.props.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 registry 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(); + } + } +} -- cgit v1.2.3 From e7de4b953fe8aaefee9c043679b021a485dc6dee Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 5 Oct 2018 11:51:52 +0100 Subject: Apply props to all link variants when possible --- packages/react-shared/src/components/link.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) (limited to 'packages/react-shared') diff --git a/packages/react-shared/src/components/link.tsx b/packages/react-shared/src/components/link.tsx index 7b22dc4fa..ee55cc642 100644 --- a/packages/react-shared/src/components/link.tsx +++ b/packages/react-shared/src/components/link.tsx @@ -80,13 +80,19 @@ export class Link extends React.Component { ); case LinkType.ReactScroll: return ( - (this._outerReactScrollSpan = input)}> + (this._outerReactScrollSpan = input)} + onMouseOver={this.props.onMouseOver} + onMouseEnter={this.props.onMouseEnter} + onMouseLeave={this.props.onMouseLeave} + > -- cgit v1.2.3 From f7aee9c7a9df36e20888c10616a249c2a79ed749 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 5 Oct 2018 12:00:24 +0100 Subject: Remove containerId option and throw if passing in shouldOpenInNewTab with type ReactScroll --- packages/react-shared/src/components/link.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) (limited to 'packages/react-shared') diff --git a/packages/react-shared/src/components/link.tsx b/packages/react-shared/src/components/link.tsx index ee55cc642..e8a13d506 100644 --- a/packages/react-shared/src/components/link.tsx +++ b/packages/react-shared/src/components/link.tsx @@ -6,7 +6,7 @@ import { Link as ScrollLink } from 'react-scroll'; import { LinkType } from '../types'; import { constants } from '../utils/constants'; -export interface LinkProps { +interface LinkProps { to: string; type?: LinkType; shouldOpenInNewTab?: boolean; @@ -15,7 +15,6 @@ export interface LinkProps { onMouseOver?: (event: React.MouseEvent) => void; onMouseLeave?: (event: React.MouseEvent) => void; onMouseEnter?: (event: React.MouseEvent) => void; - containerId?: string; } export interface LinkState {} @@ -35,7 +34,6 @@ export class Link extends React.Component { onMouseOver: _.noop.bind(_), onMouseLeave: _.noop.bind(_), onMouseEnter: _.noop.bind(_), - containerId: constants.DOCS_CONTAINER_ID, }; private _outerReactScrollSpan: HTMLSpanElement | null; constructor(props: LinkProps) { @@ -43,6 +41,10 @@ export class Link extends React.Component { this._outerReactScrollSpan = null; } public render(): React.ReactNode { + if (this.props.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: 'none', cursor: 'pointer', @@ -91,7 +93,7 @@ export class Link extends React.Component { offset={0} hashSpy={true} duration={constants.DOCS_SCROLL_DURATION_MS} - containerId={this.props.containerId} + containerId={constants.DOCS_CONTAINER_ID} className={this.props.className} style={styleWithDefault} > -- cgit v1.2.3 From e0355a2e395fc056fd1d5c5e1780784853546acd Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 5 Oct 2018 12:03:15 +0100 Subject: Rename scroll container --- packages/react-shared/src/components/anchor_title.tsx | 2 +- packages/react-shared/src/components/link.tsx | 2 +- .../react-shared/src/components/nested_sidebar_menu.tsx | 14 ++------------ packages/react-shared/src/utils/constants.ts | 3 +-- 4 files changed, 5 insertions(+), 16 deletions(-) (limited to 'packages/react-shared') diff --git a/packages/react-shared/src/components/anchor_title.tsx b/packages/react-shared/src/components/anchor_title.tsx index 8f7e4af27..a83881b67 100644 --- a/packages/react-shared/src/components/anchor_title.tsx +++ b/packages/react-shared/src/components/anchor_title.tsx @@ -71,7 +71,7 @@ export class AnchorTitle extends React.Component { offset={0} hashSpy={true} duration={constants.DOCS_SCROLL_DURATION_MS} - containerId={constants.DOCS_CONTAINER_ID} + containerId={constants.SCROLL_CONTAINER_ID} className={this.props.className} style={styleWithDefault} > diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 709d0ace9..0bc516223 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -94,12 +94,7 @@ export class NestedSidebarMenu extends React.Component - + - + Date: Fri, 5 Oct 2018 13:54:37 +0100 Subject: Remove style prop from Link --- packages/react-shared/src/components/link.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) (limited to 'packages/react-shared') diff --git a/packages/react-shared/src/components/link.tsx b/packages/react-shared/src/components/link.tsx index 51ffa1e1d..60891dd7a 100644 --- a/packages/react-shared/src/components/link.tsx +++ b/packages/react-shared/src/components/link.tsx @@ -10,11 +10,12 @@ interface LinkProps { to: string; type?: LinkType; shouldOpenInNewTab?: boolean; - style?: React.CSSProperties; className?: string; onMouseOver?: (event: React.MouseEvent) => void; onMouseLeave?: (event: React.MouseEvent) => void; onMouseEnter?: (event: React.MouseEvent) => void; + textDecoration?: string; + fontColor?: string; } export interface LinkState {} @@ -29,11 +30,12 @@ export class Link extends React.Component { public static defaultProps: Partial = { type: LinkType.ReactRoute, shouldOpenInNewTab: false, - style: {}, className: '', onMouseOver: _.noop.bind(_), onMouseLeave: _.noop.bind(_), onMouseEnter: _.noop.bind(_), + textDecoration: 'none', + fontColor: 'inherit', }; private _outerReactScrollSpan: HTMLSpanElement | null; constructor(props: LinkProps) { @@ -46,11 +48,13 @@ export class Link extends React.Component { } const styleWithDefault = { - textDecoration: 'none', + textDecoration: this.props.textDecoration, cursor: 'pointer', - ...this.props.style, + color: this.props.fontColor, }; + console.log('styleWithDefault', styleWithDefault); + switch (this.props.type) { case LinkType.External: return ( -- cgit v1.2.3 From fa6bd348992674192d07fef3d60950980212ecbb Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 5 Oct 2018 14:55:28 +0100 Subject: Remove type prop and instead infer it from the value of to --- packages/react-shared/src/components/link.tsx | 22 +++++++++++++++------- .../src/components/markdown_section.tsx | 13 ++++++------- .../src/components/nested_sidebar_menu.tsx | 4 ++-- packages/react-shared/src/index.ts | 2 +- packages/react-shared/src/types.ts | 1 - 5 files changed, 24 insertions(+), 18 deletions(-) (limited to 'packages/react-shared') diff --git a/packages/react-shared/src/components/link.tsx b/packages/react-shared/src/components/link.tsx index 60891dd7a..05ca93cc5 100644 --- a/packages/react-shared/src/components/link.tsx +++ b/packages/react-shared/src/components/link.tsx @@ -2,13 +2,13 @@ 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; - type?: LinkType; shouldOpenInNewTab?: boolean; className?: string; onMouseOver?: (event: React.MouseEvent) => void; @@ -28,7 +28,6 @@ export interface LinkState {} */ export class Link extends React.Component { public static defaultProps: Partial = { - type: LinkType.ReactRoute, shouldOpenInNewTab: false, className: '', onMouseOver: _.noop.bind(_), @@ -43,7 +42,18 @@ export class Link extends React.Component { this._outerReactScrollSpan = null; } public render(): React.ReactNode { - if (this.props.type === LinkType.ReactScroll && this.props.shouldOpenInNewTab) { + 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}`); } @@ -53,9 +63,7 @@ export class Link extends React.Component { color: this.props.fontColor, }; - console.log('styleWithDefault', styleWithDefault); - - switch (this.props.type) { + switch (type) { case LinkType.External: return ( { ); default: - throw new Error(`Unrecognized LinkType: ${this.props.type}`); + throw new Error(`Unrecognized LinkType: ${type}`); } } // HACK(fabio): For some reason, the react-scroll link decided to stop the propagation of click events. diff --git a/packages/react-shared/src/components/markdown_section.tsx b/packages/react-shared/src/components/markdown_section.tsx index 09b214548..e84d2b078 100644 --- a/packages/react-shared/src/components/markdown_section.tsx +++ b/packages/react-shared/src/components/markdown_section.tsx @@ -8,6 +8,7 @@ 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'; @@ -63,13 +64,11 @@ export class MarkdownSection extends React.Component
    diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 0bc516223..7f5e16f01 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -94,7 +94,7 @@ export class NestedSidebarMenu extends React.Component - + - + Date: Fri, 5 Oct 2018 17:58:22 +0100 Subject: Fix comment --- packages/react-shared/src/components/link.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/react-shared') diff --git a/packages/react-shared/src/components/link.tsx b/packages/react-shared/src/components/link.tsx index 05ca93cc5..5a456109b 100644 --- a/packages/react-shared/src/components/link.tsx +++ b/packages/react-shared/src/components/link.tsx @@ -121,7 +121,7 @@ export class Link extends React.Component { } // 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 registry the + // 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)) { -- cgit v1.2.3 From 2966ab12e009ed214978b1fd9209fc13cc7d3630 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 5 Oct 2018 17:58:34 +0100 Subject: Move valid-url import to react-shared --- packages/react-shared/package.json | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'packages/react-shared') diff --git a/packages/react-shared/package.json b/packages/react-shared/package.json index 5629ec915..490933fb3 100644 --- a/packages/react-shared/package.json +++ b/packages/react-shared/package.json @@ -44,6 +44,7 @@ "@types/react-dom": "*", "@types/react-router-dom": "^4.0.4", "@types/react-scroll": "1.5.3", + "@types/valid-url": "^1.0.2", "basscss": "^8.0.3", "change-case": "^3.0.2", "is-mobile": "^0.2.2", @@ -54,7 +55,8 @@ "react-highlight": "0xproject/react-highlight#2f40a42e0a3f0ad126f9f42d505b97b603fc7162", "react-markdown": "^3.2.2", "react-scroll": "0xproject/react-scroll#similar-to-pr-330", - "react-router-dom": "^4.1.1" + "react-router-dom": "^4.1.1", + "valid-url": "^1.0.9" }, "publishConfig": { "access": "public" -- cgit v1.2.3 From 6cc9631ef6458d88249a5abd5c7c5ee7b3614e62 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 5 Oct 2018 17:58:54 +0100 Subject: remove unused import --- packages/react-shared/src/components/nested_sidebar_menu.tsx | 1 - 1 file changed, 1 deletion(-) (limited to 'packages/react-shared') diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 7f5e16f01..5b6076df6 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -5,7 +5,6 @@ import * as React from 'react'; import { ALink, Styles } from '../types'; import { colors } from '../utils/colors'; -import { constants } from '../utils/constants'; import { utils } from '../utils/utils'; import { Link } from './link'; -- cgit v1.2.3