react-custom-scrollbars
Advanced tools
Comparing version 2.3.0 to 3.0.0-beta
/* eslint no-var: 0, no-unused-vars: 0 */ | ||
var path = require('path'); | ||
var webpack = require('webpack'); | ||
var runCoverage = process.env.COVERAGE === 'true'; | ||
var coverageLoaders = []; | ||
var coverageReporters = []; | ||
if (runCoverage) { | ||
coverageLoaders.push({ | ||
test: /\.js$/, | ||
include: path.resolve('src/'), | ||
loader: 'isparta' | ||
}); | ||
coverageReporters.push('coverage'); | ||
} | ||
module.exports = function karmaConfig(config) { | ||
config.set({ | ||
browsers: [ 'Chrome' ], | ||
browsers: ['Chrome'], | ||
singleRun: true, | ||
// autoWatch: true, | ||
frameworks: [ 'mocha' ], | ||
files: [ './test.js' ], | ||
frameworks: ['mocha'], | ||
files: ['./test.js'], | ||
preprocessors: { | ||
'./test.js': [ 'webpack', 'sourcemap' ] | ||
'./test.js': ['webpack', 'sourcemap'] | ||
}, | ||
reporters: [ 'mocha' ], | ||
reporters: ['mocha'].concat(coverageReporters), | ||
webpack: { | ||
@@ -28,6 +40,14 @@ devtool: 'inline-source-map', | ||
exclude: /(node_modules)/ | ||
}] | ||
}].concat(coverageLoaders) | ||
} | ||
}, | ||
coverageReporter: { | ||
dir: 'coverage/', | ||
reporters: [ | ||
{ type: 'html', subdir: 'report-html' }, | ||
{ type: 'text', subdir: '.', file: 'text.txt' }, | ||
{ type: 'text-summary', subdir: '.', file: 'text-summary.txt' }, | ||
] | ||
} | ||
}); | ||
}; |
@@ -14,2 +14,3 @@ 'use strict'; | ||
exports.default = _Scrollbars2.default; | ||
exports.Scrollbars = _Scrollbars2.default; |
'use strict'; | ||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
exports.defaultRenderScrollbarHorizontal = defaultRenderScrollbarHorizontal; | ||
exports.defaultRenderScrollbarVertical = defaultRenderScrollbarVertical; | ||
exports.defaultRenderThumbHorizontal = defaultRenderThumbHorizontal; | ||
exports.defaultRenderThumbVertical = defaultRenderThumbVertical; | ||
exports.defaultRenderView = defaultRenderView; | ||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; | ||
exports.renderViewDefault = renderViewDefault; | ||
exports.renderTrackHorizontalDefault = renderTrackHorizontalDefault; | ||
exports.renderTrackVerticalDefault = renderTrackVerticalDefault; | ||
exports.renderThumbHorizontalDefault = renderThumbHorizontalDefault; | ||
exports.renderThumbVerticalDefault = renderThumbVerticalDefault; | ||
var _react = require('react'); | ||
@@ -22,3 +23,7 @@ | ||
function defaultRenderScrollbarHorizontal(_ref) { | ||
function renderViewDefault(props) { | ||
return _react2.default.createElement('div', props); | ||
} | ||
function renderTrackHorizontalDefault(_ref) { | ||
var style = _ref.style; | ||
@@ -29,7 +34,7 @@ | ||
var finalStyle = _extends({}, style, { | ||
height: 6, | ||
right: 2, | ||
bottom: 2, | ||
left: 2, | ||
borderRadius: 3 | ||
borderRadius: 3, | ||
cursor: 'pointer' | ||
}); | ||
@@ -39,3 +44,3 @@ return _react2.default.createElement('div', _extends({ style: finalStyle }, props)); | ||
function defaultRenderScrollbarVertical(_ref2) { | ||
function renderTrackVerticalDefault(_ref2) { | ||
var style = _ref2.style; | ||
@@ -46,7 +51,7 @@ | ||
var finalStyle = _extends({}, style, { | ||
width: 6, | ||
right: 2, | ||
bottom: 2, | ||
top: 2, | ||
borderRadius: 3 | ||
borderRadius: 3, | ||
cursor: 'pointer' | ||
}); | ||
@@ -56,3 +61,3 @@ return _react2.default.createElement('div', _extends({ style: finalStyle }, props)); | ||
function defaultRenderThumbHorizontal(_ref3) { | ||
function renderThumbHorizontalDefault(_ref3) { | ||
var style = _ref3.style; | ||
@@ -70,3 +75,3 @@ | ||
function defaultRenderThumbVertical(_ref4) { | ||
function renderThumbVerticalDefault(_ref4) { | ||
var style = _ref4.style; | ||
@@ -82,6 +87,2 @@ | ||
return _react2.default.createElement('div', _extends({ style: finalStyle }, props)); | ||
} | ||
function defaultRenderView(props) { | ||
return _react2.default.createElement('div', props); | ||
} |
'use strict'; | ||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; | ||
Object.defineProperty(exports, "__esModule", { | ||
@@ -9,2 +7,4 @@ value: true | ||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; | ||
var _raf2 = require('raf'); | ||
@@ -30,2 +30,10 @@ | ||
var _getInnerWidth = require('../utils/getInnerWidth'); | ||
var _getInnerWidth2 = _interopRequireDefault(_getInnerWidth); | ||
var _getInnerHeight = require('../utils/getInnerHeight'); | ||
var _getInnerHeight2 = _interopRequireDefault(_getInnerHeight); | ||
var _styles = require('./styles'); | ||
@@ -45,7 +53,16 @@ | ||
onScroll: _react.PropTypes.func, | ||
renderScrollbarHorizontal: _react.PropTypes.func, | ||
renderScrollbarVertical: _react.PropTypes.func, | ||
onScrollFrame: _react.PropTypes.func, | ||
onScrollStart: _react.PropTypes.func, | ||
onScrollStop: _react.PropTypes.func, | ||
renderView: _react.PropTypes.func, | ||
renderTrackHorizontal: _react.PropTypes.func, | ||
renderTrackVertical: _react.PropTypes.func, | ||
renderThumbHorizontal: _react.PropTypes.func, | ||
renderThumbVertical: _react.PropTypes.func, | ||
renderView: _react.PropTypes.func, | ||
autoHide: _react.PropTypes.bool, | ||
autoHideTimeout: _react.PropTypes.number, | ||
autoHideDuration: _react.PropTypes.number, | ||
thumbSize: _react.PropTypes.number, | ||
thumbMinSize: _react.PropTypes.number, | ||
universal: _react.PropTypes.bool, | ||
style: _react.PropTypes.object, | ||
@@ -57,13 +74,31 @@ children: _react.PropTypes.node | ||
return { | ||
renderScrollbarHorizontal: _defaultRenderElements.defaultRenderScrollbarHorizontal, | ||
renderScrollbarVertical: _defaultRenderElements.defaultRenderScrollbarVertical, | ||
renderThumbHorizontal: _defaultRenderElements.defaultRenderThumbHorizontal, | ||
renderThumbVertical: _defaultRenderElements.defaultRenderThumbVertical, | ||
renderView: _defaultRenderElements.defaultRenderView | ||
renderView: _defaultRenderElements.renderViewDefault, | ||
renderTrackHorizontal: _defaultRenderElements.renderTrackHorizontalDefault, | ||
renderTrackVertical: _defaultRenderElements.renderTrackVerticalDefault, | ||
renderThumbHorizontal: _defaultRenderElements.renderThumbHorizontalDefault, | ||
renderThumbVertical: _defaultRenderElements.renderThumbVerticalDefault, | ||
autoHide: false, | ||
autoHideTimeout: 1000, | ||
autoHideDuration: 200, | ||
thumbMinSize: 30, | ||
universal: false | ||
}; | ||
}, | ||
getInitialState: function getInitialState() { | ||
return { | ||
didMountUniversal: false | ||
}; | ||
}, | ||
componentDidMount: function componentDidMount() { | ||
this.addListeners(); | ||
this.update(); | ||
this.componentDidMountUniversal(); | ||
}, | ||
componentDidMountUniversal: function componentDidMountUniversal() { | ||
// eslint-disable-line react/sort-comp | ||
var universal = this.props.universal; | ||
if (!universal) return; | ||
this.setState({ didMountUniversal: true }); | ||
}, | ||
componentDidUpdate: function componentDidUpdate() { | ||
@@ -74,3 +109,5 @@ this.update(); | ||
this.removeListeners(); | ||
if (this.timer) _raf3.default.cancel(this.timer); | ||
(0, _raf2.cancel)(this.requestFrame); | ||
clearTimeout(this.hideTracksTimeout); | ||
clearInterval(this.detectScrollingInterval); | ||
}, | ||
@@ -97,3 +134,3 @@ getScrollLeft: function getScrollLeft() { | ||
}, | ||
getWidth: function getWidth() { | ||
getClientWidth: function getClientWidth() { | ||
var view = this.refs.view; | ||
@@ -103,3 +140,3 @@ | ||
}, | ||
getHeight: function getHeight() { | ||
getClientHeight: function getClientHeight() { | ||
var view = this.refs.view; | ||
@@ -111,9 +148,10 @@ | ||
var view = this.refs.view; | ||
var scrollLeft = view.scrollLeft; | ||
var scrollTop = view.scrollTop; | ||
var scrollLeft = view.scrollLeft; | ||
var scrollWidth = view.scrollWidth; | ||
var scrollHeight = view.scrollHeight; | ||
var scrollWidth = view.scrollWidth; | ||
var clientWidth = view.clientWidth; | ||
var clientHeight = view.clientHeight; | ||
var clientWidth = view.clientWidth; | ||
return { | ||
@@ -130,18 +168,56 @@ left: scrollLeft / (scrollWidth - clientWidth) || 0, | ||
}, | ||
scrollTop: function scrollTop() { | ||
var top = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0]; | ||
var view = this.refs.view; | ||
getThumbHorizontalWidth: function getThumbHorizontalWidth() { | ||
var _props = this.props; | ||
var thumbSize = _props.thumbSize; | ||
var thumbMinSize = _props.thumbMinSize; | ||
var _refs = this.refs; | ||
var view = _refs.view; | ||
var trackHorizontal = _refs.trackHorizontal; | ||
var scrollWidth = view.scrollWidth; | ||
var clientWidth = view.clientWidth; | ||
view.scrollTop = top; | ||
var trackWidth = (0, _getInnerWidth2.default)(trackHorizontal); | ||
var width = clientWidth / scrollWidth * trackWidth; | ||
if (trackWidth === width) return 0; | ||
if (thumbSize) return thumbSize; | ||
return Math.max(width, thumbMinSize); | ||
}, | ||
scrollToTop: function scrollToTop() { | ||
var view = this.refs.view; | ||
getThumbVerticalHeight: function getThumbVerticalHeight() { | ||
var _props2 = this.props; | ||
var thumbSize = _props2.thumbSize; | ||
var thumbMinSize = _props2.thumbMinSize; | ||
var _refs2 = this.refs; | ||
var view = _refs2.view; | ||
var trackVertical = _refs2.trackVertical; | ||
var scrollHeight = view.scrollHeight; | ||
var clientHeight = view.clientHeight; | ||
view.scrollTop = 0; | ||
var trackHeight = (0, _getInnerHeight2.default)(trackVertical); | ||
var height = clientHeight / scrollHeight * trackHeight; | ||
if (trackHeight === height) return 0; | ||
if (thumbSize) return thumbSize; | ||
return Math.max(height, thumbMinSize); | ||
}, | ||
scrollToBottom: function scrollToBottom() { | ||
var view = this.refs.view; | ||
getScrollLeftForOffset: function getScrollLeftForOffset(offset) { | ||
var _refs3 = this.refs; | ||
var view = _refs3.view; | ||
var trackHorizontal = _refs3.trackHorizontal; | ||
var scrollWidth = view.scrollWidth; | ||
var clientWidth = view.clientWidth; | ||
view.scrollTop = view.scrollHeight; | ||
var trackWidth = (0, _getInnerWidth2.default)(trackHorizontal); | ||
var thumbWidth = this.getThumbHorizontalWidth(); | ||
return offset / (trackWidth - thumbWidth) * (scrollWidth - clientWidth); | ||
}, | ||
getScrollTopForOffset: function getScrollTopForOffset(offset) { | ||
var _refs4 = this.refs; | ||
var view = _refs4.view; | ||
var trackVertical = _refs4.trackVertical; | ||
var scrollHeight = view.scrollHeight; | ||
var clientHeight = view.clientHeight; | ||
var trackHeight = (0, _getInnerHeight2.default)(trackVertical); | ||
var thumbHeight = this.getThumbVerticalHeight(); | ||
return offset / (trackHeight - thumbHeight) * (scrollHeight - clientHeight); | ||
}, | ||
scrollLeft: function scrollLeft() { | ||
@@ -153,2 +229,8 @@ var left = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0]; | ||
}, | ||
scrollTop: function scrollTop() { | ||
var top = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0]; | ||
var view = this.refs.view; | ||
view.scrollTop = top; | ||
}, | ||
scrollToLeft: function scrollToLeft() { | ||
@@ -159,2 +241,7 @@ var view = this.refs.view; | ||
}, | ||
scrollToTop: function scrollToTop() { | ||
var view = this.refs.view; | ||
view.scrollTop = 0; | ||
}, | ||
scrollToRight: function scrollToRight() { | ||
@@ -165,123 +252,277 @@ var view = this.refs.view; | ||
}, | ||
scrollToBottom: function scrollToBottom() { | ||
var view = this.refs.view; | ||
view.scrollTop = view.scrollHeight; | ||
}, | ||
addListeners: function addListeners() { | ||
/* istanbul ignore if */ | ||
if (typeof document === 'undefined') return; | ||
this.refs.view.addEventListener('scroll', this.handleScroll); | ||
var _refs5 = this.refs; | ||
var view = _refs5.view; | ||
var trackHorizontal = _refs5.trackHorizontal; | ||
var trackVertical = _refs5.trackVertical; | ||
var thumbHorizontal = _refs5.thumbHorizontal; | ||
var thumbVertical = _refs5.thumbVertical; | ||
view.addEventListener('scroll', this.handleScroll); | ||
if (!(0, _getScrollbarWidth2.default)()) return; | ||
this.refs.barVertical.addEventListener('mousedown', this.handleVerticalTrackMouseDown); | ||
this.refs.barHorizontal.addEventListener('mousedown', this.handleHorizontalTrackMouseDown); | ||
this.refs.thumbVertical.addEventListener('mousedown', this.handleVerticalThumbMouseDown); | ||
this.refs.thumbHorizontal.addEventListener('mousedown', this.handleHorizontalThumbMouseDown); | ||
document.addEventListener('mouseup', this.handleDocumentMouseUp); | ||
trackHorizontal.addEventListener('mouseenter', this.handleTrackMouseEnter); | ||
trackHorizontal.addEventListener('mouseleave', this.handleTrackMouseLeave); | ||
trackHorizontal.addEventListener('mousedown', this.handleHorizontalTrackMouseDown); | ||
trackVertical.addEventListener('mouseenter', this.handleTrackMouseEnter); | ||
trackVertical.addEventListener('mouseleave', this.handleTrackMouseLeave); | ||
trackVertical.addEventListener('mousedown', this.handleVerticalTrackMouseDown); | ||
thumbHorizontal.addEventListener('mousedown', this.handleHorizontalThumbMouseDown); | ||
thumbVertical.addEventListener('mousedown', this.handleVerticalThumbMouseDown); | ||
window.addEventListener('resize', this.handleWindowResize); | ||
}, | ||
removeListeners: function removeListeners() { | ||
/* istanbul ignore if */ | ||
if (typeof document === 'undefined') return; | ||
this.refs.view.removeEventListener('scroll', this.handleScroll); | ||
var _refs6 = this.refs; | ||
var view = _refs6.view; | ||
var trackHorizontal = _refs6.trackHorizontal; | ||
var trackVertical = _refs6.trackVertical; | ||
var thumbHorizontal = _refs6.thumbHorizontal; | ||
var thumbVertical = _refs6.thumbVertical; | ||
view.removeEventListener('scroll', this.handleScroll); | ||
if (!(0, _getScrollbarWidth2.default)()) return; | ||
this.refs.barVertical.removeEventListener('mousedown', this.handleVerticalTrackMouseDown); | ||
this.refs.barHorizontal.removeEventListener('mousedown', this.handleHorizontalTrackMouseDown); | ||
this.refs.thumbVertical.removeEventListener('mousedown', this.handleVerticalThumbMouseDown); | ||
this.refs.thumbHorizontal.removeEventListener('mousedown', this.handleHorizontalThumbMouseDown); | ||
document.removeEventListener('mouseup', this.handleDocumentMouseUp); | ||
trackHorizontal.removeEventListener('mouseenter', this.handleTrackMouseEnter); | ||
trackHorizontal.removeEventListener('mouseleave', this.handleTrackMouseLeave); | ||
trackHorizontal.removeEventListener('mousedown', this.handleHorizontalTrackMouseDown); | ||
trackVertical.removeEventListener('mouseenter', this.handleTrackMouseEnter); | ||
trackVertical.removeEventListener('mouseleave', this.handleTrackMouseLeave); | ||
trackVertical.removeEventListener('mousedown', this.handleVerticalTrackMouseDown); | ||
thumbHorizontal.removeEventListener('mousedown', this.handleHorizontalThumbMouseDown); | ||
thumbVertical.removeEventListener('mousedown', this.handleVerticalThumbMouseDown); | ||
window.removeEventListener('resize', this.handleWindowResize); | ||
// Possibly setup by `handleDragStart` | ||
this.teardownDragging(); | ||
}, | ||
handleScroll: function handleScroll(event) { | ||
var onScroll = this.props.onScroll; | ||
var _this = this; | ||
var _props3 = this.props; | ||
var onScroll = _props3.onScroll; | ||
var onScrollFrame = _props3.onScrollFrame; | ||
if (onScroll) onScroll(event); | ||
this.update(function (values) { | ||
if (!onScroll) return; | ||
onScroll(event, values); | ||
var scrollLeft = values.scrollLeft; | ||
var scrollTop = values.scrollTop; | ||
_this.viewScrollLeft = scrollLeft; | ||
_this.viewScrollTop = scrollTop; | ||
if (onScrollFrame) onScrollFrame(values); | ||
}); | ||
this.detectScrolling(); | ||
}, | ||
handleVerticalTrackMouseDown: function handleVerticalTrackMouseDown(event) { | ||
var _refs = this.refs; | ||
var thumbVertical = _refs.thumbVertical; | ||
var barVertical = _refs.barVertical; | ||
var view = _refs.view; | ||
handleScrollStart: function handleScrollStart() { | ||
var onScrollStart = this.props.onScrollStart; | ||
var offset = Math.abs(event.target.getBoundingClientRect().top - event.clientY); | ||
var thumbHalf = thumbVertical.offsetHeight / 2; | ||
var thumbPositionPercentage = (offset - thumbHalf) * 100 / barVertical.offsetHeight; | ||
view.scrollTop = thumbPositionPercentage * view.scrollHeight / 100; | ||
if (onScrollStart) onScrollStart(); | ||
this.handleScrollStartAutoHide(); | ||
}, | ||
handleScrollStartAutoHide: function handleScrollStartAutoHide() { | ||
var autoHide = this.props.autoHide; | ||
if (!autoHide) return; | ||
this.showTracks(); | ||
}, | ||
handleScrollStop: function handleScrollStop() { | ||
var onScrollStop = this.props.onScrollStop; | ||
if (onScrollStop) onScrollStop(); | ||
this.handleScrollStopAutoHide(); | ||
}, | ||
handleScrollStopAutoHide: function handleScrollStopAutoHide() { | ||
var autoHide = this.props.autoHide; | ||
if (!autoHide) return; | ||
this.hideTracks(); | ||
}, | ||
handleWindowResize: function handleWindowResize() { | ||
this.update(); | ||
}, | ||
handleHorizontalTrackMouseDown: function handleHorizontalTrackMouseDown() { | ||
var _refs2 = this.refs; | ||
var thumbHorizontal = _refs2.thumbHorizontal; | ||
var barHorizontal = _refs2.barHorizontal; | ||
var view = _refs2.view; | ||
var view = this.refs.view; | ||
var _event = event; | ||
var target = _event.target; | ||
var clientX = _event.clientX; | ||
var offset = Math.abs(event.target.getBoundingClientRect().left - event.clientX); | ||
var thumbHalf = thumbHorizontal.offsetWidth / 2; | ||
var thumbPositionPercentage = (offset - thumbHalf) * 100 / barHorizontal.offsetWidth; | ||
view.scrollLeft = thumbPositionPercentage * view.scrollWidth / 100; | ||
var _target$getBoundingCl = target.getBoundingClientRect(); | ||
var targetLeft = _target$getBoundingCl.left; | ||
var thumbWidth = this.getThumbHorizontalWidth(); | ||
var offset = Math.abs(targetLeft - clientX) - thumbWidth / 2; | ||
view.scrollLeft = this.getScrollLeftForOffset(offset); | ||
}, | ||
handleVerticalThumbMouseDown: function handleVerticalThumbMouseDown(event) { | ||
this.handleDragStart(event); | ||
var currentTarget = event.currentTarget; | ||
handleVerticalTrackMouseDown: function handleVerticalTrackMouseDown(event) { | ||
var view = this.refs.view; | ||
var target = event.target; | ||
var clientY = event.clientY; | ||
this.prevPageY = currentTarget.offsetHeight - (clientY - currentTarget.getBoundingClientRect().top); | ||
var _target$getBoundingCl2 = target.getBoundingClientRect(); | ||
var targetTop = _target$getBoundingCl2.top; | ||
var thumbHeight = this.getThumbVerticalHeight(); | ||
var offset = Math.abs(targetTop - clientY) - thumbHeight / 2; | ||
view.scrollTop = this.getScrollTopForOffset(offset); | ||
}, | ||
handleHorizontalThumbMouseDown: function handleHorizontalThumbMouseDown(event) { | ||
this.handleDragStart(event); | ||
var currentTarget = event.currentTarget; | ||
var target = event.target; | ||
var clientX = event.clientX; | ||
var offsetWidth = target.offsetWidth; | ||
this.prevPageX = currentTarget.offsetWidth - (clientX - currentTarget.getBoundingClientRect().left); | ||
var _target$getBoundingCl3 = target.getBoundingClientRect(); | ||
var left = _target$getBoundingCl3.left; | ||
this.prevPageX = offsetWidth - (clientX - left); | ||
}, | ||
handleDocumentMouseUp: function handleDocumentMouseUp() { | ||
this.handleDragEnd(); | ||
}, | ||
handleDocumentMouseMove: function handleDocumentMouseMove(event) { | ||
if (this.cursorDown === false) return false; | ||
if (this.prevPageY) { | ||
var _refs3 = this.refs; | ||
var barVertical = _refs3.barVertical; | ||
var thumbVertical = _refs3.thumbVertical; | ||
var view = _refs3.view; | ||
handleVerticalThumbMouseDown: function handleVerticalThumbMouseDown(event) { | ||
this.handleDragStart(event); | ||
var target = event.target; | ||
var clientY = event.clientY; | ||
var offsetHeight = target.offsetHeight; | ||
var offset = (barVertical.getBoundingClientRect().top - event.clientY) * -1; | ||
var thumbClickPosition = thumbVertical.offsetHeight - this.prevPageY; | ||
var thumbPositionPercentage = (offset - thumbClickPosition) * 100 / barVertical.offsetHeight; | ||
view.scrollTop = thumbPositionPercentage * view.scrollHeight / 100; | ||
return false; | ||
} | ||
if (this.prevPageX) { | ||
var _refs4 = this.refs; | ||
var barHorizontal = _refs4.barHorizontal; | ||
var thumbHorizontal = _refs4.thumbHorizontal; | ||
var view = _refs4.view; | ||
var _target$getBoundingCl4 = target.getBoundingClientRect(); | ||
var offset = (barHorizontal.getBoundingClientRect().left - event.clientX) * -1; | ||
var thumbClickPosition = thumbHorizontal.offsetWidth - this.prevPageX; | ||
var thumbPositionPercentage = (offset - thumbClickPosition) * 100 / barHorizontal.offsetWidth; | ||
view.scrollLeft = thumbPositionPercentage * view.scrollWidth / 100; | ||
return false; | ||
} | ||
var top = _target$getBoundingCl4.top; | ||
this.prevPageY = offsetHeight - (clientY - top); | ||
}, | ||
handleWindowResize: function handleWindowResize() { | ||
this.update(); | ||
setupDragging: function setupDragging() { | ||
(0, _domCss2.default)(document.body, _styles.disableSelectStyle); | ||
document.addEventListener('mousemove', this.handleDrag); | ||
document.addEventListener('mouseup', this.handleDragEnd); | ||
document.onselectstart = _returnFalse2.default; | ||
}, | ||
teardownDragging: function teardownDragging() { | ||
(0, _domCss2.default)(document.body, _styles.disableSelectStyleReset); | ||
document.removeEventListener('mousemove', this.handleDrag); | ||
document.removeEventListener('mouseup', this.handleDragEnd); | ||
document.onselectstart = undefined; | ||
}, | ||
handleDragStart: function handleDragStart(event) { | ||
if (!document) return; | ||
this.dragging = true; | ||
event.stopImmediatePropagation(); | ||
this.cursorDown = true; | ||
(0, _domCss2.default)(document.body, _styles.disableSelectStyle); | ||
document.addEventListener('mousemove', this.handleDocumentMouseMove); | ||
document.onselectstart = _returnFalse2.default; | ||
this.setupDragging(); | ||
}, | ||
handleDrag: function handleDrag(event) { | ||
if (this.prevPageX) { | ||
var clientX = event.clientX; | ||
var _refs7 = this.refs; | ||
var view = _refs7.view; | ||
var trackHorizontal = _refs7.trackHorizontal; | ||
var _trackHorizontal$getB = trackHorizontal.getBoundingClientRect(); | ||
var trackLeft = _trackHorizontal$getB.left; | ||
var thumbWidth = this.getThumbHorizontalWidth(); | ||
var clickPosition = thumbWidth - this.prevPageX; | ||
var offset = -trackLeft + clientX - clickPosition; | ||
view.scrollLeft = this.getScrollLeftForOffset(offset); | ||
} | ||
if (this.prevPageY) { | ||
var clientY = event.clientY; | ||
var _refs8 = this.refs; | ||
var view = _refs8.view; | ||
var trackVertical = _refs8.trackVertical; | ||
var _trackVertical$getBou = trackVertical.getBoundingClientRect(); | ||
var trackTop = _trackVertical$getBou.top; | ||
var thumbHeight = this.getThumbVerticalHeight(); | ||
var clickPosition = thumbHeight - this.prevPageY; | ||
var offset = -trackTop + clientY - clickPosition; | ||
view.scrollTop = this.getScrollTopForOffset(offset); | ||
} | ||
return false; | ||
}, | ||
handleDragEnd: function handleDragEnd() { | ||
if (!document) return; | ||
this.cursorDown = false; | ||
this.dragging = false; | ||
this.prevPageX = this.prevPageY = 0; | ||
(0, _domCss2.default)(document.body, _styles.resetDisableSelectStyle); | ||
document.removeEventListener('mousemove', this.handleDocumentMouseMove); | ||
document.onselectstart = undefined; | ||
this.teardownDragging(); | ||
this.handleDragEndAutoHide(); | ||
}, | ||
handleDragEndAutoHide: function handleDragEndAutoHide() { | ||
var autoHide = this.props.autoHide; | ||
if (!autoHide) return; | ||
this.hideTracks(); | ||
}, | ||
handleTrackMouseEnter: function handleTrackMouseEnter() { | ||
this.trackMouseOver = true; | ||
this.handleTrackMouseEnterAutoHide(); | ||
}, | ||
handleTrackMouseEnterAutoHide: function handleTrackMouseEnterAutoHide() { | ||
var autoHide = this.props.autoHide; | ||
if (!autoHide) return; | ||
this.showTracks(); | ||
}, | ||
handleTrackMouseLeave: function handleTrackMouseLeave() { | ||
this.trackMouseOver = false; | ||
this.handleTrackMouseLeaveAutoHide(); | ||
}, | ||
handleTrackMouseLeaveAutoHide: function handleTrackMouseLeaveAutoHide() { | ||
var autoHide = this.props.autoHide; | ||
if (!autoHide) return; | ||
this.hideTracks(); | ||
}, | ||
showTracks: function showTracks() { | ||
var _refs9 = this.refs; | ||
var trackHorizontal = _refs9.trackHorizontal; | ||
var trackVertical = _refs9.trackVertical; | ||
clearTimeout(this.hideTracksTimeout); | ||
(0, _domCss2.default)(trackHorizontal, { opacity: 1 }); | ||
(0, _domCss2.default)(trackVertical, { opacity: 1 }); | ||
}, | ||
hideTracks: function hideTracks() { | ||
if (this.dragging) return; | ||
if (this.scrolling) return; | ||
if (this.trackMouseOver) return; | ||
var autoHideTimeout = this.props.autoHideTimeout; | ||
var _refs10 = this.refs; | ||
var trackHorizontal = _refs10.trackHorizontal; | ||
var trackVertical = _refs10.trackVertical; | ||
clearTimeout(this.hideTracksTimeout); | ||
this.hideTracksTimeout = setTimeout(function () { | ||
(0, _domCss2.default)(trackHorizontal, { opacity: 0 }); | ||
(0, _domCss2.default)(trackVertical, { opacity: 0 }); | ||
}, autoHideTimeout); | ||
}, | ||
detectScrolling: function detectScrolling() { | ||
var _this2 = this; | ||
if (this.scrolling) return; | ||
this.scrolling = true; | ||
this.handleScrollStart(); | ||
this.detectScrollingInterval = setInterval(function () { | ||
if (_this2.lastViewScrollLeft === _this2.viewScrollLeft && _this2.lastViewScrollTop === _this2.viewScrollTop) { | ||
clearInterval(_this2.detectScrollingInterval); | ||
_this2.scrolling = false; | ||
_this2.handleScrollStop(); | ||
} | ||
_this2.lastViewScrollLeft = _this2.viewScrollLeft; | ||
_this2.lastViewScrollTop = _this2.viewScrollTop; | ||
}, 100); | ||
}, | ||
raf: function raf(callback) { | ||
var _this = this; | ||
var _this3 = this; | ||
if (this.timer) _raf3.default.cancel(this.timer); | ||
this.timer = (0, _raf3.default)(function () { | ||
_this.timer = undefined; | ||
if (this.requestFrame) _raf3.default.cancel(this.requestFrame); | ||
this.requestFrame = (0, _raf3.default)(function () { | ||
_this3.requestFrame = undefined; | ||
callback(); | ||
@@ -291,27 +532,33 @@ }); | ||
update: function update(callback) { | ||
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 _this4 = this; | ||
var thumbHorizontalX = scrollLeft * 100 / clientWidth; | ||
var thumbHorizontalWidth = clientWidth * 100 / scrollWidth; | ||
var thumbVerticalY = scrollTop * 100 / clientHeight; | ||
var thumbVerticalHeight = clientHeight * 100 / scrollHeight; | ||
this.raf(function () { | ||
var values = _this4.getValues(); | ||
if ((0, _getScrollbarWidth2.default)()) { | ||
var _refs11 = _this4.refs; | ||
var thumbHorizontal = _refs11.thumbHorizontal; | ||
var thumbVertical = _refs11.thumbVertical; | ||
var trackHorizontal = _refs11.trackHorizontal; | ||
var trackVertical = _refs11.trackVertical; | ||
var scrollLeft = values.scrollLeft; | ||
var clientWidth = values.clientWidth; | ||
var scrollWidth = values.scrollWidth; | ||
var trackHorizontalWidth = (0, _getInnerWidth2.default)(trackHorizontal); | ||
var thumbHorizontalWidth = _this4.getThumbHorizontalWidth(); | ||
var thumbHorizontalX = scrollLeft / (scrollWidth - clientWidth) * (trackHorizontalWidth - thumbHorizontalWidth); | ||
var thumbHorizontalStyle = { | ||
width: thumbHorizontalWidth < 100 ? thumbHorizontalWidth + '%' : 0, | ||
transform: 'translateX(' + thumbHorizontalX + '%)' | ||
width: thumbHorizontalWidth, | ||
transform: 'translateX(' + thumbHorizontalX + 'px)' | ||
}; | ||
var scrollTop = values.scrollTop; | ||
var clientHeight = values.clientHeight; | ||
var scrollHeight = values.scrollHeight; | ||
var trackVerticalHeight = (0, _getInnerHeight2.default)(trackVertical); | ||
var thumbVerticalHeight = _this4.getThumbVerticalHeight(); | ||
var thumbVerticalY = scrollTop / (scrollHeight - clientHeight) * (trackVerticalHeight - thumbVerticalHeight); | ||
var thumbVerticalStyle = { | ||
height: thumbVerticalHeight < 100 ? thumbVerticalHeight + '%' : 0, | ||
transform: 'translateY(' + thumbVerticalY + '%)' | ||
height: thumbVerticalHeight, | ||
transform: 'translateY(' + thumbVerticalY + 'px)' | ||
}; | ||
@@ -327,34 +574,42 @@ (0, _domCss2.default)(thumbHorizontal, thumbHorizontalStyle); | ||
var scrollbarWidth = (0, _getScrollbarWidth2.default)(); | ||
var _props = this.props; | ||
var style = _props.style; | ||
var renderScrollbarHorizontal = _props.renderScrollbarHorizontal; | ||
var renderScrollbarVertical = _props.renderScrollbarVertical; | ||
var renderThumbHorizontal = _props.renderThumbHorizontal; | ||
var renderThumbVertical = _props.renderThumbVertical; | ||
var renderView = _props.renderView; | ||
var onScroll = _props.onScroll; | ||
var children = _props.children; | ||
var _props4 = this.props; | ||
var onScroll = _props4.onScroll; | ||
var onScrollFrame = _props4.onScrollFrame; | ||
var onScrollStart = _props4.onScrollStart; | ||
var onScrollStop = _props4.onScrollStop; | ||
var renderView = _props4.renderView; | ||
var renderTrackHorizontal = _props4.renderTrackHorizontal; | ||
var renderTrackVertical = _props4.renderTrackVertical; | ||
var renderThumbHorizontal = _props4.renderThumbHorizontal; | ||
var renderThumbVertical = _props4.renderThumbVertical; | ||
var autoHide = _props4.autoHide; | ||
var autoHideTimeout = _props4.autoHideTimeout; | ||
var autoHideDuration = _props4.autoHideDuration; | ||
var thumbSize = _props4.thumbSize; | ||
var thumbMinSize = _props4.thumbMinSize; | ||
var universal = _props4.universal; | ||
var style = _props4.style; | ||
var children = _props4.children; | ||
var props = _objectWithoutProperties(_props, ['style', 'renderScrollbarHorizontal', 'renderScrollbarVertical', 'renderThumbHorizontal', 'renderThumbVertical', 'renderView', 'onScroll', 'children']); | ||
var props = _objectWithoutProperties(_props4, ['onScroll', 'onScrollFrame', 'onScrollStart', 'onScrollStop', 'renderView', 'renderTrackHorizontal', 'renderTrackVertical', 'renderThumbHorizontal', 'renderThumbVertical', 'autoHide', 'autoHideTimeout', 'autoHideDuration', 'thumbSize', 'thumbMinSize', 'universal', 'style', 'children']); | ||
var containerStyle = _extends({ | ||
position: 'relative', | ||
overflow: 'hidden', | ||
width: '100%', | ||
height: '100%' | ||
}, style); | ||
var didMountUniversal = this.state.didMountUniversal; | ||
var viewStyle = scrollbarWidth ? _extends({}, _styles.scrollbarsVisibleViewStyle, { | ||
right: -scrollbarWidth, | ||
bottom: -scrollbarWidth | ||
}) : _styles.scrollbarsInvisibleViewStyle; | ||
var containerStyle = _extends({}, _styles.containerStyleDefault, style); | ||
var viewStyle = _extends({}, _styles.viewStyleDefault, scrollbarWidth ? { right: -scrollbarWidth, bottom: -scrollbarWidth } : { right: 0, bottom: 0 }, universal && !didMountUniversal ? _styles.viewStyleUniversalInitial : undefined); | ||
var trackHorizontalStyle = _extends({}, _styles.trackHorizontalStyleDefault, autoHide ? { transition: 'opacity ' + autoHideDuration + 'ms', opacity: 0 } : undefined, !scrollbarWidth || universal && !didMountUniversal ? { display: 'none' } : undefined); | ||
var trackVerticalStyle = _extends({}, _styles.trackVerticalStyleDefault, autoHide ? { transition: 'opacity ' + autoHideDuration + 'ms', opacity: 0 } : undefined, !scrollbarWidth || universal && !didMountUniversal ? { display: 'none' } : undefined); | ||
return _react2.default.createElement( | ||
'div', | ||
_extends({}, props, { style: containerStyle }), | ||
_extends({}, props, { style: containerStyle, ref: 'container' }), | ||
(0, _react.cloneElement)(renderView({ style: viewStyle }), { ref: 'view' }, children), | ||
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 | ||
(0, _react.cloneElement)(renderTrackHorizontal({ style: trackHorizontalStyle }), { ref: 'trackHorizontal' }, (0, _react.cloneElement)(renderThumbHorizontal({ style: _styles.thumbHorizontalStyleDefault }), { ref: 'thumbHorizontal' })), | ||
(0, _react.cloneElement)(renderTrackVertical({ style: trackVerticalStyle }), { ref: 'trackVertical' }, (0, _react.cloneElement)(renderThumbVertical({ style: _styles.thumbVerticalStyleDefault }), { ref: 'thumbVertical' })) | ||
); | ||
} | ||
}); |
@@ -6,54 +6,51 @@ 'use strict'; | ||
}); | ||
var defaultThumbHorizontalStyle = exports.defaultThumbHorizontalStyle = { | ||
var containerStyleDefault = exports.containerStyleDefault = { | ||
position: 'relative', | ||
display: 'block', | ||
overflow: 'hidden', | ||
width: '100%', | ||
height: '100%' | ||
}; | ||
var defaultThumbVerticalStyle = exports.defaultThumbVerticalStyle = { | ||
position: 'relative', | ||
display: 'block', | ||
width: '100%' | ||
var viewStyleDefault = exports.viewStyleDefault = { | ||
position: 'absolute', | ||
top: 0, | ||
left: 0, | ||
overflow: 'scroll', | ||
WebkitOverflowScrolling: 'touch' | ||
}; | ||
var defaultScrollbarHorizontalStyle = exports.defaultScrollbarHorizontalStyle = { | ||
position: 'absolute' | ||
var viewStyleUniversalInitial = exports.viewStyleUniversalInitial = { | ||
right: 0, | ||
bottom: 0, | ||
overflow: 'hidden' | ||
}; | ||
var defaultScrollbarVerticalStyle = exports.defaultScrollbarVerticalStyle = { | ||
position: 'absolute' | ||
var trackHorizontalStyleDefault = exports.trackHorizontalStyleDefault = { | ||
position: 'absolute', | ||
height: 6 | ||
}; | ||
var scrollbarsVisibleViewStyle = exports.scrollbarsVisibleViewStyle = { | ||
var trackVerticalStyleDefault = exports.trackVerticalStyleDefault = { | ||
position: 'absolute', | ||
top: 0, | ||
left: 0, | ||
overflow: 'scroll', | ||
WebkitOverflowScrolling: 'touch' | ||
width: 6 | ||
}; | ||
var scrollbarsInvisibleViewStyle = exports.scrollbarsInvisibleViewStyle = { | ||
var thumbHorizontalStyleDefault = exports.thumbHorizontalStyleDefault = { | ||
position: 'relative', | ||
width: '100%', | ||
height: '100%', | ||
overflow: 'scroll', | ||
WebkitOverflowScrolling: 'touch' | ||
display: 'block', | ||
height: '100%' | ||
}; | ||
var thumbVerticalStyleDefault = exports.thumbVerticalStyleDefault = { | ||
position: 'relative', | ||
display: 'block', | ||
width: '100%' | ||
}; | ||
var disableSelectStyle = exports.disableSelectStyle = { | ||
'-webkit-touch-callout': 'none', | ||
'-webkit-user-select': 'none', | ||
'-khtml-user-select': 'none', | ||
'-moz-user-select': 'none', | ||
'-ms-user-select': 'none', | ||
'user-select': 'none' | ||
userSelect: 'none' | ||
}; | ||
var resetDisableSelectStyle = exports.resetDisableSelectStyle = { | ||
'-webkit-touch-callout': '', | ||
'-webkit-user-select': '', | ||
'-khtml-user-select': '', | ||
'-moz-user-select': '', | ||
'-ms-user-select': '', | ||
'user-select': '' | ||
var disableSelectStyleReset = exports.disableSelectStyleReset = { | ||
userSelect: '' | ||
}; |
@@ -18,2 +18,3 @@ 'use strict'; | ||
if (scrollbarWidth !== false) return scrollbarWidth; | ||
/* istanbul ignore else */ | ||
if (typeof document !== 'undefined') { | ||
@@ -27,3 +28,3 @@ var div = document.createElement('div'); | ||
overflow: 'scroll', | ||
'-ms-overflow-style': 'scrollbar' | ||
MsOverflowStyle: 'scrollbar' | ||
}); | ||
@@ -30,0 +31,0 @@ document.body.appendChild(div); |
{ | ||
"name": "react-custom-scrollbars", | ||
"version": "2.3.0", | ||
"version": "3.0.0-beta", | ||
"description": "React scrollbars component", | ||
@@ -13,2 +13,3 @@ "main": "lib/index.js", | ||
"test:watch": "NODE_ENV=test karma start --auto-watch --no-single-run", | ||
"test:cov": "NODE_ENV=test COVERAGE=true karma start --single-run", | ||
"prepublish": "npm run lint && npm run test && npm run clean && npm run build" | ||
@@ -48,5 +49,7 @@ }, | ||
"expect": "^1.6.0", | ||
"isparta-loader": "^2.0.0", | ||
"karma": "^0.13.10", | ||
"karma-chrome-launcher": "^0.2.1", | ||
"karma-cli": "^0.1.1", | ||
"karma-coverage": "^0.5.3", | ||
"karma-mocha": "^0.2.0", | ||
@@ -53,0 +56,0 @@ "karma-mocha-reporter": "^1.0.3", |
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
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
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
45931
21
776
30
1
3
1