diff options
author | Tom Schmidt <imtomhschmidt@gmail.com> | 2018-03-10 07:22:59 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-03-10 07:22:59 +0800 |
commit | 47af38ecb8d59789af9db2079e18ee0b6e589786 (patch) | |
tree | abd75e02d19d7c2e9c7b8df1ebe7152e2d364a40 /packages/react-shared/src/ts/components/anchor_title.tsx | |
parent | 654c790c3df3ee857952a1023761f186bb9c777d (diff) | |
parent | 7116f100ee194f46d0e34782afa8f680791adc9c (diff) | |
download | dexon-sol-tools-47af38ecb8d59789af9db2079e18ee0b6e589786.tar dexon-sol-tools-47af38ecb8d59789af9db2079e18ee0b6e589786.tar.gz dexon-sol-tools-47af38ecb8d59789af9db2079e18ee0b6e589786.tar.bz2 dexon-sol-tools-47af38ecb8d59789af9db2079e18ee0b6e589786.tar.lz dexon-sol-tools-47af38ecb8d59789af9db2079e18ee0b6e589786.tar.xz dexon-sol-tools-47af38ecb8d59789af9db2079e18ee0b6e589786.tar.zst dexon-sol-tools-47af38ecb8d59789af9db2079e18ee0b6e589786.zip |
Merge branch 'development' into feature/website/web3-logging
Diffstat (limited to 'packages/react-shared/src/ts/components/anchor_title.tsx')
-rw-r--r-- | packages/react-shared/src/ts/components/anchor_title.tsx | 87 |
1 files changed, 87 insertions, 0 deletions
diff --git a/packages/react-shared/src/ts/components/anchor_title.tsx b/packages/react-shared/src/ts/components/anchor_title.tsx new file mode 100644 index 000000000..f44354097 --- /dev/null +++ b/packages/react-shared/src/ts/components/anchor_title.tsx @@ -0,0 +1,87 @@ +import * as React from 'react'; +import { Link as ScrollLink } from 'react-scroll'; + +import { HeaderSizes, Styles } from '../types'; +import { constants } from '../utils/constants'; +import { utils } from '../utils/utils'; + +const headerSizeToScrollOffset: { [headerSize: string]: number } = { + h2: -20, + h3: 0, +}; + +export interface AnchorTitleProps { + title: string | React.ReactNode; + id: string; + headerSize: HeaderSizes; + shouldShowAnchor: boolean; +} + +export interface AnchorTitleState { + isHovering: boolean; +} + +const styles: Styles = { + anchor: { + fontSize: 20, + transform: 'rotate(45deg)', + cursor: 'pointer', + }, + headers: { + WebkitMarginStart: 0, + WebkitMarginEnd: 0, + fontWeight: 'bold', + display: 'block', + }, + h1: { + fontSize: '1.8em', + }, + h2: { + fontSize: '1.5em', + fontWeight: 400, + }, + h3: { + fontSize: '1.17em', + }, +}; + +export class AnchorTitle extends React.Component<AnchorTitleProps, AnchorTitleState> { + constructor(props: AnchorTitleProps) { + super(props); + this.state = { + isHovering: false, + }; + } + public render() { + let opacity = 0; + if (this.props.shouldShowAnchor) { + opacity = this.state.isHovering ? 0.6 : 1; + } + return ( + <div className="relative flex" style={{ ...styles[this.props.headerSize], ...styles.headers }}> + <div className="inline-block" style={{ paddingRight: 4 }}> + {this.props.title} + </div> + <ScrollLink + to={this.props.id} + offset={headerSizeToScrollOffset[this.props.headerSize]} + duration={constants.DOCS_SCROLL_DURATION_MS} + containerId={constants.DOCS_CONTAINER_ID} + > + <i + className="zmdi zmdi-link" + onClick={utils.setUrlHash.bind(utils, this.props.id)} + style={{ ...styles.anchor, opacity }} + onMouseOver={this._setHoverState.bind(this, true)} + onMouseOut={this._setHoverState.bind(this, false)} + /> + </ScrollLink> + </div> + ); + } + private _setHoverState(isHovering: boolean) { + this.setState({ + isHovering, + }); + } +} |