Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-scrollbars-custom

Package Overview
Dependencies
Maintainers
1
Versions
92
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-scrollbars-custom - npm Package Compare versions

Comparing version 4.0.18 to 4.0.19

891

dist/rsc.esm.js

@@ -0,6 +1,6 @@

import cnb from 'cnbuilder';
import { oneOf, func, bool, number, string, object } from 'prop-types';
import { createElement, Component, createContext } from 'react';
import cnb from 'cnbuilder';
import { zoomLevel } from 'zoom-level';
import { DraggableCore } from 'react-draggable';
import { zoomLevel } from 'zoom-level';

@@ -52,138 +52,17 @@ /*! *****************************************************************************

if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
t[p[i]] = s[p[i]];
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
var AXIS_DIRECTION;
function __spreadArrays() {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
}
(function (AXIS_DIRECTION) {
AXIS_DIRECTION["X"] = "x";
AXIS_DIRECTION["Y"] = "y";
})(AXIS_DIRECTION || (AXIS_DIRECTION = {}));
var AXIS_DIRECTION_PROP_TYPE = oneOf([AXIS_DIRECTION.X, AXIS_DIRECTION.Y]);
var TRACK_CLICK_BEHAVIOR;
(function (TRACK_CLICK_BEHAVIOR) {
TRACK_CLICK_BEHAVIOR["JUMP"] = "jump";
TRACK_CLICK_BEHAVIOR["STEP"] = "step";
})(TRACK_CLICK_BEHAVIOR || (TRACK_CLICK_BEHAVIOR = {}));
var TRACK_CLICK_BEHAVIOR_PROP_TYPE = oneOf([TRACK_CLICK_BEHAVIOR.JUMP, TRACK_CLICK_BEHAVIOR.STEP]);
var RAFLoop =
/** @class */
function () {
function RAFLoop() {
var _this = this;
/**
* @description List of targets to update
*/
this.targets = [];
/**
* @description ID of requested animation frame. Valuable only if loop is active and has items to iterate.
*/
this.animationFrameID = 0;
/**
* @description Loop's state.
*/
this._isActive = false;
/**
* @description Start the loop if it wasn't yet.
*/
this.start = function () {
if (!_this._isActive && _this.targets.length) {
_this._isActive = true;
_this.animationFrameID && cancelAnimationFrame(_this.animationFrameID);
_this.animationFrameID = requestAnimationFrame(_this.rafCallback);
}
return _this;
};
/**
* @description Stop the loop if is was active.
*/
this.stop = function () {
if (_this._isActive) {
_this._isActive = false;
_this.animationFrameID && cancelAnimationFrame(_this.animationFrameID);
_this.animationFrameID = 0;
}
return _this;
};
/**
* @description Add target to the iteration list if it's not there.
*/
this.addTarget = function (target, silent) {
if (silent === void 0) {
silent = false;
}
if (_this.targets.indexOf(target) === -1) {
_this.targets.push(target);
_this.targets.length === 1 && !silent && _this.start();
}
return _this;
};
/**
* @description Remove target from iteration list if it was there.
*/
this.removeTarget = function (target) {
var idx = _this.targets.indexOf(target);
if (idx !== -1) {
_this.targets.splice(idx, 1);
_this.targets.length === 0 && _this.stop();
}
return _this;
};
/**
* @description Callback that called each animation frame.
*/
this.rafCallback = function () {
if (!_this._isActive) {
return 0;
}
for (var i = 0; i < _this.targets.length; i++) {
!_this.targets[i]._unmounted && _this.targets[i].update();
}
return _this.animationFrameID = requestAnimationFrame(_this.rafCallback);
};
}
Object.defineProperty(RAFLoop.prototype, "isActive", {
/**
* @description Loop's state.
*/
get: function get() {
return this._isActive;
},
enumerable: true,
configurable: true
});
return RAFLoop;
}();
var Loop = new RAFLoop();
function _typeof(obj) {

@@ -234,34 +113,27 @@ if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {

}
/**
* @description Return element's height without padding
*
* ts-ignore here is okay here, because it brigs around 40% of performance
*/
var getInnerHeight = function getInnerHeight(el) {
function getInnerSize(el, dimension, padding1, padding2) {
var styles = getComputedStyle(el);
if (styles.boxSizing === "border-box") {
return Math.max((parseFloat(styles.height) || 0) - (parseFloat(styles.paddingTop) || 0) - (parseFloat(styles.paddingBottom) || 0), 0);
} // @ts-ignore
return Math.max(0, (parseFloat(styles[dimension]) || 0) - (parseFloat(styles[padding1]) || 0) - (parseFloat(styles[padding2]) || 0));
}
return parseFloat(styles[dimension]) || 0;
}
/**
* @description Return element's height without padding
*/
return parseFloat(styles.height) || 0;
};
function getInnerHeight(el) {
return getInnerSize(el, "height", "paddingTop", "paddingBottom");
}
/**
* @description Return element's width without padding
*
* ts-ignore here is okay here, because it brigs around 40% of performance
*/
var getInnerWidth = function getInnerWidth(el) {
var styles = getComputedStyle(el);
if (styles.boxSizing === "border-box") {
return Math.max((parseFloat(styles.width) || 0) - (parseFloat(styles.paddingLeft) || 0) - (parseFloat(styles.paddingRight) || 0), 0);
} // @ts-ignore
return parseFloat(styles.width) || 0;
};
function getInnerWidth(el) {
return getInnerSize(el, "width", "paddingLeft", "paddingRight");
}
/**

@@ -342,3 +214,2 @@ * @description Return unique UUID v4

}
var scrollbarWidth = null;
/**

@@ -353,18 +224,19 @@ * @description Returns scrollbar width specific for current environment

if (!force && scrollbarWidth !== null) {
return scrollbarWidth;
if (!force && !isUndef(getScrollbarWidth._cache)) {
return getScrollbarWidth._cache;
}
if (!doc) {
return scrollbarWidth = 0;
return getScrollbarWidth._cache = 0;
}
var el = doc.createElement("div");
el.setAttribute("style", "display:block;position:absolute;width:100px;height:100px;top:-9999px;overflow:scroll;");
el.setAttribute("style", "position:absolute;width:100px;height:100px;top:-999px;left:-999px;overflow:scroll;");
doc.body.appendChild(el);
scrollbarWidth = el.offsetWidth - el.clientWidth;
getScrollbarWidth._cache = 100 - el.clientWidth;
doc.body.removeChild(el);
return scrollbarWidth;
return getScrollbarWidth._cache;
}
var isReverseRTLScrollNeeded = null;
(function (getScrollbarWidth) {})(getScrollbarWidth || (getScrollbarWidth = {}));
/**

@@ -374,3 +246,4 @@ * @description Detect need of horizontal scroll reverse while RTL

var shouldReverseRTLScroll = function shouldReverseRTLScroll(force) {
function shouldReverseRtlScroll(force) {
if (force === void 0) {

@@ -380,8 +253,8 @@ force = false;

if (!force && isReverseRTLScrollNeeded !== null) {
return isReverseRTLScrollNeeded;
if (!force && !isUndef(shouldReverseRtlScroll._cache)) {
return shouldReverseRtlScroll._cache;
}
if (!doc) {
return isReverseRTLScrollNeeded = false;
return shouldReverseRtlScroll._cache = false;
}

@@ -391,100 +264,341 @@

var child = doc.createElement("div");
el.setAttribute("style", "display:block;position:absolute;width:100px;height:100px;top:-9999px;overflow:scroll;direction:rtl;");
child.setAttribute("style", "display:block;position:relative;width:1000px;height:1000px;direction:rtl;");
el.appendChild(child);
el.setAttribute("style", "position:absolute;width:100px;height:100px;top:-999px;left:-999px;overflow:scroll;direction:rtl");
child.setAttribute("style", "width:1000px;height:1000px");
doc.body.appendChild(el);
el.scrollLeft;
el.scrollLeft = 45;
isReverseRTLScrollNeeded = el.scrollLeft === 0;
el.scrollLeft = -50;
shouldReverseRtlScroll._cache = el.scrollLeft === -50;
doc.body.removeChild(el);
return isReverseRTLScrollNeeded;
};
return shouldReverseRtlScroll._cache;
}
var ScrollbarTrack =
(function (shouldReverseRtlScroll) {})(shouldReverseRtlScroll || (shouldReverseRtlScroll = {}));
var Emittr =
/** @class */
function (_super) {
__extends(ScrollbarTrack, _super);
function () {
function Emittr(maxHandlers) {
if (maxHandlers === void 0) {
maxHandlers = 10;
}
function ScrollbarTrack() {
var _this = _super !== null && _super.apply(this, arguments) || this;
this.setMaxHandlers(maxHandlers);
this._handlers = Object.create(null);
}
_this.element = null;
Emittr._callEventHandlers = function (emitter, handlers, args) {
if (!handlers.length) {
return;
}
_this.elementRef = function (ref) {
isFun(_this.props.elementRef) && _this.props.elementRef(ref);
_this.element = ref;
};
if (handlers.length === 1) {
Reflect.apply(handlers[0], emitter, args);
return;
}
_this.handleClick = function (ev) {
if (!ev || !_this.element || ev.button !== 0) {
return;
}
handlers = __spreadArrays(handlers);
var idx;
if (isFun(_this.props.onClick) && ev.target === _this.element) {
if (!isUndef(ev.offsetX)) {
_this.props.onClick(ev, {
axis: _this.props.axis,
offset: _this.props.axis === AXIS_DIRECTION.X ? ev.offsetX : ev.offsetY
});
} else {
// support for old browsers
var rect = _this.element.getBoundingClientRect();
for (idx = 0; idx < handlers.length; idx++) {
Reflect.apply(handlers[idx], emitter, args);
}
};
_this.props.onClick(ev, {
axis: _this.props.axis,
offset: _this.props.axis === AXIS_DIRECTION.X ? ev.clientX - rect.left : ev.clientY - rect.top
});
}
Emittr.prototype.setMaxHandlers = function (count) {
if (!isNum(count) || count <= 0) {
throw new TypeError("Expected maxHandlers to be a positive number, got '" + count + "' of type " + _typeof(count));
}
this._maxHandlers = count;
return this;
};
Emittr.prototype.getMaxHandlers = function () {
return this._maxHandlers;
};
Emittr.prototype.emit = function (name) {
var args = [];
for (var _i = 1; _i < arguments.length; _i++) {
args[_i - 1] = arguments[_i];
}
if (_typeof(this._handlers[name]) !== "object" || !Array.isArray(this._handlers[name])) {
return false;
}
Emittr._callEventHandlers(this, this._handlers[name], args);
return true;
};
Emittr.prototype.on = function (name, handler) {
Emittr._addHandler(this, name, handler);
return this;
};
Emittr.prototype.prependOn = function (name, handler) {
Emittr._addHandler(this, name, handler, true);
return this;
};
Emittr.prototype.once = function (name, handler) {
if (!isFun(handler)) {
throw new TypeError("Expected event handler to be a function, got " + _typeof(handler));
}
Emittr._addHandler(this, name, this._wrapOnceHandler(name, handler));
return this;
};
Emittr.prototype.prependOnce = function (name, handler) {
if (!isFun(handler)) {
throw new TypeError("Expected event handler to be a function, got " + _typeof(handler));
}
Emittr._addHandler(this, name, this._wrapOnceHandler(name, handler), true);
return this;
};
Emittr.prototype.off = function (name, handler) {
Emittr._removeHandler(this, name, handler);
return this;
};
Emittr.prototype.removeAllHandlers = function () {
var handlers = this._handlers;
this._handlers = Object.create(null);
var removeHandlers = handlers["removeHandler"];
delete handlers["removeHandler"];
var idx, eventName;
for (eventName in handlers) {
for (idx = handlers[eventName].length - 1; idx >= 0; idx--) {
Emittr._callEventHandlers(this, removeHandlers, [eventName, handlers[eventName][idx].handler || handlers[eventName][idx]]);
}
}
return true;
return this;
};
Emittr.prototype._wrapOnceHandler = function (name, handler) {
var onceState = {
fired: false,
handler: handler,
wrappedHandler: undefined,
emitter: this,
event: name
};
return _this;
}
var wrappedHandler = Emittr._onceWrapper.bind(onceState);
ScrollbarTrack.prototype.componentDidMount = function () {
if (!this.element) {
this.setState(function () {
throw new Error("Element was not created. Possibly you haven't provided HTMLDivElement to renderer's `elementRef` function.");
});
return;
onceState.wrappedHandler = wrappedHandler;
wrappedHandler.handler = handler;
wrappedHandler.event = name;
return wrappedHandler;
};
Emittr._addHandler = function (emitter, name, handler, prepend) {
if (prepend === void 0) {
prepend = false;
}
this.element.addEventListener("click", this.handleClick);
if (!isFun(handler)) {
throw new TypeError("Expected event handler to be a function, got " + _typeof(handler));
}
emitter._handlers[name] = emitter._handlers[name] || [];
emitter.emit("addHandler", name, handler);
prepend ? emitter._handlers[name].unshift(handler) : emitter._handlers[name].push(handler);
return emitter;
};
ScrollbarTrack.prototype.componentWillUnmount = function () {
if (this.element) {
this.element.removeEventListener("click", this.handleClick);
this.element = null;
this.elementRef(null);
Emittr._onceWrapper = function _onceWrapper() {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
if (!this.fired) {
this.fired = true;
this.emitter.off(this.event, this.wrappedHandler);
Reflect.apply(this.handler, this.emitter, args);
}
};
ScrollbarTrack.prototype.render = function () {
var _a = this.props,
elementRef = _a.elementRef,
axis = _a.axis,
onClick = _a.onClick,
props = __rest(_a, ["elementRef", "axis", "onClick"]);
Emittr._removeHandler = function (emitter, name, handler) {
if (!isFun(handler)) {
throw new TypeError("Expected event handler to be a function, got " + _typeof(handler));
}
props.className = cnb("ScrollbarsCustom-Track", axis === AXIS_DIRECTION.X ? "ScrollbarsCustom-TrackX" : "ScrollbarsCustom-TrackY", props.className);
if (isUndef(emitter._handlers[name]) || !emitter._handlers[name].length) {
return emitter;
}
if (props.renderer) {
props.axis = axis;
var idx = -1;
if (emitter._handlers[name].length === 1) {
if (emitter._handlers[name][0] === handler || emitter._handlers[name][0].handler === handler) {
idx = 0;
handler = emitter._handlers[name][0].handler || emitter._handlers[name][0];
}
} else {
for (idx = emitter._handlers[name].length - 1; idx >= 0; idx--) {
if (emitter._handlers[name][idx] === handler || emitter._handlers[name][idx].handler === handler) {
handler = emitter._handlers[name][idx].handler || emitter._handlers[name][idx];
break;
}
}
}
return renderDivWithRenderer(props, this.elementRef);
};
if (idx === -1) {
return emitter;
}
ScrollbarTrack.propTypes = {
axis: AXIS_DIRECTION_PROP_TYPE,
onClick: func,
elementRef: func,
renderer: func
idx === 0 ? emitter._handlers[name].shift() : emitter._handlers[name].splice(idx, 1);
emitter.emit("removeHandler", name, handler);
return emitter;
};
return ScrollbarTrack;
}(Component);
return Emittr;
}();
var RAFLoop =
/** @class */
function () {
function RAFLoop() {
var _this = this;
/**
* @description List of targets to update
*/
this.targets = [];
/**
* @description ID of requested animation frame. Valuable only if loop is active and has items to iterate.
*/
this.animationFrameID = 0;
/**
* @description Loop's state.
*/
this._isActive = false;
/**
* @description Start the loop if it wasn't yet.
*/
this.start = function () {
if (!_this._isActive && _this.targets.length) {
_this._isActive = true;
_this.animationFrameID && cancelAnimationFrame(_this.animationFrameID);
_this.animationFrameID = requestAnimationFrame(_this.rafCallback);
}
return _this;
};
/**
* @description Stop the loop if is was active.
*/
this.stop = function () {
if (_this._isActive) {
_this._isActive = false;
_this.animationFrameID && cancelAnimationFrame(_this.animationFrameID);
_this.animationFrameID = 0;
}
return _this;
};
/**
* @description Add target to the iteration list if it's not there.
*/
this.addTarget = function (target, silent) {
if (silent === void 0) {
silent = false;
}
if (_this.targets.indexOf(target) === -1) {
_this.targets.push(target);
_this.targets.length === 1 && !silent && _this.start();
}
return _this;
};
/**
* @description Remove target from iteration list if it was there.
*/
this.removeTarget = function (target) {
var idx = _this.targets.indexOf(target);
if (idx !== -1) {
_this.targets.splice(idx, 1);
_this.targets.length === 0 && _this.stop();
}
return _this;
};
/**
* @description Callback that called each animation frame.
*/
this.rafCallback = function () {
if (!_this._isActive) {
return 0;
}
for (var i = 0; i < _this.targets.length; i++) {
!_this.targets[i]._unmounted && _this.targets[i].update();
}
return _this.animationFrameID = requestAnimationFrame(_this.rafCallback);
};
}
Object.defineProperty(RAFLoop.prototype, "isActive", {
/**
* @description Loop's state.
*/
get: function get() {
return this._isActive;
},
enumerable: true,
configurable: true
});
return RAFLoop;
}();
var Loop = new RAFLoop();
var AXIS_DIRECTION;
(function (AXIS_DIRECTION) {
AXIS_DIRECTION["X"] = "x";
AXIS_DIRECTION["Y"] = "y";
})(AXIS_DIRECTION || (AXIS_DIRECTION = {}));
var AXIS_DIRECTION_PROP_TYPE = oneOf([AXIS_DIRECTION.X, AXIS_DIRECTION.Y]);
var TRACK_CLICK_BEHAVIOR;
(function (TRACK_CLICK_BEHAVIOR) {
TRACK_CLICK_BEHAVIOR["JUMP"] = "jump";
TRACK_CLICK_BEHAVIOR["STEP"] = "step";
})(TRACK_CLICK_BEHAVIOR || (TRACK_CLICK_BEHAVIOR = {}));
var TRACK_CLICK_BEHAVIOR_PROP_TYPE = oneOf([TRACK_CLICK_BEHAVIOR.JUMP, TRACK_CLICK_BEHAVIOR.STEP]);
var ScrollbarThumb =

@@ -567,3 +681,2 @@ /** @class */

global.document.body.style.userSelect = _this.prevUserSelect;
_this.prevUserSelect = null;
global.document.onselectstart = _this.prevOnSelectStart;

@@ -668,198 +781,89 @@ _this.prevOnSelectStart = null;

var Emittr =
var ScrollbarTrack =
/** @class */
function () {
function Emittr(maxHandlers) {
if (maxHandlers === void 0) {
maxHandlers = 10;
}
function (_super) {
__extends(ScrollbarTrack, _super);
this.setMaxHandlers(maxHandlers);
this._handlers = Object.create(null);
}
function ScrollbarTrack() {
var _this = _super !== null && _super.apply(this, arguments) || this;
Emittr._callEventHandlers = function (emitter, handlers, args) {
if (!handlers.length) {
return;
}
_this.element = null;
if (handlers.length === 1) {
Reflect.apply(handlers[0], emitter, args);
return;
}
_this.elementRef = function (ref) {
isFun(_this.props.elementRef) && _this.props.elementRef(ref);
_this.element = ref;
};
handlers = handlers.slice();
var idx;
_this.handleClick = function (ev) {
if (!ev || !_this.element || ev.button !== 0) {
return;
}
for (idx = 0; idx < handlers.length; idx++) {
Reflect.apply(handlers[idx], emitter, args);
}
};
if (isFun(_this.props.onClick) && ev.target === _this.element) {
if (!isUndef(ev.offsetX)) {
_this.props.onClick(ev, {
axis: _this.props.axis,
offset: _this.props.axis === AXIS_DIRECTION.X ? ev.offsetX : ev.offsetY
});
} else {
// support for old browsers
var rect = _this.element.getBoundingClientRect();
Emittr.prototype.setMaxHandlers = function (count) {
if (!isNum(count) || count <= 0) {
throw new TypeError("Expected maxHandlers to be a positive number, got '" + count + "' of type " + _typeof(count));
}
this._maxHandlers = count;
return this;
};
Emittr.prototype.getMaxHandlers = function () {
return this._maxHandlers;
};
Emittr.prototype.emit = function (name) {
var args = [];
for (var _i = 1; _i < arguments.length; _i++) {
args[_i - 1] = arguments[_i];
}
if (_typeof(this._handlers[name]) !== "object" || !Array.isArray(this._handlers[name])) {
return false;
}
Emittr._callEventHandlers(this, this._handlers[name], args);
return true;
};
Emittr.prototype.on = function (name, handler) {
Emittr._addHandler(this, name, handler);
return this;
};
Emittr.prototype.prependOn = function (name, handler) {
Emittr._addHandler(this, name, handler, true);
return this;
};
Emittr.prototype.once = function (name, handler) {
if (!isFun(handler)) {
throw new TypeError("Expected event handler to be a function, got " + _typeof(handler));
}
Emittr._addHandler(this, name, this._wrapOnceHandler(name, handler));
return this;
};
Emittr.prototype.prependOnce = function (name, handler) {
if (!isFun(handler)) {
throw new TypeError("Expected event handler to be a function, got " + _typeof(handler));
}
Emittr._addHandler(this, name, this._wrapOnceHandler(name, handler), true);
return this;
};
Emittr.prototype.off = function (name, handler) {
Emittr._removeHandler(this, name, handler);
return this;
};
Emittr.prototype.removeAllHandlers = function () {
var handlers = this._handlers;
this._handlers = Object.create(null);
var removeHandlers = handlers["removeHandler"];
delete handlers["removeHandler"];
var idx, eventName;
for (eventName in handlers) {
for (idx = handlers[eventName].length - 1; idx >= 0; idx--) {
Emittr._callEventHandlers(this, removeHandlers, [eventName, handlers[eventName][idx].handler || handlers[eventName][idx]]);
_this.props.onClick(ev, {
axis: _this.props.axis,
offset: _this.props.axis === AXIS_DIRECTION.X ? ev.clientX - rect.left : ev.clientY - rect.top
});
}
}
}
return this;
};
Emittr.prototype._wrapOnceHandler = function (name, handler) {
var onceState = {
fired: false,
handler: handler,
wrappedHandler: undefined,
emitter: this,
event: name
return true;
};
var wrappedHandler = Emittr._onceWrapper.bind(onceState);
return _this;
}
onceState.wrappedHandler = wrappedHandler;
wrappedHandler.handler = handler;
wrappedHandler.event = name;
return wrappedHandler;
};
Emittr._addHandler = function (emitter, name, handler, prepend) {
if (prepend === void 0) {
prepend = false;
ScrollbarTrack.prototype.componentDidMount = function () {
if (!this.element) {
this.setState(function () {
throw new Error("Element was not created. Possibly you haven't provided HTMLDivElement to renderer's `elementRef` function.");
});
return;
}
if (!isFun(handler)) {
throw new TypeError("Expected event handler to be a function, got " + _typeof(handler));
}
emitter._handlers[name] = emitter._handlers[name] || [];
emitter.emit("addHandler", name, handler);
prepend ? emitter._handlers[name].unshift(handler) : emitter._handlers[name].push(handler);
return emitter;
this.element.addEventListener("click", this.handleClick);
};
Emittr._onceWrapper = function _onceWrapper() {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
ScrollbarTrack.prototype.componentWillUnmount = function () {
if (this.element) {
this.element.removeEventListener("click", this.handleClick);
this.element = null;
this.elementRef(null);
}
if (!this.fired) {
this.fired = true;
this.emitter.off(this.event, this.wrappedHandler);
Reflect.apply(this.handler, this.emitter, args);
}
};
Emittr._removeHandler = function (emitter, name, handler) {
if (!isFun(handler)) {
throw new TypeError("Expected event handler to be a function, got " + _typeof(handler));
}
ScrollbarTrack.prototype.render = function () {
var _a = this.props,
elementRef = _a.elementRef,
axis = _a.axis,
onClick = _a.onClick,
props = __rest(_a, ["elementRef", "axis", "onClick"]);
if (isUndef(emitter._handlers[name]) || !emitter._handlers[name].length) {
return emitter;
}
props.className = cnb("ScrollbarsCustom-Track", axis === AXIS_DIRECTION.X ? "ScrollbarsCustom-TrackX" : "ScrollbarsCustom-TrackY", props.className);
var idx = -1;
if (emitter._handlers[name].length === 1) {
if (emitter._handlers[name][0] === handler || emitter._handlers[name][0].handler === handler) {
idx = 0;
handler = emitter._handlers[name][0].handler || emitter._handlers[name][0];
}
} else {
for (idx = emitter._handlers[name].length - 1; idx >= 0; idx--) {
if (emitter._handlers[name][idx] === handler || emitter._handlers[name][idx].handler === handler) {
handler = emitter._handlers[name][idx].handler || emitter._handlers[name][idx];
break;
}
}
if (props.renderer) {
props.axis = axis;
}
if (idx === -1) {
return emitter;
}
return renderDivWithRenderer(props, this.elementRef);
};
idx === 0 ? emitter._handlers[name].shift() : emitter._handlers[name].splice(idx, 1);
emitter.emit("removeHandler", name, handler);
return emitter;
ScrollbarTrack.propTypes = {
axis: AXIS_DIRECTION_PROP_TYPE,
onClick: func,
elementRef: func,
renderer: func
};
return ScrollbarTrack;
}(Component);
return Emittr;
}();
var style = {

@@ -918,3 +922,2 @@ holder: {

var reverseRTL = shouldReverseRTLScroll();
var pageZoomLevel = global.window ? zoomLevel() : 1;

@@ -1212,3 +1215,3 @@ global.window && global.window.addEventListener("resize", function () {

if (_this.state.isRTL && reverseRTL) {
if (_this.state.isRTL && shouldReverseRtlScroll()) {
thumbOffset += trackInnerSize - thumbSize;

@@ -1282,3 +1285,3 @@ }

var trackInnerSize = getInnerWidth(_this.trackXElement);
var thumbOffset = (_this.scrollValues.isRTL && reverseRTL ? values.offset + thumbSize / 2 - trackInnerSize : values.offset - thumbSize / 2) - ( //@ts-ignore
var thumbOffset = (_this.scrollValues.isRTL && shouldReverseRtlScroll() ? values.offset + thumbSize / 2 - trackInnerSize : values.offset - thumbSize / 2) - ( //@ts-ignore
parseFloat(getComputedStyle(_this.trackXElement).paddingLeft) || 0);

@@ -1364,3 +1367,3 @@ var target = calcScrollForThumbOffset(_this.scrollValues.scrollWidth, _this.scrollValues.clientWidth, trackInnerSize, thumbSize, thumbOffset);

var thumbSize = _this.thumbXElement.clientWidth;
var offset = _this.scrollValues.isRTL && reverseRTL ? data.x + thumbSize - trackInnerSize + paddingLeft : data.lastX - paddingLeft;
var offset = _this.scrollValues.isRTL && shouldReverseRtlScroll() ? data.x + thumbSize - trackInnerSize + paddingLeft : data.lastX - paddingLeft;
_this.scrollerElement.scrollLeft = calcScrollForThumbOffset(_this.scrollValues.scrollWidth, _this.scrollValues.clientWidth, trackInnerSize, thumbSize, offset);

@@ -1503,12 +1506,12 @@ };

return {
holder: __assign({}, useDefaultStyles && style.holder, {
holder: __assign(__assign(__assign({}, useDefaultStyles && style.holder), {
position: "relative"
}, props.style),
wrapper: __assign({}, useDefaultStyles && __assign({}, style.wrapper, !props.disableTracksWidthCompensation && !props.disableTrackYWidthCompensation && (_a = {}, _a[state.isRTL ? "left" : "right"] = state.trackYVisible ? 10 : 0, _a), !props.disableTracksWidthCompensation && !props.disableTrackXWidthCompensation && {
}), props.style),
wrapper: __assign(__assign(__assign({}, useDefaultStyles && __assign(__assign(__assign({}, style.wrapper), !props.disableTracksWidthCompensation && !props.disableTrackYWidthCompensation && (_a = {}, _a[state.isRTL ? "left" : "right"] = state.trackYVisible ? 10 : 0, _a)), !props.disableTracksWidthCompensation && !props.disableTrackXWidthCompensation && {
bottom: state.trackXVisible ? 10 : 0
}), props.wrapperProps.style, {
})), props.wrapperProps.style), {
position: "absolute",
overflow: "hidden"
}),
content: __assign({}, useDefaultStyles && style.content, props.translateContentSizesToHolder || props.translateContentSizeYToHolder || props.translateContentSizeXToHolder ? {
content: __assign(__assign(__assign(__assign(__assign({}, useDefaultStyles && style.content), props.translateContentSizesToHolder || props.translateContentSizeYToHolder || props.translateContentSizeXToHolder ? {
display: "table-cell"

@@ -1518,8 +1521,8 @@ } : {

}, useDefaultStyles && !(props.translateContentSizesToHolder || props.translateContentSizeYToHolder) && {
}), useDefaultStyles && !(props.translateContentSizesToHolder || props.translateContentSizeYToHolder) && {
minHeight: "100%"
}, useDefaultStyles && !(props.translateContentSizesToHolder || props.translateContentSizeXToHolder) && {
}), useDefaultStyles && !(props.translateContentSizesToHolder || props.translateContentSizeXToHolder) && {
minWidth: "100%"
}, props.contentProps.style),
scroller: __assign((_b = {
}), props.contentProps.style),
scroller: __assign(__assign(__assign(__assign((_b = {
position: "absolute",

@@ -1531,7 +1534,7 @@ top: 0,

paddingBottom: !scrollbarWidth && scrollValues.scrollXPossible ? props.fallbackScrollbarWidth : undefined
}, _b[state.isRTL ? "paddingLeft" : "paddingRight"] = !scrollbarWidth && scrollValues.scrollYPossible ? props.fallbackScrollbarWidth : undefined, _b), props.scrollerProps.style, !isUndef(props.rtl) && {
}, _b[state.isRTL ? "paddingLeft" : "paddingRight"] = !scrollbarWidth && scrollValues.scrollYPossible ? props.fallbackScrollbarWidth : undefined, _b), props.scrollerProps.style), !isUndef(props.rtl) && {
direction: props.rtl ? "rtl" : "ltr"
}, props.momentum && {
}), props.momentum && {
WebkitOverflowScrolling: "touch"
}, (_c = {
}), (_c = {
overflowY: scrollValues.scrollYPossible ? "scroll" : "hidden",

@@ -1541,10 +1544,10 @@ overflowX: scrollValues.scrollXPossible ? "scroll" : "hidden",

}, _c[state.isRTL ? "marginLeft" : "marginRight"] = scrollValues.scrollYPossible ? -(scrollbarWidth || props.fallbackScrollbarWidth) - Number(scrollValues.zoomLevel !== 1) : undefined, _c)),
trackX: __assign({}, useDefaultStyles && style.track.common, useDefaultStyles && style.track.x, props.trackXProps.style, !state.trackXVisible && {
trackX: __assign(__assign(__assign(__assign({}, useDefaultStyles && style.track.common), useDefaultStyles && style.track.x), props.trackXProps.style), !state.trackXVisible && {
display: "none"
}),
trackY: __assign({}, useDefaultStyles && style.track.common, useDefaultStyles && style.track.y, useDefaultStyles && (_d = {}, _d[state.isRTL ? "left" : "right"] = 0, _d), props.trackYProps.style, !state.trackYVisible && {
trackY: __assign(__assign(__assign(__assign(__assign({}, useDefaultStyles && style.track.common), useDefaultStyles && style.track.y), useDefaultStyles && (_d = {}, _d[state.isRTL ? "left" : "right"] = 0, _d)), props.trackYProps.style), !state.trackYVisible && {
display: "none"
}),
thumbX: __assign({}, useDefaultStyles && style.thumb.common, useDefaultStyles && style.thumb.x, props.thumbXProps.style),
thumbY: __assign({}, useDefaultStyles && style.thumb.common, useDefaultStyles && style.thumb.y, props.thumbYProps.style)
thumbX: __assign(__assign(__assign({}, useDefaultStyles && style.thumb.common), useDefaultStyles && style.thumb.x), props.thumbXProps.style),
thumbY: __assign(__assign(__assign({}, useDefaultStyles && style.thumb.common), useDefaultStyles && style.thumb.y), props.thumbYProps.style)
};

@@ -1713,3 +1716,3 @@ };

var contentProps_1 = __assign({}, propsContentProps, {
var contentProps_1 = __assign(__assign({}, propsContentProps), {
key: "ScrollbarsCustom-Content",

@@ -1720,9 +1723,9 @@ className: cnb("ScrollbarsCustom-Content", propsContentProps.className),

var scrollerProps_1 = __assign({}, propsHolderProps, {
var scrollerProps_1 = __assign(__assign({}, propsHolderProps), {
className: cnb("ScrollbarsCustom native", this.state.trackYVisible && "trackYVisible", this.state.trackXVisible && "trackXVisible", this.state.isRTL && "rtl", propsHolderProps.className),
style: __assign({}, propsHolderProps.style, !isUndef(rtl) && {
style: __assign(__assign(__assign(__assign({}, propsHolderProps.style), !isUndef(rtl) && {
direction: rtl ? "rtl" : "ltr"
}, momentum && {
}), momentum && {
WebkitOverflowScrolling: "touch"
}, {
}), {
overflowX: noScroll || noScrollX ? "hidden" : permanentTracks || permanentTrackX ? "scroll" : "auto",

@@ -1743,3 +1746,3 @@ overflowY: noScroll || noScrollY ? "hidden" : permanentTracks || permanentTrackY ? "scroll" : "auto"

var contentProps = __assign({}, propsContentProps, {
var contentProps = __assign(__assign({}, propsContentProps), {
key: "ScrollbarsCustom-Content",

@@ -1756,3 +1759,3 @@ className: cnb("ScrollbarsCustom-Content", propsContentProps.className),

var scrollerProps = __assign({}, propsScrollerProps, {
var scrollerProps = __assign(__assign({}, propsScrollerProps), {
key: "ScrollbarsCustom-Scroller",

@@ -1765,3 +1768,3 @@ className: cnb("ScrollbarsCustom-Scroller", propsScrollerProps.className),

var wrapperProps = __assign({}, propsWrapperProps, {
var wrapperProps = __assign(__assign({}, propsWrapperProps), {
key: "ScrollbarsCustom-Wrapper",

@@ -1776,3 +1779,3 @@ className: cnb("ScrollbarsCustom-Wrapper", propsWrapperProps.className),

if (this.state.trackYVisible || !removeTracksWhenNotUsed && !removeTrackYWhenNotUsed) {
var thumbYProps = __assign({}, propsThumbYProps, {
var thumbYProps = __assign(__assign({}, propsThumbYProps), {
key: "ScrollbarsCustom-ThumbY",

@@ -1786,3 +1789,3 @@ style: styles.thumbY,

var trackYProps = __assign({}, propsTrackYProps, {
var trackYProps = __assign(__assign(__assign(__assign({}, propsTrackYProps), {
key: "ScrollbarsCustom-TrackY",

@@ -1792,5 +1795,5 @@ style: styles.trackY,

onClick: this.handleTrackYClick
}, (disableTracksMousewheelScrolling || disableTrackYMousewheelScrolling) && {
}), (disableTracksMousewheelScrolling || disableTrackYMousewheelScrolling) && {
onWheel: this.handleTrackYMouseWheel
}, {
}), {
axis: AXIS_DIRECTION.Y

@@ -1807,3 +1810,3 @@ });

if (this.state.trackXVisible || !removeTracksWhenNotUsed && !removeTrackXWhenNotUsed) {
var thumbXProps = __assign({}, propsThumbXProps, {
var thumbXProps = __assign(__assign({}, propsThumbXProps), {
key: "ScrollbarsCustom-ThumbX",

@@ -1817,3 +1820,3 @@ style: styles.thumbX,

var trackXProps = __assign({}, propsTrackXProps, {
var trackXProps = __assign(__assign(__assign(__assign({}, propsTrackXProps), {
key: "ScrollbarsCustom-TrackX",

@@ -1823,5 +1826,5 @@ style: styles.trackX,

onClick: this.handleTrackXClick
}, (disableTracksMousewheelScrolling || disableTrackXMousewheelScrolling) && {
}), (disableTracksMousewheelScrolling || disableTrackXMousewheelScrolling) && {
onWheel: this.handleTrackXMouseWheel
}, {
}), {
axis: AXIS_DIRECTION.X

@@ -1837,3 +1840,3 @@ });

var holderProps = __assign({}, propsHolderProps, {
var holderProps = __assign(__assign({}, propsHolderProps), {
className: cnb("ScrollbarsCustom", this.state.trackYVisible && "trackYVisible", this.state.trackXVisible && "trackXVisible", this.state.isRTL && "rtl", propsHolderProps.className),

@@ -1840,0 +1843,0 @@ style: styles.holder,

640

dist/rsc.next.esm.js

@@ -0,99 +1,7 @@

import cnb from 'cnbuilder';
import { oneOf, func, bool, number, string, object } from 'prop-types';
import { createElement, Component, createContext } from 'react';
import cnb from 'cnbuilder';
import { zoomLevel } from 'zoom-level';
import { DraggableCore } from 'react-draggable';
import { zoomLevel } from 'zoom-level';
var AXIS_DIRECTION;
(function (AXIS_DIRECTION) {
AXIS_DIRECTION["X"] = "x";
AXIS_DIRECTION["Y"] = "y";
})(AXIS_DIRECTION || (AXIS_DIRECTION = {}));
const AXIS_DIRECTION_PROP_TYPE = oneOf([AXIS_DIRECTION.X, AXIS_DIRECTION.Y]);
var TRACK_CLICK_BEHAVIOR;
(function (TRACK_CLICK_BEHAVIOR) {
TRACK_CLICK_BEHAVIOR["JUMP"] = "jump";
TRACK_CLICK_BEHAVIOR["STEP"] = "step";
})(TRACK_CLICK_BEHAVIOR || (TRACK_CLICK_BEHAVIOR = {}));
const TRACK_CLICK_BEHAVIOR_PROP_TYPE = oneOf([TRACK_CLICK_BEHAVIOR.JUMP, TRACK_CLICK_BEHAVIOR.STEP]);
class RAFLoop {
constructor() {
/**
* @description List of targets to update
*/
this.targets = [];
/**
* @description ID of requested animation frame. Valuable only if loop is active and has items to iterate.
*/
this.animationFrameID = 0;
/**
* @description Loop's state.
*/
this._isActive = false;
/**
* @description Start the loop if it wasn't yet.
*/
this.start = () => {
if (!this._isActive && this.targets.length) {
this._isActive = true;
this.animationFrameID && cancelAnimationFrame(this.animationFrameID);
this.animationFrameID = requestAnimationFrame(this.rafCallback);
}
return this;
};
/**
* @description Stop the loop if is was active.
*/
this.stop = () => {
if (this._isActive) {
this._isActive = false;
this.animationFrameID && cancelAnimationFrame(this.animationFrameID);
this.animationFrameID = 0;
}
return this;
};
/**
* @description Add target to the iteration list if it's not there.
*/
this.addTarget = (target, silent = false) => {
if (this.targets.indexOf(target) === -1) {
this.targets.push(target);
this.targets.length === 1 && !silent && this.start();
}
return this;
};
/**
* @description Remove target from iteration list if it was there.
*/
this.removeTarget = (target) => {
const idx = this.targets.indexOf(target);
if (idx !== -1) {
this.targets.splice(idx, 1);
this.targets.length === 0 && this.stop();
}
return this;
};
/**
* @description Callback that called each animation frame.
*/
this.rafCallback = () => {
if (!this._isActive) {
return 0;
}
for (let i = 0; i < this.targets.length; i++) {
!this.targets[i]._unmounted && this.targets[i].update();
}
return (this.animationFrameID = requestAnimationFrame(this.rafCallback));
};
}
/**
* @description Loop's state.
*/
get isActive() {
return this._isActive;
}
}
var Loop = new RAFLoop();
let doc = typeof document === "object" ? document : null;

@@ -126,32 +34,23 @@ function isUndef(v) {

}
/**
* @description Return element's height without padding
*
* ts-ignore here is okay here, because it brigs around 40% of performance
*/
const getInnerHeight = (el) => {
function getInnerSize(el, dimension, padding1, padding2) {
const styles = getComputedStyle(el);
if (styles.boxSizing === "border-box") {
return Math.max((parseFloat(styles.height) || 0) -
(parseFloat(styles.paddingTop) || 0) -
(parseFloat(styles.paddingBottom) || 0), 0);
return Math.max(0, (parseFloat(styles[dimension]) || 0) -
(parseFloat(styles[padding1]) || 0) -
(parseFloat(styles[padding2]) || 0));
}
// @ts-ignore
return parseFloat(styles.height) || 0;
};
return parseFloat(styles[dimension]) || 0;
}
/**
* @description Return element's height without padding
*/
function getInnerHeight(el) {
return getInnerSize(el, "height", "paddingTop", "paddingBottom");
}
/**
* @description Return element's width without padding
*
* ts-ignore here is okay here, because it brigs around 40% of performance
*/
const getInnerWidth = (el) => {
const styles = getComputedStyle(el);
if (styles.boxSizing === "border-box") {
return Math.max((parseFloat(styles.width) || 0) -
(parseFloat(styles.paddingLeft) || 0) -
(parseFloat(styles.paddingRight) || 0), 0);
}
// @ts-ignore
return parseFloat(styles.width) || 0;
};
function getInnerWidth(el) {
return getInnerSize(el, "width", "paddingLeft", "paddingRight");
}
/**

@@ -226,3 +125,2 @@ * @description Return unique UUID v4

}
let scrollbarWidth = null;
/**

@@ -232,102 +130,273 @@ * @description Returns scrollbar width specific for current environment

function getScrollbarWidth(force = false) {
if (!force && scrollbarWidth !== null) {
return scrollbarWidth;
if (!force && !isUndef(getScrollbarWidth._cache)) {
return getScrollbarWidth._cache;
}
if (!doc) {
return (scrollbarWidth = 0);
return (getScrollbarWidth._cache = 0);
}
let el = doc.createElement("div");
el.setAttribute("style", "display:block;position:absolute;width:100px;height:100px;top:-9999px;overflow:scroll;");
el.setAttribute("style", "position:absolute;width:100px;height:100px;top:-999px;left:-999px;overflow:scroll;");
doc.body.appendChild(el);
scrollbarWidth = el.offsetWidth - el.clientWidth;
getScrollbarWidth._cache = 100 - el.clientWidth;
doc.body.removeChild(el);
return scrollbarWidth;
return getScrollbarWidth._cache;
}
let isReverseRTLScrollNeeded = null;
(function (getScrollbarWidth) {
})(getScrollbarWidth || (getScrollbarWidth = {}));
/**
* @description Detect need of horizontal scroll reverse while RTL
*/
const shouldReverseRTLScroll = (force = false) => {
if (!force && isReverseRTLScrollNeeded !== null) {
return isReverseRTLScrollNeeded;
function shouldReverseRtlScroll(force = false) {
if (!force && !isUndef(shouldReverseRtlScroll._cache)) {
return shouldReverseRtlScroll._cache;
}
if (!doc) {
return (isReverseRTLScrollNeeded = false);
return (shouldReverseRtlScroll._cache = false);
}
let el = doc.createElement("div");
let child = doc.createElement("div");
el.setAttribute("style", "display:block;position:absolute;width:100px;height:100px;top:-9999px;overflow:scroll;direction:rtl;");
child.setAttribute("style", "display:block;position:relative;width:1000px;height:1000px;direction:rtl;");
const el = doc.createElement("div");
const child = doc.createElement("div");
el.appendChild(child);
el.setAttribute("style", "position:absolute;width:100px;height:100px;top:-999px;left:-999px;overflow:scroll;direction:rtl");
child.setAttribute("style", "width:1000px;height:1000px");
doc.body.appendChild(el);
el.scrollLeft;
el.scrollLeft = 45;
isReverseRTLScrollNeeded = el.scrollLeft === 0;
el.scrollLeft = -50;
shouldReverseRtlScroll._cache = el.scrollLeft === -50;
doc.body.removeChild(el);
return isReverseRTLScrollNeeded;
};
return shouldReverseRtlScroll._cache;
}
(function (shouldReverseRtlScroll) {
})(shouldReverseRtlScroll || (shouldReverseRtlScroll = {}));
class ScrollbarTrack extends Component {
constructor() {
super(...arguments);
this.element = null;
this.elementRef = (ref) => {
isFun(this.props.elementRef) && this.props.elementRef(ref);
this.element = ref;
};
this.handleClick = (ev) => {
if (!ev || !this.element || ev.button !== 0) {
return;
}
if (isFun(this.props.onClick) && ev.target === this.element) {
if (!isUndef(ev.offsetX)) {
this.props.onClick(ev, {
axis: this.props.axis,
offset: this.props.axis === AXIS_DIRECTION.X ? ev.offsetX : ev.offsetY
});
}
else {
// support for old browsers
const rect = this.element.getBoundingClientRect();
this.props.onClick(ev, {
axis: this.props.axis,
offset: this.props.axis === AXIS_DIRECTION.X ? ev.clientX - rect.left : ev.clientY - rect.top
});
}
}
return true;
};
class Emittr {
constructor(maxHandlers = 10) {
this.setMaxHandlers(maxHandlers);
this._handlers = Object.create(null);
}
componentDidMount() {
if (!this.element) {
this.setState(() => {
throw new Error("Element was not created. Possibly you haven't provided HTMLDivElement to renderer's `elementRef` function.");
});
static _callEventHandlers(emitter, handlers, args) {
if (!handlers.length) {
return;
}
this.element.addEventListener("click", this.handleClick);
if (handlers.length === 1) {
Reflect.apply(handlers[0], emitter, args);
return;
}
handlers = [...handlers];
let idx;
for (idx = 0; idx < handlers.length; idx++) {
Reflect.apply(handlers[idx], emitter, args);
}
}
componentWillUnmount() {
if (this.element) {
this.element.removeEventListener("click", this.handleClick);
this.element = null;
this.elementRef(null);
setMaxHandlers(count) {
if (!isNum(count) || count <= 0) {
throw new TypeError(`Expected maxHandlers to be a positive number, got '${count}' of type ${typeof count}`);
}
this._maxHandlers = count;
return this;
}
render() {
const { elementRef, axis, onClick, ...props } = this.props;
props.className = cnb("ScrollbarsCustom-Track", axis === AXIS_DIRECTION.X ? "ScrollbarsCustom-TrackX" : "ScrollbarsCustom-TrackY", props.className);
if (props.renderer) {
props.axis = axis;
getMaxHandlers() {
return this._maxHandlers;
}
emit(name, ...args) {
if (typeof this._handlers[name] !== "object" || !Array.isArray(this._handlers[name])) {
return false;
}
return renderDivWithRenderer(props, this.elementRef);
Emittr._callEventHandlers(this, this._handlers[name], args);
return true;
}
on(name, handler) {
Emittr._addHandler(this, name, handler);
return this;
}
prependOn(name, handler) {
Emittr._addHandler(this, name, handler, true);
return this;
}
once(name, handler) {
if (!isFun(handler)) {
throw new TypeError("Expected event handler to be a function, got " + typeof handler);
}
Emittr._addHandler(this, name, this._wrapOnceHandler(name, handler));
return this;
}
prependOnce(name, handler) {
if (!isFun(handler)) {
throw new TypeError("Expected event handler to be a function, got " + typeof handler);
}
Emittr._addHandler(this, name, this._wrapOnceHandler(name, handler), true);
return this;
}
off(name, handler) {
Emittr._removeHandler(this, name, handler);
return this;
}
removeAllHandlers() {
const handlers = this._handlers;
this._handlers = Object.create(null);
const removeHandlers = handlers["removeHandler"];
delete handlers["removeHandler"];
let idx, eventName;
for (eventName in handlers) {
for (idx = handlers[eventName].length - 1; idx >= 0; idx--) {
Emittr._callEventHandlers(this, removeHandlers, [
eventName,
handlers[eventName][idx].handler || handlers[eventName][idx]
]);
}
}
return this;
}
_wrapOnceHandler(name, handler) {
const onceState = {
fired: false,
handler,
wrappedHandler: undefined,
emitter: this,
event: name
};
const wrappedHandler = Emittr._onceWrapper.bind(onceState);
onceState.wrappedHandler = wrappedHandler;
wrappedHandler.handler = handler;
wrappedHandler.event = name;
return wrappedHandler;
}
}
ScrollbarTrack.propTypes = {
axis: AXIS_DIRECTION_PROP_TYPE,
onClick: func,
elementRef: func,
renderer: func
Emittr._addHandler = (emitter, name, handler, prepend = false) => {
if (!isFun(handler)) {
throw new TypeError("Expected event handler to be a function, got " + typeof handler);
}
emitter._handlers[name] = emitter._handlers[name] || [];
emitter.emit("addHandler", name, handler);
prepend ? emitter._handlers[name].unshift(handler) : emitter._handlers[name].push(handler);
return emitter;
};
Emittr._onceWrapper = function _onceWrapper(...args) {
if (!this.fired) {
this.fired = true;
this.emitter.off(this.event, this.wrappedHandler);
Reflect.apply(this.handler, this.emitter, args);
}
};
Emittr._removeHandler = (emitter, name, handler) => {
if (!isFun(handler)) {
throw new TypeError("Expected event handler to be a function, got " + typeof handler);
}
if (isUndef(emitter._handlers[name]) || !emitter._handlers[name].length) {
return emitter;
}
let idx = -1;
if (emitter._handlers[name].length === 1) {
if (emitter._handlers[name][0] === handler || emitter._handlers[name][0].handler === handler) {
idx = 0;
handler = emitter._handlers[name][0].handler || emitter._handlers[name][0];
}
}
else {
for (idx = emitter._handlers[name].length - 1; idx >= 0; idx--) {
if (emitter._handlers[name][idx] === handler ||
emitter._handlers[name][idx].handler === handler) {
handler = emitter._handlers[name][idx].handler || emitter._handlers[name][idx];
break;
}
}
}
if (idx === -1) {
return emitter;
}
idx === 0 ? emitter._handlers[name].shift() : emitter._handlers[name].splice(idx, 1);
emitter.emit("removeHandler", name, handler);
return emitter;
};
class RAFLoop {
constructor() {
/**
* @description List of targets to update
*/
this.targets = [];
/**
* @description ID of requested animation frame. Valuable only if loop is active and has items to iterate.
*/
this.animationFrameID = 0;
/**
* @description Loop's state.
*/
this._isActive = false;
/**
* @description Start the loop if it wasn't yet.
*/
this.start = () => {
if (!this._isActive && this.targets.length) {
this._isActive = true;
this.animationFrameID && cancelAnimationFrame(this.animationFrameID);
this.animationFrameID = requestAnimationFrame(this.rafCallback);
}
return this;
};
/**
* @description Stop the loop if is was active.
*/
this.stop = () => {
if (this._isActive) {
this._isActive = false;
this.animationFrameID && cancelAnimationFrame(this.animationFrameID);
this.animationFrameID = 0;
}
return this;
};
/**
* @description Add target to the iteration list if it's not there.
*/
this.addTarget = (target, silent = false) => {
if (this.targets.indexOf(target) === -1) {
this.targets.push(target);
this.targets.length === 1 && !silent && this.start();
}
return this;
};
/**
* @description Remove target from iteration list if it was there.
*/
this.removeTarget = (target) => {
const idx = this.targets.indexOf(target);
if (idx !== -1) {
this.targets.splice(idx, 1);
this.targets.length === 0 && this.stop();
}
return this;
};
/**
* @description Callback that called each animation frame.
*/
this.rafCallback = () => {
if (!this._isActive) {
return 0;
}
for (let i = 0; i < this.targets.length; i++) {
!this.targets[i]._unmounted && this.targets[i].update();
}
return (this.animationFrameID = requestAnimationFrame(this.rafCallback));
};
}
/**
* @description Loop's state.
*/
get isActive() {
return this._isActive;
}
}
var Loop = new RAFLoop();
var AXIS_DIRECTION;
(function (AXIS_DIRECTION) {
AXIS_DIRECTION["X"] = "x";
AXIS_DIRECTION["Y"] = "y";
})(AXIS_DIRECTION || (AXIS_DIRECTION = {}));
const AXIS_DIRECTION_PROP_TYPE = oneOf([AXIS_DIRECTION.X, AXIS_DIRECTION.Y]);
var TRACK_CLICK_BEHAVIOR;
(function (TRACK_CLICK_BEHAVIOR) {
TRACK_CLICK_BEHAVIOR["JUMP"] = "jump";
TRACK_CLICK_BEHAVIOR["STEP"] = "step";
})(TRACK_CLICK_BEHAVIOR || (TRACK_CLICK_BEHAVIOR = {}));
const TRACK_CLICK_BEHAVIOR_PROP_TYPE = oneOf([TRACK_CLICK_BEHAVIOR.JUMP, TRACK_CLICK_BEHAVIOR.STEP]);
class ScrollbarThumb extends Component {

@@ -399,3 +468,2 @@ constructor() {

global.document.body.style.userSelect = this.prevUserSelect;
this.prevUserSelect = null;
global.document.onselectstart = this.prevOnSelectStart;

@@ -467,141 +535,64 @@ this.prevOnSelectStart = null;

class Emittr {
constructor(maxHandlers = 10) {
this.setMaxHandlers(maxHandlers);
this._handlers = Object.create(null);
class ScrollbarTrack extends Component {
constructor() {
super(...arguments);
this.element = null;
this.elementRef = (ref) => {
isFun(this.props.elementRef) && this.props.elementRef(ref);
this.element = ref;
};
this.handleClick = (ev) => {
if (!ev || !this.element || ev.button !== 0) {
return;
}
if (isFun(this.props.onClick) && ev.target === this.element) {
if (!isUndef(ev.offsetX)) {
this.props.onClick(ev, {
axis: this.props.axis,
offset: this.props.axis === AXIS_DIRECTION.X ? ev.offsetX : ev.offsetY
});
}
else {
// support for old browsers
const rect = this.element.getBoundingClientRect();
this.props.onClick(ev, {
axis: this.props.axis,
offset: this.props.axis === AXIS_DIRECTION.X ? ev.clientX - rect.left : ev.clientY - rect.top
});
}
}
return true;
};
}
static _callEventHandlers(emitter, handlers, args) {
if (!handlers.length) {
componentDidMount() {
if (!this.element) {
this.setState(() => {
throw new Error("Element was not created. Possibly you haven't provided HTMLDivElement to renderer's `elementRef` function.");
});
return;
}
if (handlers.length === 1) {
Reflect.apply(handlers[0], emitter, args);
return;
}
handlers = [...handlers];
let idx;
for (idx = 0; idx < handlers.length; idx++) {
Reflect.apply(handlers[idx], emitter, args);
}
this.element.addEventListener("click", this.handleClick);
}
setMaxHandlers(count) {
if (!isNum(count) || count <= 0) {
throw new TypeError(`Expected maxHandlers to be a positive number, got '${count}' of type ${typeof count}`);
componentWillUnmount() {
if (this.element) {
this.element.removeEventListener("click", this.handleClick);
this.element = null;
this.elementRef(null);
}
this._maxHandlers = count;
return this;
}
getMaxHandlers() {
return this._maxHandlers;
}
emit(name, ...args) {
if (typeof this._handlers[name] !== "object" || !Array.isArray(this._handlers[name])) {
return false;
render() {
const { elementRef, axis, onClick, ...props } = this.props;
props.className = cnb("ScrollbarsCustom-Track", axis === AXIS_DIRECTION.X ? "ScrollbarsCustom-TrackX" : "ScrollbarsCustom-TrackY", props.className);
if (props.renderer) {
props.axis = axis;
}
Emittr._callEventHandlers(this, this._handlers[name], args);
return true;
return renderDivWithRenderer(props, this.elementRef);
}
on(name, handler) {
Emittr._addHandler(this, name, handler);
return this;
}
prependOn(name, handler) {
Emittr._addHandler(this, name, handler, true);
return this;
}
once(name, handler) {
if (!isFun(handler)) {
throw new TypeError("Expected event handler to be a function, got " + typeof handler);
}
Emittr._addHandler(this, name, this._wrapOnceHandler(name, handler));
return this;
}
prependOnce(name, handler) {
if (!isFun(handler)) {
throw new TypeError("Expected event handler to be a function, got " + typeof handler);
}
Emittr._addHandler(this, name, this._wrapOnceHandler(name, handler), true);
return this;
}
off(name, handler) {
Emittr._removeHandler(this, name, handler);
return this;
}
removeAllHandlers() {
const handlers = this._handlers;
this._handlers = Object.create(null);
const removeHandlers = handlers["removeHandler"];
delete handlers["removeHandler"];
let idx, eventName;
for (eventName in handlers) {
for (idx = handlers[eventName].length - 1; idx >= 0; idx--) {
Emittr._callEventHandlers(this, removeHandlers, [
eventName,
handlers[eventName][idx].handler || handlers[eventName][idx]
]);
}
}
return this;
}
_wrapOnceHandler(name, handler) {
const onceState = {
fired: false,
handler,
wrappedHandler: undefined,
emitter: this,
event: name
};
const wrappedHandler = Emittr._onceWrapper.bind(onceState);
onceState.wrappedHandler = wrappedHandler;
wrappedHandler.handler = handler;
wrappedHandler.event = name;
return wrappedHandler;
}
}
Emittr._addHandler = (emitter, name, handler, prepend = false) => {
if (!isFun(handler)) {
throw new TypeError("Expected event handler to be a function, got " + typeof handler);
}
emitter._handlers[name] = emitter._handlers[name] || [];
emitter.emit("addHandler", name, handler);
prepend ? emitter._handlers[name].unshift(handler) : emitter._handlers[name].push(handler);
return emitter;
ScrollbarTrack.propTypes = {
axis: AXIS_DIRECTION_PROP_TYPE,
onClick: func,
elementRef: func,
renderer: func
};
Emittr._onceWrapper = function _onceWrapper(...args) {
if (!this.fired) {
this.fired = true;
this.emitter.off(this.event, this.wrappedHandler);
Reflect.apply(this.handler, this.emitter, args);
}
};
Emittr._removeHandler = (emitter, name, handler) => {
if (!isFun(handler)) {
throw new TypeError("Expected event handler to be a function, got " + typeof handler);
}
if (isUndef(emitter._handlers[name]) || !emitter._handlers[name].length) {
return emitter;
}
let idx = -1;
if (emitter._handlers[name].length === 1) {
if (emitter._handlers[name][0] === handler || emitter._handlers[name][0].handler === handler) {
idx = 0;
handler = emitter._handlers[name][0].handler || emitter._handlers[name][0];
}
}
else {
for (idx = emitter._handlers[name].length - 1; idx >= 0; idx--) {
if (emitter._handlers[name][idx] === handler ||
emitter._handlers[name][idx].handler === handler) {
handler = emitter._handlers[name][idx].handler || emitter._handlers[name][idx];
break;
}
}
}
if (idx === -1) {
return emitter;
}
idx === 0 ? emitter._handlers[name].shift() : emitter._handlers[name].splice(idx, 1);
emitter.emit("removeHandler", name, handler);
return emitter;
};

@@ -661,3 +652,2 @@ const style = {

const reverseRTL = shouldReverseRTLScroll();
let pageZoomLevel = global.window ? zoomLevel() : 1;

@@ -900,3 +890,3 @@ global.window && global.window.addEventListener("resize", () => (pageZoomLevel = zoomLevel()), { passive: true });

let thumbOffset = calcThumbOffset(scrollValues.scrollWidth, scrollValues.clientWidth, trackInnerSize, thumbSize, scrollValues.scrollLeft);
if (this.state.isRTL && reverseRTL) {
if (this.state.isRTL && shouldReverseRtlScroll()) {
thumbOffset += trackInnerSize - thumbSize;

@@ -961,3 +951,3 @@ }

const trackInnerSize = getInnerWidth(this.trackXElement);
const thumbOffset = (this.scrollValues.isRTL && reverseRTL
const thumbOffset = (this.scrollValues.isRTL && shouldReverseRtlScroll()
? values.offset + thumbSize / 2 - trackInnerSize

@@ -1042,3 +1032,3 @@ : values.offset - thumbSize / 2) -

const thumbSize = this.thumbXElement.clientWidth;
const offset = this.scrollValues.isRTL && reverseRTL
const offset = this.scrollValues.isRTL && shouldReverseRtlScroll()
? data.x + thumbSize - trackInnerSize + paddingLeft

@@ -1045,0 +1035,0 @@ : data.lastX - paddingLeft;

8

dist/types/Scrollbar.d.ts

@@ -1,7 +0,7 @@

import { ElementPropsWithElementRefAndRenderer, ScrollState, TRACK_CLICK_BEHAVIOR } from "./types";
import * as PropTypes from "prop-types";
import * as React from "react";
import * as PropTypes from "prop-types";
import Emittr from "./Emittr";
import { ScrollbarThumbProps } from "./ScrollbarThumb";
import { ScrollbarTrackProps } from "./ScrollbarTrack";
import { ScrollbarThumbProps } from "./ScrollbarThumb";
import Emittr from "./Emittr";
import { ElementPropsWithElementRefAndRenderer, ScrollState, TRACK_CLICK_BEHAVIOR } from "./types";
export declare type ScrollbarProps = ElementPropsWithElementRefAndRenderer & {

@@ -8,0 +8,0 @@ createContext?: boolean;

2

dist/types/ScrollbarThumb.d.ts

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

import * as PropTypes from "prop-types";
import * as React from "react";
import * as PropTypes from "prop-types";
import { DraggableData, DraggableEvent } from "react-draggable";

@@ -4,0 +4,0 @@ import { AXIS_DIRECTION, ElementPropsWithElementRefAndRenderer } from "./types";

2

dist/types/ScrollbarTrack.d.ts

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

import * as PropTypes from "prop-types";
import * as React from "react";
import * as PropTypes from "prop-types";
import { AXIS_DIRECTION, ElementPropsWithElementRefAndRenderer } from "./types";

@@ -4,0 +4,0 @@ export interface ScrollbarTrackClickParameters {

2

dist/types/types.d.ts

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

import * as PropTypes from "prop-types";
import * as React from "react";
import * as PropTypes from "prop-types";
export declare enum AXIS_DIRECTION {

@@ -4,0 +4,0 @@ X = "x",

41

dist/types/util.d.ts

@@ -16,22 +16,9 @@ /// <reference types="react" />

* @description Return element's height without padding
*
* ts-ignore here is okay here, because it brigs around 40% of performance
*/
export declare const getInnerHeight: (el: HTMLDivElement) => number;
export declare function getInnerHeight(el: HTMLElement): number;
/**
* @description Return element's width without padding
*
* ts-ignore here is okay here, because it brigs around 40% of performance
*/
export declare const getInnerWidth: (el: HTMLDivElement) => number;
export declare function getInnerWidth(el: HTMLElement): number;
/**
* @description Return element's dimensions without padding
*
* ts-ignore here is okay here, because it brigs around 40% of performance
*/
export declare const getInnerDimensions: (el: HTMLDivElement) => {
width: number;
height: number;
};
/**
* @description Return unique UUID v4

@@ -71,11 +58,2 @@ */

/**
* @description Returns scrollbar width specific for current environment
*/
export declare function getScrollbarWidth(force?: boolean): number;
/**
* @description Set the cached width to given value.<br/>
* <i>null</i> will force to recalculate value on next get.
*/
export declare const _dbgSetScrollbarWidth: (v: number | null) => number | null;
/**
* @description Set the document node to calculate the scrollbar width.<br/>

@@ -90,9 +68,14 @@ * <i>null</i> will force getter to return 0 (it'll imitate SSR).

/**
* @description Detect need of horizontal scroll reverse while RTL
* @description Returns scrollbar width specific for current environment
*/
export declare const shouldReverseRTLScroll: (force?: boolean) => boolean;
export declare function getScrollbarWidth(force?: boolean): number;
export declare namespace getScrollbarWidth {
let _cache: number;
}
/**
* @description Set the cached value to given value.<br/>
* <i>null</i> will force to recalculate value on next get.
* @description Detect need of horizontal scroll reverse while RTL
*/
export declare const _dbgSetIsReverseRTLScrollNeeded: (v: boolean | null) => boolean | null;
export declare function shouldReverseRtlScroll(force?: boolean): boolean;
export declare namespace shouldReverseRtlScroll {
let _cache: boolean;
}

38

package.json
{
"name": "react-scrollbars-custom",
"description": "The best React custom scrollbars component",
"version": "4.0.18",
"version": "4.0.19",
"repository": {

@@ -41,32 +41,32 @@ "type": "git",

"cnbuilder": "^1.1.7",
"react-draggable": "^3.3.0",
"react-draggable": "^3.3.2",
"zoom-level": "^1.2.4"
},
"devDependencies": {
"@babel/core": "^7.5.4",
"@babel/preset-env": "^7.5.4",
"@types/jasmine": "^3.3.13",
"@types/karma": "^3.0.2",
"@babel/core": "^7.5.5",
"@babel/preset-env": "^7.5.5",
"@types/jasmine": "^3.4.0",
"@types/karma": "^3.0.3",
"@types/prop-types": "^15.7.1",
"@types/react": "^16.8.22",
"@types/react": "^16.9.2",
"codacy-coverage": "^3.4.0",
"cross-env": "^5.2.0",
"husky": "^1.3.1",
"jasmine-core": "^3.3.0",
"karma": "^4.2.0",
"karma-chrome-launcher": "^2.2.0",
"husky": "^3.0.4",
"jasmine-core": "^3.4.0",
"karma": "^4.3.0",
"karma-chrome-launcher": "^3.1.0",
"karma-jasmine": "^2.0.1",
"karma-typescript": "^4.0.0",
"karma-typescript": "^4.1.1",
"prettier": "^1.18.2",
"pretty-quick": "^1.11.1",
"prop-types": "^15.0.0",
"react": "^16.8.5",
"react-dom": "^16.8.5",
"rimraf": "^2.6.3",
"rollup": "^1.17.0",
"prop-types": "^15.7.2",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"rimraf": "^3.0.0",
"rollup": "^1.20.3",
"rollup-plugin-babel": "^4.3.3",
"rollup-plugin-typescript2": "^0.19.3",
"rollup-plugin-typescript2": "^0.24.0",
"simulant": "^0.2.2",
"tslib": "^1.10.0",
"typescript": "^3.5.2"
"typescript": "^3.6.2"
},

@@ -73,0 +73,0 @@ "husky": {

dist/rsc.js

Sorry, the diff of this file is too big to display

dist/rsc.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

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

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc