@trap_stevo/legendarybuilderproreact-ui
Version:
The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton
197 lines • 10.8 kB
JavaScript
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, { useEffect, useRef } from "react";
function HUDShimmer(_ref) {
var _ref$shimmerContentCo = _ref.shimmerContentContainerConfigurationSettings,
shimmerContentContainerConfigurationSettings = _ref$shimmerContentCo === void 0 ? {} : _ref$shimmerContentCo,
_ref$shimmerContainer = _ref.shimmerContainerConfigurationSettings,
shimmerContainerConfigurationSettings = _ref$shimmerContainer === void 0 ? {} : _ref$shimmerContainer,
_ref$trailingShimmerC = _ref.trailingShimmerConfigurationSettings,
trailingShimmerConfigurationSettings = _ref$trailingShimmerC === void 0 ? {} : _ref$trailingShimmerC,
_ref$textShimmerConfi = _ref.textShimmerConfigurationSettings,
textShimmerConfigurationSettings = _ref$textShimmerConfi === void 0 ? {} : _ref$textShimmerConfi,
_ref$shimmerConfigura = _ref.shimmerConfigurationSettings,
shimmerConfigurationSettings = _ref$shimmerConfigura === void 0 ? {} : _ref$shimmerConfigura,
_ref$shimmerColor = _ref.shimmerColor,
shimmerColor = _ref$shimmerColor === void 0 ? "rgba(255, 255, 255, 0.8)" : _ref$shimmerColor,
_ref$shimmerOccurrenc = _ref.shimmerOccurrence,
shimmerOccurrence = _ref$shimmerOccurrenc === void 0 ? "infinite" : _ref$shimmerOccurrenc,
_ref$shimmerDirection = _ref.shimmerDirection,
shimmerDirection = _ref$shimmerDirection === void 0 ? "right" : _ref$shimmerDirection,
_ref$shimmerSpeed = _ref.shimmerSpeed,
shimmerSpeed = _ref$shimmerSpeed === void 0 ? "2.5s" : _ref$shimmerSpeed,
_ref$shimmerOpacity = _ref.shimmerOpacity,
shimmerOpacity = _ref$shimmerOpacity === void 0 ? 0.5 : _ref$shimmerOpacity,
_ref$shimmerStartDela = _ref.shimmerStartDelay,
shimmerStartDelay = _ref$shimmerStartDela === void 0 ? "0s" : _ref$shimmerStartDela,
_ref$shimmerDelay = _ref.shimmerDelay,
shimmerDelay = _ref$shimmerDelay === void 0 ? "0s" : _ref$shimmerDelay,
_ref$shimmerBlur = _ref.shimmerBlur,
shimmerBlur = _ref$shimmerBlur === void 0 ? 2 : _ref$shimmerBlur,
_ref$trailingShimmerC2 = _ref.trailingShimmerColor,
trailingShimmerColor = _ref$trailingShimmerC2 === void 0 ? "rgba(255, 255, 255, 0.3)" : _ref$trailingShimmerC2,
_ref$trailingShimmerO = _ref.trailingShimmerOccurrence,
trailingShimmerOccurrence = _ref$trailingShimmerO === void 0 ? "infinite" : _ref$trailingShimmerO,
_ref$trailingShimmerS = _ref.trailingShimmerSpeed,
trailingShimmerSpeed = _ref$trailingShimmerS === void 0 ? "3s" : _ref$trailingShimmerS,
_ref$trailingShimmerO2 = _ref.trailingShimmerOpacity,
trailingShimmerOpacity = _ref$trailingShimmerO2 === void 0 ? 0.3 : _ref$trailingShimmerO2,
_ref$trailingShimmerS2 = _ref.trailingShimmerStartDelay,
trailingShimmerStartDelay = _ref$trailingShimmerS2 === void 0 ? "0s" : _ref$trailingShimmerS2,
_ref$trailingShimmerD = _ref.trailingShimmerDelay,
trailingShimmerDelay = _ref$trailingShimmerD === void 0 ? "0s" : _ref$trailingShimmerD,
_ref$trailingShimmerB = _ref.trailingShimmerBlur,
trailingShimmerBlur = _ref$trailingShimmerB === void 0 ? 4 : _ref$trailingShimmerB,
_ref$textShimmerBlur = _ref.textShimmerBlur,
textShimmerBlur = _ref$textShimmerBlur === void 0 ? 12 : _ref$textShimmerBlur,
_ref$mode = _ref.mode,
mode = _ref$mode === void 0 ? "default" : _ref$mode,
children = _ref.children;
var trailingRef = useRef();
var shimmerRef = useRef();
var textMode = mode === "text";
useEffect(function () {
var styleSheet = document.styleSheets[0];
var generateKeyframes = function generateKeyframes(direction) {
switch (direction) {
case "up":
return "0% { transform: translateY(100%); } 100% { transform: translateY(-100%); }";
case "down":
return "0% { transform: translateY(-100%); } 100% { transform: translateY(100%); }";
case "left":
return "0% { transform: translateX(100%); } 100% { transform: translateX(-100%); }";
case "upper-left":
return "0% { transform: translate(100%, 100%); } 100% { transform: translate(-100%, -100%); }";
case "upper-right":
return "0% { transform: translate(-100%, 100%); } 100% { transform: translate(100%, -100%); }";
case "bottom-left":
return "0% { transform: translate(100%, -100%); } 100% { transform: translate(-100%, 100%); }";
case "bottom-right":
return "0% { transform: translate(-100%, -100%); } 100% { transform: translate(100%, 100%); }";
default:
return "0% { transform: translateX(-100%); } 100% { transform: translateX(100%); }";
}
};
var animationName = "shimmer-".concat(shimmerDirection);
var existingRule = Array.from(styleSheet.cssRules).find(function (rule) {
return rule.name === animationName;
});
if (!existingRule) {
styleSheet.insertRule("\n @keyframes ".concat(animationName, " {\n ").concat(generateKeyframes(shimmerDirection), "\n }\n "), styleSheet.cssRules.length);
}
}, [shimmerDirection]);
useEffect(function () {
var trailingElement = trailingRef.current;
var shimmerElement = shimmerRef.current;
if (!shimmerElement || !trailingElement) {
return;
}
var applyAnimation = function applyAnimation(element, animation, speed, delay, startDelay, opacity) {
var animationDuration = parseFloat(speed) * 1000;
var delayDuration = parseFloat(delay) * 1000;
var startDelayDuration = parseFloat(startDelay) * 1000;
var startDelayOnly = !!startDelayDuration;
if (startDelayOnly) {
setTimeout(function () {
element.style.opacity = opacity;
element.style.animation = animation;
}, startDelayDuration);
return;
}
var animate = function animate() {
element.style.animation = "none";
element.style.opacity = "0";
setTimeout(function () {
element.style.opacity = opacity;
element.style.animation = animation;
}, delayDuration);
};
animate();
var interval = setInterval(animate, animationDuration + delayDuration);
return function () {
return clearInterval(interval);
};
};
var shimmerCleanup = applyAnimation(shimmerElement, "shimmer-".concat(shimmerDirection, " ").concat(shimmerSpeed, " linear"), shimmerSpeed, shimmerDelay, shimmerStartDelay, shimmerOpacity);
var trailingCleanup = applyAnimation(trailingElement, "shimmer-".concat(shimmerDirection, " ").concat(trailingShimmerSpeed, " ease-in-out"), trailingShimmerSpeed, trailingShimmerDelay, trailingShimmerStartDelay, trailingShimmerOpacity);
return function () {
shimmerCleanup && shimmerCleanup();
trailingCleanup && trailingCleanup();
};
}, [shimmerSpeed, shimmerDelay, shimmerStartDelay, shimmerOccurrence, shimmerDirection, trailingShimmerDelay, trailingShimmerStartDelay, trailingShimmerSpeed, trailingShimmerOccurrence, shimmerOpacity, trailingShimmerOpacity]);
return /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
position: "relative",
display: "inline-block",
overflow: "hidden",
isolation: "isolate"
}, shimmerContainerConfigurationSettings)
}, textMode ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
style: _objectSpread({
position: "relative",
display: "inline-block",
color: "inherit",
zIndex: 2
}, shimmerContentContainerConfigurationSettings)
}, children), /*#__PURE__*/React.createElement("span", {
ref: shimmerRef,
style: _objectSpread({
position: "absolute",
pointerEvents: "none",
animation: "shimmer-".concat(shimmerDirection, " ").concat(shimmerSpeed, " linear ").concat(shimmerDelay, " ").concat(shimmerOccurrence),
filter: "blur(".concat(textShimmerBlur, "px)"),
backgroundSize: "200% 100%",
WebkitBackgroundClip: "text",
backgroundClip: "text",
background: "linear-gradient(90deg, transparent, ".concat(shimmerColor, " 50%, transparent)"),
color: "transparent",
height: "100%",
width: "100%",
opacity: shimmerOpacity,
zIndex: 1869,
left: 0,
top: 0
}, textShimmerConfigurationSettings)
}, children)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
ref: shimmerRef,
style: _objectSpread({
position: "absolute",
pointerEvents: "none",
animation: "shimmer-".concat(shimmerDirection, " ").concat(shimmerSpeed, " linear ").concat(shimmerDelay, " ").concat(shimmerOccurrence),
backgroundSize: "200% 100%",
filter: "blur(".concat(shimmerBlur, "px)"),
mixBlendMode: "overlay",
background: "linear-gradient(90deg, transparent, ".concat(shimmerColor, " 50%, transparent)"),
height: "100%",
width: "250%",
opacity: shimmerOpacity,
zIndex: 869,
left: "-150%",
top: 0
}, shimmerConfigurationSettings)
}), /*#__PURE__*/React.createElement("div", {
ref: trailingRef,
style: _objectSpread({
position: "absolute",
pointerEvents: "none",
animation: "shimmer-".concat(shimmerDirection, " ").concat(trailingShimmerSpeed, " ease-in-out ").concat(trailingShimmerDelay, " ").concat(trailingShimmerOccurrence),
backgroundSize: "200% 100%",
filter: "blur(".concat(trailingShimmerBlur, "px)"),
mixBlendMode: "overlay",
background: "linear-gradient(90deg, transparent, ".concat(trailingShimmerColor, " 50%, transparent)"),
opacity: trailingShimmerOpacity,
zIndex: 869,
height: "100%",
width: "250%",
left: "-150%",
top: 0
}, trailingShimmerConfigurationSettings)
}), /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
position: "relative",
zIndex: 2
}, shimmerContentContainerConfigurationSettings)
}, children)));
}
export default HUDShimmer;