crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Fabio Berger
2018-10-19 17:40:55 +01:00
parent d129c922ed
commit 0de654bbd5
7 changed files with 111 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/react-shared/src/components/link.tsx
View File

@@ -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

119
packages/react-shared/src/components/nested_sidebar_menu.tsx
View File

@@ -1,119 +0,0 @@
import { ObjectMap } from '@0x/types';
import * as _ from 'lodash';
import MenuItem from 'material-ui/MenuItem';
import * as React from 'react';
import { ALink, Styles } from '../types';
import { colors } from '../utils/colors';
import { utils } from '../utils/utils';
import { Link } from './link';
export interface NestedSidebarMenuProps {
sectionNameToLinks: ObjectMap<ALink[]>;
sidebarHeader?: React.ReactNode;
shouldReformatMenuItemNames?: boolean;
}
export interface NestedSidebarMenuState {
scrolledToId?: string;
}
const styles: Styles = {
menuItem: {
minHeight: 0,
paddingLeft: 8,
borderRadius: 6,
},
menuItemInnerDiv: {
color: colors.grey800,
fontSize: 14,
lineHeight: 2,
padding: 0,
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
},
};
export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, NestedSidebarMenuState> {
public static defaultProps: Partial<NestedSidebarMenuProps> = {
shouldReformatMenuItemNames: true,
};
private _urlIntervalCheckId: number | undefined = undefined;
constructor(props: NestedSidebarMenuProps) {
super(props);
this.state = {};
}
public componentDidMount(): void {
this._urlIntervalCheckId = window.setInterval(() => {
const scrollId = location.hash.slice(1);
if (scrollId !== this.state.scrolledToId) {
this.setState({
scrolledToId: scrollId,
});
}
}, 200);
}
public componentWillUnmount(): void {
window.clearInterval(this._urlIntervalCheckId);
}
public render(): React.ReactNode {
const navigation = _.map(this.props.sectionNameToLinks, (links: ALink[], sectionName: string) => {
const finalSectionName = utils.convertCamelCaseToSpaces(sectionName);
// tslint:disable-next-line:no-unused-variable
return (
<div key={`section-${sectionName}`} className="py1" style={{ color: colors.greyTheme }}>
<div style={{ fontSize: 14, letterSpacing: 0.5 }} className="py1 pl1">
{finalSectionName.toUpperCase()}
</div>
{this._renderMenuItems(links)}
</div>
);
});
return (
<div>
{this.props.sidebarHeader}
<div>{navigation}</div>
</div>
);
}
private _renderMenuItems(links: ALink[]): React.ReactNode[] {
const scrolledToId = this.state.scrolledToId;
const menuItems = _.map(links, link => {
const finalMenuItemName = this.props.shouldReformatMenuItemNames
? utils.convertDashesToSpaces(link.title)
: link.title;
let menuItemStyle = styles.menuItem;
let menuItemInnerDivStyle = styles.menuItemInnerDiv;
const isScrolledTo = link.to === scrolledToId;
if (isScrolledTo) {
menuItemStyle = {
...menuItemStyle,
backgroundColor: colors.lightLinkBlue,
};
menuItemInnerDivStyle = {
...menuItemInnerDivStyle,
color: colors.white,
fontWeight: 'bold',
};
}
return (
<div key={`menuItem-${finalMenuItemName}`}>
<Link to={link.to} shouldOpenInNewTab={link.shouldOpenInNewTab}>
<MenuItem style={menuItemStyle} innerDivStyle={menuItemInnerDivStyle}>
<span
style={{
textTransform: this.props.shouldReformatMenuItemNames ? 'capitalize' : 'none',
}}
>
{finalMenuItemName}
</span>
</MenuItem>
</Link>
</div>
);
});
return menuItems;
}
}

1
packages/react-shared/src/index.ts
View File

@@ -2,7 +2,6 @@ export { AnchorTitle } from './components/anchor_title';
export { MarkdownLinkBlock } from './components/markdown_link_block';
export { MarkdownCodeBlock } from './components/markdown_code_block';
export { MarkdownSection } from './components/markdown_section';
export { NestedSidebarMenu } from './components/nested_sidebar_menu';
export { SectionHeader } from './components/section_header';
export { Link } from './components/link';