New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

react-custom-scroll

Package Overview
Dependencies
Maintainers
1
Versions
53
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-custom-scroll - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

src/main/customScroll.css

360

dist/reactCustomScroll.js

@@ -1,359 +0,1 @@

(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("React"), require("ReactDOM"), require("lodash"), require("jquery"));
else if(typeof define === 'function' && define.amd)
define(["React", "ReactDOM", "lodash", "jquery"], factory);
else if(typeof exports === 'object')
exports["ReactCustomScroll"] = factory(require("React"), require("ReactDOM"), require("lodash"), require("jquery"));
else
root["ReactCustomScroll"] = factory(root["React"], root["ReactDOM"], root["lodash"], root["jquery"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_3__, __WEBPACK_EXTERNAL_MODULE_4__, __WEBPACK_EXTERNAL_MODULE_5__, __WEBPACK_EXTERNAL_MODULE_6__) {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(1);
/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
var customScroll = __webpack_require__(2);
module.exports = {
CustomScroll: customScroll
};
/***/ },
/* 2 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
var React = __webpack_require__(3);
var reactDOM = __webpack_require__(4);
var _ = __webpack_require__(5);
var $ = __webpack_require__(6);
var template = __webpack_require__(7);
function ensureWithinLimits(value, min, max) {
min = _.isUndefined(min) ? value : min;
max = _.isUndefined(max) ? value : max;
if (min > max) {
throw 'min limit is greater than max limit';
}
if (value < min) {
return min;
}
if (value > max) {
return max;
}
return value;
}
module.exports = React.createClass({
displayName: 'customScroll',
propTypes: {
allowOuterScroll: React.PropTypes.bool,
heightRelativeToParent: React.PropTypes.string,
onScroll: React.PropTypes.func,
addScrolledClass: React.PropTypes.bool,
freezePosition: React.PropTypes.bool,
handleClass: React.PropTypes.string
},
getDefaultProps: function () {
return {
handleClass: 'inner-handle'
};
},
getInitialState: function () {
this.scrollbarYWidth = 0;
return {
scrollPos: 0,
onDrag: false
};
},
componentDidMount: function () {
this.forceUpdate();
},
componentDidUpdate: function (prevProps) {
var domNode = reactDOM.findDOMNode(this);
var boundingRect = domNode.getBoundingClientRect();
var innerContainer = this.getScrolledElement();
var contentHeight = innerContainer.scrollHeight;
this.scrollbarYWidth = innerContainer.offsetWidth - innerContainer.clientWidth;
this.visibleHeight = innerContainer.clientHeight;
this.scrollRatio = contentHeight ? this.visibleHeight / contentHeight : 1;
this.toggleScrollIfNeeded(contentHeight);
this.position = {
top: boundingRect.top + $(window).scrollTop(),
left: boundingRect.left + $(window).scrollLeft()
};
this.freezePosition(prevProps);
},
componentWillUnmount: function () {
$(document).off('mousemove', this.onHandleDrag);
$(document).off('mouseup', this.onHandleDragEnd);
},
freezePosition: function (prevProps) {
var innerContainer = this.getScrolledElement();
var contentWrapper = this.refs.contentWrapper;
if (this.props.freezePosition) {
contentWrapper.scrollTop = this.state.scrollPos;
}
if (prevProps.freezePosition) {
innerContainer.scrollTop = this.state.scrollPos;
}
},
toggleScrollIfNeeded: function (contentHeight) {
var shouldHaveScroll = contentHeight - this.visibleHeight > 1;
if (this.hasScroll !== shouldHaveScroll) {
this.hasScroll = shouldHaveScroll;
this.forceUpdate();
}
},
getScrollTop: function () {
return this.getScrolledElement().scrollTop;
},
updateScrollPosition: function (scrollValue) {
var innerContainer = this.getScrolledElement();
innerContainer.scrollTop = scrollValue;
this.setState({
scrollPos: scrollValue
});
},
onCustomScrollClick: function (event) {
if (this.isClickOnScrollHandle(event)) {
return;
}
var newScrollHandleTop = this.calculateNewScrollHandleTop(event);
var newScrollValue = this.getScrollValueFromHandlePosition(newScrollHandleTop);
this.updateScrollPosition(newScrollValue);
},
isClickOnScrollHandle: function (event) {
var scrollHandle = reactDOM.findDOMNode(this.refs.scrollHandle);
return event.target === scrollHandle || event.target.parentElement === scrollHandle;
},
calculateNewScrollHandleTop: function (clickEvent) {
var clickYRelativeToScrollbar = clickEvent.pageY - this.position.top;
var scrollHandleTop = this.getScrollHandleStyle().top;
var newScrollHandleTop;
var isBelowHandle = clickYRelativeToScrollbar > (scrollHandleTop + this.scrollHandleHeight);
if (isBelowHandle) {
newScrollHandleTop = scrollHandleTop + Math.min(this.scrollHandleHeight, this.visibleHeight - this.scrollHandleHeight);
} else {
newScrollHandleTop = scrollHandleTop - Math.max(this.scrollHandleHeight, 0);
}
return newScrollHandleTop;
},
getScrollValueFromHandlePosition: function (handlePosition) {
return (handlePosition) / this.scrollRatio;
},
getScrollHandleStyle: function () {
var handlePosition = this.state.scrollPos * this.scrollRatio;
this.scrollHandleHeight = this.visibleHeight * this.scrollRatio;
return {
height: this.scrollHandleHeight,
top: handlePosition
};
},
adjustCustomScrollPosToContentPos: function (scrollPosition) {
this.setState({
scrollPos: scrollPosition
});
},
onScroll: function (event) {
if (this.props.freezePosition) {
return;
}
this.adjustCustomScrollPosToContentPos(event.currentTarget.scrollTop);
if (this.props.onScroll) {
this.props.onScroll(event);
}
},
getScrolledElement: function () {
return this.refs.innerContainer;
},
onHandleMouseDown: function (event) {
this.startDragHandlePos = this.getScrollHandleStyle().top;
this.startDragMousePos = event.pageY;
this.setState({
onDrag: true
});
$(document).on('mousemove', this.onHandleDrag);
$(document).on('mouseup', this.onHandleDragEnd);
},
onHandleDrag: function (event) {
var mouseDeltaY = event.pageY - this.startDragMousePos;
var handleTopPosition = ensureWithinLimits(this.startDragHandlePos + mouseDeltaY, 0, this.visibleHeight - this.scrollHandleHeight);
var newScrollValue = this.getScrollValueFromHandlePosition(handleTopPosition);
this.updateScrollPosition(newScrollValue);
},
onHandleDragEnd: function () {
this.setState({
onDrag: false
});
$(document).off('mousemove', this.onHandleDrag);
$(document).off('mouseup', this.onHandleDragEnd);
},
blockOuterScroll: function (e) {
if (this.props.allowOuterScroll) {
return;
}
var contentNode = e.currentTarget;
var totalHeight = e.currentTarget.scrollHeight;
var maxScroll = totalHeight - e.currentTarget.offsetHeight;
var delta = e.deltaY % 3 ? (e.deltaY) : (e.deltaY * 10);
if (contentNode.scrollTop + delta <= 0) {
contentNode.scrollTop = 0;
e.preventDefault();
} else if (contentNode.scrollTop + delta >= maxScroll) {
contentNode.scrollTop = maxScroll;
e.preventDefault();
}
e.stopPropagation();
},
getScrollStyles: function () {
var scrollSize = this.scrollbarYWidth || 20;
var innerContainerStyle = {
marginRight: (-1 * scrollSize),
height: this.props.heightRelativeToParent ? '100%' : ''
};
var contentWrapperStyle = {
marginRight: this.scrollbarYWidth ? 0 : scrollSize,
height: this.props.heightRelativeToParent ? '100%' : '',
overflowY: this.props.freezePosition ? 'hidden' : 'visible'
};
return {
innerContainer: innerContainerStyle,
contentWrapper: contentWrapperStyle
};
},
getOuterContainerStyle: function () {
return {
height: this.props.heightRelativeToParent ? '100%' : ''
};
},
render: template
});
/***/ },
/* 3 */
/***/ function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_3__;
/***/ },
/* 4 */
/***/ function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_4__;
/***/ },
/* 5 */
/***/ function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_5__;
/***/ },
/* 6 */
/***/ function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_6__;
/***/ },
/* 7 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
var React = __webpack_require__(3);
var _ = __webpack_require__(5);
module.exports = function () {
return React.createElement('div', {
'className': 'custom-scroll',
'style': { height: this.props.heightRelativeToParent }
}, React.createElement('div', {
'className': 'outer-container',
'style': this.getOuterContainerStyle()
}, this.hasScroll ? React.createElement('div', {
'className': 'custom-scrollbar ' + (this.state.onDrag ? 'handleDrag' : ''),
'onClick': this.onCustomScrollClick,
'key': 'scrollbar'
}, React.createElement('div', {
'ref': 'scrollHandle',
'className': 'custom-scroll-handle',
'style': this.getScrollHandleStyle(),
'onMouseDown': this.onHandleMouseDown
}, React.createElement('div', { 'className': 'inner-handle' }))) : null, React.createElement('div', {
'ref': 'innerContainer',
'className': _.keys(_.pick({
'inner-container': true,
'content-scrolled': this.state.scrollPos && this.props.addScrolledClass
}, _.identity)).join(' '),
'style': this.getScrollStyles().innerContainer,
'onScroll': this.onScroll,
'onWheel': this.blockOuterScroll
}, React.createElement('div', {
'className': 'content-wrapper',
'ref': 'contentWrapper',
'style': this.getScrollStyles().contentWrapper
}, '\n ', this.props.children, '\n '))));
};
/***/ }
/******/ ])
});
;
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("React"),require("lodash"),require("ReactDOM"),require("jquery")):"function"==typeof define&&define.amd?define(["React","lodash","ReactDOM","jquery"],e):"object"==typeof exports?exports.ReactCustomScroll=e(require("React"),require("lodash"),require("ReactDOM"),require("jquery")):t.ReactCustomScroll=e(t.React,t.lodash,t.ReactDOM,t.jquery)}(this,function(t,e,o,l){return function(t){function e(l){if(o[l])return o[l].exports;var r=o[l]={exports:{},id:l,loaded:!1};return t[l].call(r.exports,r,r.exports,e),r.loaded=!0,r.exports}var o={};return e.m=t,e.c=o,e.p="",e(0)}([function(t,e,o){t.exports=o(3)},function(e,o){e.exports=t},function(t,o){t.exports=e},function(t,e,o){"use strict";var l=o(4);t.exports={CustomScroll:l}},function(t,e,o){"use strict";function l(t,e,o){if(e=s.isUndefined(e)?t:e,o=s.isUndefined(o)?t:o,e>o)throw"min limit is greater than max limit";return e>t?e:t>o?o:t}var r=o(1),n=o(6),s=o(2),i=o(7),a=o(5);t.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(t){var e=n.findDOMNode(this),o=e.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+i(window).scrollTop(),left:o.left+i(window).scrollLeft()},this.freezePosition(t)},componentWillUnmount:function(){i(document).off("mousemove",this.onHandleDrag),i(document).off("mouseup",this.onHandleDragEnd)},freezePosition:function(t){var e=this.getScrolledElement(),o=this.refs.contentWrapper;this.props.freezePosition&&(o.scrollTop=this.state.scrollPos),t.freezePosition&&(e.scrollTop=this.state.scrollPos)},toggleScrollIfNeeded:function(t){var e=t-this.visibleHeight>1;this.hasScroll!==e&&(this.hasScroll=e,this.forceUpdate())},getScrollTop:function(){return this.getScrolledElement().scrollTop},updateScrollPosition:function(t){var e=this.getScrolledElement();e.scrollTop=t,this.setState({scrollPos:t})},onCustomScrollClick:function(t){if(!this.isClickOnScrollHandle(t)){var e=this.calculateNewScrollHandleTop(t),o=this.getScrollValueFromHandlePosition(e);this.updateScrollPosition(o)}},isClickOnScrollHandle:function(t){var e=n.findDOMNode(this.refs.scrollHandle);return t.target===e||t.target.parentElement===e},calculateNewScrollHandleTop:function(t){var e,o=t.pageY-this.position.top,l=this.getScrollHandleStyle().top,r=o>l+this.scrollHandleHeight;return e=r?l+Math.min(this.scrollHandleHeight,this.visibleHeight-this.scrollHandleHeight):l-Math.max(this.scrollHandleHeight,0)},getScrollValueFromHandlePosition:function(t){return t/this.scrollRatio},getScrollHandleStyle:function(){var t=this.state.scrollPos*this.scrollRatio;return this.scrollHandleHeight=this.visibleHeight*this.scrollRatio,{height:this.scrollHandleHeight,top:t}},adjustCustomScrollPosToContentPos:function(t){this.setState({scrollPos:t})},onScroll:function(t){this.props.freezePosition||(this.adjustCustomScrollPosToContentPos(t.currentTarget.scrollTop),this.props.onScroll&&this.props.onScroll(t))},getScrolledElement:function(){return this.refs.innerContainer},onHandleMouseDown:function(t){this.startDragHandlePos=this.getScrollHandleStyle().top,this.startDragMousePos=t.pageY,this.setState({onDrag:!0}),i(document).on("mousemove",this.onHandleDrag),i(document).on("mouseup",this.onHandleDragEnd)},onHandleDrag:function(t){var e=t.pageY-this.startDragMousePos,o=l(this.startDragHandlePos+e,0,this.visibleHeight-this.scrollHandleHeight),r=this.getScrollValueFromHandlePosition(o);this.updateScrollPosition(r)},onHandleDragEnd:function(){this.setState({onDrag:!1}),i(document).off("mousemove",this.onHandleDrag),i(document).off("mouseup",this.onHandleDragEnd)},blockOuterScroll:function(t){if(!this.props.allowOuterScroll){var e=t.currentTarget,o=t.currentTarget.scrollHeight,l=o-t.currentTarget.offsetHeight,r=t.deltaY%3?t.deltaY:10*t.deltaY;e.scrollTop+r<=0?(e.scrollTop=0,t.preventDefault()):e.scrollTop+r>=l&&(e.scrollTop=l,t.preventDefault()),t.stopPropagation()}},getScrollStyles:function(){var t=this.scrollbarYWidth||20,e={marginRight:-1*t,height:this.props.heightRelativeToParent?"100%":""},o={marginRight:this.scrollbarYWidth?0:t,height:this.props.heightRelativeToParent?"100%":"",overflowY:this.props.freezePosition?"hidden":"visible"};return{innerContainer:e,contentWrapper:o}},getOuterContainerStyle:function(){return{height:this.props.heightRelativeToParent?"100%":""}},render:a})},function(t,e,o){"use strict";var l=o(1),r=o(2);t.exports=function(){return l.createElement("div",{className:"custom-scroll",style:{height:this.props.heightRelativeToParent}},l.createElement("div",{className:"outer-container",style:this.getOuterContainerStyle()},this.hasScroll?l.createElement("div",{className:"custom-scrollbar "+(this.state.onDrag?"handleDrag":""),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,l.createElement("div",{ref:"innerContainer",className:r.keys(r.pick({"inner-container":!0,"content-scrolled":this.state.scrollPos&&this.props.addScrolledClass},r.identity)).join(" "),style:this.getScrollStyles().innerContainer,onScroll:this.onScroll,onWheel:this.blockOuterScroll},l.createElement("div",{className:"content-wrapper",ref:"contentWrapper",style:this.getScrollStyles().contentWrapper},"\n ",this.props.children,"\n "))))}},function(t,e){t.exports=o},function(t,e){t.exports=l}])});
{
"name": "react-custom-scroll",
"version": "1.0.0",
"version": "1.0.1",
"description": "An easily designable, cross browser (!!), custom scroll with ReactJS Animations and scroll rate **exactly** like native scroll",

@@ -10,4 +10,6 @@ "main": "index",

"rtex": "rt -m amd example/firstComp/firstComp.rt -r --react-import-path React",
"sass": "node-sass src/main/customScroll.scss > src/main/customScroll.css",
"sassex": "node-sass example/main.scss > example/styles.css",
"lint": "eslint .",
"start": "npm run lint && npm run rt && npm run rtex && webpack -p"
"start": "npm run lint && npm run sass && npm run sassex && npm run rt && npm run rtex && webpack -p"
},

