@trap_stevo/legendarybuilderproreact-ui
Version:
The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton
177 lines • 10.1 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, { useMemo, useState, useEffect, useRef } from "react";
import { HUDUniversalHUDUtilityManager } from "../HUDManagers/HUDUniversalHUDUtilityManager.js";
var interpolateColor = function interpolateColor(startColor, endColor, factor) {
if (!startColor || !endColor) {
return startColor || "#000000";
}
var result = startColor.slice();
for (var i = 0; i < 3; i++) {
result[i] = Math.round(result[i] + factor * (endColor[i] - startColor[i]));
}
if (startColor.length === 4 && endColor.length === 4) {
result[3] = startColor[3] + factor * (endColor[3] - startColor[3]);
}
return result;
};
var hexToRgb = function hexToRgb(hex) {
if (!/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
return [0, 0, 0];
}
if (hex.length === 4) {
hex = "#".concat(hex[1]).concat(hex[1]).concat(hex[2]).concat(hex[2]).concat(hex[3]).concat(hex[3]);
}
var bigint = parseInt(hex.slice(1), 16);
return [bigint >> 16 & 255, bigint >> 8 & 255, bigint & 255];
};
var rgbToHex = function rgbToHex(rgbArray) {
if (!Array.isArray(rgbArray) || rgbArray.length < 3) {
return "#000000";
}
return "#".concat(rgbArray.slice(0, 3).map(function (x) {
var hex = x.toString(16);
return hex.length === 1 ? "0" + hex : hex;
}).join(""));
};
var parseSize = function parseSize(size) {
var match = size.match(/^([0-9.]+)([a-z%]*)$/i);
if (!match) return {
value: 0,
unit: "px"
};
return {
value: parseFloat(match[1]),
unit: match[2] || "px"
};
};
var parseColor = function parseColor(color) {
if (!color) {
return [0, 0, 0];
}
if (color.startsWith("#")) {
return hexToRgb(color);
}
var rgbaMatch = color.match(/(\d+(\.\d+)?)/g);
if (!rgbaMatch || rgbaMatch.length < 3) {
return [0, 0, 0];
}
var rgbaArray = rgbaMatch.map(function (value, index) {
return index === 3 ? parseFloat(value) : parseInt(value, 10);
});
return rgbaArray;
};
var getInterpolatedColor = function getInterpolatedColor(colorsArray, scrollPercentage) {
if (!Array.isArray(colorsArray) || colorsArray.length < 2) {
return "#000000";
}
var segment = 100 / (colorsArray.length - 1);
var index = Math.floor(scrollPercentage / segment);
var nextIndex = Math.min(index + 1, colorsArray.length - 1);
var startColor = parseColor(colorsArray[index]);
var endColor = parseColor(colorsArray[nextIndex]);
if (!startColor || !endColor) {
return "#000000";
}
var segmentProgress = (scrollPercentage - index * segment) / segment;
var interpolatedRGB = interpolateColor(startColor, endColor, segmentProgress);
if (startColor.length === 4 || endColor.length === 4) {
return "rgba(".concat(interpolatedRGB.slice(0, 3).join(","), ", ").concat(interpolatedRGB[3].toFixed(2), ")");
}
if (colorsArray[0].startsWith("#")) {
return rgbToHex(interpolatedRGB);
}
return "rgb(".concat(interpolatedRGB.slice(0, 3).join(","), ")");
};
function HUDScrollContainer(_ref) {
var _ref$containerConfigu = _ref.containerConfigurationSettings,
containerConfigurationSettings = _ref$containerConfigu === void 0 ? {} : _ref$containerConfigu,
_ref$containerConfigu2 = _ref.containerConfigurations,
containerConfigurations = _ref$containerConfigu2 === void 0 ? {} : _ref$containerConfigu2,
_ref$hoverThumbColor = _ref.hoverThumbColor,
hoverThumbColor = _ref$hoverThumbColor === void 0 ? "#555" : _ref$hoverThumbColor,
_ref$borderRadius = _ref.borderRadius,
borderRadius = _ref$borderRadius === void 0 ? "10px" : _ref$borderRadius,
_ref$trackColor = _ref.trackColor,
trackColor = _ref$trackColor === void 0 ? "#f1f1f1" : _ref$trackColor,
_ref$thumbColor = _ref.thumbColor,
thumbColor = _ref$thumbColor === void 0 ? "#888" : _ref$thumbColor,
_ref$width = _ref.width,
width = _ref$width === void 0 ? "8px" : _ref$width,
_ref$horizontalScroll = _ref.horizontalScrollHeight,
horizontalScrollHeight = _ref$horizontalScroll === void 0 ? "8px" : _ref$horizontalScroll,
_ref$nearScrollBarFac = _ref.nearScrollBarFactor,
nearScrollBarFactor = _ref$nearScrollBarFac === void 0 ? 1.469 : _ref$nearScrollBarFac,
_ref$scrollContainerR = _ref.scrollContainerRef,
scrollContainerRef = _ref$scrollContainerR === void 0 ? null : _ref$scrollContainerR,
_ref$thumbGradient = _ref.thumbGradient,
thumbGradient = _ref$thumbGradient === void 0 ? null : _ref$thumbGradient,
_ref$trackGradient = _ref.trackGradient,
trackGradient = _ref$trackGradient === void 0 ? null : _ref$trackGradient,
_ref$scrollThumbColor = _ref.scrollThumbColors,
scrollThumbColors = _ref$scrollThumbColor === void 0 ? [] : _ref$scrollThumbColor,
_ref$threshold = _ref.threshold,
threshold = _ref$threshold === void 0 ? 30 : _ref$threshold,
onScroll = _ref.onScroll,
children = _ref.children;
var _useState = useState(thumbGradient ? thumbGradient : thumbColor),
_useState2 = _slicedToArray(_useState, 2),
thumbScrollColor = _useState2[0],
setThumbScrollColor = _useState2[1];
var _useState3 = useState(false),
_useState4 = _slicedToArray(_useState3, 2),
nearBottomScrollbar = _useState4[0],
setNearBottomScrollbar = _useState4[1];
var _useState5 = useState(false),
_useState6 = _slicedToArray(_useState5, 2),
nearScrollbar = _useState6[0],
setNearScrollbar = _useState6[1];
var _useState7 = useState(0),
_useState8 = _slicedToArray(_useState7, 2),
scrollPosition = _useState8[0],
setScrollPosition = _useState8[1];
var containerClassName = useMemo(function () {
return "scroll-bar-".concat(Math.random().toString(36).substr(2, 9));
}, []);
var internalContainerRef = useRef(null);
var containerRef = scrollContainerRef || internalContainerRef;
var parsedHeight = parseSize(horizontalScrollHeight);
var parsedWidth = parseSize(width);
var handleScroll = function handleScroll(e) {
var _e$target = e.target,
scrollTop = _e$target.scrollTop,
scrollHeight = _e$target.scrollHeight,
clientHeight = _e$target.clientHeight;
var scrollPercentage = scrollTop / (scrollHeight - clientHeight) * 100;
setScrollPosition(scrollPercentage);
var newThumbColor = scrollThumbColors.length ? getInterpolatedColor(scrollThumbColors, scrollPercentage) : thumbGradient ? thumbGradient : thumbColor;
setThumbScrollColor(newThumbColor);
if (onScroll) {
onScroll(e, scrollPercentage, newThumbColor);
}
};
var handleMouseMove = function handleMouseMove(e) {
HUDUniversalHUDUtilityManager.CheckMouseNearEdge(e, threshold, "bottom", containerRef, function (nearby) {
setNearBottomScrollbar(nearby);
});
HUDUniversalHUDUtilityManager.CheckMouseNearEdge(e, threshold, "right", containerRef, function (nearby) {
setNearScrollbar(nearby);
});
return;
};
var customStyles = "\n .".concat(containerClassName, "::-webkit-scrollbar {\n transition : \"height 0.69s ease, width 0.69s ease\";\n height : ").concat(nearBottomScrollbar ? parsedHeight.value * nearScrollBarFactor + parsedHeight.unit : horizontalScrollHeight, ";\n width : ").concat(nearScrollbar ? parsedWidth.value * nearScrollBarFactor + parsedWidth.unit : width, ";\n }\n \n .").concat(containerClassName, "::-webkit-scrollbar-track {\n transition : background 0.369s ease;\n cursor : pointer;\n border-radius : ").concat(borderRadius, ";\n background : ").concat(trackGradient ? trackGradient : trackColor, ";\n }\n \n .").concat(containerClassName, "::-webkit-scrollbar-thumb {\n transition : background 0.369s ease;\n ").concat(nearScrollbar ? "box-shadow : 0 0 10px rgba(0, 0, 0, 0.369);" : "", "\n cursor : grab;\n border-radius : ").concat(borderRadius, ";\n background : ").concat(thumbScrollColor, ";\n }\n \n .").concat(containerClassName, "::-webkit-scrollbar-thumb:hover {\n transform : scale(1.269);\n box-shadow : 0 0 15px rgba(0, 0, 0, 0.569);\n background : ").concat(hoverThumbColor, ";\n }\n \n .").concat(containerClassName, " {\n transition : \"scrollbar-width 0.69s ease\";\n scrollbar-color : ").concat(thumbColor, " ").concat(trackColor, "; \n scrollbar-width : ").concat(nearScrollbar ? parsedWidth.value * 1.469 + parsedWidth.unit : width, ";\n }\n \n .").concat(containerClassName, " {\n overflow : auto;\n -ms-overflow-style : none;\n ms-overflow-style : none;\n }\n \n .").concat(containerClassName, "::-ms-scrollbar {\n display : none;\n }\n ");
return /*#__PURE__*/React.createElement("div", _extends({
ref: containerRef,
className: containerClassName,
style: _objectSpread(_objectSpread({}, containerConfigurationSettings), {}, {
overflow: "auto"
}),
onMouseMove: handleMouseMove,
onScroll: handleScroll
}, containerConfigurations), /*#__PURE__*/React.createElement("style", null, customStyles), children);
}
;
export default HUDScrollContainer;