diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-10-19 06:42:33 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-10-19 06:42:33 +0800 |
commit | c87e68f833a2d8a87846d70a9d4a727b46323eea (patch) | |
tree | eb40dc12694baf607a373f427f32dbd9393ac72f /packages/react-shared/src/components/anchor_title.tsx | |
parent | a764dfa789ba44e519371b4a1e4569db7f551fb7 (diff) | |
parent | 65d85ca5008fe0c307506b388d6ace858122f8ad (diff) | |
download | dexon-sol-tools-c87e68f833a2d8a87846d70a9d4a727b46323eea.tar dexon-sol-tools-c87e68f833a2d8a87846d70a9d4a727b46323eea.tar.gz dexon-sol-tools-c87e68f833a2d8a87846d70a9d4a727b46323eea.tar.bz2 dexon-sol-tools-c87e68f833a2d8a87846d70a9d4a727b46323eea.tar.lz dexon-sol-tools-c87e68f833a2d8a87846d70a9d4a727b46323eea.tar.xz dexon-sol-tools-c87e68f833a2d8a87846d70a9d4a727b46323eea.tar.zst dexon-sol-tools-c87e68f833a2d8a87846d70a9d4a727b46323eea.zip |
Merge branch 'development' of https://github.com/0xProject/0x-monorepo into feature/instant/beta-render-et-al
Diffstat (limited to 'packages/react-shared/src/components/anchor_title.tsx')
-rw-r--r-- | packages/react-shared/src/components/anchor_title.tsx | 76 |
1 files changed, 37 insertions, 39 deletions
diff --git a/packages/react-shared/src/components/anchor_title.tsx b/packages/react-shared/src/components/anchor_title.tsx index 8f7e4af27..bd99edcab 100644 --- a/packages/react-shared/src/components/anchor_title.tsx +++ b/packages/react-shared/src/components/anchor_title.tsx @@ -1,7 +1,9 @@ import * as React from 'react'; import { Link as ScrollLink } from 'react-scroll'; +import styled from 'styled-components'; import { HeaderSizes, Styles } from '../types'; +import { colors } from '../utils/colors'; import { constants } from '../utils/constants'; const headerSizeToScrollOffset: { [headerSize: string]: number } = { @@ -14,20 +16,14 @@ export interface AnchorTitleProps { id: string; headerSize: HeaderSizes; shouldShowAnchor: boolean; + isDisabled: boolean; } -export interface AnchorTitleState { - isHovering: boolean; -} +export interface AnchorTitleState {} const styles: Styles = { - anchor: { - fontSize: 20, - transform: 'rotate(45deg)', - cursor: 'pointer', - }, h1: { - fontSize: '1.8em', + fontSize: '1.875em', }, h2: { fontSize: '1.5em', @@ -38,18 +34,28 @@ const styles: Styles = { }, }; +interface AnchorIconProps { + shouldShowAnchor: boolean; +} + +const AnchorIcon = + styled.i < + AnchorIconProps > + ` + opacity: ${props => (props.shouldShowAnchor ? 1 : 0)}; + &:hover { + opacity: ${props => (props.shouldShowAnchor ? 0.6 : 0)}; + } + font-size: 20px; + transform: rotate(45deg); + cursor: pointer; + `; + export class AnchorTitle extends React.Component<AnchorTitleProps, AnchorTitleState> { - constructor(props: AnchorTitleProps) { - super(props); - this.state = { - isHovering: false, - }; - } + public static defaultProps: Partial<AnchorTitleProps> = { + isDisabled: false, + }; public render(): React.ReactNode { - let opacity = 0; - if (this.props.shouldShowAnchor) { - opacity = this.state.isHovering ? 0.6 : 1; - } return ( <div className="relative flex" @@ -63,29 +69,21 @@ export class AnchorTitle extends React.Component<AnchorTitleProps, AnchorTitleSt } as any } > - <div className="inline-block" style={{ paddingRight: 4 }}> + <div className="inline-block" style={{ paddingRight: 4, color: colors.darkestGrey }}> {this.props.title} </div> - <ScrollLink - to={this.props.id} - hashSpy={true} - offset={headerSizeToScrollOffset[this.props.headerSize]} - duration={constants.DOCS_SCROLL_DURATION_MS} - containerId={constants.DOCS_CONTAINER_ID} - > - <i - className="zmdi zmdi-link" - style={{ ...styles.anchor, opacity }} - onMouseOver={this._setHoverState.bind(this, true)} - onMouseOut={this._setHoverState.bind(this, false)} - /> - </ScrollLink> + {!this.props.isDisabled && ( + <ScrollLink + to={this.props.id} + hashSpy={true} + offset={headerSizeToScrollOffset[this.props.headerSize]} + duration={constants.DOCS_SCROLL_DURATION_MS} + containerId={constants.SCROLL_CONTAINER_ID} + > + <AnchorIcon className="zmdi zmdi-link" shouldShowAnchor={this.props.shouldShowAnchor} /> + </ScrollLink> + )} </div> ); } - private _setHoverState(isHovering: boolean): void { - this.setState({ - isHovering, - }); - } } |