chore: Replace state with styled-components for hover detection
This commit is contained in:
Fabio Berger
@@ -6,6 +6,7 @@ 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 { styled } from 'ts/style/theme';
|
||||
import { BrowserType, ScreenWidths } from 'ts/types';
|
||||
import { Translate } from 'ts/utils/translate';
|
||||
import { utils } from 'ts/utils/utils';
|
||||
@@ -14,6 +15,7 @@ const THROTTLE_TIMEOUT = 100;
|
||||
const TOP_BAR_HEIGHT = 80;
|
||||
const browserType = utils.getBrowserType();
|
||||
const SCROLLER_WIDTH = browserType === BrowserType.Firefox ? 15 : 4;
|
||||
const SIDEBAR_PADDING = 22;
|
||||
|
||||
export interface DevelopersPageProps {
|
||||
location: Location;
|
||||
@@ -25,11 +27,70 @@ export interface DevelopersPageProps {
|
||||
}
|
||||
|
||||
export interface DevelopersPageState {
|
||||
isHoveringSidebar: boolean;
|
||||
isHoveringMainContent: boolean;
|
||||
isSidebarScrolling: boolean;
|
||||
}
|
||||
|
||||
const isUserOnMobile = sharedUtils.isUserOnMobile();
|
||||
|
||||
const scrollableContainerStyles = `
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
min-height: calc(100vh - ${TOP_BAR_HEIGHT}px);
|
||||
-webkit-overflow-scrolling: touch;
|
||||
`;
|
||||
|
||||
interface SidebarContainerProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const SidebarContainer =
|
||||
styled.div <
|
||||
SidebarContainerProps >
|
||||
`
|
||||
${scrollableContainerStyles}
|
||||
padding-top: 27px;
|
||||
padding-bottom: 100px;
|
||||
padding-left: ${SIDEBAR_PADDING}px;
|
||||
padding-right: ${SIDEBAR_PADDING}px;
|
||||
overflow: hidden;
|
||||
&:hover {
|
||||
overflow: auto;
|
||||
padding-right: ${SIDEBAR_PADDING - SCROLLER_WIDTH}px;
|
||||
}
|
||||
`;
|
||||
|
||||
interface MainContentContainerProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const MainContentContainer =
|
||||
styled.div <
|
||||
MainContentContainerProps >
|
||||
`
|
||||
${scrollableContainerStyles}
|
||||
padding-top: 0px;
|
||||
padding-left: 50px;
|
||||
padding-right: 50px;
|
||||
overflow: ${isUserOnMobile ? 'auto' : 'hidden'};
|
||||
&:hover {
|
||||
padding-right: ${50 - SCROLLER_WIDTH}px;
|
||||
overflow: auto;
|
||||
}
|
||||
@media (max-width: 40em) {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
&:hover {
|
||||
padding-right: ${20 - SCROLLER_WIDTH}px;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export class DevelopersPage extends React.Component<DevelopersPageProps, DevelopersPageState> {
|
||||
private readonly _throttledScreenWidthUpdate: () => void;
|
||||
private readonly _throttledSidebarScrolling: () => void;
|
||||
@@ -39,8 +100,6 @@ export class DevelopersPage extends React.Component<DevelopersPageProps, Develop
|
||||
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,
|
||||
};
|
||||
}
|
||||
@@ -58,21 +117,8 @@ export class DevelopersPage extends React.Component<DevelopersPageProps, Develop
|
||||
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;
|
||||
const sidebarPadding = 22;
|
||||
const isUserOnMobile = sharedUtils.isUserOnMobile();
|
||||
return (
|
||||
<Container
|
||||
className="flex items-center overflow-hidden"
|
||||
@@ -81,7 +127,7 @@ export class DevelopersPage extends React.Component<DevelopersPageProps, Develop
|
||||
colors.white
|
||||
} 50%, ${colors.white} 100%)`}
|
||||
>
|
||||
<DocumentTitle title="0x Docs DevelopersPage" />
|
||||
<DocumentTitle title="0x Docs" />
|
||||
<Container className="flex mx-auto" height="100vh">
|
||||
<Container
|
||||
className="sm-hide xs-hide relative"
|
||||
@@ -98,28 +144,9 @@ export class DevelopersPage extends React.Component<DevelopersPageProps, Develop
|
||||
<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}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
paddingBottom: 100,
|
||||
paddingLeft: sidebarPadding,
|
||||
paddingRight: this.state.isHoveringSidebar
|
||||
? sidebarPadding - SCROLLER_WIDTH
|
||||
: sidebarPadding,
|
||||
}}
|
||||
>
|
||||
{this.props.screenWidth !== ScreenWidths.Sm && this.props.sidebar}
|
||||
</div>
|
||||
</div>
|
||||
<SidebarContainer onWheel={this._throttledSidebarScrolling}>
|
||||
{this.props.screenWidth !== ScreenWidths.Sm && this.props.sidebar}
|
||||
</SidebarContainer>
|
||||
</Container>
|
||||
<Container
|
||||
className="relative"
|
||||
@@ -135,43 +162,14 @@ export class DevelopersPage extends React.Component<DevelopersPageProps, Develop
|
||||
sidebar={this.props.sidebar}
|
||||
/>
|
||||
</Container>
|
||||
<div
|
||||
id={sharedConstants.SCROLL_CONTAINER_ID}
|
||||
className="absolute"
|
||||
style={{
|
||||
...scrollableContainerStyles,
|
||||
paddingTop: 0,
|
||||
paddingLeft: mainContentPadding,
|
||||
paddingRight: this.state.isHoveringMainContent
|
||||
? mainContentPadding - SCROLLER_WIDTH
|
||||
: mainContentPadding,
|
||||
overflow: this.state.isHoveringMainContent || isUserOnMobile ? 'auto' : 'hidden',
|
||||
}}
|
||||
onMouseEnter={this._onMainContentHover.bind(this, true)}
|
||||
onMouseOver={this._onMainContentHover.bind(this, true)}
|
||||
onMouseLeave={this._onMainContentHover.bind(this, false)}
|
||||
>
|
||||
<MainContentContainer id={sharedConstants.SCROLL_CONTAINER_ID}>
|
||||
{this.props.mainContent}
|
||||
</div>
|
||||
</MainContentContainer>
|
||||
</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,
|
||||
|
||||
Reference in New Issue
Block a user