diff --git a/src/common-elements/panels.ts b/src/common-elements/panels.ts
index be92d448..ea5d5fdc 100644
--- 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
deleted file mode 100644
index 7a41d9fe..00000000
--- a/src/common-elements/perfect-scrollbar.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import psStyles from 'perfect-scrollbar/css/perfect-scrollbar.css';
-import styled, { injectGlobal } from '../styled-components';
-
-import PerfectScrollbarOriginal from 'react-perfect-scrollbar';
-
-injectGlobal`${psStyles}`;
-
-export const PerfectScrollbar = styled(PerfectScrollbarOriginal)`
- position: relative;
-`;
diff --git a/src/common-elements/perfect-scrollbar.tsx b/src/common-elements/perfect-scrollbar.tsx
new file mode 100644
index 00000000..578191bc
--- /dev/null
+++ 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 (
+
+ {children}
+
+ );
+ }
+}
diff --git a/src/components/SideMenu/SideMenu.tsx b/src/components/SideMenu/SideMenu.tsx
index bb0a106a..d4800c4a 100644
--- 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,7 +24,7 @@ export class SideMenu extends ComponentWithOptions<{ menu: MenuStore }> {
onActivate={this.activate}
/>
) : (
-
+
);
@@ -30,5 +32,14 @@ export class SideMenu extends ComponentWithOptions<{ menu: MenuStore }> {
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
index 8fea6b01..b08c7a29 100644
--- 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
index d7c27c20..9c3217bc 100644
--- 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 @@ react-hot-loader@3.0.0-beta.6:
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: