@grafana/ui/dist/esm/components/EmptyState/GrotNotFound/GrotNotFound.mjs.map

Grafana Components Library

{"version":3,"file":"GrotNotFound.mjs","sources":["../../../../../src/components/EmptyState/GrotNotFound/GrotNotFound.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { SVGProps, useEffect, useRef } from 'react';\nimport SVG from 'react-inlinesvg';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../../themes/ThemeContext';\n\nimport notFoundSvg from './grot-not-found.svg';\n\nconst MIN_ARM_ROTATION = -20;\nconst MAX_ARM_ROTATION = 5;\nconst MIN_ARM_TRANSLATION = -5;\nconst MAX_ARM_TRANSLATION = 5;\n\nexport interface Props {\n  width?: SVGProps<SVGElement>['width'];\n  height?: SVGProps<SVGElement>['height'];\n}\n\nexport const GrotNotFound = ({ width = 'auto', height }: Props) => {\n  const svgRef = useRef<SVGElement>(null);\n  const styles = useStyles2(getStyles);\n\n  useEffect(() => {\n    const handleMouseMove = (event: MouseEvent) => {\n      // don't apply animation if reduced motion preference is set\n      if (window.matchMedia('(prefers-reduced-motion: reduce').matches) {\n        return;\n      }\n\n      const grotArm = svgRef.current?.querySelector('#grot-not-found-arm');\n      const grotMagnifier = svgRef.current?.querySelector('#grot-not-found-magnifier');\n\n      const { clientX, clientY } = event;\n      const { innerWidth, innerHeight } = window;\n      const heightRatio = clientY / innerHeight;\n      const widthRatio = clientX / innerWidth;\n      const rotation = getIntermediateValue(heightRatio, MIN_ARM_ROTATION, MAX_ARM_ROTATION);\n      const translation = getIntermediateValue(widthRatio, MIN_ARM_TRANSLATION, MAX_ARM_TRANSLATION);\n\n      window.requestAnimationFrame(() => {\n        grotArm?.setAttribute('style', `transform: rotate(${rotation}deg) translateX(${translation}%)`);\n        grotMagnifier?.setAttribute('style', `transform: rotate(${rotation}deg) translateX(${translation}%)`);\n      });\n    };\n\n    window.addEventListener('mousemove', handleMouseMove);\n\n    return () => {\n      window.removeEventListener('mousemove', handleMouseMove);\n    };\n  }, []);\n\n  return <SVG innerRef={svgRef} src={notFoundSvg} className={styles.svg} height={height} width={width} />;\n};\n\nGrotNotFound.displayName = 'GrotNotFound';\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    svg: css({\n      '#grot-not-found-arm, #grot-not-found-magnifier': {\n        transformOrigin: 'center',\n      },\n    }),\n  };\n};\n\n/**\n * Given a start value, end value, and a ratio, return the intermediate value\n * Works with negative and inverted start/end values\n */\nconst getIntermediateValue = (ratio: number, start: number, end: number) => {\n  const value = ratio * (end - start) + start;\n  return value;\n};\n"],"names":[],"mappings":";;;;;;;AAUA,MAAM,gBAAmB,GAAA,CAAA,EAAA;AACzB,MAAM,gBAAmB,GAAA,CAAA;AACzB,MAAM,mBAAsB,GAAA,CAAA,CAAA;AAC5B,MAAM,mBAAsB,GAAA,CAAA;AAOrB,MAAM,eAAe,CAAC,EAAE,KAAQ,GAAA,MAAA,EAAQ,QAAoB,KAAA;AACjE,EAAM,MAAA,MAAA,GAAS,OAAmB,IAAI,CAAA;AACtC,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA;AAEnC,EAAA,SAAA,CAAU,MAAM;AACd,IAAM,MAAA,eAAA,GAAkB,CAAC,KAAsB,KAAA;AAzBnD,MAAA,IAAA,EAAA,EAAA,EAAA;AA2BM,MAAA,IAAI,MAAO,CAAA,UAAA,CAAW,iCAAiC,CAAA,CAAE,OAAS,EAAA;AAChE,QAAA;AAAA;AAGF,MAAA,MAAM,OAAU,GAAA,CAAA,EAAA,GAAA,MAAA,CAAO,OAAP,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAgB,aAAc,CAAA,qBAAA,CAAA;AAC9C,MAAA,MAAM,aAAgB,GAAA,CAAA,EAAA,GAAA,MAAA,CAAO,OAAP,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAgB,aAAc,CAAA,2BAAA,CAAA;AAEpD,MAAM,MAAA,EAAE,OAAS,EAAA,OAAA,EAAY,GAAA,KAAA;AAC7B,MAAM,MAAA,EAAE,UAAY,EAAA,WAAA,EAAgB,GAAA,MAAA;AACpC,MAAA,MAAM,cAAc,OAAU,GAAA,WAAA;AAC9B,MAAA,MAAM,aAAa,OAAU,GAAA,UAAA;AAC7B,MAAA,MAAM,QAAW,GAAA,oBAAA,CAAqB,WAAa,EAAA,gBAAA,EAAkB,gBAAgB,CAAA;AACrF,MAAA,MAAM,WAAc,GAAA,oBAAA,CAAqB,UAAY,EAAA,mBAAA,EAAqB,mBAAmB,CAAA;AAE7F,MAAA,MAAA,CAAO,sBAAsB,MAAM;AACjC,QAAA,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAS,YAAa,CAAA,OAAA,EAAS,CAAqB,kBAAA,EAAA,QAAQ,mBAAmB,WAAW,CAAA,EAAA,CAAA,CAAA;AAC1F,QAAA,aAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,aAAA,CAAe,YAAa,CAAA,OAAA,EAAS,CAAqB,kBAAA,EAAA,QAAQ,mBAAmB,WAAW,CAAA,EAAA,CAAA,CAAA;AAAA,OACjG,CAAA;AAAA,KACH;AAEA,IAAO,MAAA,CAAA,gBAAA,CAAiB,aAAa,eAAe,CAAA;AAEpD,IAAA,OAAO,MAAM;AACX,MAAO,MAAA,CAAA,mBAAA,CAAoB,aAAa,eAAe,CAAA;AAAA,KACzD;AAAA,GACF,EAAG,EAAE,CAAA;AAEL,EAAO,uBAAA,GAAA,CAAC,GAAI,EAAA,EAAA,QAAA,EAAU,MAAQ,EAAA,GAAA,EAAK,aAAa,SAAW,EAAA,MAAA,CAAO,GAAK,EAAA,MAAA,EAAgB,KAAc,EAAA,CAAA;AACvG;AAEA,YAAA,CAAa,WAAc,GAAA,cAAA;AAE3B,MAAM,SAAA,GAAY,CAAC,KAAyB,KAAA;AAC1C,EAAO,OAAA;AAAA,IACL,KAAK,GAAI,CAAA;AAAA,MACP,gDAAkD,EAAA;AAAA,QAChD,eAAiB,EAAA;AAAA;AACnB,KACD;AAAA,GACH;AACF,CAAA;AAMA,MAAM,oBAAuB,GAAA,CAAC,KAAe,EAAA,KAAA,EAAe,GAAgB,KAAA;AAC1E,EAAM,MAAA,KAAA,GAAQ,KAAS,IAAA,GAAA,GAAM,KAAS,CAAA,GAAA,KAAA;AACtC,EAAO,OAAA,KAAA;AACT,CAAA;;;;"}