Socket
Socket
Sign inDemoInstall

react-custom-scrollbars

Package Overview
Dependencies
51
Maintainers
1
Versions
40
Alerts
File Explorer

Advanced tools

npm Scripts
License

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 2.2.2 to 2.3.0

9

lib/Scrollbars/defaultRenderElements.js

@@ -78,9 +78,4 @@ 'use strict';

function defaultRenderView(_ref5) {
var style = _ref5.style;
var props = _objectWithoutProperties(_ref5, ['style']);
var finalStyle = _extends({}, style);
return _react2.default.createElement('div', _extends({ style: finalStyle }, props));
function defaultRenderView(props) {
return _react2.default.createElement('div', props);
}

123

lib/Scrollbars/index.js

@@ -21,4 +21,2 @@ 'use strict';

var _reactDom = require('react-dom');
var _getScrollbarWidth = require('../utils/getScrollbarWidth');

@@ -67,3 +65,2 @@

this.update();
this.validate();
},

@@ -107,3 +104,3 @@ componentDidUpdate: function componentDidUpdate() {

},
getPosition: function getPosition() {
getValues: function getValues() {
var view = this.refs.view;

@@ -118,4 +115,2 @@ var scrollTop = view.scrollTop;

return {
x: scrollLeft * 100 / clientWidth,
y: scrollTop * 100 / clientHeight,
left: scrollLeft / (scrollWidth - clientWidth) || 0,

@@ -131,36 +126,2 @@ top: scrollTop / (scrollHeight - clientHeight) || 0,

},
getInnerSizePercentage: function getInnerSizePercentage() {
var view = this.refs.view;
return {
widthPercentageInner: view.clientWidth * 100 / view.scrollWidth,
heightPercentageInner: view.clientHeight * 100 / view.scrollHeight
};
},
validate: function validate() {
if (!(0, _getScrollbarWidth2.default)()) return;
var root = (0, _reactDom.findDOMNode)(this);
var _refs = this.refs;
var barHorizontal = _refs.barHorizontal;
var barVertical = _refs.barVertical;
var rootClientHeight = root.clientHeight;
var barHorizontalClientHeight = barHorizontal.clientHeight;
var barVerticalClientWidth = barVertical.clientWidth;
var display = _domCss2.default.get(root, 'display');
if (display === 'none') return;
if (!rootClientHeight) {
console.error( // eslint-disable-line no-console
'<Scrollbars>: Component has no static height. ' + 'This can happen if the root element has no CSS or is displayed as inline block.');
}
if (!barHorizontalClientHeight) {
console.error( // eslint-disable-line no-console
'<Scrollbars>: Horizontal bar has no height. ' + 'Make sure you set the height property if you use a ' + 'custom render method like `renderScrollbarHorizontal`');
}
if (!barVerticalClientWidth) {
console.error( // eslint-disable-line no-console
'<Scrollbars>: Vertical bar has no width. ' + 'Make sure you set the width property if you use a ' + 'custom render method like `renderScrollbarVertical`');
}
},
scrollTop: function scrollTop() {

@@ -201,2 +162,3 @@ var top = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0];

this.refs.view.addEventListener('scroll', this.handleScroll);
if (!(0, _getScrollbarWidth2.default)()) return;
this.refs.barVertical.addEventListener('mousedown', this.handleVerticalTrackMouseDown);

@@ -212,2 +174,3 @@ this.refs.barHorizontal.addEventListener('mousedown', this.handleHorizontalTrackMouseDown);

this.refs.view.removeEventListener('scroll', this.handleScroll);
if (!(0, _getScrollbarWidth2.default)()) return;
this.refs.barVertical.removeEventListener('mousedown', this.handleVerticalTrackMouseDown);

@@ -229,6 +192,6 @@ this.refs.barHorizontal.removeEventListener('mousedown', this.handleHorizontalTrackMouseDown);

handleVerticalTrackMouseDown: function handleVerticalTrackMouseDown(event) {
var _refs2 = this.refs;
var thumbVertical = _refs2.thumbVertical;
var barVertical = _refs2.barVertical;
var view = _refs2.view;
var _refs = this.refs;
var thumbVertical = _refs.thumbVertical;
var barVertical = _refs.barVertical;
var view = _refs.view;

@@ -241,6 +204,6 @@ var offset = Math.abs(event.target.getBoundingClientRect().top - event.clientY);

handleHorizontalTrackMouseDown: function handleHorizontalTrackMouseDown() {
var _refs3 = this.refs;
var thumbHorizontal = _refs3.thumbHorizontal;
var barHorizontal = _refs3.barHorizontal;
var view = _refs3.view;
var _refs2 = this.refs;
var thumbHorizontal = _refs2.thumbHorizontal;
var barHorizontal = _refs2.barHorizontal;
var view = _refs2.view;

@@ -272,6 +235,6 @@ var offset = Math.abs(event.target.getBoundingClientRect().left - event.clientX);

if (this.prevPageY) {
var _refs4 = this.refs;
var barVertical = _refs4.barVertical;
var thumbVertical = _refs4.thumbVertical;
var view = _refs4.view;
var _refs3 = this.refs;
var barVertical = _refs3.barVertical;
var thumbVertical = _refs3.thumbVertical;
var view = _refs3.view;

@@ -285,6 +248,6 @@ var offset = (barVertical.getBoundingClientRect().top - event.clientY) * -1;

if (this.prevPageX) {
var _refs5 = this.refs;
var barHorizontal = _refs5.barHorizontal;
var thumbHorizontal = _refs5.thumbHorizontal;
var view = _refs5.view;
var _refs4 = this.refs;
var barHorizontal = _refs4.barHorizontal;
var thumbHorizontal = _refs4.thumbHorizontal;
var view = _refs4.view;

@@ -327,27 +290,27 @@ var offset = (barHorizontal.getBoundingClientRect().left - event.clientX) * -1;

update: function update(callback) {
var _refs6 = this.refs;
var thumbHorizontal = _refs6.thumbHorizontal;
var thumbVertical = _refs6.thumbVertical;
var values = this.getValues();
var _refs5 = this.refs;
var thumbHorizontal = _refs5.thumbHorizontal;
var thumbVertical = _refs5.thumbVertical;
var scrollLeft = values.scrollLeft;
var scrollTop = values.scrollTop;
var clientWidth = values.clientWidth;
var clientHeight = values.clientHeight;
var scrollWidth = values.scrollWidth;
var scrollHeight = values.scrollHeight;
var _getInnerSizePercenta = this.getInnerSizePercentage();
var thumbHorizontalX = scrollLeft * 100 / clientWidth;
var thumbHorizontalWidth = clientWidth * 100 / scrollWidth;
var thumbVerticalY = scrollTop * 100 / clientHeight;
var thumbVerticalHeight = clientHeight * 100 / scrollHeight;
var widthPercentageInner = _getInnerSizePercenta.widthPercentageInner;
var heightPercentageInner = _getInnerSizePercenta.heightPercentageInner;
var _getPosition = this.getPosition();
var x = _getPosition.x;
var y = _getPosition.y;
var values = _objectWithoutProperties(_getPosition, ['x', 'y']);
this.raf(function () {
if ((0, _getScrollbarWidth2.default)() > 0) {
if ((0, _getScrollbarWidth2.default)()) {
var thumbHorizontalStyle = {
width: widthPercentageInner < 100 ? widthPercentageInner + '%' : 0,
transform: 'translateX(' + x + '%)'
width: thumbHorizontalWidth < 100 ? thumbHorizontalWidth + '%' : 0,
transform: 'translateX(' + thumbHorizontalX + '%)'
};
var thumbVerticalStyle = {
height: heightPercentageInner < 100 ? heightPercentageInner + '%' : 0,
transform: 'translateY(' + y + '%)'
height: thumbVerticalHeight < 100 ? thumbVerticalHeight + '%' : 0,
transform: 'translateY(' + thumbVerticalY + '%)'
};

@@ -382,3 +345,3 @@ (0, _domCss2.default)(thumbHorizontal, thumbHorizontalStyle);

var viewStyle = scrollbarWidth > 0 ? _extends({}, _styles.scrollbarsVisibleViewStyle, {
var viewStyle = scrollbarWidth ? _extends({}, _styles.scrollbarsVisibleViewStyle, {
right: -scrollbarWidth,

@@ -388,6 +351,2 @@ bottom: -scrollbarWidth

var finalScrollbarHorizontalStyle = scrollbarWidth > 0 ? _styles.defaultScrollbarHorizontalStyle : _extends({}, _styles.defaultScrollbarHorizontalStyle, { display: 'none' });
var finalScrollbarVerticalStyle = scrollbarWidth > 0 ? _styles.defaultScrollbarVerticalStyle : _extends({}, _styles.defaultScrollbarVerticalStyle, { display: 'none' });
return _react2.default.createElement(

@@ -397,6 +356,6 @@ 'div',

(0, _react.cloneElement)(renderView({ style: viewStyle }), { ref: 'view' }, children),
(0, _react.cloneElement)(renderScrollbarHorizontal({ style: finalScrollbarHorizontalStyle }), { ref: 'barHorizontal' }, (0, _react.cloneElement)(renderThumbHorizontal({ style: _styles.defaultThumbHorizontalStyle }), { ref: 'thumbHorizontal' })),
(0, _react.cloneElement)(renderScrollbarVertical({ style: finalScrollbarVerticalStyle }), { ref: 'barVertical' }, (0, _react.cloneElement)(renderThumbVertical({ style: _styles.defaultThumbVerticalStyle }), { ref: 'thumbVertical' }))
scrollbarWidth ? (0, _react.cloneElement)(renderScrollbarHorizontal({ style: _styles.defaultScrollbarHorizontalStyle }), { ref: 'barHorizontal' }, (0, _react.cloneElement)(renderThumbHorizontal({ style: _styles.defaultThumbHorizontalStyle }), { ref: 'thumbHorizontal' })) : undefined,
scrollbarWidth ? (0, _react.cloneElement)(renderScrollbarVertical({ style: _styles.defaultScrollbarVerticalStyle }), { ref: 'barVertical' }, (0, _react.cloneElement)(renderThumbVertical({ style: _styles.defaultThumbVerticalStyle }), { ref: 'thumbVertical' })) : undefined
);
}
});

4

package.json
{
"name": "react-custom-scrollbars",
"version": "2.2.2",
"version": "2.3.0",
"description": "React scrollbars component",

@@ -44,3 +44,3 @@ "main": "lib/index.js",

"eslint": "^1.6.0",
"eslint-config-airbnb": "^0.1.0",
"eslint-config-airbnb": "^5.0.0",
"eslint-plugin-react": "^3.5.1",

@@ -47,0 +47,0 @@ "expect": "^1.6.0",

27

README.md

@@ -40,6 +40,3 @@ react-custom-scrollbars

<Scrollbars style={{ width: 500, height: 300 }}>
<p>Lorem ipsum dolor sit amet, ...</p>
<p>Lorem ipsum dolor sit amet, ...</p>
<p>Lorem ipsum dolor sit amet, ...</p>
<p>Lorem ipsum dolor sit amet, ...</p>
<p>Some great content...</p>
</Scrollbars>

@@ -83,6 +80,3 @@ );

<CustomScrollbars style={{ width: 500, height: 300 }}>
<p>Lorem ipsum dolor sit amet, ...</p>
<p>Lorem ipsum dolor sit amet, ...</p>
<p>Lorem ipsum dolor sit amet, ...</p>
<p>Lorem ipsum dolor sit amet, ...</p>
<p>Some great content...</p>
</CustomScrollbars>

@@ -94,2 +88,4 @@ );

**NOTE**: If you use `renderScrollbarHorizontal`, **make sure that you define a height value** with css or inline styles. If you use `renderScrollbarVertical`, **make sure that you define a width value with** css or inline styles.
## API

@@ -101,2 +97,7 @@

* `renderScrollbarHorizontal`: (Function) Horizontal scrollbar element
* `renderScrollbarVertical`: (Function) Vertical scrollbar element
* `renderThumbHorizontal`: (Function) Horizontal thumb element
* `renderThumbVertical`: (Function) Vertical thumb element
* `renderView`: (Function) The element your content will be rendered in
* `onScroll`: (Function) Event handler. Will be called with the native scroll event and some handy values about the current position.

@@ -114,11 +115,7 @@ * **Signature**: `onScroll(event, values)`

* `values.scrollTop`: (Number) native scrollTop
* **The following properties expect a react element to be returned. You can customize the element to your needs.**
* `renderScrollbarHorizontal`: (Function) Horizontal scrollbar element
* `renderScrollbarVertical`: (Function) Vertical scrollbar element
* `renderThumbHorizontal`: (Function) Horizontal thumb element
* `renderThumbVertical`: (Function) Vertical thumb element
* `renderView`: (Function) The element your content will be rendered in
**Don't forget to pass the received props to your custom element. Example:**
**NOTE**: If you use `renderScrollbarHorizontal`, **make sure that you define a height value** with css or inline styles. If you use `renderScrollbarVertical`, **make sure that you define a width value with** css or inline styles.
```javascript

@@ -158,2 +155,4 @@ import { Scrollbars } from 'react-custom-scrollbars';

* `getHeight`: get view client height
* `getValues`: get an object with values about the current position.
* `left`, `top`, `scrollLeft`, `scrollTop`, `scrollWidth`, `scrollHeight`, `clientWidth`, `clientHeight`

@@ -160,0 +159,0 @@ ```javascript

.eslintrc

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

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

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc