react-customscroll - npm Package Compare versions

Comparing version 2.0.0 to 2.0.1

dist/customscroll.js

@@ -9,2 +9,2 @@ /*!
  */
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.CustomScroll=t(require("react")):e.CustomScroll=t(e.React)}(this,function(e){return function(e){function t(r){if(o[r])return o[r].exports;var l=o[r]={exports:{},id:r,loaded:!1};return e[r].call(l.exports,l,l.exports,t),l.loaded=!0,l.exports}var o={};return t.m=e,t.c=o,t.p="",t(0)}([function(e,t,o){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function l(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function n(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&(e[r]=o[r])}return e},c=function(){function e(e,t){for(var o=0;o<t.length;o++){var r=t[o];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,o,r){return o&&e(t.prototype,o),r&&e(t,r),t}}(),a=o(1),u=r(a),h=o(2),d=o(3),f=r(d),p=o(4),m=r(p),v=o(5),y=r(v),g=o(6),S=(r(g),o(7)),b=r(S),w=20,k=500,H=/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),x=function(e){function t(e){l(this,t);var o=n(this,Object.getPrototypeOf(t).call(this,e));o.nextWrapperHeight=0,o.nextHolderHeight=0;var r=(0,f.default)(),i=o;return o.reset=function(){i.removeListeners(),i.blockSelection(!0)},o.styles=(0,b.default)({scrollWidth:"undefined"!=typeof e.scrollWidth?e.scrollWidth:"6px",scrollAreaColor:"undefined"!=typeof e.scrollAreaColor?e.scrollAreaColor:"#494949",scrollBarRadius:"undefined"!=typeof e.scrollBarRadius?e.scrollBarRadius:"6px",scrollBarColor:"undefined"!=typeof e.scrollBarColor?e.scrollBarColor:"#aeaeae"}),o.restScrollAfterResize=function(){i.nextWrapperHeight=0,i.nextHolderHeight=0},(0,h.on)(document,["mouseWithoutWindow"],o.reset),(0,h.on)(window,["resize"],o.restScrollAfterResize),o.timer={},o.interval=setInterval(o.reinit.bind(o),k),o.state={width:H?"100%":"calc(100% + "+r+"px)",selection:!0,scrollAreaShow:!1,animate:e.animate||!0},o}return i(t,e),c(t,[{key:"componentDidMount",value:function(){this.scrollBlock=this.refs.customScrollHolder,this.customScroll=this.refs.customScroll,this.customScrollHolder=this.refs.customScrollFrame}},{key:"componentWillUnmount",value:function(){clearInterval(this.interval),this.removeListeners(),clearTimeout(this.timer)}},{key:"getParams",value:function(){var e=this.customScroll.offsetHeight,t=this.customScrollHolder.offsetHeight,o=e/t,r=e*o;return{wrapperHeight:e,holderHeight:t,percentDiff:o,height:r}}},{key:"blockSelection",value:function(e){e||(0,m.default)(),this.setState({selection:!!e})}},{key:"onMouseDown",value:function(e){e.stopPropagation(),e.preventDefault();var t=this.scrollBlock,o=e.touches?e.touches[0].pageY:e.pageY,r=t.scrollTop;this.blockSelection(!1);var l=this;this.scrollRun=function(e){e.stopPropagation(),e.preventDefault();var n=l.getParams(),i=n.holderHeight,s=n.wrapperHeight,c=i/s,a=e.touches?e.touches[0].pageY:e.pageY;(0,y.default)(t,(a-o)*c+r)},this.endScroll=function(){l.removeListeners(),l.blockSelection(!0)},(0,h.on)(document,["mouseup","touchend"],this.endScroll),(0,h.on)(document,["mousemove","touchmove"],this.scrollRun)}},{key:"removeListeners",value:function(){(0,h.off)(document,["mouseWithoutWindow"],this.reset),(0,h.off)(window,["resize"],this.restScrollAfterResize),(0,h.off)(document,["mouseup","touchend"],this.endScroll),(0,h.off)(document,["mousemove","touchmove"],this.scrollRun)}},{key:"reinit",value:function(){var e=this.getParams(),t=e.wrapperHeight,o=e.holderHeight;t===this.nextWrapperHeight&&o===this.nextHolderHeight||this.setState({scrollAreaShow:o>t}),this.nextWrapperHeight=t,this.nextHolderHeight=o}},{key:"jump",value:function(e){var t=e.touches?e.touches[0].pageY:e.pageY,o=this.refs.scrollBar,r=this.scrollBlock.scrollTop,l=this.getParams(),n=l.wrapperHeight,i=this.scrollBlock.getBoundingClientRect().top;if(t<i+o.offsetTop||t>i+o.offsetTop+o.offsetHeight){var s=i+o.offsetTop<=t?1:-1,c=r+n*s;(0,y.default)(this.scrollBlock,c)}}},{key:"getScrollArea",value:function(){return u.default.createElement("div",{ref:"scroll-area",style:this.styles.scrollArea,onClick:this.jump.bind(this)},u.default.createElement("div",{ref:"scroll-area-holder",style:this.styles.scrollAreaFrame},u.default.createElement("div",{ref:"scrollBar",style:s({},this.styles.scrollBar,this.getScrollBarStyles.call(this)),onMouseDown:this.onMouseDown.bind(this),onTouchStart:this.onMouseDown.bind(this)})))}},{key:"scroll",value:function(){this.setState({scrollTop:this.scrollBlock.scrollTop})}},{key:"getScrollBarStyles",value:function(){var e=this.getParams(),t=e.holderHeight,o=e.percentDiff,r=e.height,l=this.state.scrollTop||this.scrollBlock.scrollTop,n=r<w?o-(w-r)/t:o,i=r<w?w:r;return{top:l*n,height:i}}},{key:"componentWillReceiveProps",value:function(e){var t=parseInt(e.scrollTo);"undefined"==typeof t||isNaN(t)||y.default.call(this,this.scrollBlock,t,this.state.animate)}},{key:"setY",value:function(e){y.default.call(this,this.scrollBlock,e,this.state.animate)}},{key:"render",value:function(){var e=this.styles.ctmScroll,t=this.styles.ctmScrollFrame;return this.state.scrollAreaShow&&(t=s({},t,this.styles.ctmScrollActive)),this.state.selection&&(e=s({},e,this.styles.noselect)),u.default.createElement("div",{ref:"customScroll",style:e},u.default.createElement("div",{ref:"customScrollHolder",style:s({},{width:this.state.width},this.styles.ctmScrollHolder),onScroll:this.scroll.bind(this)},u.default.createElement("div",{ref:"customScrollFrame",style:t},this.props.children),this.state.scrollAreaShow?this.getScrollArea.call(this):null))}}]),t}(a.Component);e.exports=x},function(t,o){t.exports=e},function(e,t){"use strict";function o(e,t,o){t.forEach(function(t){e.addEventListener(t,o)})}function r(e,t,o){t.forEach(function(t){e.removeEventListener(t,o)})}Object.defineProperty(t,"__esModule",{value:!0}),t.on=o,t.off=r},function(e,t){"use strict";function o(){var e=document.createElement("p");e.style.width="100%",e.style.height="200px";var t=document.createElement("div");t.style.position="absolute",t.style.top="0px",t.style.left="0px",t.style.visibility="hidden",t.style.width="200px",t.style.height="150px",t.style.overflow="hidden",t.appendChild(e),document.body.appendChild(t);var o=e.offsetWidth;t.style.overflow="scroll";var r=e.offsetWidth;return o===r&&(r=t.clientWidth),document.body.removeChild(t),o-r}Object.defineProperty(t,"__esModule",{value:!0}),t.default=o},function(e,t){"use strict";function o(){document.selection?document.selection.empty():window.getSelection&&window.getSelection().removeAllRanges()}Object.defineProperty(t,"__esModule",{value:!0}),t.default=o},function(e,t){"use strict";function o(e,t,r){if(r<=0)return!1;var l=t-e.scrollTop,n=l/r*10;setTimeout(function(){e.scrollTop=e.scrollTop+n,e.scrollTop!==t&&o.call(this,e,t,r-10)}.bind(this),10)}Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t,r){r?o.call(this,e,t,500):e.scrollTop=t}},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=function(){function e(){function e(){var e=document.createEvent("Event");e.initEvent("mouseWithoutWindow",!0,!0),document.dispatchEvent(e)}document.addEventListener("mouseup",function(t){var o=window,r=document,l=r.documentElement,n=r.getElementsByTagName("body")[0],i=o.innerWidth||l.clientWidth||n.clientWidth,s=o.innerHeight||l.clientHeight||n.clientHeight;(t.clientX>=i||t.clientX<0||t.clientY>=s||t.clientY<0)&&e()}),window.addEventListener("blur",function(){e()})}var t;return{getInstance:function(){return t||(t=e()),t}}}(),r=o.getInstance();t.default=r},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){return{scrollArea:{background:e.scrollAreaColor,width:e.scrollWidth,padding:"1px",zIndex:"10",top:"0",right:"0",position:"absolute",height:"100%"},scrollAreaFrame:{height:"100%",position:"relative"},scrollBar:{borderRadius:e.scrollBarRadius,position:"absolute",top:"0",width:"100%",background:e.scrollBarColor,cursor:"pointer"},ctmScroll:{overflow:"hidden",height:"100%",position:"relative"},ctmScrollActive:{paddingRight:e.scrollWidth},ctmScrollFrame:{overflow:"hidden"},noselect:{WebkitTouchCallout:"none",WebkitUserSelect:"none",MozUserSelect:"none",msUserSelect:"none",userSelect:"none"},ctmScrollHolder:{overflowY:"scroll",height:"100%"}}}}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.CustomScroll=t(require("react")):e.CustomScroll=t(e.React)}(this,function(e){return function(e){function t(r){if(o[r])return o[r].exports;var l=o[r]={exports:{},id:r,loaded:!1};return e[r].call(l.exports,l,l.exports,t),l.loaded=!0,l.exports}var o={};return t.m=e,t.c=o,t.p="",t(0)}([function(e,t,o){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function l(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function n(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&(e[r]=o[r])}return e},c=function(){function e(e,t){for(var o=0;o<t.length;o++){var r=t[o];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,o,r){return o&&e(t.prototype,o),r&&e(t,r),t}}(),a=o(1),u=r(a),h=o(2),d=o(3),f=r(d),p=o(4),m=r(p),v=o(5),y=r(v),g=o(6),S=(r(g),o(7)),b=r(S),w=20,k=500,H=/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),x=function(e){function t(e){l(this,t);var o=n(this,Object.getPrototypeOf(t).call(this,e));o.nextWrapperHeight=0,o.nextHolderHeight=0;var r=(0,f.default)(),i=o;return o.reset=function(){i.removeListeners(),i.blockSelection(!0)},o.styles=(0,b.default)({scrollWidth:"undefined"!=typeof e.scrollWidth?e.scrollWidth:"6px",scrollAreaColor:"undefined"!=typeof e.scrollAreaColor?e.scrollAreaColor:"#494949",scrollBarRadius:"undefined"!=typeof e.scrollBarRadius?e.scrollBarRadius:"6px",scrollBarColor:"undefined"!=typeof e.scrollBarColor?e.scrollBarColor:"#aeaeae"}),o.restScrollAfterResize=function(){i.nextWrapperHeight=0,i.nextHolderHeight=0},(0,h.on)(document,["mouseWithoutWindow"],o.reset),(0,h.on)(window,["resize"],o.restScrollAfterResize),o.timer={},o.interval=setInterval(o.reinit.bind(o),k),o.state={width:H?"100%":"calc(100% + "+r+"px)",selection:!0,scrollAreaShow:!1,animate:e.animate||!0},o}return i(t,e),c(t,[{key:"componentDidMount",value:function(){this.scrollBlock=this.refs.customScrollHolder,this.customScroll=this.refs.customScroll,this.customScrollHolder=this.refs.customScrollFrame}},{key:"componentWillUnmount",value:function(){clearInterval(this.interval),this.removeListeners(),clearTimeout(this.timer)}},{key:"getParams",value:function(){var e=this.customScroll.offsetHeight,t=this.customScrollHolder.offsetHeight,o=e/t,r=e*o;return{wrapperHeight:e,holderHeight:t,percentDiff:o,height:r}}},{key:"blockSelection",value:function(e){e||(0,m.default)(),this.setState({selection:!!e})}},{key:"onMouseDown",value:function(e){e.stopPropagation(),e.preventDefault();var t=this.scrollBlock,o=e.touches?e.touches[0].pageY:e.pageY,r=t.scrollTop;this.blockSelection(!1);var l=this;this.scrollRun=function(e){e.stopPropagation(),e.preventDefault();var n=l.getParams(),i=n.holderHeight,s=n.wrapperHeight,c=i/s,a=e.touches?e.touches[0].pageY:e.pageY;(0,y.default)(t,(a-o)*c+r)},this.endScroll=function(){l.removeListeners(),l.blockSelection(!0)},(0,h.on)(document,["mouseup","touchend"],this.endScroll),(0,h.on)(document,["mousemove","touchmove"],this.scrollRun)}},{key:"removeListeners",value:function(){(0,h.off)(document,["mouseWithoutWindow"],this.reset),(0,h.off)(window,["resize"],this.restScrollAfterResize),(0,h.off)(document,["mouseup","touchend"],this.endScroll),(0,h.off)(document,["mousemove","touchmove"],this.scrollRun)}},{key:"reinit",value:function(){var e=this.getParams(),t=e.wrapperHeight,o=e.holderHeight;t===this.nextWrapperHeight&&o===this.nextHolderHeight||this.setState({scrollAreaShow:o>t}),this.nextWrapperHeight=t,this.nextHolderHeight=o}},{key:"jump",value:function(e){var t=e.touches?e.touches[0].pageY:e.pageY,o=this.refs.scrollBar,r=this.scrollBlock.scrollTop,l=this.getParams(),n=l.wrapperHeight,i=this.scrollBlock.getBoundingClientRect().top;if(t<i+o.offsetTop||t>i+o.offsetTop+o.offsetHeight){var s=i+o.offsetTop<=t?1:-1,c=r+n*s;(0,y.default)(this.scrollBlock,c)}}},{key:"getScrollArea",value:function(){return u.default.createElement("div",{ref:"scroll-area",style:this.styles.scrollArea,onClick:this.jump.bind(this)},u.default.createElement("div",{ref:"scroll-area-holder",style:this.styles.scrollAreaFrame},u.default.createElement("div",{ref:"scrollBar",style:s({},this.styles.scrollBar,this.getScrollBarStyles.call(this)),onMouseDown:this.onMouseDown.bind(this),onTouchStart:this.onMouseDown.bind(this)})))}},{key:"scroll",value:function(){this.setState({scrollTop:this.scrollBlock.scrollTop})}},{key:"getScrollBarStyles",value:function(){var e=this.getParams(),t=e.holderHeight,o=e.percentDiff,r=e.height,l=this.state.scrollTop||this.scrollBlock.scrollTop,n=r<w?o-(w-r)/t:o,i=r<w?w:r;return{top:l*n,height:i}}},{key:"componentWillReceiveProps",value:function(e){var t=parseInt(e.scrollTo);"undefined"==typeof t||isNaN(t)||y.default.call(this,this.scrollBlock,t,this.state.animate)}},{key:"setY",value:function(e){y.default.call(this,this.scrollBlock,e,this.state.animate)}},{key:"render",value:function(){var e=this.state.selection?this.styles.ctmScroll:s({},this.styles.ctmScroll,this.styles.noselect),t=this.state.scrollAreaShow?s({},this.styles.ctmScrollFrame,this.styles.ctmScrollActive):this.styles.ctmScrollFrame;return u.default.createElement("div",{ref:"customScroll",style:e},u.default.createElement("div",{ref:"customScrollHolder",style:s({},{width:this.state.width},this.styles.ctmScrollHolder),onScroll:this.scroll.bind(this)},u.default.createElement("div",{ref:"customScrollFrame",style:t},this.props.children),this.state.scrollAreaShow?this.getScrollArea.call(this):null))}}]),t}(a.Component);e.exports=x},function(t,o){t.exports=e},function(e,t){"use strict";function o(e,t,o){t.forEach(function(t){e.addEventListener(t,o)})}function r(e,t,o){t.forEach(function(t){e.removeEventListener(t,o)})}Object.defineProperty(t,"__esModule",{value:!0}),t.on=o,t.off=r},function(e,t){"use strict";function o(){var e=document.createElement("p");e.style.width="100%",e.style.height="200px";var t=document.createElement("div");t.style.position="absolute",t.style.top="0px",t.style.left="0px",t.style.visibility="hidden",t.style.width="200px",t.style.height="150px",t.style.overflow="hidden",t.appendChild(e),document.body.appendChild(t);var o=e.offsetWidth;t.style.overflow="scroll";var r=e.offsetWidth;return o===r&&(r=t.clientWidth),document.body.removeChild(t),o-r}Object.defineProperty(t,"__esModule",{value:!0}),t.default=o},function(e,t){"use strict";function o(){document.selection?document.selection.empty():window.getSelection&&window.getSelection().removeAllRanges()}Object.defineProperty(t,"__esModule",{value:!0}),t.default=o},function(e,t){"use strict";function o(e,t,r){if(r<=0)return!1;var l=t-e.scrollTop,n=l/r*10;setTimeout(function(){e.scrollTop=e.scrollTop+n,e.scrollTop!==t&&o.call(this,e,t,r-10)}.bind(this),10)}Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t,r){r?o.call(this,e,t,500):e.scrollTop=t}},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=function(){function e(){function e(){var e=document.createEvent("Event");e.initEvent("mouseWithoutWindow",!0,!0),document.dispatchEvent(e)}document.addEventListener("mouseup",function(t){var o=window,r=document,l=r.documentElement,n=r.getElementsByTagName("body")[0],i=o.innerWidth||l.clientWidth||n.clientWidth,s=o.innerHeight||l.clientHeight||n.clientHeight;(t.clientX>=i||t.clientX<0||t.clientY>=s||t.clientY<0)&&e()}),window.addEventListener("blur",function(){e()})}var t;return{getInstance:function(){return t||(t=e()),t}}}(),r=o.getInstance();t.default=r},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){return{scrollArea:{background:e.scrollAreaColor,width:e.scrollWidth,padding:"1px",zIndex:"10",top:"0",right:"0",position:"absolute",height:"100%"},scrollAreaFrame:{height:"100%",position:"relative"},scrollBar:{borderRadius:e.scrollBarRadius,position:"absolute",top:"0",width:"100%",background:e.scrollBarColor,cursor:"pointer"},ctmScroll:{overflow:"hidden",height:"100%",position:"relative"},ctmScrollActive:{paddingRight:e.scrollWidth},ctmScrollFrame:{overflow:"hidden"},noselect:{WebkitTouchCallout:"none",WebkitUserSelect:"none",MozUserSelect:"none",msUserSelect:"none",userSelect:"none"},ctmScrollHolder:{overflowY:"scroll",height:"100%"}}}}])});

package.json

 {
   "name": "react-customscroll",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "This is little component for custom scroll in React",
@@ -5,0 +5,0 @@ "main": "dist/customscroll.js",

README.md

@@ -1,4 +0,4 @@
-# React Custom Scroll v2
+# React Custom Scroll
 
-This is little component for custom scroll in React. It is very customizable and flexible component. In version 2 you can customization scrollbar
+This is little component for custom scroll in React. It is very customizable and flexible component. You can customization scrollbar.
 
@@ -5,0 +5,0 @@ [Demo](http://natrube.net/custom-scroll/index.html)

src/index.jsx

@@ -210,10 +210,5 @@ import React, {Component} from 'react';
     render() {
-        var ctmScroll = this.styles.ctmScroll;
-        var ctmScrollFrame = this.styles.ctmScrollFrame;
-        if (this.state.scrollAreaShow) {
-            ctmScrollFrame = Object.assign({}, ctmScrollFrame, this.styles.ctmScrollActive);
-        }
-        if (this.state.selection) {
-            ctmScroll = Object.assign({}, ctmScroll, this.styles.noselect);
-        }
+        var ctmScroll      = !this.state.selection     ? Object.assign({}, this.styles.ctmScroll,      this.styles.noselect)        : this.styles.ctmScroll,
+            ctmScrollFrame = this.state.scrollAreaShow ? Object.assign({}, this.styles.ctmScrollFrame, this.styles.ctmScrollActive) : this.styles.ctmScrollFrame;
+        
         return (
@@ -220,0 +215,0 @@ <div ref="customScroll" style={ctmScroll}>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

2418690

Lines of code

58717

decreased by-0.01%

No dependency changes