From ac68f8db4459b09f7fd0a0191e068eee2da9f76f Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
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(-)
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>
--
cgit v1.2.3