From 199f240e7c55f4c0ae953c02e52e9f21abc0a83a Mon Sep 17 00:00:00 2001 From: Roman Hotsiy Date: Tue, 23 Jan 2018 14:58:30 +0200 Subject: [PATCH] fix: perfect scroll not working --- src/common-elements/panels.ts | 2 +- src/common-elements/perfect-scrollbar.ts | 10 ----- src/common-elements/perfect-scrollbar.tsx | 48 +++++++++++++++++++++++ src/components/SideMenu/SideMenu.tsx | 13 +++++- src/services/MenuStore.ts | 6 +-- yarn.lock | 19 ++------- 6 files changed, 65 insertions(+), 33 deletions(-) delete mode 100644 src/common-elements/perfect-scrollbar.ts create mode 100644 src/common-elements/perfect-scrollbar.tsx 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: