react-custom-scroll - npm Package Compare versions

Comparing version 1.3.1 to 1.4.0

dist/reactCustomScroll.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("React"),require("lodash"),require("ReactDOM")):"function"==typeof define&&define.amd?define(["React","lodash","ReactDOM"],t):"object"==typeof exports?exports.ReactCustomScroll=t(require("React"),require("lodash"),require("ReactDOM")):e.ReactCustomScroll=t(e.React,e.lodash,e.ReactDOM)}(this,function(e,t,o){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){e.exports=o(3)},function(t,o){t.exports=e},function(e,o){e.exports=t},function(e,t,o){"use strict";var r=o(4);e.exports={CustomScroll:r}},function(e,t,o){"use strict";function r(e,t,o){if(t=s.isUndefined(t)?e:t,o=s.isUndefined(o)?e:o,t>o)throw"min limit is greater than max limit";return t>e?t:e>o?o:e}var l=o(1),n=o(6),s=o(2),i=o(5);e.exports=l.createClass({displayName:"customScroll",propTypes:{allowOuterScroll:l.PropTypes.bool,heightRelativeToParent:l.PropTypes.string,onScroll:l.PropTypes.func,addScrolledClass:l.PropTypes.bool,freezePosition:l.PropTypes.bool,handleClass:l.PropTypes.string},getDefaultProps:function(){return{handleClass:"inner-handle"}},getInitialState:function(){return this.scrollbarYWidth=0,{scrollPos:0,onDrag:!1}},componentDidMount:function(){this.forceUpdate()},componentDidUpdate:function(e){var t=n.findDOMNode(this),o=t.getBoundingClientRect(),r=this.getScrolledElement(),l=r.scrollHeight;this.scrollbarYWidth=r.offsetWidth-r.clientWidth,this.visibleHeight=r.clientHeight,this.scrollRatio=l?this.visibleHeight/l:1,this.toggleScrollIfNeeded(l),this.position={top:o.top+window.pageYOffset,left:o.left+window.pageXOffset},this.freezePosition(e)},componentWillUnmount:function(){document.removeEventListener("mousemove",this.onHandleDrag),document.removeEventListener("mouseup",this.onHandleDragEnd)},freezePosition: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)},toggleScrollIfNeeded:function(e){var t=e-this.visibleHeight>1;this.hasScroll!==t&&(this.hasScroll=t,this.forceUpdate())},getScrollTop:function(){return this.getScrolledElement().scrollTop},updateScrollPosition:function(e){var t=this.getScrolledElement();t.scrollTop=e,this.setState({scrollPos:e})},onCustomScrollClick:function(e){if(!this.isClickOnScrollHandle(e)){var t=this.calculateNewScrollHandleTop(e),o=this.getScrollValueFromHandlePosition(t);this.updateScrollPosition(o)}},isClickOnScrollHandle:function(e){var t=n.findDOMNode(this.refs.scrollHandle);return e.target===t||e.target.parentElement===t},calculateNewScrollHandleTop:function(e){var t,o=e.pageY-this.position.top,r=this.getScrollHandleStyle().top,l=o>r+this.scrollHandleHeight;return t=l?r+Math.min(this.scrollHandleHeight,this.visibleHeight-this.scrollHandleHeight):r-Math.max(this.scrollHandleHeight,0)},getScrollValueFromHandlePosition:function(e){return e/this.scrollRatio},getScrollHandleStyle:function(){var e=this.state.scrollPos*this.scrollRatio;return this.scrollHandleHeight=this.visibleHeight*this.scrollRatio,{height:this.scrollHandleHeight,top:e}},adjustCustomScrollPosToContentPos:function(e){this.setState({scrollPos:e})},onScroll:function(e){this.props.freezePosition||(this.adjustCustomScrollPosToContentPos(e.currentTarget.scrollTop),this.props.onScroll&&this.props.onScroll(e))},getScrolledElement:function(){return this.refs.innerContainer},onHandleMouseDown:function(e){this.startDragHandlePos=this.getScrollHandleStyle().top,this.startDragMousePos=e.pageY,this.setState({onDrag:!0}),document.addEventListener("mousemove",this.onHandleDrag),document.addEventListener("mouseup",this.onHandleDragEnd)},onHandleDrag:function(e){e.preventDefault();var t=e.pageY-this.startDragMousePos,o=r(this.startDragHandlePos+t,0,this.visibleHeight-this.scrollHandleHeight),l=this.getScrollValueFromHandlePosition(o);this.updateScrollPosition(l)},onHandleDragEnd:function(e){this.setState({onDrag:!1}),e.preventDefault(),document.removeEventListener("mousemove",this.onHandleDrag),document.removeEventListener("mouseup",this.onHandleDragEnd)},blockOuterScroll:function(e){if(!this.props.allowOuterScroll){var t=e.currentTarget,o=e.currentTarget.scrollHeight,r=o-e.currentTarget.offsetHeight,l=e.deltaY%3?e.deltaY:10*e.deltaY;t.scrollTop+l<=0?(t.scrollTop=0,e.preventDefault()):t.scrollTop+l>=r&&(t.scrollTop=r,e.preventDefault()),e.stopPropagation()}},getInnerContainerClasses:function(){var e="inner-container";return this.state.scrollPos&&this.props.addScrolledClass&&(e+=" content-scrolled"),e},getScrollStyles:function(){var e=this.scrollbarYWidth||20,t={marginRight:-1*e,height:this.props.heightRelativeToParent?"100%":""},o={marginRight:this.scrollbarYWidth?0:e,height:this.props.heightRelativeToParent?"100%":"",overflowY:this.props.freezePosition?"hidden":"visible"};return{innerContainer:t,contentWrapper:o}},getOuterContainerStyle:function(){return{height:this.props.heightRelativeToParent?"100%":""}},render:i})},function(e,t,o){"use strict";function r(){var e=this.getScrollStyles();return l.createElement("div",{ref:"innerContainer",className:this.getInnerContainerClasses(),style:e.innerContainer,onScroll:this.onScroll,onWheel:this.blockOuterScroll},l.createElement("div",{className:"content-wrapper",ref:"contentWrapper",style:e.contentWrapper},"\n                ",this.props.children,"\n            "))}var l=o(1);o(2);e.exports=function(){return l.createElement("div",{className:"custom-scroll "+(this.state.onDrag?"scroll-handle-dragged":""),style:{height:this.props.heightRelativeToParent}},l.createElement("div",{className:"outer-container",style:this.getOuterContainerStyle()},this.hasScroll?l.createElement("div",{className:"custom-scrollbar",onClick:this.onCustomScrollClick,key:"scrollbar"},l.createElement("div",{ref:"scrollHandle",className:"custom-scroll-handle",style:this.getScrollHandleStyle(),onMouseDown:this.onHandleMouseDown},l.createElement("div",{className:"inner-handle"}))):null,r.apply(this,[])))}},function(e,t){e.exports=o}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("React"),require("ReactDOM")):"function"==typeof define&&define.amd?define(["React","ReactDOM"],t):"object"==typeof exports?exports.ReactCustomScroll=t(require("React"),require("ReactDOM")):e.ReactCustomScroll=t(e.React,e.ReactDOM)}(this,function(e,t){return function(e){function t(l){if(o[l])return o[l].exports;var r=o[l]={exports:{},id:l,loaded:!1};return e[l].call(r.exports,r,r.exports,t),r.loaded=!0,r.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";var l=o(2);e.exports={CustomScroll:l}},function(e,t,o){"use strict";function l(e,t,o){if(t=t||0===t?t:e,o=o||0===o?o:e,t>o)throw"min limit is greater than max limit";return t>e?t:e>o?o:e}var r=o(3),n=o(4);e.exports=r.createClass({displayName:"customScroll",propTypes:{allowOuterScroll:r.PropTypes.bool,heightRelativeToParent:r.PropTypes.string,onScroll:r.PropTypes.func,addScrolledClass:r.PropTypes.bool,freezePosition:r.PropTypes.bool,handleClass:r.PropTypes.string},getDefaultProps:function(){return{handleClass:"inner-handle"}},getInitialState:function(){return this.scrollbarYWidth=0,{scrollPos:0,onDrag:!1}},componentDidMount:function(){this.forceUpdate()},componentDidUpdate:function(e){var t=n.findDOMNode(this),o=t.getBoundingClientRect(),l=this.getScrolledElement(),r=l.scrollHeight;this.scrollbarYWidth=l.offsetWidth-l.clientWidth,this.visibleHeight=l.clientHeight,this.scrollRatio=r?this.visibleHeight/r:1,this.toggleScrollIfNeeded(r),this.position={top:o.top+window.pageYOffset,left:o.left+window.pageXOffset},this.freezePosition(e)},componentWillUnmount:function(){document.removeEventListener("mousemove",this.onHandleDrag),document.removeEventListener("mouseup",this.onHandleDragEnd)},freezePosition: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)},toggleScrollIfNeeded:function(e){var t=e-this.visibleHeight>1;this.hasScroll!==t&&(this.hasScroll=t,this.forceUpdate())},getScrollTop:function(){return this.getScrolledElement().scrollTop},updateScrollPosition:function(e){var t=this.getScrolledElement();t.scrollTop=e,this.setState({scrollPos:e})},onCustomScrollClick:function(e){if(!this.isClickOnScrollHandle(e)){var t=this.calculateNewScrollHandleTop(e),o=this.getScrollValueFromHandlePosition(t);this.updateScrollPosition(o)}},isClickOnScrollHandle:function(e){var t=n.findDOMNode(this.refs.scrollHandle);return e.target===t||e.target.parentElement===t},calculateNewScrollHandleTop:function(e){var t,o=e.pageY-this.position.top,l=this.getScrollHandleStyle().top,r=o>l+this.scrollHandleHeight;return t=r?l+Math.min(this.scrollHandleHeight,this.visibleHeight-this.scrollHandleHeight):l-Math.max(this.scrollHandleHeight,0)},getScrollValueFromHandlePosition:function(e){return e/this.scrollRatio},getScrollHandleStyle:function(){var e=this.state.scrollPos*this.scrollRatio;return this.scrollHandleHeight=this.visibleHeight*this.scrollRatio,{height:this.scrollHandleHeight,top:e}},adjustCustomScrollPosToContentPos:function(e){this.setState({scrollPos:e})},onScroll:function(e){this.props.freezePosition||(this.adjustCustomScrollPosToContentPos(e.currentTarget.scrollTop),this.props.onScroll&&this.props.onScroll(e))},getScrolledElement:function(){return this.refs.innerContainer},onHandleMouseDown:function(e){this.startDragHandlePos=this.getScrollHandleStyle().top,this.startDragMousePos=e.pageY,this.setState({onDrag:!0}),document.addEventListener("mousemove",this.onHandleDrag),document.addEventListener("mouseup",this.onHandleDragEnd)},onHandleDrag:function(e){e.preventDefault();var t=e.pageY-this.startDragMousePos,o=l(this.startDragHandlePos+t,0,this.visibleHeight-this.scrollHandleHeight),r=this.getScrollValueFromHandlePosition(o);this.updateScrollPosition(r)},onHandleDragEnd:function(e){this.setState({onDrag:!1}),e.preventDefault(),document.removeEventListener("mousemove",this.onHandleDrag),document.removeEventListener("mouseup",this.onHandleDragEnd)},blockOuterScroll:function(e){if(!this.props.allowOuterScroll){var t=e.currentTarget,o=e.currentTarget.scrollHeight,l=o-e.currentTarget.offsetHeight,r=e.deltaY%3?e.deltaY:10*e.deltaY;t.scrollTop+r<=0?(t.scrollTop=0,e.preventDefault()):t.scrollTop+r>=l&&(t.scrollTop=l,e.preventDefault()),e.stopPropagation()}},getInnerContainerClasses:function(){var e="inner-container";return this.state.scrollPos&&this.props.addScrolledClass&&(e+=" content-scrolled"),e},getScrollStyles:function(){var e=this.scrollbarYWidth||20,t={marginRight:-1*e,height:this.props.heightRelativeToParent?"100%":""},o={marginRight:this.scrollbarYWidth?0:e,height:this.props.heightRelativeToParent?"100%":"",overflowY:this.props.freezePosition?"hidden":"visible"};return{innerContainer:t,contentWrapper:o}},getOuterContainerStyle:function(){return{height:this.props.heightRelativeToParent?"100%":""}},render:function(){var e=this.getScrollStyles(),t={height:this.props.heightRelativeToParent};return r.createElement("div",{className:"custom-scroll "+(this.state.onDrag?"scroll-handle-dragged":""),style:t},r.createElement("div",{className:"outer-container",style:this.getOuterContainerStyle()},this.hasScroll?r.createElement("div",{className:"custom-scrollbar",onClick:this.onCustomScrollClick,key:"scrollbar"},r.createElement("div",{ref:"scrollHandle",className:"custom-scroll-handle",style:this.getScrollHandleStyle(),onMouseDown:this.onHandleMouseDown},r.createElement("div",{className:"inner-handle"}))):null,r.createElement("div",{ref:"innerContainer",className:this.getInnerContainerClasses(),style:e.innerContainer,onScroll:this.onScroll,onWheel:this.blockOuterScroll},r.createElement("div",{className:"content-wrapper",ref:"contentWrapper",style:e.contentWrapper},this.props.children))))}})},function(t,o){t.exports=e},function(e,o){e.exports=t}])});

example/firstComp/firstComp.rt.js

@@ -9,3 +9,3 @@ define([
         var customScroll = cs.CustomScroll;
-        return React.createElement('div', {}, React.createElement('div', { 'className': 'container native-scroll' }, React.createElement('label', { 'className': 'side-title' }, 'Native Scroll'), React.createElement('div', { 'className': 'panel' }, React.createElement('div', { 'className': 'panel-header' }, React.createElement('label', { 'className': 'panel-title' }, 'This is boring')), React.createElement('div', { 'className': 'panel-content-native panel-content' }, React.createElement('div', { 'className': 'content-fill' }, this.getText())))), React.createElement('div', { 'className': 'container custom-scroll-example' }, React.createElement('label', { 'className': 'side-title' }, 'Custom Scroll'), React.createElement('div', { 'className': 'panel' }, React.createElement('div', { 'className': 'panel-header' }, React.createElement('label', { 'className': 'panel-title' }, 'Cool Scrollbar !')), React.createElement(customScroll, { 'allowOuterScroll': true }, React.createElement('div', { 'className': 'panel-content-custom panel-content' }, React.createElement('div', { 'className': 'content-fill' }, this.getText()))))), React.createElement('div', { 'className': 'container custom-scroll-example' }, React.createElement('label', { 'className': 'side-title' }, 'Crazy Designer'), React.createElement('div', { 'className': 'panel crazy-scroll' }, React.createElement('div', { 'className': 'panel-header' }, React.createElement('label', { 'className': 'panel-title' }, 'Who designed this ???')), React.createElement(customScroll, { 'allowOuterScroll': true }, React.createElement('div', { 'className': 'panel-content-custom panel-content' }, React.createElement('div', { 'className': 'content-fill' }, this.getText()))))), React.createElement('div', { 'className': 'scroll-creator' }));
+        return React.createElement('div', { 'className': 'example-wrapper' }, React.createElement('div', { 'className': 'container native-scroll' }, React.createElement('label', { 'className': 'side-title' }, 'Native Scroll'), React.createElement('div', { 'className': 'panel' }, React.createElement('div', { 'className': 'panel-header' }, React.createElement('label', { 'className': 'panel-title' }, 'This is boring')), React.createElement('div', { 'className': 'panel-content-native panel-content' }, React.createElement('div', { 'className': 'content-fill' }, this.getText())))), React.createElement('div', { 'className': 'container custom-scroll-example' }, React.createElement('label', { 'className': 'side-title' }, 'Custom Scroll'), React.createElement('div', { 'className': 'panel' }, React.createElement('div', { 'className': 'panel-header' }, React.createElement('label', { 'className': 'panel-title' }, 'Cool Scrollbar !')), React.createElement(customScroll, { 'allowOuterScroll': true }, React.createElement('div', { 'className': 'panel-content-custom panel-content' }, React.createElement('div', { 'className': 'content-fill' }, this.getText()))))), React.createElement('div', { 'className': 'container custom-scroll-example' }, React.createElement('label', { 'className': 'side-title' }, 'Crazy Designer'), React.createElement('div', { 'className': 'panel crazy-scroll' }, React.createElement('div', { 'className': 'panel-header' }, React.createElement('label', { 'className': 'panel-title' }, 'Who designed this ???')), React.createElement(customScroll, { 'allowOuterScroll': true }, React.createElement('div', { 'className': 'panel-content-custom panel-content' }, React.createElement('div', { 'className': 'content-fill' }, this.getText()))))), React.createElement('div', { 'className': 'scroll-creator' }));
     }
@@ -12,0 +12,0 @@ return function () {

package.json

 {
   "name": "react-custom-scroll",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "An easily designable, cross browser (!!), custom scroll with ReactJS Animations and scroll rate **exactly** like native scroll",
@@ -8,3 +8,2 @@ "main": "index",
     "test": "karma start --single-run",
-    "rt": "rt -m commonjs src/main/customScroll.rt -r --react-import-path react",
     "rtex": "rt -m amd example/firstComp/firstComp.rt -r --react-import-path React",
@@ -14,3 +13,3 @@ "sass": "node-sass src/main/cs.scss | postcss --use autoprefixer -b 'last 2 versions' > src/main/customScroll.css",
     "lint": "eslint .",
-    "start": "npm run lint && npm run sass && npm run sassex && npm run rt && npm run rtex && webpack -p"
+    "start": "npm run lint && npm run sass && npm run sassex && npm run rtex && webpack -p"
   },
@@ -27,5 +26,3 @@ "repository": {
   "homepage": "https://github.com/rommguy/react-custom-scroll#readme",
-  "dependencies": {
-    "lodash": "^3.10.1"
-  },
+  "dependencies": {},
   "devDependencies": {
@@ -35,2 +32,4 @@ "autoprefixer": "6.3.6",
     "babel-loader": "6.2.4",
+    "babel-preset-es2015": "6.6.0",
+    "babel-preset-react": "6.5.0",
     "css-loader": "0.23.1",
@@ -53,2 +52,3 @@ "eslint": "^2.0.0",
     "react-templates": "^0.4.1",
+    "lodash": "^3.10.1",
     "style-loader": "0.13.1",
@@ -55,0 +55,0 @@ "webpack": "^1.12.13"

README.md

@@ -22,6 +22,6 @@ [![NPM version][npm-image]][npm-url]
 
-```html
-<customScroll>
+```JSX
+<CustomScroll>
   your content
-</customScroll>
+</CustomScroll>
 ```
@@ -50,2 +50,4 @@
 - Check if you forgot to remove 'overflow' properties from the content root element.
+- If you're using JSX, make sure you use Pascal case and not camelCase \<CustomScroll\> and not \<customScroll\>.  
+starting with lower case causes JSX to treat the tag as a native dom element
 - Check if your height limit is relative to parent, and you didn't use heightRelativeToParent prop.
@@ -52,0 +54,0 @@

src/main/customScroll.js

 'use strict';
 var React = require('react');
 var reactDOM = require('react-dom');
-var _ = require('lodash');
-var template = require('./customScroll.rt.js');
 
 function ensureWithinLimits(value, min, max) {
-    min = _.isUndefined(min) ? value : min;
-    max = _.isUndefined(max) ? value : max;
+    min = (!min && min !== 0) ? value : min;
+    max = (!max && max !== 0) ? value : max;
     if (min > max) {
@@ -222,4 +220,34 @@ throw 'min limit is greater than max limit';
     },
-    render: template
+    render: function () {
+        var scrollStyles = this.getScrollStyles();
+        var rootStyle = {
+            height: this.props.heightRelativeToParent
+        };
+
+        return (
+            <div className={'custom-scroll ' + (this.state.onDrag ? 'scroll-handle-dragged' : '')}
+                 style={rootStyle}>
+                <div className="outer-container" style={this.getOuterContainerStyle()}>
+                    {this.hasScroll ? (<div className="custom-scrollbar" onClick={this.onCustomScrollClick} key="scrollbar">
+                        <div ref="scrollHandle" className="custom-scroll-handle" style={this.getScrollHandleStyle()}
+                             onMouseDown={this.onHandleMouseDown}>
+                            <div className="inner-handle"></div>
+                        </div>
+                    </div>) : null}
+                    <div ref="innerContainer"
+                         className={this.getInnerContainerClasses()}
+                         style={scrollStyles.innerContainer}
+                         onScroll={this.onScroll}
+                         onWheel={this.blockOuterScroll}>
+                        <div className="content-wrapper"
+                             ref="contentWrapper"
+                             style={scrollStyles.contentWrapper}>
+                            {this.props.children}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
 });
 

webpack.config.js

@@ -13,12 +13,16 @@ 'use strict';
     resolve: {
-        extensions: ['', '.js']
+        extensions: ['', '.js', '.jsx']
     },
     module: {
-        //loaders: [
-        //    {
-        //        test: /\.js$/,
-        //        loaders: ['babel'],
-        //        exclude: /node_modules/
-        //    }
-        //]
+        loaders: [{
+            loader: 'babel-loader',
+            test: /\.js$/,
+            include: [
+                path.resolve(__dirname, 'src/main')
+            ],
+            exclude: /\.rt/,
+            query: {
+                presets: ['react']
+            }
+        }]
     },
@@ -25,0 +29,0 @@ externals: {

No alert changes

Improved metrics

Dependency count

2

decreased by-33.33%

Lines of code

1673

increased by0.24%

Number of lines in readme file

69

increased by2.99%

Worsened metrics

Total package byte prevSize

93958

decreased by-0.89%

Dev dependency count

25

increased by13.64%

Number of package files

32

decreased by-5.88%

Dependency changes

• - Removedlodash@^3.10.1

• - Removedlodash@3.10.1(transitive)