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

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

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, { useState } from "react";
var skeletonAnimations = "\n@keyframes shimmer {\n    0% { background-position: -200% 0; }\n    100% { background-position: 200% 0; }\n}\n\n@keyframes pulse {\n    0% { opacity: 1; }\n    50% { opacity: 0.5; }\n    100% { opacity: 1; }\n}\n\n@keyframes fade {\n    0% { opacity: 1; }\n    100% { opacity: 0.5; }\n}\n\n@keyframes flash {\n    0% { opacity: 1; }\n    50% { opacity: 0.2; }\n    100% { opacity: 1; }\n}\n\n@keyframes ripple {\n    0% { transform: scale(0); opacity: 1; }\n    100% { transform: scale(4); opacity: 0; }\n}\n\n@keyframes colorShift {\n    0% { background: linear-gradient(90deg, rgba(255, 0, 150, 0.5), rgba(0, 204, 255, 0.5)); }\n    50% { background: linear-gradient(90deg, rgba(0, 204, 255, 0.5), rgba(255, 0, 150, 0.5)); }\n    100% { background: linear-gradient(90deg, rgba(255, 0, 150, 0.5), rgba(0, 204, 255, 0.5)); }\n}\n\n@keyframes glowPulse {\n    0% { box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); }\n    50% { box-shadow: 0 0 20px rgba(255, 255, 255, 0.7); }\n    100% { box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); }\n}\n\n@keyframes morph {\n    0% { border-radius: 0%; }\n    50% { border-radius: 50%; }\n    100% { border-radius: 0%; }\n}\n\n@keyframes scalePulse {\n    0% { transform: scale(1); }\n    50% { transform: scale(1.1); }\n    100% { transform: scale(1); }\n}\n\n@keyframes rotateSpin {\n    0% { transform: rotate(0deg); }\n    100% { transform: rotate(360deg); }\n}\n\n@keyframes flip {\n    0% { transform: rotateY(0deg); }\n    100% { transform: rotateY(360deg); }\n}\n";
var Skeleton = function Skeleton(_ref) {
  var _ref$skeletonConfigur = _ref.skeletonConfigurationSettings,
    skeletonConfigurationSettings = _ref$skeletonConfigur === void 0 ? {} : _ref$skeletonConfigur,
    _ref$direction = _ref.direction,
    direction = _ref$direction === void 0 ? "stack" : _ref$direction,
    _ref$width = _ref.width,
    width = _ref$width === void 0 ? "100%" : _ref$width,
    _ref$height = _ref.height,
    height = _ref$height === void 0 ? "3.69rem" : _ref$height,
    _ref$shape = _ref.shape,
    shape = _ref$shape === void 0 ? "rect" : _ref$shape,
    _ref$animationVariant = _ref.animationVariant,
    animationVariant = _ref$animationVariant === void 0 ? "shimmer" : _ref$animationVariant,
    _ref$animationDuratio = _ref.animationDuration,
    animationDuration = _ref$animationDuratio === void 0 ? "1.269s" : _ref$animationDuratio,
    _ref$gradient = _ref.gradient,
    gradient = _ref$gradient === void 0 ? null : _ref$gradient,
    _ref$gap = _ref.gap,
    gap = _ref$gap === void 0 ? "10px" : _ref$gap,
    _ref$count = _ref.count,
    count = _ref$count === void 0 ? 1 : _ref$count,
    _ref$pattern = _ref.pattern,
    pattern = _ref$pattern === void 0 ? "none" : _ref$pattern,
    _ref$enableRipple = _ref.enableRipple,
    enableRipple = _ref$enableRipple === void 0 ? false : _ref$enableRipple,
    _ref$enableTilting = _ref.enableTilting,
    enableTilting = _ref$enableTilting === void 0 ? false : _ref$enableTilting,
    _ref$enableScalePulse = _ref.enableScalePulse,
    enableScalePulse = _ref$enableScalePulse === void 0 ? false : _ref$enableScalePulse,
    _ref$enableRotateSpin = _ref.enableRotateSpin,
    enableRotateSpin = _ref$enableRotateSpin === void 0 ? false : _ref$enableRotateSpin,
    _ref$enableGlow = _ref.enableGlow,
    enableGlow = _ref$enableGlow === void 0 ? false : _ref$enableGlow,
    _ref$enableFlip = _ref.enableFlip,
    enableFlip = _ref$enableFlip === void 0 ? false : _ref$enableFlip,
    _ref$tiltingOnHover = _ref.tiltingOnHover,
    tiltingOnHover = _ref$tiltingOnHover === void 0 ? false : _ref$tiltingOnHover,
    _ref$tiltingDegree = _ref.tiltingDegree,
    tiltingDegree = _ref$tiltingDegree === void 0 ? 10 : _ref$tiltingDegree,
    _ref$hoverOpacity = _ref.hoverOpacity,
    hoverOpacity = _ref$hoverOpacity === void 0 ? 1 : _ref$hoverOpacity,
    _ref$hoverScale = _ref.hoverScale,
    hoverScale = _ref$hoverScale === void 0 ? 1.05 : _ref$hoverScale,
    _ref$shapeOnHover = _ref.shapeOnHover,
    shapeOnHover = _ref$shapeOnHover === void 0 ? null : _ref$shapeOnHover,
    _ref$enableProgress = _ref.enableProgress,
    enableProgress = _ref$enableProgress === void 0 ? false : _ref$enableProgress,
    _ref$progressPercenta = _ref.progressPercentage,
    progressPercentage = _ref$progressPercenta === void 0 ? 50 : _ref$progressPercenta,
    _ref$enableShadow = _ref.enableShadow,
    enableShadow = _ref$enableShadow === void 0 ? false : _ref$enableShadow,
    _ref$shadowStrength = _ref.shadowStrength,
    shadowStrength = _ref$shadowStrength === void 0 ? 10 : _ref$shadowStrength,
    _ref$enableGlassEffec = _ref.enableGlassEffect,
    enableGlassEffect = _ref$enableGlassEffec === void 0 ? false : _ref$enableGlassEffec,
    _ref$loadingState = _ref.loadingState,
    loadingState = _ref$loadingState === void 0 ? "none" : _ref$loadingState,
    _ref$enableMorph = _ref.enableMorph,
    enableMorph = _ref$enableMorph === void 0 ? false : _ref$enableMorph,
    _ref$morphDuration = _ref.morphDuration,
    morphDuration = _ref$morphDuration === void 0 ? "2s" : _ref$morphDuration;
  var _useState = useState(null),
    _useState2 = _slicedToArray(_useState, 2),
    hoveredIndex = _useState2[0],
    setHoveredIndex = _useState2[1];
  var _useState3 = useState({}),
    _useState4 = _slicedToArray(_useState3, 2),
    tiltStyle = _useState4[0],
    setTiltStyle = _useState4[1];
  var handleMouseMove = function handleMouseMove(e, index) {
    if (tiltingOnHover && hoveredIndex === index) {
      var _e$currentTarget = e.currentTarget,
        _width = _e$currentTarget.offsetWidth,
        _height = _e$currentTarget.offsetHeight,
        left = _e$currentTarget.offsetLeft,
        top = _e$currentTarget.offsetTop;
      var x = e.pageX - left - _width / 2;
      var y = e.pageY - top - _height / 2;
      var rotateX = y / _height * tiltingDegree;
      var rotateY = -(x / _width) * tiltingDegree;
      setTiltStyle({
        transform: "perspective(1000px) rotateX(".concat(rotateX, "deg) rotateY(").concat(rotateY, "deg) scale(").concat(hoverScale, ")")
      });
    }
    if (enableRipple && hoveredIndex === index) {
      var ripple = document.createElement("span");
      var diameter = Math.max(e.currentTarget.clientWidth, e.currentTarget.clientHeight);
      var radius = diameter / 2;
      ripple.style.width = ripple.style.height = "".concat(diameter, "px");
      ripple.style.left = "".concat(e.clientX - e.currentTarget.offsetLeft - radius, "px");
      ripple.style.top = "".concat(e.clientY - e.currentTarget.offsetTop - radius, "px");
      ripple.classList.add("ripple");
      e.currentTarget.appendChild(ripple);
      setTimeout(function () {
        ripple.remove();
      }, 600);
    }
  };
  var handleMouseEnter = function handleMouseEnter(index) {
    setHoveredIndex(index);
  };
  var handleMouseLeave = function handleMouseLeave() {
    setHoveredIndex(null);
    setTiltStyle({});
  };
  var shapeStyles = {
    rect: {
      borderRadius: "4px"
    },
    circle: {
      borderRadius: "50%"
    },
    rounded: {
      borderRadius: "12px"
    },
    square: {
      borderRadius: "0px"
    }
  };
  var animationStyles = {
    shimmer: "shimmer ".concat(animationDuration, " ease-in-out infinite"),
    pulse: "pulse ".concat(animationDuration, " ease-in-out infinite"),
    fade: "fade ".concat(animationDuration, " ease-in-out infinite"),
    flash: "flash ".concat(animationDuration, " ease-in-out infinite"),
    colorShift: "colorShift ".concat(animationDuration, " ease-in-out infinite"),
    rotateSpin: "rotateSpin ".concat(animationDuration, " ease-in-out infinite"),
    scalePulse: "scalePulse ".concat(animationDuration, " ease-in-out infinite"),
    flip: "flip ".concat(animationDuration, " ease-in-out infinite"),
    glowPulse: "glowPulse ".concat(animationDuration, " ease-in-out infinite"),
    morph: "morph ".concat(morphDuration, " ease-in-out infinite")
  };
  var patternStyles = {
    stripes: {
      backgroundImage: "linear-gradient(45deg, rgba(255,255,255,0.1) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.1) 75%, transparent 75%, transparent)",
      backgroundSize: "20px 20px",
      animation: "stripeMove ".concat(animationDuration, " linear infinite")
    },
    dots: {
      backgroundImage: "radial-gradient(circle, rgba(255,255,255,0.1) 20%, transparent 20%)",
      backgroundSize: "10px 10px",
      animation: "dotMove ".concat(animationDuration, " linear infinite")
    },
    grid: {
      backgroundImage: "linear-gradient(to right, rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.1) 1px, transparent 1px)",
      backgroundSize: "20px 20px"
    }
  };
  var advancedAnimations = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, enableTilting && {
    transition: 'transform 0.2s ease'
  }), enableScalePulse && {
    animation: "scalePulse ".concat(animationDuration, " ease-in-out infinite")
  }), enableRotateSpin && {
    animation: "rotateSpin ".concat(animationDuration, " linear infinite")
  }), enableGlow && {
    animation: "glowPulse ".concat(animationDuration, " ease-in-out infinite")
  }), enableFlip && {
    animation: "flip ".concat(animationDuration, " ease-in-out infinite")
  }), enableShadow && {
    boxShadow: "0 4px ".concat(shadowStrength, "px rgba(0, 0, 0, 0.2)")
  }), enableGlassEffect && {
    backdropFilter: 'blur(10px)',
    backgroundColor: 'rgba(255, 255, 255, 0.2)'
  }), enableMorph && {
    animation: "morph ".concat(morphDuration, " infinite")
  }), loadingState !== "none" && {
    animation: "".concat(loadingState, " ").concat(animationDuration, " infinite")
  }), pattern !== "none" && patternStyles[pattern]);
  var defaultGradient = gradient || "linear-gradient(\n        90deg,\n        rgba(224, 224, 224, 1) 25%, \n        rgba(245, 245, 245, 1) 50%, \n        rgba(224, 224, 224, 1) 75%)";
  var containerStyles = {
    display: direction === "grid" ? "grid" : "flex",
    flexDirection: direction === "stack" ? "column" : "row",
    gridTemplateColumns: direction === "grid" ? "repeat(auto-fill, minmax(".concat(width, ", 1fr))") : "none",
    gap: gap
  };
  var skeletonBlockStyles = function skeletonBlockStyles(index) {
    return _objectSpread(_objectSpread(_objectSpread(_objectSpread({
      display: "inline-block",
      backgroundColor: "#E0E0E0",
      background: defaultGradient,
      animation: animationStyles[animationVariant],
      backgroundSize: "200% 100%",
      height: height,
      width: width,
      opacity: hoveredIndex === index ? hoverOpacity : 1,
      borderRadius: hoveredIndex === index && shapeOnHover ? shapeStyles[shapeOnHover].borderRadius : shapeStyles[shape].borderRadius
    }, hoveredIndex === index ? tiltStyle : {}), advancedAnimations), skeletonConfigurationSettings), {}, {
      position: "relative",
      overflow: "hidden"
    });
  };
  var progressBarStyles = {
    position: "relative",
    width: "".concat(progressPercentage, "%"),
    height: "100%",
    backgroundColor: "#B0B0B0",
    borderRadius: "inherit"
  };
  return /*#__PURE__*/React.createElement("div", {
    style: containerStyles
  }, Array.from({
    length: count
  }).map(function (_, index) {
    return /*#__PURE__*/React.createElement("div", {
      key: index,
      style: skeletonBlockStyles(index),
      onMouseEnter: function onMouseEnter() {
        return handleMouseEnter(index);
      },
      onMouseLeave: handleMouseLeave,
      onMouseMove: function onMouseMove(e) {
        return handleMouseMove(e, index);
      }
    }, enableRipple && /*#__PURE__*/React.createElement("span", {
      className: "ripple-container"
    }), enableProgress && /*#__PURE__*/React.createElement("div", {
      style: progressBarStyles
    }));
  }));
};
var HUDSkeletonStyles = function HUDSkeletonStyles() {
  return /*#__PURE__*/React.createElement("style", null, "\n            ".concat(skeletonAnimations, "\n            .ripple {\n                position: absolute;\n                border-radius: 50%;\n                background: rgba(255, 255, 255, 0.7);\n                transform: scale(0);\n                animation: ripple 0.6s linear;\n            }\n            "));
};
var HUDSkeleton = function HUDSkeleton(props) {
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HUDSkeletonStyles, null), /*#__PURE__*/React.createElement(Skeleton, props));
};
export default HUDSkeleton;