react-custom-scrollbars
Advanced tools
Comparing version 2.2.2 to 2.3.0
@@ -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); | ||
} |
@@ -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 | ||
); | ||
} | ||
}); |
{ | ||
"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", |
@@ -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 |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
34432
524
228