react-custom-scroll - npm Package Compare versions

Comparing version 2.0.0 to 2.0.1

dist/reactCustomScroll.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(function(){try{return require("prop-types")}catch(e){}}(),require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["prop-types","react","react-dom"],t):"object"==typeof exports?exports.ReactCustomScroll=t(function(){try{return require("prop-types")}catch(e){}}(),require("react"),require("react-dom")):e.ReactCustomScroll=t(e["prop-types"],e.react,e["react-dom"])}(this,function(e,t,o){return function(e){function t(r){if(o[r])return o[r].exports;var n=o[r]={exports:{},id:r,loaded:!1};return e[r].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var o={};return t.m=e,t.c=o,t.p="",t(0)}([function(e,t,o){e.exports=o(1)},function(e,t,o){"use strict";function r(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function l(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)}function s(e,t,o){return t=t||0===t?t:e,o=o||0===o?o:e,t>o?(console.error("min limit is greater than max limit"),e):e<t?t:e>o?o:e}function a(e,t){var o=t.getBoundingClientRect();return e.clientX>o.left&&e.clientX<o.left+o.width&&e.clientY>o.top&&e.clientY<o.top+o.height}function c(e){var t=this.props.minScrollHandleHeight;if(e.height>=t)return e;var o=t-e.height,r=this.state.scrollPos/(this.contentHeight-this.visibleHeight),n=o*r,l=e.top-n;return{height:t,top:l}}var h=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}}(),u=o(3),p=o(4),d=function(e){function t(e){n(this,t);var o=l(this,Object.getPrototypeOf(t).call(this,e));return o.scrollbarYWidth=0,o.state={scrollPos:0,onDrag:!1},o.onHandleDrag=o.onHandleDrag.bind(o),o.onHandleDragEnd=o.onHandleDragEnd.bind(o),o.blockOuterScroll=o.blockOuterScroll.bind(o),o.onScroll=o.onScroll.bind(o),o.onMouseDown=o.onMouseDown.bind(o),o.onClick=o.onClick.bind(o),o}return i(t,e),h(t,[{key:"componentDidMount",value:function(){this.forceUpdate()}},{key:"componentDidUpdate",value:function(e,t){var o=this.contentHeight,r=this.visibleHeight,n=p.findDOMNode(this),l=n.getBoundingClientRect(),i=this.getScrolledElement(),s=t.scrollPos>=o-r;this.contentHeight=i.scrollHeight,this.scrollbarYWidth=i.offsetWidth-i.clientWidth,this.visibleHeight=i.clientHeight,this.scrollRatio=this.contentHeight?this.visibleHeight/this.contentHeight:1;var a=this.state.scrollPos>=this.contentHeight-this.visibleHeight,c=o!==this.contentHeight;this.toggleScrollIfNeeded(),this.position={top:l.top+window.pageYOffset,left:l.left+window.pageXOffset},(this.props.freezePosition||e.freezePosition)&&this.adjustFreezePosition(e),"undefined"!=typeof this.props.scrollTo&&this.props.scrollTo!==e.scrollTo?this.updateScrollPosition(this.props.scrollTo):this.props.keepAtBottom&&c&&s&&!a&&this.updateScrollPosition(this.contentHeight-this.visibleHeight)}},{key:"componentWillUnmount",value:function(){document.removeEventListener("mousemove",this.onHandleDrag),document.removeEventListener("mouseup",this.onHandleDragEnd)}},{key:"adjustFreezePosition",value:function(e){var t=this.getScrolledElement(),o=this.refs.contentWrapper;this.props.freezePosition&&(o.scrollTop=this.state.scrollPos),e.freezePosition&&(t.scrollTop=this.state.scrollPos)}},{key:"toggleScrollIfNeeded",value:function(){var e=this.contentHeight-this.visibleHeight>1;this.hasScroll!==e&&(this.hasScroll=e,this.forceUpdate())}},{key:"getScrollTop",value:function(){return this.getScrolledElement().scrollTop}},{key:"updateScrollPosition",value:function(e){var t=this.getScrolledElement();t.scrollTop=e,this.setState({scrollPos:e})}},{key:"onClick",value:function(e){if(this.hasScroll&&this.isMouseEventOnCustomScrollbar(e)&&!this.isMouseEventOnScrollHandle(e)){var t=this.calculateNewScrollHandleTop(e),o=this.getScrollValueFromHandlePosition(t);this.updateScrollPosition(o)}}},{key:"isMouseEventOnCustomScrollbar",value:function(e){var t=p.findDOMNode(this.refs.customScrollbar);return a(e,t)}},{key:"isMouseEventOnScrollHandle",value:function(e){var t=p.findDOMNode(this.refs.scrollHandle);return a(e,t)}},{key:"calculateNewScrollHandleTop",value:function(e){var t=e.pageY-this.position.top,o=this.getScrollHandleStyle().top,r=void 0,n=t>o+this.scrollHandleHeight;return r=n?o+Math.min(this.scrollHandleHeight,this.visibleHeight-this.scrollHandleHeight):o-Math.max(this.scrollHandleHeight,0)}},{key:"getScrollValueFromHandlePosition",value:function(e){return e/this.scrollRatio}},{key:"getScrollHandleStyle",value:function(){var e=this.state.scrollPos*this.scrollRatio;return this.scrollHandleHeight=this.visibleHeight*this.scrollRatio,{height:this.scrollHandleHeight,top:e}}},{key:"adjustCustomScrollPosToContentPos",value:function(e){this.setState({scrollPos:e})}},{key:"onScroll",value:function(e){this.props.freezePosition||(this.adjustCustomScrollPosToContentPos(e.currentTarget.scrollTop),this.props.onScroll&&this.props.onScroll(e))}},{key:"getScrolledElement",value:function(){return this.refs.innerContainer}},{key:"onMouseDown",value:function(e){this.hasScroll&&this.isMouseEventOnScrollHandle(e)&&(this.startDragHandlePos=this.getScrollHandleStyle().top,this.startDragMousePos=e.pageY,this.setState({onDrag:!0}),document.addEventListener("mousemove",this.onHandleDrag),document.addEventListener("mouseup",this.onHandleDragEnd))}},{key:"onHandleDrag",value:function(e){e.preventDefault();var t=e.pageY-this.startDragMousePos,o=s(this.startDragHandlePos+t,0,this.visibleHeight-this.scrollHandleHeight),r=this.getScrollValueFromHandlePosition(o);this.updateScrollPosition(r)}},{key:"onHandleDragEnd",value:function(e){this.setState({onDrag:!1}),e.preventDefault(),document.removeEventListener("mousemove",this.onHandleDrag),document.removeEventListener("mouseup",this.onHandleDragEnd)}},{key:"blockOuterScroll",value:function(e){if(!this.props.allowOuterScroll){var t=e.currentTarget,o=e.currentTarget.scrollHeight,r=o-e.currentTarget.offsetHeight,n=e.deltaY%3?e.deltaY:10*e.deltaY;t.scrollTop+n<=0?(t.scrollTop=0,e.preventDefault()):t.scrollTop+n>=r&&(t.scrollTop=r,e.preventDefault()),e.stopPropagation()}}},{key:"getInnerContainerClasses",value:function(){var e="inner-container";return this.state.scrollPos&&this.props.addScrolledClass&&(e+=" content-scrolled"),e}},{key:"getScrollStyles",value:function(){var e,t,o=this.scrollbarYWidth||20,n=this.props.rtl?"marginLeft":"marginRight",l=(e={},r(e,n,-1*o),r(e,"height",this.props.heightRelativeToParent||this.props.flex?"100%":""),e),i=(t={},r(t,n,this.scrollbarYWidth?0:o),r(t,"height",this.props.heightRelativeToParent||this.props.flex?"100%":""),r(t,"overflowY",this.props.freezePosition?"hidden":"visible"),t);return{innerContainer:l,contentWrapper:i}}},{key:"getOuterContainerStyle",value:function(){return{height:this.props.heightRelativeToParent||this.props.flex?"100%":""}}},{key:"getRootStyles",value:function(){var e={};return this.props.heightRelativeToParent?e.height=this.props.heightRelativeToParent:this.props.flex&&(e.flex=this.props.flex),e}},{key:"render",value:function(){var e=this.getScrollStyles(),t=this.getRootStyles(),o=c.call(this,this.getScrollHandleStyle());return u.createElement("div",{className:"custom-scroll "+(this.state.onDrag?"scroll-handle-dragged":""),style:t},u.createElement("div",{className:"outer-container",style:this.getOuterContainerStyle(),onMouseDown:this.onMouseDown,onClick:this.onClick},this.hasScroll?u.createElement("div",{ref:"customScrollbar",className:"custom-scrollbar"+(this.props.rtl?" custom-scrollbar-rtl":""),key:"scrollbar"},u.createElement("div",{ref:"scrollHandle",className:"custom-scroll-handle",style:o},u.createElement("div",{className:this.props.handleClass}))):null,u.createElement("div",{ref:"innerContainer",className:this.getInnerContainerClasses(),style:e.innerContainer,onScroll:this.onScroll,onWheel:this.blockOuterScroll},u.createElement("div",{className:"content-wrapper",ref:"contentWrapper",style:e.contentWrapper},this.props.children))))}}]),t}(u.Component);try{var f=o(2);d.propTypes={children:f.any,allowOuterScroll:f.bool,heightRelativeToParent:f.string,onScroll:f.func,addScrolledClass:f.bool,freezePosition:f.bool,handleClass:f.string,minScrollHandleHeight:f.number,flex:f.string,rtl:f.bool,scrollTo:f.number,keepAtBottom:f.bool}}catch(g){}d.defaultProps={handleClass:"inner-handle",minScrollHandleHeight:38},e.exports=d},function(t,o){if("undefined"==typeof e){var r=new Error('Cannot find module "prop-types"');throw r.code="MODULE_NOT_FOUND",r}t.exports=e},function(e,o){e.exports=t},function(e,t){e.exports=o}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("react-dom"),function(){try{return require("prop-types")}catch(e){}}()):"function"==typeof define&&define.amd?define(["react","react-dom","prop-types"],t):"object"==typeof exports?exports.ReactCustomScroll=t(require("react"),require("react-dom"),function(){try{return require("prop-types")}catch(e){}}()):e.ReactCustomScroll=t(e.react,e["react-dom"],e["prop-types"])}(this,function(e,t,o){return function(e){function t(r){if(o[r])return o[r].exports;var n=o[r]={exports:{},id:r,loaded:!1};return e[r].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var o={};return t.m=e,t.c=o,t.p="",t(0)}([function(e,t,o){e.exports=o(1)},function(e,t,o){"use strict";function r(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function l(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)}function s(e,t,o){return t=t||0===t?t:e,o=o||0===o?o:e,t>o?(console.error("min limit is greater than max limit"),e):e<t?t:e>o?o:e}function a(e,t){var o=t.getBoundingClientRect();return e.clientX>o.left&&e.clientX<o.left+o.width&&e.clientY>o.top&&e.clientY<o.top+o.height}function c(e){var t=this.props.minScrollHandleHeight;if(e.height>=t)return e;var o=t-e.height,r=this.state.scrollPos/(this.contentHeight-this.visibleHeight),n=o*r,l=e.top-n;return{height:t,top:l}}var h=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}}(),u=o(2),p=o(3),d=function(e){function t(e){n(this,t);var o=l(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return o.scrollbarYWidth=0,o.state={scrollPos:0,onDrag:!1},o.onHandleDrag=o.onHandleDrag.bind(o),o.onHandleDragEnd=o.onHandleDragEnd.bind(o),o.blockOuterScroll=o.blockOuterScroll.bind(o),o.onScroll=o.onScroll.bind(o),o.onMouseDown=o.onMouseDown.bind(o),o.onClick=o.onClick.bind(o),o}return i(t,e),h(t,[{key:"componentDidMount",value:function(){"undefined"!=typeof this.props.scrollTo?this.updateScrollPosition(this.props.scrollTo):this.forceUpdate()}},{key:"componentDidUpdate",value:function(e,t){var o=this.contentHeight,r=this.visibleHeight,n=p.findDOMNode(this),l=n.getBoundingClientRect(),i=this.getScrolledElement(),s=t.scrollPos>=o-r;this.contentHeight=i.scrollHeight,this.scrollbarYWidth=i.offsetWidth-i.clientWidth,this.visibleHeight=i.clientHeight,this.scrollRatio=this.contentHeight?this.visibleHeight/this.contentHeight:1;var a=this.state.scrollPos>=this.contentHeight-this.visibleHeight,c=o!==this.contentHeight;this.toggleScrollIfNeeded(),this.position={top:l.top+window.pageYOffset,left:l.left+window.pageXOffset},(this.props.freezePosition||e.freezePosition)&&this.adjustFreezePosition(e),"undefined"!=typeof this.props.scrollTo&&this.props.scrollTo!==e.scrollTo?this.updateScrollPosition(this.props.scrollTo):this.props.keepAtBottom&&c&&s&&!a&&this.updateScrollPosition(this.contentHeight-this.visibleHeight)}},{key:"componentWillUnmount",value:function(){document.removeEventListener("mousemove",this.onHandleDrag),document.removeEventListener("mouseup",this.onHandleDragEnd)}},{key:"adjustFreezePosition",value:function(e){var t=this.getScrolledElement(),o=this.refs.contentWrapper;this.props.freezePosition&&(o.scrollTop=this.state.scrollPos),e.freezePosition&&(t.scrollTop=this.state.scrollPos)}},{key:"toggleScrollIfNeeded",value:function(){var e=this.contentHeight-this.visibleHeight>1;this.hasScroll!==e&&(this.hasScroll=e,this.forceUpdate())}},{key:"getScrollTop",value:function(){return this.getScrolledElement().scrollTop}},{key:"updateScrollPosition",value:function(e){var t=this.getScrolledElement();t.scrollTop=e,this.setState({scrollPos:e})}},{key:"onClick",value:function(e){if(this.hasScroll&&this.isMouseEventOnCustomScrollbar(e)&&!this.isMouseEventOnScrollHandle(e)){var t=this.calculateNewScrollHandleTop(e),o=this.getScrollValueFromHandlePosition(t);this.updateScrollPosition(o)}}},{key:"isMouseEventOnCustomScrollbar",value:function(e){var t=p.findDOMNode(this.refs.customScrollbar);return a(e,t)}},{key:"isMouseEventOnScrollHandle",value:function(e){var t=p.findDOMNode(this.refs.scrollHandle);return a(e,t)}},{key:"calculateNewScrollHandleTop",value:function(e){var t=e.pageY-this.position.top,o=this.getScrollHandleStyle().top,r=void 0,n=t>o+this.scrollHandleHeight;return r=n?o+Math.min(this.scrollHandleHeight,this.visibleHeight-this.scrollHandleHeight):o-Math.max(this.scrollHandleHeight,0)}},{key:"getScrollValueFromHandlePosition",value:function(e){return e/this.scrollRatio}},{key:"getScrollHandleStyle",value:function(){var e=this.state.scrollPos*this.scrollRatio;return this.scrollHandleHeight=this.visibleHeight*this.scrollRatio,{height:this.scrollHandleHeight,top:e}}},{key:"adjustCustomScrollPosToContentPos",value:function(e){this.setState({scrollPos:e})}},{key:"onScroll",value:function(e){this.props.freezePosition||(this.adjustCustomScrollPosToContentPos(e.currentTarget.scrollTop),this.props.onScroll&&this.props.onScroll(e))}},{key:"getScrolledElement",value:function(){return this.refs.innerContainer}},{key:"onMouseDown",value:function(e){this.hasScroll&&this.isMouseEventOnScrollHandle(e)&&(this.startDragHandlePos=this.getScrollHandleStyle().top,this.startDragMousePos=e.pageY,this.setState({onDrag:!0}),document.addEventListener("mousemove",this.onHandleDrag),document.addEventListener("mouseup",this.onHandleDragEnd))}},{key:"onHandleDrag",value:function(e){e.preventDefault();var t=e.pageY-this.startDragMousePos,o=s(this.startDragHandlePos+t,0,this.visibleHeight-this.scrollHandleHeight),r=this.getScrollValueFromHandlePosition(o);this.updateScrollPosition(r)}},{key:"onHandleDragEnd",value:function(e){this.setState({onDrag:!1}),e.preventDefault(),document.removeEventListener("mousemove",this.onHandleDrag),document.removeEventListener("mouseup",this.onHandleDragEnd)}},{key:"blockOuterScroll",value:function(e){if(!this.props.allowOuterScroll){var t=e.currentTarget,o=e.currentTarget.scrollHeight,r=o-e.currentTarget.offsetHeight,n=e.deltaY%3?e.deltaY:10*e.deltaY;t.scrollTop+n<=0?(t.scrollTop=0,e.preventDefault()):t.scrollTop+n>=r&&(t.scrollTop=r,e.preventDefault()),e.stopPropagation()}}},{key:"getInnerContainerClasses",value:function(){var e="inner-container";return this.state.scrollPos&&this.props.addScrolledClass&&(e+=" content-scrolled"),e}},{key:"getScrollStyles",value:function(){var e,t,o=this.scrollbarYWidth||20,n=this.props.rtl?"marginLeft":"marginRight",l=(e={},r(e,n,-1*o),r(e,"height",this.props.heightRelativeToParent||this.props.flex?"100%":""),e),i=(t={},r(t,n,this.scrollbarYWidth?0:o),r(t,"height",this.props.heightRelativeToParent||this.props.flex?"100%":""),r(t,"overflowY",this.props.freezePosition?"hidden":"visible"),t);return{innerContainer:l,contentWrapper:i}}},{key:"getOuterContainerStyle",value:function(){return{height:this.props.heightRelativeToParent||this.props.flex?"100%":""}}},{key:"getRootStyles",value:function(){var e={};return this.props.heightRelativeToParent?e.height=this.props.heightRelativeToParent:this.props.flex&&(e.flex=this.props.flex),e}},{key:"render",value:function(){var e=this.getScrollStyles(),t=this.getRootStyles(),o=c.call(this,this.getScrollHandleStyle());return u.createElement("div",{className:"custom-scroll "+(this.state.onDrag?"scroll-handle-dragged":""),style:t},u.createElement("div",{className:"outer-container",style:this.getOuterContainerStyle(),onMouseDown:this.onMouseDown,onClick:this.onClick},this.hasScroll?u.createElement("div",{ref:"customScrollbar",className:"custom-scrollbar"+(this.props.rtl?" custom-scrollbar-rtl":""),key:"scrollbar"},u.createElement("div",{ref:"scrollHandle",className:"custom-scroll-handle",style:o},u.createElement("div",{className:this.props.handleClass}))):null,u.createElement("div",{ref:"innerContainer",className:this.getInnerContainerClasses(),style:e.innerContainer,onScroll:this.onScroll,onWheel:this.blockOuterScroll},u.createElement("div",{className:"content-wrapper",ref:"contentWrapper",style:e.contentWrapper},this.props.children))))}}]),t}(u.Component);try{var f=o(4);d.propTypes={children:f.any,allowOuterScroll:f.bool,heightRelativeToParent:f.string,onScroll:f.func,addScrolledClass:f.bool,freezePosition:f.bool,handleClass:f.string,minScrollHandleHeight:f.number,flex:f.string,rtl:f.bool,scrollTo:f.number,keepAtBottom:f.bool}}catch(g){}d.defaultProps={handleClass:"inner-handle",minScrollHandleHeight:38},e.exports=d},function(t,o){t.exports=e},function(e,o){e.exports=t},function(e,t){if("undefined"==typeof o){var r=new Error('Cannot find module "prop-types"');throw r.code="MODULE_NOT_FOUND",r}e.exports=o}])});

example/firstComp/firstComp.js

@@ -1,56 +0,59 @@
-define(['react', 'lodash', './demoText', './firstComp.rt'], function (React, _, demoText, template) {
-    'use strict';
+'use strict';
+const React = require('react');
+const _ = require('lodash');
+const demoText = require('./demoText');
+const template = require('./firstComp.rt.js');
 
-    function getParameterByName(name) {
-        var url = window.location.href;
-        name = name.replace(/[\[\]]/g, '\\$&');
-        var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
-            results = regex.exec(url);
-        if (!results) {
-            return null;
-        }
-        if (!results[2]) {
-            return false;
-        }
-        return decodeURIComponent(results[2].replace(/\+/g, ' '));
+function getParameterByName(name) {
+    const url = window.location.href;
+    name = name.replace(/[\[\]]/g, '\\$&');
+    const regex = new RegExp(`[?&]${ name }(=([^&#]*)|&|#|$)`);
+    const results = regex.exec(url);
+    if (!results) {
+        return null;
     }
+    if (!results[2]) {
+        return false;
+    }
+    return decodeURIComponent(results[2].replace(/\+/g, ' '));
+}
 
 
-    return React.createClass({
-        displayName: 'firstComp',
-        getInitialState: function () {
-            return {
-                dynamicContentCounter: 4
-            };
-        },
-        getText: function () {
-            return demoText.text;
-        },
-        getDynamicContent: function () {
-            return _.times(this.state.dynamicContentCounter, function (index) {
-                return 'Content #' + index;
-            });
-        },
-        addContent: function () {
-            this.setState({
-                dynamicContentCounter: this.state.dynamicContentCounter + 1
-            });
-        },
-        removeContent: function () {
-            this.setState({
-                dynamicContentCounter: Math.max(this.state.dynamicContentCounter - 1, 4)
-            });
-        },
-        getExamplesToDisplay: function () {
-            var isFlex = getParameterByName('flex');
-            var isDynamic = getParameterByName('dynamic');
+module.exports = React.createClass({
+    displayName: 'firstComp',
+    getInitialState() {
+        return {
+            dynamicContentCounter: 4
+        };
+    },
+    getText() {
+        return demoText.text;
+    },
+    getDynamicContent() {
+        return _.times(this.state.dynamicContentCounter, function (index) {
+            return `Content #${ index}`;
+        });
+    },
+    addContent() {
+        this.setState({
+            dynamicContentCounter: this.state.dynamicContentCounter + 1
+        });
+    },
+    removeContent() {
+        this.setState({
+            dynamicContentCounter: Math.max(this.state.dynamicContentCounter - 1, 4)
+        });
+    },
+    getExamplesToDisplay() {
+        const isFlex = getParameterByName('flex');
+        const isDynamic = getParameterByName('dynamic');
 
-            return {
-                flex: isFlex,
-                dynamic: isDynamic,
-                standard: !isFlex && !isDynamic
-            };
-        },
-        render: template
-    });
+        return {
+            flex: isFlex,
+            dynamic: isDynamic,
+            standard: !isFlex && !isDynamic
+        };
+    },
+    render: template
 });
+// });

example/firstComp/firstComp.rt.js

@@ -1,7 +0,6 @@
-define([
-    'react',
-    'lodash',
-    'customScroll'
-], function (React, _, customScroll) {
-    'use strict';
+'use strict';
+var React = require('react');
+var _ = require('lodash');
+var customScroll = require('../../src/main/customScroll');
+module.exports = function () {
     function repeatContent1(exampleTypes, content, contentIndex) {
@@ -50,5 +49,3 @@ return React.createElement('div', {
     }
-    return function () {
-        return scopeExampleTypes2.apply(this, []);
-    };
-});
+    return scopeExampleTypes2.apply(this, []);
+};

example/main.js

@@ -1,25 +0,7 @@
-require.config({
-    baseUrl: '',
-    paths: {
-        lodash: 'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min',
-        react: 'https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-with-addons',
-        'react-dom': 'https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.min',
-        'prop-types': '../node_modules/prop-types/prop-types',
-        customScroll: '../dist/reactCustomScroll'
-    },
-    shim: {
-        lodash: {exports: '_'},
-        react: {exports: 'React'},
-        'react-dom': {exports: 'ReactDOM'}
-    },
-    map: {
-        '*': {
-            'react/addons': 'react'
-        }
-    }
-});
+'use strict';
 
-require(['react-dom', 'react', './firstComp/firstComp'], function (ReactDOM, React, firstComp) {
-    'use strict';
-    ReactDOM.render(React.createElement(firstComp), document.getElementById('body'));
-});
+const React = require('react');
+const ReactDOM = require('react-dom');
+const firstComp = require('./firstComp/firstComp');
+
+ReactDOM.render(React.createElement(firstComp), document.getElementById('body'));

package.json

 {
   "name": "react-custom-scroll",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "An easily designable, cross browser (!!), custom scroll with ReactJS Animations and scroll rate **exactly** like native scroll",
@@ -8,8 +8,8 @@ "main": "index",
     "test": "karma start --single-run",
-    "rtex": "rt -m amd example/firstComp/firstComp.rt -r --react-import-path react",
+    "rtex": "rt -r -m commonjs example/firstComp/firstComp.rt -r --react-import-path react -t 15.0.1",
     "sass": "node-sass src/main/cs.scss | postcss --use autoprefixer -b 'last 2 versions' > src/main/customScroll.css",
     "sassDist": "node-sass src/main/cs.scss | postcss --use autoprefixer -b 'last 2 versions' > dist/customScroll.css",
     "sassex": "node-sass example/main.scss | postcss --use autoprefixer -b 'last 2 versions' > example/styles.css",
-    "lint": "eslint .",
-    "start": "npm run lint && npm run sass && npm run sassDist && npm run sassex && npm run rtex && webpack -p"
+    "lint": "eslint ./src",
+    "start": "npm run lint && npm run sass && npm run sassDist && npm run sassex && npm run rtex && webpack"
   },
@@ -31,4 +31,4 @@ "repository": {
     "babel-loader": "6.2.4",
-    "babel-preset-es2015": "6.6.0",
-    "babel-preset-react": "6.5.0",
+    "babel-preset-es2015": "6.13.2",
+    "babel-preset-react": "6.11.1",
     "css-loader": "0.23.1",
@@ -53,3 +53,3 @@ "eslint": "^3.6.11",
     "react-dom": "^15.5.4",
-    "react-templates": "^0.4.1",
+    "react-templates": "^0.5.4",
     "style-loader": "0.13.1",
@@ -56,0 +56,0 @@ "webpack": "^1.12.13"

src/main/customScroll.js

@@ -65,3 +65,7 @@ 'use strict';
     componentDidMount() {
-        this.forceUpdate();
+        if (typeof this.props.scrollTo !== 'undefined') {
+            this.updateScrollPosition(this.props.scrollTo);
+        } else {
+            this.forceUpdate();
+        }
     }
@@ -68,0 +72,0 @@

src/test/customScroll.spec.js

@@ -398,2 +398,12 @@ var React = require('react');
 
+        it('should work on first render', function () {
+            reactDOM.unmountComponentAtNode(this.customScrollContainer);
+
+            customScroll = renderCustomScroll(this.customScrollContainer, {scrollTo: scrollToValue}, this.visibleHeight, this.totalScrollHeight);
+
+            const contentContainerNode = customScroll.refs.innerContainer;
+
+            expect(contentContainerNode.scrollTop).toEqual(scrollToValue);
+        });
+
         it('should allow scrolling away from position in props, as long as props are the same', () => {
@@ -400,0 +410,0 @@ const innerContainer = TestUtils.findRenderedDOMComponentWithClass(customScroll, 'inner-container');

webpack.config.js

 'use strict';
-var path = require('path');
+const path = require('path');
+const webpack = require('webpack');
 
-module.exports = {
+module.exports = [{
     entry: ['./src/main/customScroll'],
@@ -28,2 +29,7 @@ output: {
     },
+    plugins: [
+        new webpack.optimize.UglifyJsPlugin({
+            sourceMap: false
+        })
+    ],
     // devtool: 'source-map',
@@ -36,2 +42,33 @@ externals: {
     }
-};
+}, {
+    entry: ['./example/main'],
+    output: {
+        path: path.join(__dirname, 'example'),
+        filename: 'example.js'
+    },
+    resolve: {
+        extensions: ['', '.js', '.jsx']
+    },
+    module: {
+        loaders: [{
+            test: /\.js?/,
+            include: [path.resolve(__dirname, 'example'), path.resolve(__dirname, 'src')],
+            exclude: '*.rt',
+            loader: 'babel',
+            query: {
+                presets: ['es2015', 'react']
+            }
+        }]
+    },
+    plugins: [
+        new webpack.optimize.UglifyJsPlugin({
+            sourceMap: true
+        })
+    ],
+    devtool: 'source-map',
+    externals: {
+        react: 'React',
+        'react-dom': 'ReactDOM',
+        lodash: '_'
+    }
+}];

Fixed alerts

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

315821

increased by137.04%

Number of package files

36

increased by5.88%

Lines of code

2331

increased by5.76%

Number of low supply chain risk alerts

0

decreased by-100%

No dependency changes