From fe7a8be98c32c6aed8548574e67e36962db732fb Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 27 Aug 2018 12:30:30 +0100 Subject: Move colors to colors module --- packages/react-shared/src/utils/colors.ts | 2 ++ 1 file changed, 2 insertions(+) (limited to 'packages/react-shared/src') diff --git a/packages/react-shared/src/utils/colors.ts b/packages/react-shared/src/utils/colors.ts index 7d047a50e..5a20eeaa1 100644 --- a/packages/react-shared/src/utils/colors.ts +++ b/packages/react-shared/src/utils/colors.ts @@ -8,6 +8,7 @@ const baseColors = { greyishPink: '#E6E5E5', grey300: '#E0E0E0', beigeWhite: '#E4E4E4', + lightBgGrey: '#EDEDED', grey350: '#cacaca', grey400: '#BDBDBD', lightGrey: '#BBBBBB', @@ -15,6 +16,7 @@ const baseColors = { grey: '#A5A5A5', darkGrey: '#818181', landingLinkGrey: '#919191', + linkSectionGrey: '#999999', grey700: '#616161', grey750: '#515151', grey800: '#424242', -- cgit v1.2.3 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/src') 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/src') 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/src') 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/src') 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/src') 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/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 +++ 4 files changed, 149 insertions(+), 41 deletions(-) create mode 100644 packages/react-shared/src/components/link.tsx (limited to 'packages/react-shared/src') 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/src') 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/src') 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/src') 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/src') 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/src') 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/src') 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/src') 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/src') 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/src') 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/src') 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/src') 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/src') 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 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/src') 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 From de20ef1a49966153f25236ee68b186cd49f8dc20 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 12 Oct 2018 15:54:44 +0200 Subject: Refactor Home so that Dev section chrome is reusable across pages --- .../src/components/nested_sidebar_menu.tsx | 38 ---------------------- 1 file changed, 38 deletions(-) (limited to 'packages/react-shared/src') diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 5b6076df6..f3ce5f5bf 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -12,7 +12,6 @@ import { VersionDropDown } from './version_drop_down'; export interface NestedSidebarMenuProps { sectionNameToLinks: ObjectMap; - subsectionNameToLinks?: ObjectMap; sidebarHeader?: React.ReactNode; shouldDisplaySectionHeaders?: boolean; onMenuItemClick?: () => void; @@ -44,7 +43,6 @@ export class NestedSidebarMenu extends React.Component { @@ -108,47 +106,11 @@ export class NestedSidebarMenu extends React.Component - {this._renderMenuItemSubsections(link.title)}
    ); }); return menuItems; } - private _renderMenuItemSubsections(menuItemName: string): React.ReactNode { - if ( - _.isUndefined(this.props.subsectionNameToLinks) || - _.isUndefined(this.props.subsectionNameToLinks[menuItemName]) - ) { - return null; - } - return this._renderSubsectionLinks(menuItemName, this.props.subsectionNameToLinks[menuItemName]); - } - private _renderSubsectionLinks(menuItemName: string, links: ALink[]): React.ReactNode { - return ( -
      - {_.map(links, link => { - const name = `${menuItemName}-${link.title}`; - return ( -
    • - - - {link.title} - - -
      • - ); - })} -
    - ); - } private _onMenuItemClick(): void { if (!_.isUndefined(this.props.onMenuItemClick)) { this.props.onMenuItemClick(); -- cgit v1.2.3 From a5eb346dd18f81b171280291f3d01b900a4aff1d Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 12 Oct 2018 19:44:51 +0100 Subject: fix: Remove unnecessary onClick prop from NestedSidebar, since one can listen to container element onClick --- .../react-shared/src/components/nested_sidebar_menu.tsx | 13 +------------ 1 file changed, 1 insertion(+), 12 deletions(-) (limited to 'packages/react-shared/src') diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index f3ce5f5bf..85206569c 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -14,7 +14,6 @@ export interface NestedSidebarMenuProps { sectionNameToLinks: ObjectMap; sidebarHeader?: React.ReactNode; shouldDisplaySectionHeaders?: boolean; - onMenuItemClick?: () => void; selectedVersion?: string; versions?: string[]; onVersionSelected?: (semver: string) => void; @@ -41,7 +40,6 @@ const styles: Styles = { export class NestedSidebarMenu extends React.Component { public static defaultProps: Partial = { shouldDisplaySectionHeaders: true, - onMenuItemClick: _.noop.bind(_), shouldReformatMenuItemNames: true, }; public render(): React.ReactNode { @@ -92,11 +90,7 @@ export class NestedSidebarMenu extends React.Component - + Date: Sat, 13 Oct 2018 16:29:14 +0100 Subject: Implement new version dropdown and remove it from nestedTopBar --- .../src/components/nested_sidebar_menu.tsx | 16 ---------- .../src/components/version_drop_down.tsx | 37 ---------------------- 2 files changed, 53 deletions(-) delete mode 100644 packages/react-shared/src/components/version_drop_down.tsx (limited to 'packages/react-shared/src') diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 85206569c..440db4b16 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -8,15 +8,11 @@ import { colors } from '../utils/colors'; import { utils } from '../utils/utils'; import { Link } from './link'; -import { VersionDropDown } from './version_drop_down'; export interface NestedSidebarMenuProps { sectionNameToLinks: ObjectMap; sidebarHeader?: React.ReactNode; shouldDisplaySectionHeaders?: boolean; - selectedVersion?: string; - versions?: string[]; - onVersionSelected?: (semver: string) => void; shouldReformatMenuItemNames?: boolean; } @@ -59,21 +55,9 @@ export class NestedSidebarMenu extends React.Component{this._renderMenuItems(links)}
    ; } }); - const maxWidthWithScrollbar = 307; return (
    {this.props.sidebarHeader} - {!_.isUndefined(this.props.versions) && - !_.isUndefined(this.props.selectedVersion) && - !_.isUndefined(this.props.onVersionSelected) && ( -
    - -
    - )}
    {navigation}
    ); 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 { - public render(): React.ReactNode { - return ( -
    - -
    - ); - } - private _renderDropDownItems(): React.ReactNode[] { - const items = _.map(this.props.versions, version => { - return ( - - v{version} - - ); - }); - return items; - } - private _updateSelectedVersion(event: React.ChangeEvent): void { - this.props.onVersionSelected(event.target.value); - } -} -- cgit v1.2.3 From 4298da118f8cb7ca54b255576894bc98b7f7b374 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 15 Oct 2018 11:23:02 +0100 Subject: chore: improve styling of sidebar --- packages/react-shared/src/components/nested_sidebar_menu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/react-shared/src') diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 440db4b16..853b69976 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -45,7 +45,7 @@ export class NestedSidebarMenu extends React.Component -
    +
    {finalSectionName.toUpperCase()}
    {this._renderMenuItems(links)} -- cgit v1.2.3 From eee0640b07bcddccbddf68618f2772b1de92a18d Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 15 Oct 2018 11:27:56 +0100 Subject: chore: many small stylistic changes --- .../react-shared/src/components/anchor_title.tsx | 5 +- packages/react-shared/src/components/container.tsx | 55 ++++++++++++++++++++++ .../src/components/markdown_paragraph_block.tsx | 14 ++++++ .../src/components/markdown_section.tsx | 25 +++++++--- packages/react-shared/src/index.ts | 1 + packages/react-shared/src/utils/colors.ts | 1 + 6 files changed, 93 insertions(+), 8 deletions(-) create mode 100644 packages/react-shared/src/components/container.tsx create mode 100644 packages/react-shared/src/components/markdown_paragraph_block.tsx (limited to 'packages/react-shared/src') diff --git a/packages/react-shared/src/components/anchor_title.tsx b/packages/react-shared/src/components/anchor_title.tsx index a83881b67..dabdfff9b 100644 --- a/packages/react-shared/src/components/anchor_title.tsx +++ b/packages/react-shared/src/components/anchor_title.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { Link as ScrollLink } from 'react-scroll'; import { HeaderSizes, Styles } from '../types'; +import { colors } from '../utils/colors'; import { constants } from '../utils/constants'; const headerSizeToScrollOffset: { [headerSize: string]: number } = { @@ -27,7 +28,7 @@ const styles: Styles = { cursor: 'pointer', }, h1: { - fontSize: '1.8em', + fontSize: '30px', }, h2: { fontSize: '1.5em', @@ -63,7 +64,7 @@ export class AnchorTitle extends React.Component -
    +
    {this.props.title}
    ) => void; + overflowX?: 'scroll' | 'hidden' | 'auto' | 'visible'; +} + +export const Container: React.StatelessComponent = props => { + const { children, className, Tag, isHidden, id, onClick, ...style } = props; + const visibility = isHidden ? 'hidden' : undefined; + return ( + + {children} + + ); +}; + +Container.defaultProps = { + Tag: 'div', +}; + +Container.displayName = 'Container'; 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..519638446 --- /dev/null +++ b/packages/react-shared/src/components/markdown_paragraph_block.tsx @@ -0,0 +1,14 @@ +import * as _ from 'lodash'; +import * as React from 'react'; + +import { colors } from '../utils/colors'; + +export interface MarkdownParagraphBlockProps {} + +export interface MarkdownParagraphBlockState {} + +export class MarkdownParagraphBlock extends React.Component { + public render(): React.ReactNode { + return {this.props.children}; + } +} diff --git a/packages/react-shared/src/components/markdown_section.tsx b/packages/react-shared/src/components/markdown_section.tsx index e84d2b078..3dc3efe12 100644 --- a/packages/react-shared/src/components/markdown_section.tsx +++ b/packages/react-shared/src/components/markdown_section.tsx @@ -8,15 +8,18 @@ import { colors } from '../utils/colors'; import { utils } from '../utils/utils'; import { AnchorTitle } from './anchor_title'; +import { Container } from './container'; 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; + shouldReformatTitle?: boolean; } interface DefaultMarkdownSectionProps { @@ -32,6 +35,7 @@ export interface MarkdownSectionState { export class MarkdownSection extends React.Component { public static defaultProps: Partial = { headerSize: HeaderSizes.H3, + shouldReformatTitle: true, }; constructor(props: MarkdownSectionProps) { super(props); @@ -43,7 +47,9 @@ export class MarkdownSection extends React.Component -
    +
    - + @@ -71,16 +77,23 @@ export class MarkdownSection extends React.Component )}
    -
    -
    + +
    ); diff --git a/packages/react-shared/src/index.ts b/packages/react-shared/src/index.ts index e33b09f19..2ab9b393e 100644 --- a/packages/react-shared/src/index.ts +++ b/packages/react-shared/src/index.ts @@ -5,6 +5,7 @@ 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 { Container } from './components/container'; export { HeaderSizes, Styles, EtherscanLinkSuffixes, Networks, ALink } from './types'; diff --git a/packages/react-shared/src/utils/colors.ts b/packages/react-shared/src/utils/colors.ts index 596c17e83..a4dd7fefa 100644 --- a/packages/react-shared/src/utils/colors.ts +++ b/packages/react-shared/src/utils/colors.ts @@ -18,6 +18,7 @@ const baseColors = { darkGrey: '#818181', landingLinkGrey: '#919191', linkSectionGrey: '#999999', + greyTheme: '#666666', grey700: '#616161', grey750: '#515151', grey800: '#424242', -- cgit v1.2.3 From bf9af95654503df94b5b32af74a4cbc8bee7f2ec Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 15 Oct 2018 11:57:16 +0100 Subject: chore: improve colors --- packages/react-shared/src/components/nested_sidebar_menu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/react-shared/src') diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 853b69976..71b9b4d32 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -44,7 +44,7 @@ export class NestedSidebarMenu extends React.Component +
    {finalSectionName.toUpperCase()}
    -- cgit v1.2.3 From b3a323efa1fc5d942c2f7052f585acc248394f44 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 15 Oct 2018 12:20:30 +0100 Subject: fix: Nested a tag warning in console by not rendering a tags within type definition popovers --- .../react-shared/src/components/anchor_title.tsx | 34 +++++++++++++--------- 1 file changed, 20 insertions(+), 14 deletions(-) (limited to 'packages/react-shared/src') diff --git a/packages/react-shared/src/components/anchor_title.tsx b/packages/react-shared/src/components/anchor_title.tsx index dabdfff9b..0bdf61d44 100644 --- a/packages/react-shared/src/components/anchor_title.tsx +++ b/packages/react-shared/src/components/anchor_title.tsx @@ -15,6 +15,7 @@ export interface AnchorTitleProps { id: string; headerSize: HeaderSizes; shouldShowAnchor: boolean; + isDisabled?: boolean; } export interface AnchorTitleState { @@ -40,6 +41,9 @@ const styles: Styles = { }; export class AnchorTitle extends React.Component { + public static defaultProps: Partial = { + isDisabled: false, + }; constructor(props: AnchorTitleProps) { super(props); this.state = { @@ -67,20 +71,22 @@ export class AnchorTitle extends React.Component {this.props.title}
    - - - + {!this.props.isDisabled && ( + + + + )}
    ); } -- cgit v1.2.3 From a5e435d8317c7532caa4eb0fcf5bb49cf42c87c7 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 15 Oct 2018 12:58:09 +0100 Subject: fix: menu item overflow issue --- packages/react-shared/src/components/nested_sidebar_menu.tsx | 3 +++ 1 file changed, 3 insertions(+) (limited to 'packages/react-shared/src') diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 71b9b4d32..1ad61fcca 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -30,6 +30,9 @@ const styles: Styles = { fontSize: 14, lineHeight: 2, padding: 0, + whiteSpace: 'nowrap', + overflow: 'hidden', + textOverflow: 'ellipsis', }, }; -- cgit v1.2.3 From ce151f630d10664353ff1c9172a7495557792abe Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 15 Oct 2018 17:35:40 +0100 Subject: feat: highlighted sidebar as you scroll on doc reference pages --- .../src/components/markdown_section.tsx | 20 +++++----- .../src/components/nested_sidebar_menu.tsx | 46 ++++++++++++++++++++-- 2 files changed, 51 insertions(+), 15 deletions(-) (limited to 'packages/react-shared/src') diff --git a/packages/react-shared/src/components/markdown_section.tsx b/packages/react-shared/src/components/markdown_section.tsx index 3dc3efe12..9f5855d16 100644 --- a/packages/react-shared/src/components/markdown_section.tsx +++ b/packages/react-shared/src/components/markdown_section.tsx @@ -20,6 +20,7 @@ export interface MarkdownSectionProps { headerSize?: HeaderSizes; githubLink?: string; shouldReformatTitle?: boolean; + alternativeSectionTitle?: string; } interface DefaultMarkdownSectionProps { @@ -47,22 +48,25 @@ export class MarkdownSection extends React.Component - - + +
    @@ -87,13 +91,7 @@ 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 1ad61fcca..87622310a 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -14,9 +14,12 @@ export interface NestedSidebarMenuProps { sidebarHeader?: React.ReactNode; shouldDisplaySectionHeaders?: boolean; shouldReformatMenuItemNames?: boolean; + parentName?: string; } -export interface NestedSidebarMenuState {} +export interface NestedSidebarMenuState { + scrolledToId: string; +} const styles: Styles = { menuItemWithHeaders: { @@ -40,7 +43,28 @@ export class NestedSidebarMenu extends React.Component = { shouldDisplaySectionHeaders: true, shouldReformatMenuItemNames: true, + parentName: 'default', }; + private _urlIntervalCheckId: number; + constructor(props: NestedSidebarMenuProps) { + super(props); + this.state = { + scrolledToId: '', + }; + } + 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.sectionNameToLinks, (links: ALink[], sectionName: string) => { const finalSectionName = utils.convertCamelCaseToSpaces(sectionName); @@ -48,7 +72,7 @@ export class NestedSidebarMenu extends React.Component -
    +
    {finalSectionName.toUpperCase()}
    {this._renderMenuItems(links)} @@ -61,23 +85,37 @@ export class NestedSidebarMenu extends React.Component {this.props.sidebarHeader} -
    {navigation}
    +
    {navigation}
    ); } private _renderMenuItems(links: ALink[]): React.ReactNode[] { + const scrolledToId = this.state.scrolledToId; const menuItemStyles = this.props.shouldDisplaySectionHeaders ? styles.menuItemWithHeaders : styles.menuItemWithoutHeaders; const menuItemInnerDivStyles = this.props.shouldDisplaySectionHeaders ? styles.menuItemInnerDivWithHeaders : {}; const menuItems = _.map(links, link => { + const isScrolledTo = link.to === scrolledToId; const finalMenuItemName = this.props.shouldReformatMenuItemNames ? utils.convertDashesToSpaces(link.title) : link.title; return (
    - + Date: Tue, 16 Oct 2018 15:35:56 +0100 Subject: chore: get menu onHover darken back --- .../src/components/nested_sidebar_menu.tsx | 64 +++++++++------------- 1 file changed, 27 insertions(+), 37 deletions(-) (limited to 'packages/react-shared/src') diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 87622310a..70062182b 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -12,7 +12,6 @@ import { Link } from './link'; export interface NestedSidebarMenuProps { sectionNameToLinks: ObjectMap; sidebarHeader?: React.ReactNode; - shouldDisplaySectionHeaders?: boolean; shouldReformatMenuItemNames?: boolean; parentName?: string; } @@ -22,13 +21,12 @@ export interface NestedSidebarMenuState { } const styles: Styles = { - menuItemWithHeaders: { + menuItem: { minHeight: 0, + paddingLeft: 8, + borderRadius: 6, }, - menuItemWithoutHeaders: { - minHeight: 48, - }, - menuItemInnerDivWithHeaders: { + menuItemInnerDiv: { color: colors.grey800, fontSize: 14, lineHeight: 2, @@ -41,7 +39,6 @@ const styles: Styles = { export class NestedSidebarMenu extends React.Component { public static defaultProps: Partial = { - shouldDisplaySectionHeaders: true, shouldReformatMenuItemNames: true, parentName: 'default', }; @@ -68,19 +65,15 @@ export class NestedSidebarMenu extends React.Component { const finalSectionName = utils.convertCamelCaseToSpaces(sectionName); - if (this.props.shouldDisplaySectionHeaders) { - // tslint:disable-next-line:no-unused-variable - return ( -
    -
    - {finalSectionName.toUpperCase()} -
    - {this._renderMenuItems(links)} + // tslint:disable-next-line:no-unused-variable + return ( +
    +
    + {finalSectionName.toUpperCase()}
    - ); - } else { - return
    {this._renderMenuItems(links)}
    ; - } + {this._renderMenuItems(links)} +
    + ); }); return (
    @@ -91,31 +84,28 @@ export class NestedSidebarMenu extends React.Component { - const isScrolledTo = link.to === scrolledToId; 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 (
    - + Date: Tue, 16 Oct 2018 16:36:06 +0100 Subject: chore: convert to stateless component --- .../react-shared/src/components/markdown_paragraph_block.tsx | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) (limited to 'packages/react-shared/src') diff --git a/packages/react-shared/src/components/markdown_paragraph_block.tsx b/packages/react-shared/src/components/markdown_paragraph_block.tsx index 519638446..eeaef8571 100644 --- a/packages/react-shared/src/components/markdown_paragraph_block.tsx +++ b/packages/react-shared/src/components/markdown_paragraph_block.tsx @@ -5,10 +5,6 @@ import { colors } from '../utils/colors'; export interface MarkdownParagraphBlockProps {} -export interface MarkdownParagraphBlockState {} - -export class MarkdownParagraphBlock extends React.Component { - public render(): React.ReactNode { - return {this.props.children}; - } -} +export const MarkdownParagraphBlock: React.StatelessComponent = ({ children }) => { + return {children}; +}; -- cgit v1.2.3 From 17fb4d5b5703df2a86be0c2f1210c1327debc033 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 16 Oct 2018 16:38:05 +0100 Subject: chore: Remove unused prop --- packages/react-shared/src/components/markdown_section.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) (limited to 'packages/react-shared/src') diff --git a/packages/react-shared/src/components/markdown_section.tsx b/packages/react-shared/src/components/markdown_section.tsx index 9f5855d16..d5de324c3 100644 --- a/packages/react-shared/src/components/markdown_section.tsx +++ b/packages/react-shared/src/components/markdown_section.tsx @@ -19,7 +19,6 @@ export interface MarkdownSectionProps { markdownContent: string; headerSize?: HeaderSizes; githubLink?: string; - shouldReformatTitle?: boolean; alternativeSectionTitle?: string; } @@ -36,7 +35,6 @@ export interface MarkdownSectionState { export class MarkdownSection extends React.Component { public static defaultProps: Partial = { headerSize: HeaderSizes.H3, - shouldReformatTitle: true, }; constructor(props: MarkdownSectionProps) { super(props); @@ -48,9 +46,7 @@ export class MarkdownSection extends React.Component Date: Tue, 16 Oct 2018 16:38:59 +0100 Subject: chore: remove unused prop --- packages/react-shared/src/components/nested_sidebar_menu.tsx | 2 -- 1 file changed, 2 deletions(-) (limited to 'packages/react-shared/src') diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 70062182b..34f3eb276 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -13,7 +13,6 @@ export interface NestedSidebarMenuProps { sectionNameToLinks: ObjectMap; sidebarHeader?: React.ReactNode; shouldReformatMenuItemNames?: boolean; - parentName?: string; } export interface NestedSidebarMenuState { @@ -40,7 +39,6 @@ const styles: Styles = { export class NestedSidebarMenu extends React.Component { public static defaultProps: Partial = { shouldReformatMenuItemNames: true, - parentName: 'default', }; private _urlIntervalCheckId: number; constructor(props: NestedSidebarMenuProps) { -- cgit v1.2.3 From 55a3bc8cb6772802672f60f22c5ed5c7e1b2dfdd Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 16 Oct 2018 16:43:43 +0100 Subject: chore: don't use Container in react-shared, react-docs yet --- packages/react-shared/src/components/container.tsx | 55 ---------------------- .../src/components/markdown_section.tsx | 14 ++++-- packages/react-shared/src/index.ts | 1 - 3 files changed, 10 insertions(+), 60 deletions(-) delete mode 100644 packages/react-shared/src/components/container.tsx (limited to 'packages/react-shared/src') diff --git a/packages/react-shared/src/components/container.tsx b/packages/react-shared/src/components/container.tsx deleted file mode 100644 index f2ae68b70..000000000 --- a/packages/react-shared/src/components/container.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import * as React from 'react'; - -type StringOrNum = string | number; - -export type ContainerTag = 'div' | 'span'; - -export interface ContainerProps { - marginTop?: StringOrNum; - marginBottom?: StringOrNum; - marginRight?: StringOrNum; - marginLeft?: StringOrNum; - padding?: StringOrNum; - paddingTop?: StringOrNum; - paddingBottom?: StringOrNum; - paddingRight?: StringOrNum; - paddingLeft?: StringOrNum; - backgroundColor?: string; - borderRadius?: StringOrNum; - maxWidth?: StringOrNum; - maxHeight?: StringOrNum; - width?: StringOrNum; - height?: StringOrNum; - minWidth?: StringOrNum; - minHeight?: StringOrNum; - isHidden?: boolean; - className?: string; - position?: 'absolute' | 'fixed' | 'relative' | 'unset'; - display?: 'inline-block' | 'block' | 'inline-flex' | 'inline'; - top?: string; - left?: string; - right?: string; - bottom?: string; - zIndex?: number; - Tag?: ContainerTag; - cursor?: string; - id?: string; - onClick?: (event: React.MouseEvent) => void; - overflowX?: 'scroll' | 'hidden' | 'auto' | 'visible'; -} - -export const Container: React.StatelessComponent = props => { - const { children, className, Tag, isHidden, id, onClick, ...style } = props; - const visibility = isHidden ? 'hidden' : undefined; - return ( - - {children} - - ); -}; - -Container.defaultProps = { - Tag: 'div', -}; - -Container.displayName = 'Container'; diff --git a/packages/react-shared/src/components/markdown_section.tsx b/packages/react-shared/src/components/markdown_section.tsx index d5de324c3..e6a7d80d5 100644 --- a/packages/react-shared/src/components/markdown_section.tsx +++ b/packages/react-shared/src/components/markdown_section.tsx @@ -8,7 +8,6 @@ import { colors } from '../utils/colors'; import { utils } from '../utils/utils'; import { AnchorTitle } from './anchor_title'; -import { Container } from './container'; import { Link } from './link'; import { MarkdownCodeBlock } from './markdown_code_block'; import { MarkdownLinkBlock } from './markdown_link_block'; @@ -57,7 +56,7 @@ export class MarkdownSection extends React.Component - +
    )}
    - +
    - +
    ); diff --git a/packages/react-shared/src/index.ts b/packages/react-shared/src/index.ts index 2ab9b393e..e33b09f19 100644 --- a/packages/react-shared/src/index.ts +++ b/packages/react-shared/src/index.ts @@ -5,7 +5,6 @@ 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 { Container } from './components/container'; export { HeaderSizes, Styles, EtherscanLinkSuffixes, Networks, ALink } from './types'; -- cgit v1.2.3 From 9bae3e51d96ee3fc2c9652a373df155421228609 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 16 Oct 2018 17:09:17 +0100 Subject: chore: initalize _urlIntervalCheckId --- packages/react-shared/src/components/nested_sidebar_menu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/react-shared/src') diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 34f3eb276..fc5ab95fa 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -40,7 +40,7 @@ export class NestedSidebarMenu extends React.Component = { shouldReformatMenuItemNames: true, }; - private _urlIntervalCheckId: number; + private _urlIntervalCheckId: number | undefined = undefined; constructor(props: NestedSidebarMenuProps) { super(props); this.state = { -- cgit v1.2.3 From e18f66e5b7a099101c8d9273391744eacd705f59 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 17 Oct 2018 15:53:28 +0100 Subject: nit: use styled-component instead of react-state for onHover --- .../react-shared/src/components/anchor_title.tsx | 37 +++++++--------------- 1 file changed, 11 insertions(+), 26 deletions(-) (limited to 'packages/react-shared/src') diff --git a/packages/react-shared/src/components/anchor_title.tsx b/packages/react-shared/src/components/anchor_title.tsx index 0bdf61d44..0164a8c4a 100644 --- a/packages/react-shared/src/components/anchor_title.tsx +++ b/packages/react-shared/src/components/anchor_title.tsx @@ -1,5 +1,6 @@ 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'; @@ -15,12 +16,10 @@ export interface AnchorTitleProps { id: string; headerSize: HeaderSizes; shouldShowAnchor: boolean; - isDisabled?: boolean; + isDisabled: boolean; } -export interface AnchorTitleState { - isHovering: boolean; -} +export interface AnchorTitleState {} const styles: Styles = { anchor: { @@ -29,7 +28,7 @@ const styles: Styles = { cursor: 'pointer', }, h1: { - fontSize: '30px', + fontSize: '1.875em', }, h2: { fontSize: '1.5em', @@ -44,17 +43,13 @@ export class AnchorTitle extends React.Component = { isDisabled: false, }; - constructor(props: AnchorTitleProps) { - super(props); - this.state = { - isHovering: false, - }; - } public render(): React.ReactNode { - let opacity = 0; - if (this.props.shouldShowAnchor) { - opacity = this.state.isHovering ? 0.6 : 1; - } + const AnchorIcon = styled.i` + opacity: ${this.props.shouldShowAnchor ? 1 : 0}; + &:hover { + opacity: ${this.props.shouldShowAnchor ? 0.6 : 0}; + } + `; return (
    - + )}
    ); } - private _setHoverState(isHovering: boolean): void { - this.setState({ - isHovering, - }); - } } -- cgit v1.2.3 From 4d275cc5916c2802bd1d0b64766409daff5006db Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 17 Oct 2018 15:55:05 +0100 Subject: nit: don't init scrolledToId --- packages/react-shared/src/components/nested_sidebar_menu.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) (limited to 'packages/react-shared/src') diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index fc5ab95fa..f734dc654 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -16,7 +16,7 @@ export interface NestedSidebarMenuProps { } export interface NestedSidebarMenuState { - scrolledToId: string; + scrolledToId?: string; } const styles: Styles = { @@ -43,9 +43,7 @@ export class NestedSidebarMenu extends React.Component { -- cgit v1.2.3 From ac68f8db4459b09f7fd0a0191e068eee2da9f76f Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 17 Oct 2018 20:18:28 +0100 Subject: refactor: fix anchor so it doesn't keep re-rendering the anchor icon --- .../react-shared/src/components/anchor_title.tsx | 30 +++++++++++++--------- 1 file changed, 18 insertions(+), 12 deletions(-) (limited to 'packages/react-shared/src') diff --git a/packages/react-shared/src/components/anchor_title.tsx b/packages/react-shared/src/components/anchor_title.tsx index 0164a8c4a..bd99edcab 100644 --- a/packages/react-shared/src/components/anchor_title.tsx +++ b/packages/react-shared/src/components/anchor_title.tsx @@ -22,11 +22,6 @@ export interface AnchorTitleProps { export interface AnchorTitleState {} const styles: Styles = { - anchor: { - fontSize: 20, - transform: 'rotate(45deg)', - cursor: 'pointer', - }, h1: { fontSize: '1.875em', }, @@ -39,17 +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 { public static defaultProps: Partial = { isDisabled: false, }; public render(): React.ReactNode { - const AnchorIcon = styled.i` - opacity: ${this.props.shouldShowAnchor ? 1 : 0}; - &:hover { - opacity: ${this.props.shouldShowAnchor ? 0.6 : 0}; - } - `; return (
    - + )}
    -- cgit v1.2.3