From 9145fba3ec55b2e6b26f08d228aa46e3c43a6302 Mon Sep 17 00:00:00 2001 From: Jean-Christophe Date: Mon, 19 Dec 2016 22:17:24 +0100 Subject: [PATCH] fix(render): prevents recreation of ref function on every render --- lib/ScrollLock.js | 16 +++++++--------- lib/ScrollLock.js.map | 2 +- src/ScrollLock.jsx | 6 +++++- 3 files changed, 13 insertions(+), 11 deletions(-) diff --git a/lib/ScrollLock.js b/lib/ScrollLock.js index 5e16874..fe3b4ff 100644 --- a/lib/ScrollLock.js +++ b/lib/ScrollLock.js @@ -32,11 +32,13 @@ var ScrollLock = function (_Component) { args[_key] = arguments[_key]; } - return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ScrollLock.__proto__ || Object.getPrototypeOf(ScrollLock)).call.apply(_ref, [this].concat(args))), _this), _this.onScrollHandler = function (e) { + return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ScrollLock.__proto__ || Object.getPrototypeOf(ScrollLock)).call.apply(_ref, [this].concat(args))), _this), _this.setScrollingElement = function (r) { + _this.scrollingElement = r ? r.firstChild : r; + }, _this.onScrollHandler = function (e) { var elem = _this.scrollingElement; - var scrollTop = elem.scrollTop; - var scrollHeight = elem.scrollHeight; - var clientHeight = elem.clientHeight; + var scrollTop = elem.scrollTop, + scrollHeight = elem.scrollHeight, + clientHeight = elem.clientHeight; var wheelDelta = e.deltaY; var isDeltaPositive = wheelDelta > 0; @@ -69,13 +71,9 @@ var ScrollLock = function (_Component) { }, { key: 'render', value: function render() { - var _this2 = this; - return _react2.default.createElement( 'div', - { ref: function ref(r) { - return _this2.scrollingElement = r.firstChild; - } }, + { ref: this.setScrollingElement }, this.props.children ); } diff --git a/lib/ScrollLock.js.map b/lib/ScrollLock.js.map index 28b6a72..ad7b236 100644 --- a/lib/ScrollLock.js.map +++ b/lib/ScrollLock.js.map @@ -1 +1 @@ -{"version":3,"sources":["../src/ScrollLock.jsx"],"names":["ScrollLock","onScrollHandler","e","elem","scrollingElement","scrollTop","scrollHeight","clientHeight","wheelDelta","deltaY","isDeltaPositive","cancelScrollEvent","stopImmediatePropagation","preventDefault","returnValue","addEventListener","removeEventListener","r","firstChild","props","children"],"mappings":";;;;;;;;AAAA;;;;;;;;;;;;IAEMA,U;;;;;;;;;;;;;;8LASJC,e,GAAkB,UAACC,CAAD,EAAO;AACvB,UAAMC,OAAO,MAAKC,gBAAlB;AADuB,UAEfC,SAFe,GAE2BF,IAF3B,CAEfE,SAFe;AAAA,UAEJC,YAFI,GAE2BH,IAF3B,CAEJG,YAFI;AAAA,UAEUC,YAFV,GAE2BJ,IAF3B,CAEUI,YAFV;;AAGvB,UAAMC,aAAaN,EAAEO,MAArB;AACA,UAAMC,kBAAkBF,aAAa,CAArC;;AAEA,UAAIE,mBAAmBF,aAAaF,eAAeC,YAAf,GAA8BF,SAAlE,EAA6E;AAC3EF,aAAKE,SAAL,GAAiBC,YAAjB;AACA,eAAO,MAAKK,iBAAL,CAAuBT,CAAvB,CAAP;AACD,OAHD,MAIK,IAAI,CAACQ,eAAD,IAAoB,CAACF,UAAD,GAAcH,SAAtC,EAAiD;AACpDF,aAAKE,SAAL,GAAiB,CAAjB;AACA,eAAO,MAAKM,iBAAL,CAAuBT,CAAvB,CAAP;AACD;AACF,K,QAEDS,iB,GAAoB,UAACT,CAAD,EAAO;AACzBA,QAAEU,wBAAF;AACAV,QAAEW,cAAF;AACAX,QAAEY,WAAF,GAAgB,KAAhB;AACA,aAAO,KAAP;AACD,K;;;;;wCA7BmB;AAClB,WAAKV,gBAAL,CAAsBW,gBAAtB,CAAuC,OAAvC,EAAgD,KAAKd,eAArD,EAAsE,KAAtE;AACD;;;2CAEsB;AACrB,WAAKG,gBAAL,CAAsBY,mBAAtB,CAA0C,OAA1C,EAAmD,KAAKf,eAAxD,EAAyE,KAAzE;AACD;;;6BAyBQ;AAAA;;AACP,aACE;AAAA;AAAA,UAAK,KAAK;AAAA,mBAAK,OAAKG,gBAAL,GAAwBa,EAAEC,UAA/B;AAAA,WAAV;AACG,aAAKC,KAAL,CAAWC;AADd,OADF;AAKD;;;;;;kBAGYpB,U","file":"ScrollLock.js","sourcesContent":["import React, { Component } from 'react';\n\nclass ScrollLock extends Component {\n componentDidMount() {\n this.scrollingElement.addEventListener('wheel', this.onScrollHandler, false);\n }\n\n componentWillUnmount() {\n this.scrollingElement.removeEventListener('wheel', this.onScrollHandler, false);\n }\n\n onScrollHandler = (e) => {\n const elem = this.scrollingElement;\n const { scrollTop, scrollHeight, clientHeight } = elem;\n const wheelDelta = e.deltaY;\n const isDeltaPositive = wheelDelta > 0;\n\n if (isDeltaPositive && wheelDelta > scrollHeight - clientHeight - scrollTop) {\n elem.scrollTop = scrollHeight;\n return this.cancelScrollEvent(e);\n }\n else if (!isDeltaPositive && -wheelDelta > scrollTop) {\n elem.scrollTop = 0;\n return this.cancelScrollEvent(e);\n }\n };\n\n cancelScrollEvent = (e) => {\n e.stopImmediatePropagation();\n e.preventDefault();\n e.returnValue = false;\n return false;\n };\n\n render() {\n return (\n
this.scrollingElement = r.firstChild}>\n {this.props.children}\n
\n );\n }\n}\n\nexport default ScrollLock;\n"]} \ No newline at end of file +{"version":3,"sources":["../src/ScrollLock.jsx"],"names":["ScrollLock","setScrollingElement","r","scrollingElement","firstChild","onScrollHandler","e","elem","scrollTop","scrollHeight","clientHeight","wheelDelta","deltaY","isDeltaPositive","cancelScrollEvent","stopImmediatePropagation","preventDefault","returnValue","addEventListener","removeEventListener","props","children"],"mappings":";;;;;;;;AAAA;;;;;;;;;;;;IAEMA,U;;;;;;;;;;;;;;8LASJC,mB,GAAsB,UAACC,CAAD,EAAO;AAC3B,YAAKC,gBAAL,GAAwBD,IAAIA,EAAEE,UAAN,GAAmBF,CAA3C;AACD,K,QAEDG,e,GAAkB,UAACC,CAAD,EAAO;AACvB,UAAMC,OAAO,MAAKJ,gBAAlB;AADuB,UAEfK,SAFe,GAE2BD,IAF3B,CAEfC,SAFe;AAAA,UAEJC,YAFI,GAE2BF,IAF3B,CAEJE,YAFI;AAAA,UAEUC,YAFV,GAE2BH,IAF3B,CAEUG,YAFV;;AAGvB,UAAMC,aAAaL,EAAEM,MAArB;AACA,UAAMC,kBAAkBF,aAAa,CAArC;;AAEA,UAAIE,mBAAmBF,aAAaF,eAAeC,YAAf,GAA8BF,SAAlE,EAA6E;AAC3ED,aAAKC,SAAL,GAAiBC,YAAjB;AACA,eAAO,MAAKK,iBAAL,CAAuBR,CAAvB,CAAP;AACD,OAHD,MAIK,IAAI,CAACO,eAAD,IAAoB,CAACF,UAAD,GAAcH,SAAtC,EAAiD;AACpDD,aAAKC,SAAL,GAAiB,CAAjB;AACA,eAAO,MAAKM,iBAAL,CAAuBR,CAAvB,CAAP;AACD;AACF,K,QAEDQ,iB,GAAoB,UAACR,CAAD,EAAO;AACzBA,QAAES,wBAAF;AACAT,QAAEU,cAAF;AACAV,QAAEW,WAAF,GAAgB,KAAhB;AACA,aAAO,KAAP;AACD,K;;;;;wCAjCmB;AAClB,WAAKd,gBAAL,CAAsBe,gBAAtB,CAAuC,OAAvC,EAAgD,KAAKb,eAArD,EAAsE,KAAtE;AACD;;;2CAEsB;AACrB,WAAKF,gBAAL,CAAsBgB,mBAAtB,CAA0C,OAA1C,EAAmD,KAAKd,eAAxD,EAAyE,KAAzE;AACD;;;6BA6BQ;AACP,aACE;AAAA;AAAA,UAAK,KAAK,KAAKJ,mBAAf;AACG,aAAKmB,KAAL,CAAWC;AADd,OADF;AAKD;;;;;;kBAGYrB,U","file":"ScrollLock.js","sourcesContent":["import React, { Component } from 'react';\n\nclass ScrollLock extends Component {\n componentDidMount() {\n this.scrollingElement.addEventListener('wheel', this.onScrollHandler, false);\n }\n\n componentWillUnmount() {\n this.scrollingElement.removeEventListener('wheel', this.onScrollHandler, false);\n }\n\n setScrollingElement = (r) => {\n this.scrollingElement = r ? r.firstChild : r;\n };\n\n onScrollHandler = (e) => {\n const elem = this.scrollingElement;\n const { scrollTop, scrollHeight, clientHeight } = elem;\n const wheelDelta = e.deltaY;\n const isDeltaPositive = wheelDelta > 0;\n\n if (isDeltaPositive && wheelDelta > scrollHeight - clientHeight - scrollTop) {\n elem.scrollTop = scrollHeight;\n return this.cancelScrollEvent(e);\n }\n else if (!isDeltaPositive && -wheelDelta > scrollTop) {\n elem.scrollTop = 0;\n return this.cancelScrollEvent(e);\n }\n };\n\n cancelScrollEvent = (e) => {\n e.stopImmediatePropagation();\n e.preventDefault();\n e.returnValue = false;\n return false;\n };\n\n render() {\n return (\n
\n {this.props.children}\n
\n );\n }\n}\n\nexport default ScrollLock;\n"]} \ No newline at end of file diff --git a/src/ScrollLock.jsx b/src/ScrollLock.jsx index 52bfdf7..3126a9a 100644 --- a/src/ScrollLock.jsx +++ b/src/ScrollLock.jsx @@ -9,6 +9,10 @@ class ScrollLock extends Component { this.scrollingElement.removeEventListener('wheel', this.onScrollHandler, false); } + setScrollingElement = (r) => { + this.scrollingElement = r ? r.firstChild : r; + }; + onScrollHandler = (e) => { const elem = this.scrollingElement; const { scrollTop, scrollHeight, clientHeight } = elem; @@ -34,7 +38,7 @@ class ScrollLock extends Component { render() { return ( -
this.scrollingElement = r.firstChild}> +
{this.props.children}
);