nouislider-react
Version:
React component wrapping leongersen/noUiSlider
354 lines (348 loc) • 11 kB
JavaScript
import React, { useState, useEffect } from 'react';
import nouislider from 'nouislider';
function _iterableToArrayLimit(r, l) {
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
if (null != t) {
var e,
n,
i,
u,
a = [],
f = !0,
o = !1;
try {
if (i = (t = t.call(r)).next, 0 === l) {
if (Object(t) !== t) return;
f = !1;
} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
} catch (r) {
o = !0, n = r;
} finally {
try {
if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
} finally {
if (o) throw n;
}
}
return a;
}
}
function ownKeys(e, r) {
var t = Object.keys(e);
if (Object.getOwnPropertySymbols) {
var o = Object.getOwnPropertySymbols(e);
r && (o = o.filter(function (r) {
return Object.getOwnPropertyDescriptor(e, r).enumerable;
})), t.push.apply(t, o);
}
return t;
}
function _objectSpread2(e) {
for (var r = 1; r < arguments.length; r++) {
var t = null != arguments[r] ? arguments[r] : {};
r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
_defineProperty(e, r, t[r]);
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
});
}
return e;
}
function _toPrimitive(t, r) {
if ("object" != typeof t || !t) return t;
var e = t[Symbol.toPrimitive];
if (void 0 !== e) {
var i = e.call(t, r || "default");
if ("object" != typeof i) return i;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return ("string" === r ? String : Number)(t);
}
function _toPropertyKey(t) {
var i = _toPrimitive(t, "string");
return "symbol" == typeof i ? i : String(i);
}
function _typeof(o) {
"@babel/helpers - typeof";
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
return typeof o;
} : function (o) {
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
}, _typeof(o);
}
function _defineProperty(obj, key, value) {
key = _toPropertyKey(key);
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 _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 _useState = useState(null),
_useState2 = _slicedToArray(_useState, 2),
slider = _useState2[0],
setSlider = _useState2[1];
var sliderContainer = /*#__PURE__*/React.createRef();
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"));
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() {
if (sliderContainer.current.noUiSlider) return;
var sliderComponent = nouislider.create(sliderContainer.current, _objectSpread2({}, props));
updateEvents(sliderComponent);
setSlider(sliderComponent);
};
useEffect(function () {
var disabled = props.disabled;
var sliderHTML = sliderContainer.current;
if (sliderHTML) {
toggleDisable(disabled);
createSlider();
}
return function () {
if (slider) slider.destroy();
if (sliderHTML) {
_toConsumableArray(sliderHTML.querySelectorAll(".noUi-value")).forEach(function (pip) {
pip.removeEventListener("click", clickOnPip);
});
}
};
}, []);
useEffect(function () {
if (slider) {
setClickableListeners();
}
}, [slider]);
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;
useEffect(function () {
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]);
useEffect(function () {
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.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.memo(Nouislider, areEqual);
export { index as default };