@@ -19,3 +21,3 @@ "repository": {

"author": "Guy Romm",
"license": "ISC",
"license": "MIT",
"bugs": {

@@ -27,5 +29,3 @@ "url": "https://github.com/rommguy/react-custom-scroll/issues"

"jquery": "^2.2.0",
"lodash": "^3.10.1",
"lodash-amd": "3.6.0",
"requirejs": "^2.1.22"
"lodash": "^3.10.1"
},

@@ -36,8 +36,3 @@ "devDependencies": {

"eslint-plugin-react": "^3.16.1",
"grunt": "^0.4.5",
"grunt-contrib-clean": "^0.7.0",
"grunt-contrib-sass": "^0.9.2",
"grunt-contrib-watch": "^0.6.1",
"grunt-eslint": "^18.0.0",
"grunt-react-templates": "^0.4.0",
"node-sass": "3.4.2",
"react": "^0.14.7",

@@ -44,0 +39,0 @@ "react-dom": "^0.14.7",

@@ -0,1 +1,3 @@

[![NPM version][npm-image]][npm-url]
# React-Custom-Scroll

@@ -42,1 +44,11 @@ An easily designable, cross browser (!!), custom scroll with ReactJS

- Check if your height limit is relative to parent, and you didn't use heightRelativeToParent prop.
[npm-image]: https://img.shields.io/npm/v/react-custom-scroll.svg?style=flat-square
[npm-url]: https://npmjs.org/package/react-custom-scroll
[travis-image]: https://img.shields.io/travis/wix/react-custom-scroll/gh-pages.svg?style=flat-square
[travis-url]: https://travis-ci.org/wix/react-custom-scroll
[coveralls-image]: https://img.shields.io/coveralls/wix/react-custom-scroll/gh-pages.svg?style=flat-square
[coveralls-url]: https://coveralls.io/r/wix/react-custom-scroll?branch=gh-pages
[downloads-image]: http://img.shields.io/npm/dm/react-custom-scroll.svg?style=flat-square
[downloads-url]: https://npmjs.org/package/react-custom-scroll
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc