aboutsummaryrefslogtreecommitdiffstats
path: root/packages/react-shared
diff options
context:
space:
mode:
authorFabio Berger <me@fabioberger.com>2018-10-18 03:18:28 +0800
committerFabio Berger <me@fabioberger.com>2018-10-18 03:18:28 +0800
commitac68f8db4459b09f7fd0a0191e068eee2da9f76f (patch)
tree24642bba7cc76bddabd4ae2de2716bb5aa28e456 /packages/react-shared
parent03b20eed29f18b39ee832ea7414e6234a88a0815 (diff)
downloaddexon-sol-tools-ac68f8db4459b09f7fd0a0191e068eee2da9f76f.tar
dexon-sol-tools-ac68f8db4459b09f7fd0a0191e068eee2da9f76f.tar.gz
dexon-sol-tools-ac68f8db4459b09f7fd0a0191e068eee2da9f76f.tar.bz2
dexon-sol-tools-ac68f8db4459b09f7fd0a0191e068eee2da9f76f.tar.lz
dexon-sol-tools-ac68f8db4459b09f7fd0a0191e068eee2da9f76f.tar.xz
dexon-sol-tools-ac68f8db4459b09f7fd0a0191e068eee2da9f76f.tar.zst
dexon-sol-tools-ac68f8db4459b09f7fd0a0191e068eee2da9f76f.zip
refactor: fix anchor so it doesn't keep re-rendering the anchor icon
Diffstat (limited to 'packages/react-shared')
-rw-r--r--packages/react-shared/src/components/anchor_title.tsx30
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>