@trap_stevo/legendarybuilderproreact-ui
Version:
The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton
179 lines • 10 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _typeof from "@babel/runtime/helpers/typeof";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["progressPercentageLabelConfigurationSettings", "progressBarBackgroundConfigurationSettings", "progressBarContainerConfigurationSettings", "progressBarConfigurationSettings", "onPercentages", "onComplete", "onStart", "displayPercentageWithinBar", "displayPercentage", "currentPercentage", "animateDuration", "animateTo", "mode", "backgroundColor", "progressColor", "transitionDuration", "borderRadius", "height"];
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 * as React from "react";
import { useState, useEffect } from "react";
function HUDProgressBar(hudProgressBarConfigurationSettings) {
var _hudProgressBarConfig = hudProgressBarConfigurationSettings.progressPercentageLabelConfigurationSettings,
progressPercentageLabelConfigurationSettings = _hudProgressBarConfig === void 0 ? {} : _hudProgressBarConfig,
_hudProgressBarConfig2 = hudProgressBarConfigurationSettings.progressBarBackgroundConfigurationSettings,
progressBarBackgroundConfigurationSettings = _hudProgressBarConfig2 === void 0 ? {} : _hudProgressBarConfig2,
_hudProgressBarConfig3 = hudProgressBarConfigurationSettings.progressBarContainerConfigurationSettings,
progressBarContainerConfigurationSettings = _hudProgressBarConfig3 === void 0 ? {} : _hudProgressBarConfig3,
_hudProgressBarConfig4 = hudProgressBarConfigurationSettings.progressBarConfigurationSettings,
progressBarConfigurationSettings = _hudProgressBarConfig4 === void 0 ? {} : _hudProgressBarConfig4,
_hudProgressBarConfig5 = hudProgressBarConfigurationSettings.onPercentages,
onPercentages = _hudProgressBarConfig5 === void 0 ? {} : _hudProgressBarConfig5,
_hudProgressBarConfig6 = hudProgressBarConfigurationSettings.onComplete,
onComplete = _hudProgressBarConfig6 === void 0 ? null : _hudProgressBarConfig6,
_hudProgressBarConfig7 = hudProgressBarConfigurationSettings.onStart,
onStart = _hudProgressBarConfig7 === void 0 ? null : _hudProgressBarConfig7,
_hudProgressBarConfig8 = hudProgressBarConfigurationSettings.displayPercentageWithinBar,
displayPercentageWithinBar = _hudProgressBarConfig8 === void 0 ? false : _hudProgressBarConfig8,
_hudProgressBarConfig9 = hudProgressBarConfigurationSettings.displayPercentage,
displayPercentage = _hudProgressBarConfig9 === void 0 ? true : _hudProgressBarConfig9,
_hudProgressBarConfig10 = hudProgressBarConfigurationSettings.currentPercentage,
currentPercentage = _hudProgressBarConfig10 === void 0 ? 0 : _hudProgressBarConfig10,
_hudProgressBarConfig11 = hudProgressBarConfigurationSettings.animateDuration,
animateDuration = _hudProgressBarConfig11 === void 0 ? 2000 : _hudProgressBarConfig11,
_hudProgressBarConfig12 = hudProgressBarConfigurationSettings.animateTo,
animateTo = _hudProgressBarConfig12 === void 0 ? 100 : _hudProgressBarConfig12,
_hudProgressBarConfig13 = hudProgressBarConfigurationSettings.mode,
mode = _hudProgressBarConfig13 === void 0 ? "interval" : _hudProgressBarConfig13,
_hudProgressBarConfig14 = hudProgressBarConfigurationSettings.backgroundColor,
backgroundColor = _hudProgressBarConfig14 === void 0 ? "rgba(227, 227, 227, 1)" : _hudProgressBarConfig14,
_hudProgressBarConfig15 = hudProgressBarConfigurationSettings.progressColor,
progressColor = _hudProgressBarConfig15 === void 0 ? "rgba(187, 27, 27, 1)" : _hudProgressBarConfig15,
_hudProgressBarConfig16 = hudProgressBarConfigurationSettings.transitionDuration,
transitionDuration = _hudProgressBarConfig16 === void 0 ? "0.1069s" : _hudProgressBarConfig16,
_hudProgressBarConfig17 = hudProgressBarConfigurationSettings.borderRadius,
borderRadius = _hudProgressBarConfig17 === void 0 ? "0.569rem" : _hudProgressBarConfig17,
_hudProgressBarConfig18 = hudProgressBarConfigurationSettings.height,
height = _hudProgressBarConfig18 === void 0 ? "0.269rem" : _hudProgressBarConfig18,
rest = _objectWithoutProperties(hudProgressBarConfigurationSettings, _excluded);
var _useState = useState({}),
_useState2 = _slicedToArray(_useState, 2),
executedPercentages = _useState2[0],
setExecutedPercentages = _useState2[1];
var _useState3 = useState(0),
_useState4 = _slicedToArray(_useState3, 2),
internalPercentage = _useState4[0],
setInternalPercentage = _useState4[1];
var _useState5 = useState(false),
_useState6 = _slicedToArray(_useState5, 2),
readyToAnimate = _useState6[0],
setReadyToAnimate = _useState6[1];
var _useState7 = useState(false),
_useState8 = _slicedToArray(_useState7, 2),
started = _useState8[0],
setStarted = _useState8[1];
var currentValue = mode === "toggle" ? internalPercentage : currentPercentage;
var formatted = Math.min(100, Math.max(0, currentValue)).toFixed(2);
useEffect(function () {
if (mode !== "toggle") {
return;
}
setExecutedPercentages({});
setReadyToAnimate(false);
setInternalPercentage(0);
setStarted(false);
requestAnimationFrame(function () {
setReadyToAnimate(true);
setInternalPercentage(animateTo);
});
}, [mode, animateTo]);
useEffect(function () {
var pct = parseFloat(formatted);
var timeoutHandles = [];
if (pct > 0 && !started) {
setStarted(true);
onStart === null || onStart === void 0 || onStart();
if (mode === "toggle" && onComplete) {
setTimeout(function () {
onComplete === null || onComplete === void 0 || onComplete();
}, animateDuration);
}
}
if (mode === "interval" && pct >= 100) {
onComplete === null || onComplete === void 0 || onComplete();
}
if (mode === "interval" && onPercentages && _typeof(onPercentages) === "object") {
Object.entries(onPercentages).forEach(function (_ref) {
var _ref2 = _slicedToArray(_ref, 2),
thresholdKey = _ref2[0],
callback = _ref2[1];
var threshold = parseFloat(thresholdKey);
if (!isNaN(threshold) && threshold > 0 && threshold < 100 && pct >= threshold && typeof callback === "function" && !executedPercentages[threshold]) {
callback();
setExecutedPercentages(function (prev) {
return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, threshold, true));
});
}
});
}
if (mode === "toggle" && onPercentages && _typeof(onPercentages) === "object") {
Object.entries(onPercentages).forEach(function (_ref3) {
var _ref4 = _slicedToArray(_ref3, 2),
thresholdStr = _ref4[0],
callback = _ref4[1];
var threshold = parseFloat(thresholdStr);
if (!isNaN(threshold) && typeof callback === "function" && threshold >= 0 && threshold <= 100) {
var delay = animateDuration * threshold / 100;
var timeout = setTimeout(function () {
callback();
setExecutedPercentages(function (prev) {
return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, threshold, true));
});
}, delay);
timeoutHandles.push(timeout);
}
});
}
return function () {
timeoutHandles.forEach(clearTimeout);
};
}, [mode, formatted, started, onStart, onComplete, onPercentages, executedPercentages]);
return /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread({
display: "flex",
alignItems: "center",
width: "100%",
gap: "0.69rem"
}, progressBarContainerConfigurationSettings)
}, rest), /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
position: "relative",
flex: 1,
overflow: "hidden",
borderRadius: borderRadius,
backgroundColor: backgroundColor,
height: height,
width: "100%"
}, progressBarBackgroundConfigurationSettings)
}, /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
position: "absolute",
willChange: "width",
transition: mode === "toggle" && readyToAnimate ? "width ".concat(animateDuration, "ms linear") : mode !== "toggle" ? "width ".concat(transitionDuration, " ease-in-out") : "none",
borderRadius: borderRadius,
backgroundColor: progressColor,
width: "".concat(formatted, "%"),
bottom: 0,
left: 0,
top: 0
}, progressBarConfigurationSettings)
}, displayPercentageWithinBar && displayPercentage && /*#__PURE__*/React.createElement("span", {
style: _objectSpread({
position: "absolute",
transform: "translateY(-50%)",
fontWeight: 500,
fontSize: "0.75rem",
color: "#fff",
right: "0.5rem",
top: "50%"
}, progressPercentageLabelConfigurationSettings)
}, formatted, "%"))), !displayPercentageWithinBar && displayPercentage && /*#__PURE__*/React.createElement("span", {
style: _objectSpread({
fontWeight: 500,
fontSize: "0.75rem",
color: "#333"
}, progressPercentageLabelConfigurationSettings)
}, formatted, "%"));
}
;
export default HUDProgressBar;