@trap_stevo/legendarybuilderproreact-ui/dist/HUDComponents/HUDSlider.js

The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton

import _defineProperty from "@babel/runtime/helpers/defineProperty";
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 HUDSlider(_ref) {
  var _ref$sliderContainerC = _ref.sliderContainerConfigurationSettings,
    sliderContainerConfigurationSettings = _ref$sliderContainerC === void 0 ? {} : _ref$sliderContainerC,
    _ref$fillBarConfigura = _ref.fillBarConfigurationSettings,
    fillBarConfigurationSettings = _ref$fillBarConfigura === void 0 ? {} : _ref$fillBarConfigura,
    _ref$thumbConfigurati = _ref.thumbConfigurationSettings,
    thumbConfigurationSettings = _ref$thumbConfigurati === void 0 ? {} : _ref$thumbConfigurati,
    _ref$allowSeek = _ref.allowSeek,
    allowSeek = _ref$allowSeek === void 0 ? true : _ref$allowSeek,
    onChange = _ref.onChange,
    value = _ref.value,
    max = _ref.max,
    _ref$trackColor = _ref.trackColor,
    trackColor = _ref$trackColor === void 0 ? "#333" : _ref$trackColor,
    _ref$fillColor = _ref.fillColor,
    fillColor = _ref$fillColor === void 0 ? "#FFD700" : _ref$fillColor,
    _ref$thumbColor = _ref.thumbColor,
    thumbColor = _ref$thumbColor === void 0 ? "#FFF" : _ref$thumbColor,
    _ref$vertical = _ref.vertical,
    vertical = _ref$vertical === void 0 ? false : _ref$vertical;
  var sliderRef = useRef(null);
  var fillStyle = vertical ? {
    borderRadius: "8px",
    backgroundColor: fillColor,
    height: "".concat(value / max * 100, "%"),
    width: "100%"
  } : {
    borderRadius: "8px",
    backgroundColor: fillColor,
    height: "100%",
    width: "".concat(value / max * 100, "%")
  };
  var thumbStyle = {
    position: "absolute",
    cursor: "pointer",
    transform: vertical ? "translate(-50%, 50%)" : "translate(-50%, -50%)",
    borderRadius: "50%",
    boxShadow: "0 4px 10px rgba(0, 0, 0, 0.4)",
    backgroundColor: thumbColor,
    height: "12px",
    width: "12px",
    left: vertical ? "50%" : "".concat(value / max * 100, "%"),
    top: vertical ? "".concat((1 - value / max) * 100, "%") : "50%"
  };
  var handleMouseDown = function handleMouseDown(e) {
    if (!sliderRef.current || !allowSeek) return;
    var handleMouseMove = function handleMouseMove(e) {
      if (!sliderRef.current) return;
      var rect = sliderRef.current.getBoundingClientRect();
      var newValue;
      if (vertical) {
        var yOffset = e.clientY - rect.top;
        newValue = max - Math.min(Math.max(yOffset, 0), rect.height) / rect.height * max;
      } else {
        var xOffset = e.clientX - rect.left;
        newValue = Math.min(Math.max(xOffset, 0), rect.width) / rect.width * max;
      }
      onChange(newValue);
    };
    document.addEventListener("mousemove", handleMouseMove);
    document.addEventListener("mouseup", function () {
      document.removeEventListener("mousemove", handleMouseMove);
    }, {
      once: true
    });
  };
  return /*#__PURE__*/React.createElement("div", {
    ref: sliderRef,
    onMouseDown: handleMouseDown,
    style: _objectSpread({
      position: "relative",
      display: "flex",
      alignItems: vertical ? "flex-end" : "center",
      cursor: "pointer",
      borderRadius: "5px",
      boxShadow: "0 2px 5px rgba(0, 0, 0, 0.2)",
      backgroundColor: trackColor,
      height: vertical ? "100%" : "8px",
      width: vertical ? "8px" : "100%",
      zIndex: 269
    }, sliderContainerConfigurationSettings)
  }, /*#__PURE__*/React.createElement("div", {
    style: _objectSpread(_objectSpread({}, fillStyle), fillBarConfigurationSettings)
  }), /*#__PURE__*/React.createElement("div", {
    style: _objectSpread(_objectSpread({}, thumbStyle), thumbConfigurationSettings)
  }));
}
;
export default HUDSlider;