@trap_stevo/legendarybuilderproreact-ui
Version:
The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton
138 lines • 6.92 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
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 _objectSpread(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; }
import React, { useRef, useState, useEffect } from "react";
function HUDRangedSlider(_ref) {
var _ref$sliderContainerC = _ref.sliderContainerConfigurationSettings,
sliderContainerConfigurationSettings = _ref$sliderContainerC === void 0 ? {} : _ref$sliderContainerC,
_ref$sliderThumbConfi = _ref.sliderThumbConfigurationSettings,
sliderThumbConfigurationSettings = _ref$sliderThumbConfi === void 0 ? {} : _ref$sliderThumbConfi,
_ref$sliderBarConfigu = _ref.sliderBarConfigurationSettings,
sliderBarConfigurationSettings = _ref$sliderBarConfigu === void 0 ? {} : _ref$sliderBarConfigu,
_ref$sliderContainerC2 = _ref.sliderContainerConfigurations,
sliderContainerConfigurations = _ref$sliderContainerC2 === void 0 ? {} : _ref$sliderContainerC2,
_ref$sliderThumbConfi2 = _ref.sliderThumbConfigurations,
sliderThumbConfigurations = _ref$sliderThumbConfi2 === void 0 ? {} : _ref$sliderThumbConfi2,
_ref$sliderBarConfigu2 = _ref.sliderBarConfigurations,
sliderBarConfigurations = _ref$sliderBarConfigu2 === void 0 ? {} : _ref$sliderBarConfigu2,
_ref$onChange = _ref.onChange,
onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
_ref$orientation = _ref.orientation,
orientation = _ref$orientation === void 0 ? "horizontal" : _ref$orientation,
_ref$max = _ref.max,
max = _ref$max === void 0 ? 100 : _ref$max,
_ref$min = _ref.min,
min = _ref$min === void 0 ? 0 : _ref$min,
_ref$value = _ref.value,
value = _ref$value === void 0 ? 0 : _ref$value,
_ref$step = _ref.step,
step = _ref$step === void 0 ? 1 : _ref$step,
progress = _ref.progress;
var trackRef = useRef(null);
var vertical = orientation === "vertical";
var clamp = function clamp(val) {
return Math.min(Math.max(val, min), max);
};
var _useState = useState(function () {
return clamp(value);
}),
_useState2 = _slicedToArray(_useState, 2),
internalValue = _useState2[0],
setInternalValue = _useState2[1];
var _useState3 = useState(function () {
if (progress !== undefined) {
var offsetVal = min + progress / 100 * (max - min);
return clamp(offsetVal);
}
return min;
}),
_useState4 = _slicedToArray(_useState3, 2),
startProgress = _useState4[0],
setStartProgress = _useState4[1];
var startProgressPercent = (startProgress - min) / (max - min) * 100;
var currentProgress = (internalValue - min) / (max - min) * 100;
var effectiveFill = currentProgress - startProgressPercent;
var handleMouseDown = function handleMouseDown(e) {
var track = trackRef.current;
if (!track) {
return;
}
var getPercent = function getPercent(ev) {
var rect = track.getBoundingClientRect();
return vertical ? 1 - (ev.clientY - rect.top) / rect.height : (ev.clientX - rect.left) / rect.width;
};
var updateValueFromEvent = function updateValueFromEvent(ev) {
var percent = getPercent(ev);
percent = Math.min(Math.max(percent, 0), 1);
var rawVal = min + percent * (max - min);
var stepped = Math.round((rawVal - min) / step) * step;
var finalVal = clamp(stepped + min);
setInternalValue(finalVal);
};
var onMove = function onMove(ev) {
return updateValueFromEvent(ev);
};
var onUp = function onUp() {
window.removeEventListener("mousemove", onMove);
window.removeEventListener("mouseup", onUp);
};
window.addEventListener("mousemove", onMove);
window.addEventListener("mouseup", onUp);
updateValueFromEvent(e);
};
useEffect(function () {
setInternalValue(clamp(value));
}, []);
useEffect(function () {
if (progress !== undefined) {
var offsetVal = min + progress / 100 * (max - min);
setStartProgress(clamp(offsetVal));
}
}, []);
useEffect(function () {
onChange(internalValue);
}, [internalValue]);
return /*#__PURE__*/React.createElement("div", _extends({
ref: trackRef,
style: _objectSpread({
position: "relative",
userSelect: "none",
cursor: "pointer",
height: vertical ? "100%" : "6px",
width: vertical ? "6px" : "100%",
borderRadius: "3px",
background: "#475569"
}, sliderContainerConfigurationSettings !== null && sliderContainerConfigurationSettings !== void 0 ? sliderContainerConfigurationSettings : {}),
onMouseDown: handleMouseDown
}, sliderContainerConfigurations !== null && sliderContainerConfigurations !== void 0 ? sliderContainerConfigurations : {}), /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread({
position: "absolute",
borderRadius: "3px",
background: "#00bfff",
height: vertical ? "".concat(effectiveFill, "%") : "100%",
width: vertical ? "100%" : "".concat(effectiveFill, "%"),
zIndex: 0,
bottom: vertical ? "".concat(startProgressPercent, "%") : undefined,
left: vertical ? 0 : "".concat(startProgressPercent, "%"),
top: vertical ? "".concat(100 - currentProgress, "%") : 0
}, sliderBarConfigurationSettings !== null && sliderBarConfigurationSettings !== void 0 ? sliderBarConfigurationSettings : {})
}, sliderBarConfigurations !== null && sliderBarConfigurations !== void 0 ? sliderBarConfigurations : {})), /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread({
position: "absolute",
pointerEvents: "none",
transform: "translate(-50%, 50%)",
border: "2px solid #0f172a",
borderRadius: "50%",
background: "#00bfff",
height: "14px",
width: "14px",
zIndex: 2,
bottom: vertical ? "".concat(currentProgress, "%") : "50%",
left: vertical ? "50%" : "".concat(currentProgress, "%")
}, sliderThumbConfigurationSettings !== null && sliderThumbConfigurationSettings !== void 0 ? sliderThumbConfigurationSettings : {})
}, sliderThumbConfigurations !== null && sliderThumbConfigurations !== void 0 ? sliderThumbConfigurations : {})));
}
;
export default HUDRangedSlider;