@x1mrdonut1x/nouislider-react
Version:
React component wrapping leongersen/noUiSlider
343 lines (334 loc) • 11.9 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('nouislider')) :
typeof define === 'function' && define.amd ? define(['react', 'nouislider'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.ReactNouislider = factory(global.React, global.nouislider));
})(this, (function (React, nouislider) { 'use strict';
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var nouislider__default = /*#__PURE__*/_interopDefaultLegacy(nouislider);
function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
enumerableOnly && (symbols = symbols.filter(function (sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
})), keys.push.apply(keys, symbols);
}
return keys;
}
function _objectSpread2(target) {
for (var i = 1; i < arguments.length; i++) {
var source = null != arguments[i] ? arguments[i] : {};
i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
_defineProperty(target, key, source[key]);
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
return target;
}
function _typeof(obj) {
"@babel/helpers - typeof";
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
return typeof obj;
} : function (obj) {
return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
}, _typeof(obj);
}
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function _extends() {
_extends = Object.assign ? Object.assign.bind() : 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;
};
return _extends.apply(this, arguments);
}
function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}
function _toConsumableArray(arr) {
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
}
function _arrayWithoutHoles(arr) {
if (Array.isArray(arr)) return _arrayLikeToArray(arr);
}
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
}
function _iterableToArray(iter) {
if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
}
function _iterableToArrayLimit(arr, i) {
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
if (_i == null) return;
var _arr = [];
var _n = true;
var _d = false;
var _s, _e;
try {
for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
_arr.push(_s.value);
if (i && _arr.length === i) break;
}
} catch (err) {
_d = true;
_e = err;
} finally {
try {
if (!_n && _i["return"] != null) _i["return"]();
} finally {
if (_d) throw _e;
}
}
return _arr;
}
function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
var sortObjectKeys = function sortObjectKeys(obj) {
return Object.entries(obj).sort().reduce(function (o, _ref) {
var _ref2 = _slicedToArray(_ref, 2),
k = _ref2[0],
v = _ref2[1];
return o[k] = v, o;
}, {});
};
var isEqual = function isEqual(val1, val2) {
if (typeof val1 === "number" && typeof val2 === "number") return val1 === val2;
if (typeof val1 === "string" && typeof val2 === "string") return val1 === val2;
if (Array.isArray(val1) && Array.isArray(val2)) {
return JSON.stringify(val1) === JSON.stringify(val2);
}
if (_typeof(val1) === "object" && _typeof(val2) === "object") {
return JSON.stringify(sortObjectKeys(val1)) === JSON.stringify(sortObjectKeys(val2));
}
return false;
};
var areEqual = function areEqual(prevProps, nextProps) {
var start = prevProps.start,
step = prevProps.step,
disabled = prevProps.disabled,
range = prevProps.range;
return nextProps.step === step && isEqual(nextProps.start, start) && nextProps.disabled === disabled && isEqual(nextProps.range, range);
};
var Nouislider = function Nouislider(props) {
var sliderContainer = /*#__PURE__*/React__default["default"].createRef();
var getSlider = function getSlider() {
return (sliderContainer.current || {}).noUiSlider;
};
React.useEffect(function () {
var instanceRef = props.instanceRef;
var isCreatedRef = instanceRef && Object.prototype.hasOwnProperty.call(instanceRef, "current");
if (instanceRef && instanceRef instanceof Function) {
instanceRef(sliderContainer.current);
}
if (isCreatedRef) {
// eslint-disable-next-line no-param-reassign
instanceRef.current = sliderContainer.current;
}
return function () {
if (isCreatedRef) {
// eslint-disable-next-line no-param-reassign
instanceRef.current = null;
}
};
}, [sliderContainer]);
var clickOnPip = function clickOnPip(pip) {
var value = Number(pip.target.getAttribute("data-value"));
var slider = getSlider();
if (slider) {
slider.set(value);
}
};
var toggleDisable = function toggleDisable(disabled) {
var sliderHTML = sliderContainer.current;
if (sliderHTML) {
if (!disabled) {
sliderHTML.removeAttribute("disabled");
} else {
sliderHTML.setAttribute("disabled", true);
}
}
};
var onUpdate = props.onUpdate,
onChange = props.onChange,
onSlide = props.onSlide,
onStart = props.onStart,
onEnd = props.onEnd,
onSet = props.onSet;
var updateEvents = function updateEvents(sliderComponent) {
if (onStart) {
sliderComponent.off("start");
sliderComponent.on("start", onStart);
}
if (onSlide) {
sliderComponent.off("slide");
sliderComponent.on("slide", onSlide);
}
if (onUpdate) {
sliderComponent.off("update");
sliderComponent.on("update", onUpdate);
}
if (onChange) {
sliderComponent.off("change");
sliderComponent.on("change", onChange);
}
if (onSet) {
sliderComponent.off("set");
sliderComponent.on("set", onSet);
}
if (onEnd) {
sliderComponent.off("end");
sliderComponent.on("end", onEnd);
}
};
var updateOptions = function updateOptions(options) {
var sliderHTML = sliderContainer.current;
sliderHTML.noUiSlider.updateOptions(options);
};
var setClickableListeners = function setClickableListeners() {
if (props.clickablePips) {
var sliderHTML = sliderContainer.current;
_toConsumableArray(sliderHTML.querySelectorAll(".noUi-value")).forEach(function (pip) {
pip.style.cursor = "pointer";
pip.addEventListener("click", clickOnPip);
});
}
};
var createSlider = function createSlider() {
var sliderComponent = nouislider__default["default"].create(sliderContainer.current, _objectSpread2({}, props));
updateEvents(sliderComponent);
setClickableListeners();
};
React.useEffect(function () {
var disabled = props.disabled;
var sliderHTML = sliderContainer.current;
if (sliderHTML) {
toggleDisable(disabled);
createSlider();
}
return function () {
var slider = getSlider();
if (slider) slider.destroy();
if (sliderHTML) {
_toConsumableArray(sliderHTML.querySelectorAll(".noUi-value")).forEach(function (pip) {
pip.removeEventListener("click", clickOnPip);
});
}
};
}, []);
var start = props.start,
disabled = props.disabled,
range = props.range,
step = props.step,
margin = props.margin,
padding = props.padding,
limit = props.limit,
pips = props.pips,
snap = props.snap,
animate = props.animate;
React.useEffect(function () {
var slider = getSlider();
if (slider) {
updateOptions({
range: range,
step: step,
padding: padding,
margin: margin,
limit: limit,
pips: pips,
snap: snap,
animate: animate
});
slider.set(start);
setClickableListeners();
}
toggleDisable(disabled);
}, [start, disabled, range, step, margin, padding, limit, pips, snap, animate]);
React.useEffect(function () {
var slider = getSlider();
if (slider) {
updateEvents(slider);
}
}, [onUpdate, onChange, onSlide, onStart, onEnd, onSet]);
var id = props.id,
className = props.className,
style = props.style;
var options = {};
if (id) {
options.id = id;
}
if (className) {
options.className = className;
}
return /*#__PURE__*/React__default["default"].createElement("div", _extends({}, options, {
ref: sliderContainer,
style: style
}));
};
Nouislider.defaultProps = {
animate: true,
behaviour: "tap",
className: null,
clickablePips: false,
connect: false,
direction: "ltr",
disabled: false,
format: null,
margin: null,
limit: null,
keyboardSupport: true,
id: null,
instanceRef: null,
padding: 0,
pips: null,
snap: false,
step: null,
style: null,
orientation: "horizontal",
tooltips: false,
onChange: function onChange() {},
onEnd: function onEnd() {},
onSet: function onSet() {},
onSlide: function onSlide() {},
onStart: function onStart() {},
onUpdate: function onUpdate() {}
};
var index = /*#__PURE__*/React__default["default"].memo(Nouislider, areEqual);
return index;
}));