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

Refactor Home so that Dev section chrome is reusable across pages

Browse Source
This commit is contained in:
Fabio Berger
2018-10-12 15:54:44 +02:00
parent dcdc411ab7
commit de20ef1a49
14 changed files with 780 additions and 854 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
packages/website/ts/pages/documentation/developers_page.tsx Normal file
View File

@@ -0,0 +1,176 @@
import { ALink, colors, constants as sharedConstants, NestedSidebarMenu } from '@0xproject/react-shared';
import { ObjectMap } from '@0xproject/types';
import * as _ from 'lodash';
import * as React from 'react';
import DocumentTitle = require('react-document-title');
import { DocsLogo } from 'ts/components/documentation/docs_logo';
import { DocsTopBar } from 'ts/components/documentation/docs_top_bar';
import { Container } from 'ts/components/ui/container';
import { Dispatcher } from 'ts/redux/dispatcher';
import { ScreenWidths } from 'ts/types';
import { Translate } from 'ts/utils/translate';
import { utils } from 'ts/utils/utils';
const THROTTLE_TIMEOUT = 100;
const TOP_BAR_HEIGHT = 80;
const SCROLLER_WIDTH = 4;
export interface DevelopersPageProps {
location: Location;
translate: Translate;
screenWidth: ScreenWidths;
dispatcher: Dispatcher;
mainContent: React.ReactNode;
sectionNameToLinks: ObjectMap<ALink[]>;
}
export interface DevelopersPageState {
isHoveringSidebar: boolean;
isHoveringMainContent: boolean;
isSidebarScrolling: boolean;
}
export class DevelopersPage extends React.Component<DevelopersPageProps, DevelopersPageState> {
private readonly _throttledScreenWidthUpdate: () => void;
private readonly _throttledSidebarScrolling: () => void;
private _sidebarScrollClearingInterval: number;
constructor(props: DevelopersPageProps) {
super(props);
this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT);
this._throttledSidebarScrolling = _.throttle(this._onSidebarScroll.bind(this), THROTTLE_TIMEOUT);
this.state = {
isHoveringSidebar: false,
isHoveringMainContent: false,
isSidebarScrolling: false,
};
}
public componentDidMount(): void {
window.addEventListener('resize', this._throttledScreenWidthUpdate);
window.scrollTo(0, 0);
this._sidebarScrollClearingInterval = window.setInterval(() => {
this.setState({
isSidebarScrolling: false,
});
}, 1000);
}
public componentWillUnmount(): void {
window.removeEventListener('resize', this._throttledScreenWidthUpdate);
window.clearInterval(this._sidebarScrollClearingInterval);
}
public render(): React.ReactNode {
const scrollableContainerStyles: React.CSSProperties = {
position: 'absolute',
top: 80,
left: 0,
bottom: 0,
right: 0,
overflowX: 'hidden',
overflowY: 'scroll',
minHeight: `calc(100vh - ${TOP_BAR_HEIGHT}px)`,
WebkitOverflowScrolling: 'touch',
};
const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm;
const mainContentPadding = isSmallScreen ? 20 : 50;
return (
<Container
className="flex items-center overflow-hidden"
width="100%"
background={`linear-gradient(to right, ${colors.grey100} 0%, ${colors.grey100} 50%, ${
colors.white
} 50%, ${colors.white} 100%)`}
>
<DocumentTitle title="0x Docs DevelopersPage" />
<Container className="flex mx-auto" height="100vh">
<Container
className="sm-hide xs-hide relative"
width={234}
paddingLeft={22}
paddingRight={22}
paddingTop={0}
backgroundColor={colors.grey100}
>
<Container
borderBottom={this.state.isSidebarScrolling ? `1px solid ${colors.grey300}` : 'none'}
>
<Container paddingTop="30px" paddingLeft="10px" paddingBottom="8px">
<DocsLogo height={36} />
</Container>
</Container>
<div
style={{
...scrollableContainerStyles,
paddingTop: 27,
overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden',
}}
onMouseEnter={this._onSidebarHover.bind(this, true)}
onMouseLeave={this._onSidebarHover.bind(this, false)}
onWheel={this._throttledSidebarScrolling}
>
<Container paddingLeft="22px" paddingRight="22px" paddingBottom="100px">
<NestedSidebarMenu
sectionNameToLinks={this.props.sectionNameToLinks}
shouldReformatMenuItemNames={false}
/>
</Container>
</div>
</Container>
<Container
className="relative"
width={isSmallScreen ? '100vw' : 786}
paddingBottom="100px"
backgroundColor={colors.white}
>
<Container paddingLeft={mainContentPadding} paddingRight={mainContentPadding}>
<DocsTopBar
location={this.props.location}
translate={this.props.translate}
sectionNameToLinks={this.props.sectionNameToLinks}
/>
</Container>
<div
id={sharedConstants.SCROLL_CONTAINER_ID}
className="absolute"
style={{
...scrollableContainerStyles,
paddingTop: 30,
paddingLeft: mainContentPadding,
paddingRight: this.state.isHoveringMainContent
? mainContentPadding - SCROLLER_WIDTH
: mainContentPadding,
overflow: this.state.isHoveringMainContent ? 'auto' : 'hidden',
}}
onMouseEnter={this._onMainContentHover.bind(this, true)}
onMouseOver={this._onMainContentHover.bind(this, true)}
onMouseLeave={this._onMainContentHover.bind(this, false)}
>
{this.props.mainContent}
</div>
</Container>
</Container>
</Container>
);
}
private _onSidebarHover(isHovering: boolean, _event: React.FormEvent<HTMLInputElement>): void {
if (isHovering !== this.state.isHoveringSidebar) {
this.setState({
isHoveringSidebar: isHovering,
});
}
}
private _onMainContentHover(isHovering: boolean, _event: React.FormEvent<HTMLInputElement>): void {
if (isHovering !== this.state.isHoveringMainContent) {
this.setState({
isHoveringMainContent: isHovering,
});
}
}
private _onSidebarScroll(_event: React.FormEvent<HTMLInputElement>): void {
this.setState({
isSidebarScrolling: true,
});
}
private _updateScreenWidth(): void {
const newScreenWidth = utils.getScreenWidth();
this.props.dispatcher.updateScreenWidth(newScreenWidth);
}
} // tslint:disable:max-file-line-count