diff options
author | Fabio Berger <me@fabioberger.com> | 2018-10-20 00:40:55 +0800 |
---|---|---|
committer | Fabio Berger <me@fabioberger.com> | 2018-10-20 00:40:55 +0800 |
commit | 0de654bbd52f7d4702cec9f1a9a5a2cbb793181b (patch) | |
tree | ba341b86b4000cf94669a65d0fa2499c05897db9 /packages/react-shared/src/components/link.tsx | |
parent | d129c922edd8bc0319273488b23a5257d736502d (diff) | |
download | dexon-0x-contracts-0de654bbd52f7d4702cec9f1a9a5a2cbb793181b.tar dexon-0x-contracts-0de654bbd52f7d4702cec9f1a9a5a2cbb793181b.tar.gz dexon-0x-contracts-0de654bbd52f7d4702cec9f1a9a5a2cbb793181b.tar.bz2 dexon-0x-contracts-0de654bbd52f7d4702cec9f1a9a5a2cbb793181b.tar.lz dexon-0x-contracts-0de654bbd52f7d4702cec9f1a9a5a2cbb793181b.tar.xz dexon-0x-contracts-0de654bbd52f7d4702cec9f1a9a5a2cbb793181b.tar.zst dexon-0x-contracts-0de654bbd52f7d4702cec9f1a9a5a2cbb793181b.zip |
fix: scroll lag on doc reference and wiki pages by using react-scroll `spy` and only updating the sidebar menu items whose active state had changed
Diffstat (limited to 'packages/react-shared/src/components/link.tsx')
-rw-r--r-- | packages/react-shared/src/components/link.tsx | 16 |
1 files changed, 15 insertions, 1 deletions
diff --git a/packages/react-shared/src/components/link.tsx b/packages/react-shared/src/components/link.tsx index 5a456109b..089e6e2ba 100644 --- a/packages/react-shared/src/components/link.tsx +++ b/packages/react-shared/src/components/link.tsx @@ -7,7 +7,7 @@ import * as validUrl from 'valid-url'; import { LinkType } from '../types'; import { constants } from '../utils/constants'; -interface LinkProps { +interface BaseLinkProps { to: string; shouldOpenInNewTab?: boolean; className?: string; @@ -18,6 +18,12 @@ interface LinkProps { fontColor?: string; } +interface ScrollLinkProps extends BaseLinkProps { + onActivityChanged?: (isActive: boolean) => void; +} + +type LinkProps = BaseLinkProps & ScrollLinkProps; + export interface LinkState {} /** @@ -103,11 +109,14 @@ export class Link extends React.Component<LinkProps, LinkState> { <ScrollLink to={this.props.to} offset={0} + spy={true} hashSpy={true} duration={constants.DOCS_SCROLL_DURATION_MS} containerId={constants.SCROLL_CONTAINER_ID} className={this.props.className} style={styleWithDefault} + onSetActive={this._onActivityChanged.bind(this, true)} + onSetInactive={this._onActivityChanged.bind(this, false)} > <span onClick={this._onClickPropagateClickEventAroundScrollLink.bind(this)}> {this.props.children} @@ -119,6 +128,11 @@ export class Link extends React.Component<LinkProps, LinkState> { throw new Error(`Unrecognized LinkType: ${type}`); } } + private _onActivityChanged(isActive: boolean): void { + if (this.props.onActivityChanged) { + this.props.onActivityChanged(isActive); + } + } // HACK(fabio): For some reason, the react-scroll link decided to stop the propagation of click events. // We do however rely on these events being propagated in certain scenarios (e.g when the link // is within a dropdown we want to close upon being clicked). Because of this, we register the |