diff options
author | Fabio Berger <me@fabioberger.com> | 2018-10-18 03:18:28 +0800 |
---|---|---|
committer | Fabio Berger <me@fabioberger.com> | 2018-10-18 03:18:28 +0800 |
commit | ac68f8db4459b09f7fd0a0191e068eee2da9f76f (patch) | |
tree | 24642bba7cc76bddabd4ae2de2716bb5aa28e456 | |
parent | 03b20eed29f18b39ee832ea7414e6234a88a0815 (diff) | |
download | dexon-0x-contracts-ac68f8db4459b09f7fd0a0191e068eee2da9f76f.tar dexon-0x-contracts-ac68f8db4459b09f7fd0a0191e068eee2da9f76f.tar.gz dexon-0x-contracts-ac68f8db4459b09f7fd0a0191e068eee2da9f76f.tar.bz2 dexon-0x-contracts-ac68f8db4459b09f7fd0a0191e068eee2da9f76f.tar.lz dexon-0x-contracts-ac68f8db4459b09f7fd0a0191e068eee2da9f76f.tar.xz dexon-0x-contracts-ac68f8db4459b09f7fd0a0191e068eee2da9f76f.tar.zst dexon-0x-contracts-ac68f8db4459b09f7fd0a0191e068eee2da9f76f.zip |
refactor: fix anchor so it doesn't keep re-rendering the anchor icon
-rw-r--r-- | packages/react-shared/src/components/anchor_title.tsx | 30 |
1 files changed, 18 insertions, 12 deletions
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<AnchorTitleProps, AnchorTitleState> { public static defaultProps: Partial<AnchorTitleProps> = { 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 ( <div className="relative flex" @@ -74,7 +80,7 @@ export class AnchorTitle extends React.Component<AnchorTitleProps, AnchorTitleSt duration={constants.DOCS_SCROLL_DURATION_MS} containerId={constants.SCROLL_CONTAINER_ID} > - <AnchorIcon className="zmdi zmdi-link" style={{ ...styles.anchor }} /> + <AnchorIcon className="zmdi zmdi-link" shouldShowAnchor={this.props.shouldShowAnchor} /> </ScrollLink> )} </div> |