@grafana/ui/dist/cjs/components/EmptyState/GrotNotFound/GrotNotFound.cjs

Grafana Components Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var React = require('react');
var SVG = require('react-inlinesvg');
var ThemeContext = require('../../../themes/ThemeContext.cjs');
var grotNotFound = require('./grot-not-found.svg.cjs');

function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }

var SVG__default = /*#__PURE__*/_interopDefaultCompat(SVG);

"use strict";
const MIN_ARM_ROTATION = -20;
const MAX_ARM_ROTATION = 5;
const MIN_ARM_TRANSLATION = -5;
const MAX_ARM_TRANSLATION = 5;
const GrotNotFound = ({ width = "auto", height }) => {
  const svgRef = React.useRef(null);
  const styles = ThemeContext.useStyles2(getStyles);
  React.useEffect(() => {
    const handleMouseMove = (event) => {
      var _a, _b;
      if (window.matchMedia("(prefers-reduced-motion: reduce").matches) {
        return;
      }
      const grotArm = (_a = svgRef.current) == null ? void 0 : _a.querySelector("#grot-not-found-arm");
      const grotMagnifier = (_b = svgRef.current) == null ? void 0 : _b.querySelector("#grot-not-found-magnifier");
      const { clientX, clientY } = event;
      const { innerWidth, innerHeight } = window;
      const heightRatio = clientY / innerHeight;
      const widthRatio = clientX / innerWidth;
      const rotation = getIntermediateValue(heightRatio, MIN_ARM_ROTATION, MAX_ARM_ROTATION);
      const translation = getIntermediateValue(widthRatio, MIN_ARM_TRANSLATION, MAX_ARM_TRANSLATION);
      window.requestAnimationFrame(() => {
        grotArm == null ? void 0 : grotArm.setAttribute("style", `transform: rotate(${rotation}deg) translateX(${translation}%)`);
        grotMagnifier == null ? void 0 : grotMagnifier.setAttribute("style", `transform: rotate(${rotation}deg) translateX(${translation}%)`);
      });
    };
    window.addEventListener("mousemove", handleMouseMove);
    return () => {
      window.removeEventListener("mousemove", handleMouseMove);
    };
  }, []);
  return /* @__PURE__ */ jsxRuntime.jsx(SVG__default.default, { innerRef: svgRef, src: grotNotFound, className: styles.svg, height, width });
};
GrotNotFound.displayName = "GrotNotFound";
const getStyles = (theme) => {
  return {
    svg: css.css({
      "#grot-not-found-arm, #grot-not-found-magnifier": {
        transformOrigin: "center"
      }
    })
  };
};
const getIntermediateValue = (ratio, start, end) => {
  const value = ratio * (end - start) + start;
  return value;
};

exports.GrotNotFound = GrotNotFound;
//# sourceMappingURL=GrotNotFound.cjs.map