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 { 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 (
{this.props.title}
); } private _setHoverState(isHovering: boolean) { this.setState({ isHovering, }); } }