fix: perfect scroll not working

Redocly · Jan 23, 2018 · 199f240 · 199f240
1 parent 2bae43f
commit 199f240
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 33 deletions.
diff --git a/src/common-elements/panels.ts b/src/common-elements/panels.ts
@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '../styled-components';
 
 export const MiddlePanel = styled.div`
   width: ${props => 100 - props.theme.rightPanel.width}%;

diff --git a/src/common-elements/perfect-scrollbar.ts b/src/common-elements/perfect-scrollbar.ts
diff --git a/src/common-elements/perfect-scrollbar.tsx b/src/common-elements/perfect-scrollbar.tsx
@@ -0,0 +1,48 @@
+import * as React from 'react';
+
+import { default as PerfectScrollbarConstructor } from 'perfect-scrollbar';
+import psStyles from 'perfect-scrollbar/css/perfect-scrollbar.css';
+import styled, { injectGlobal } from '../styled-components';
+
+injectGlobal`${psStyles.toString()}`;
+
+const StyledScrollWrapper = styled.div`
+  position: relative;
+`;
+
+export class PerfectScrollbar extends React.Component<{
+  options?: PerfectScrollbarConstructor.Options;
+  className?: string;
+  updateFn: (fn) => void;
+}> {
+  private _container: HTMLElement;
+  private inst: PerfectScrollbarConstructor;
+
+  componentDidMount() {
+    this.inst = new PerfectScrollbarConstructor(this._container, this.props.options || {});
+  }
+
+  componentDidUpdate() {
+    this.inst.update();
+  }
+
+  componentWillUnmount() {
+    this.inst.destroy();
+  }
+
+  handleRef = ref => {
+    this._container = ref;
+  };
+
+  render() {
+    const { children, className, updateFn } = this.props;
+
+    updateFn(this.componentDidUpdate.bind(this));
+
+    return (
+      <StyledScrollWrapper className={`scrollbar-container ${className}`} innerRef={this.handleRef}>
+        {children}
+      </StyledScrollWrapper>
+    );
+  }
+}
diff --git a/src/components/SideMenu/SideMenu.tsx b/src/components/SideMenu/SideMenu.tsx
@@ -9,6 +9,8 @@ import { PerfectScrollbar } from '../../common-elements/perfect-scrollbar';
 
 @observer
 export class SideMenu extends ComponentWithOptions<{ menu: MenuStore }> {
+  private _updateScroll?: () => void;
+
   render() {
     const store = this.props.menu;
     const nativeScrollbars = this.options.nativeScrollbars;
@@ -22,13 +24,22 @@ export class SideMenu extends ComponentWithOptions<{ menu: MenuStore }> {
         onActivate={this.activate}
       />
     ) : (
-      <PerfectScrollbar>
+      <PerfectScrollbar updateFn={this.saveScrollUpdate}>
         <MenuItems items={store.items} onActivate={this.activate} />
       </PerfectScrollbar>
     );
   }
 
   activate = (item: IMenuItem) => {
     this.props.menu.activateAndScroll(item, true);
+    setTimeout(() => {
+      if (this._updateScroll) {
+        this._updateScroll();
+      }
+    });
+  };
+
+  private saveScrollUpdate = upd => {
+    this._updateScroll = upd;
   };
 }
diff --git a/src/services/MenuStore.ts b/src/services/MenuStore.ts
@@ -221,11 +221,7 @@ export class MenuStore {
    * @see MenuStore.activate
    */
   @action
-  activateAndScroll(
-    item: IMenuItem | undefined,
-    updateHash: boolean,
-    rewriteHistory?: boolean,
-  ) {
+  activateAndScroll(item: IMenuItem | undefined, updateHash: boolean, rewriteHistory?: boolean) {
     this.activate(item, updateHash, rewriteHistory);
     this.scrollToActive();
   }

diff --git a/yarn.lock b/yarn.lock
@@ -5218,10 +5218,6 @@ pend@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
 
-perfect-scrollbar@^0.7.1:
-  version "0.7.1"
-  resolved "https://registry.yarnpkg.com/perfect-scrollbar/-/perfect-scrollbar-0.7.1.tgz#0c256fb9c5cee401d60a299687a3f9a61487e0d5"
-
 perfect-scrollbar@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/perfect-scrollbar/-/perfect-scrollbar-1.3.0.tgz#61da56f94b58870d8e0a617bce649cee17d1e3b2"
@@ -5609,7 +5605,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@*, prop-types@^15.5.0, prop-types@^15.5.4, prop-types@^15.6.0:
+prop-types@^15.5.0, prop-types@^15.5.4, prop-types@^15.6.0:
   version "15.6.0"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
   dependencies:
@@ -5792,7 +5788,7 @@ react-dev-utils@^4.1.0:
     strip-ansi "3.0.1"
     text-table "0.2.0"
 
-react-dom@>=0.14.0, react-dom@^16.2.0:
+react-dom@^16.2.0:
   version "16.2.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.2.0.tgz#69003178601c0ca19b709b33a83369fe6124c044"
   dependencies:
@@ -5822,15 +5818,6 @@ [email protected]:
     redbox-react "^1.2.5"
     source-map "^0.4.4"
 
-react-perfect-scrollbar@^0.2.2:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/react-perfect-scrollbar/-/react-perfect-scrollbar-0.2.3.tgz#abbe13a70348fdb18318152030c77c440b82ad44"
-  dependencies:
-    perfect-scrollbar "^0.7.1"
-    prop-types "*"
-    react ">=0.14.0"
-    react-dom ">=0.14.0"
-
 react-proxy@^3.0.0-alpha.0:
   version "3.0.0-alpha.1"
   resolved "https://registry.yarnpkg.com/react-proxy/-/react-proxy-3.0.0-alpha.1.tgz#4400426bcfa80caa6724c7755695315209fa4b07"
@@ -5861,7 +5848,7 @@ react-test-renderer@^16.0.0-0:
     object-assign "^4.1.1"
     prop-types "^15.6.0"
 
-react@>=0.14.0, react@^16.2.0:
+react@^16.2.0:
   version "16.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"
   dependencies: