@trap_stevo/legendarybuilderproreact-ui
Version:
The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton
192 lines • 11 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
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 * as React from "react";
import { useState, useEffect } from "react";
import { md5 } from "../HUDManagers/HUDUniversalHashingManager.js";
function HUDAvatar(_ref) {
var _ref$avatarConfigurat = _ref.avatarConfigurationSettings,
avatarConfigurationSettings = _ref$avatarConfigurat === void 0 ? {} : _ref$avatarConfigurat,
_ref$avatarConfigurat2 = _ref.avatarConfigurations,
avatarConfigurations = _ref$avatarConfigurat2 === void 0 ? {} : _ref$avatarConfigurat2,
_ref$gradientBackgrou = _ref.gradientBackground,
gradientBackground = _ref$gradientBackgrou === void 0 ? null : _ref$gradientBackgrou,
_ref$gravatarEmail = _ref.gravatarEmail,
gravatarEmail = _ref$gravatarEmail === void 0 ? null : _ref$gravatarEmail,
_ref$animationType = _ref.animationType,
animationType = _ref$animationType === void 0 ? null : _ref$animationType,
_ref$hoverEffect = _ref.hoverEffect,
hoverEffect = _ref$hoverEffect === void 0 ? null : _ref$hoverEffect,
_ref$animationTimingF = _ref.animationTimingFunction,
animationTimingFunction = _ref$animationTimingF === void 0 ? "ease-in-out" : _ref$animationTimingF,
_ref$animationIterati = _ref.animationIterationCount,
animationIterationCount = _ref$animationIterati === void 0 ? "infinite" : _ref$animationIterati,
_ref$animationDuratio = _ref.animationDuration,
animationDuration = _ref$animationDuratio === void 0 ? "2s" : _ref$animationDuratio,
_ref$rotateStart = _ref.rotateStart,
rotateStart = _ref$rotateStart === void 0 ? "0deg" : _ref$rotateStart,
_ref$rotateTo = _ref.rotateTo,
rotateTo = _ref$rotateTo === void 0 ? "360deg" : _ref$rotateTo,
_ref$glowFinish = _ref.glowFinish,
glowFinish = _ref$glowFinish === void 0 ? "0 0 5px #fff" : _ref$glowFinish,
_ref$glowStart = _ref.glowStart,
glowStart = _ref$glowStart === void 0 ? "0 0 5px #fff" : _ref$glowStart,
_ref$glowTo = _ref.glowTo,
glowTo = _ref$glowTo === void 0 ? "0 0 20px #fff" : _ref$glowTo,
_ref$dropletSizeRange = _ref.dropletSizeRange,
dropletSizeRange = _ref$dropletSizeRange === void 0 ? [4, 10] : _ref$dropletSizeRange,
_ref$dropletSpeedRang = _ref.dropletSpeedRange,
dropletSpeedRange = _ref$dropletSpeedRang === void 0 ? [2, 4] : _ref$dropletSpeedRang,
_ref$dripFromAvatar = _ref.dripFromAvatar,
dripFromAvatar = _ref$dripFromAvatar === void 0 ? false : _ref$dripFromAvatar,
_ref$dropletColor = _ref.dropletColor,
dropletColor = _ref$dropletColor === void 0 ? "#fff" : _ref$dropletColor,
_ref$dropletCount = _ref.dropletCount,
dropletCount = _ref$dropletCount === void 0 ? 5 : _ref$dropletCount,
_ref$showDroplets = _ref.showDroplets,
showDroplets = _ref$showDroplets === void 0 ? false : _ref$showDroplets,
_ref$pulseFinish = _ref.pulseFinish,
pulseFinish = _ref$pulseFinish === void 0 ? 1 : _ref$pulseFinish,
_ref$pulseStart = _ref.pulseStart,
pulseStart = _ref$pulseStart === void 0 ? 1 : _ref$pulseStart,
_ref$pulseTo = _ref.pulseTo,
pulseTo = _ref$pulseTo === void 0 ? 1.1 : _ref$pulseTo,
_ref$username = _ref.username,
username = _ref$username === void 0 ? "User" : _ref$username,
_ref$size = _ref.size,
size = _ref$size === void 0 ? 40 : _ref$size,
_ref$backgroundColor = _ref.backgroundColor,
backgroundColor = _ref$backgroundColor === void 0 ? "#1A73E8" : _ref$backgroundColor,
_ref$textColor = _ref.textColor,
textColor = _ref$textColor === void 0 ? "#fff" : _ref$textColor,
_ref$shape = _ref.shape,
shape = _ref$shape === void 0 ? "circle" : _ref$shape,
_ref$imageSRC = _ref.imageSRC,
imageSRC = _ref$imageSRC === void 0 ? null : _ref$imageSRC,
_ref$border = _ref.border,
border = _ref$border === void 0 ? "none" : _ref$border;
var _useState = useState(null),
_useState2 = _slicedToArray(_useState, 2),
profileImage = _useState2[0],
setProfileImage = _useState2[1];
var _useState3 = useState(false),
_useState4 = _slicedToArray(_useState3, 2),
isHovered = _useState4[0],
setIsHovered = _useState4[1];
var getInitials = function getInitials(name) {
if (!name || typeof name !== "string") {
return "U";
}
return name.split(" ").map(function (word) {
var _word$;
return ((_word$ = word[0]) === null || _word$ === void 0 ? void 0 : _word$.toUpperCase()) || "";
}).join("");
};
var getGravatarUrl = function getGravatarUrl(email) {
var baseUrl = "https://www.gravatar.com/avatar/";
var hash = email ? md5(email.trim().toLowerCase()).toString() : "";
return "".concat(baseUrl).concat(hash, "?d=identicon");
};
useEffect(function () {
if (gravatarEmail) {
setProfileImage(getGravatarUrl(gravatarEmail));
} else if (imageSRC) {
setProfileImage(imageSRC);
}
}, [gravatarEmail, imageSRC]);
var animations = {
pulse: "avatar-pulse ".concat(animationDuration, " ").concat(animationTimingFunction, " ").concat(animationIterationCount),
rotate: "avatar-rotate ".concat(animationDuration, " linear ").concat(animationIterationCount),
glow: "avatar-glow ".concat(animationDuration, " ").concat(animationTimingFunction, " ").concat(animationIterationCount)
};
var selectedAnimation = animationType ? animations[animationType] : "none";
var getRandomInRange = function getRandomInRange(min, max) {
return Math.random() * (max - min) + min;
};
var droplets = _toConsumableArray(Array(dropletCount)).map(function (_, index) {
return {
duration: "".concat(getRandomInRange(dropletSpeedRange[0], dropletSpeedRange[1]), "s"),
delay: "".concat(getRandomInRange(0, dropletSpeedRange[0]), "s"),
size: getRandomInRange(dropletSizeRange[0], dropletSizeRange[1]),
opacity: getRandomInRange(0.7, 1),
left: "".concat(getRandomInRange(20, 80), "%")
};
});
var avatarStyles = {
container: _objectSpread(_objectSpread({
position: "relative",
display: "flex",
justifyContent: "center",
alignItems: "center",
overflow: "visible",
fontSize: "".concat(size / 2.5, "px"),
fontWeight: "bold",
textAlign: "center",
background: gradientBackground || backgroundColor,
color: textColor,
height: "".concat(size, "px"),
width: "".concat(size, "px"),
borderRadius: shape === "circle" ? "50%" : "5px",
border: border,
transition: "0.369s",
animation: selectedAnimation
}, avatarConfigurationSettings), isHovered && hoverEffect),
image: {
display: "block",
objectFit: "cover",
height: "100%",
width: "100%"
},
fallbackText: {
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "100%",
width: "100%"
},
droplet: function droplet(size, left, delay, duration, opacity) {
return {
position: "absolute",
animation: "poolAndDrip ".concat(duration, " ease-in-out ").concat(delay, " infinite"),
transformOrigin: "center",
borderRadius: "50%",
backgroundColor: dropletColor,
height: "".concat(size, "px"),
width: "".concat(size, "px"),
opacity: opacity,
bottom: "0",
left: left
};
}
};
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("style", null, "\n @keyframes avatar-pulse {\n 0% {\n transform : scale(".concat(pulseStart, ");\n }\n 50% {\n transform : scale(").concat(pulseTo, ");\n }\n 100% {\n transform : scale(").concat(pulseFinish, ");\n }\n }\n\n @keyframes avatar-rotate {\n from {\n transform : rotate(").concat(rotateStart, ");\n }\n to {\n transform : rotate(").concat(rotateTo, ");\n }\n }\n\n @keyframes avatar-glow {\n 0% {\n box-shadow : ").concat(glowStart, ";\n }\n 50% {\n box-shadow : ").concat(glowTo, ";\n }\n 100% {\n box-shadow : ").concat(glowFinish, ";\n }\n }\n\n @keyframes poolAndDrip {\n 0% {\n transform : translateY(0) scale(0.5); /* Starting as a small pool */\n opacity : 1;\n }\n 60% {\n transform : translateY(0) scale(1); /* Pooling at the bottom */\n }\n 80% {\n opacity : 1;\n transform : translateY(10px) scale(1.1); /* Beginning to drop */\n }\n 100% {\n opacity : 0;\n transform : translateY(40px) scale(1.1); /* Falling downwards */\n }\n }\n ")), /*#__PURE__*/React.createElement("div", _extends({
style: avatarStyles.container,
"aria-label": username || "Avatar",
role: "img",
onMouseLeave: function onMouseLeave() {
return setIsHovered(false);
},
onMouseEnter: function onMouseEnter() {
return setIsHovered(true);
}
}, avatarConfigurations), profileImage ? /*#__PURE__*/React.createElement("img", {
style: avatarStyles.image,
alt: username || "Avatar",
src: profileImage,
loading: "lazy",
onError: function onError(e) {
return e.target.style.display = "none";
}
}) : /*#__PURE__*/React.createElement("div", {
style: avatarStyles.fallbackText
}, getInitials(username)), showDroplets && droplets.map(function (droplet, index) {
return /*#__PURE__*/React.createElement("div", {
key: index,
style: avatarStyles.droplet(droplet.size, droplet.left, droplet.delay, droplet.duration, droplet.opacity)
});
})));
}
export default HUDAvatar;