chore: Replace state with styled-components for hover detection

1 files changed, 69 insertions, 71 deletions

diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx
index 9e4f6d413..4ea688529 100644
--- a/packages/website/ts/pages/documentation/developers_page.tsx
+++ b/packages/website/ts/pages/documentation/developers_page.tsx
@@ -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,