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

Grafana Components Library

{"version":3,"file":"GrotNotFound.cjs","sources":["../../../../../src/components/EmptyState/GrotNotFound/GrotNotFound.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { type SVGProps, useEffect, useRef } from 'react';\nimport SVG from 'react-inlinesvg';\n\nimport { type 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  // @ts-expect-error react-inlinesvg@4.3.0 return type includes bigint, which isn't in @types/react@18's ReactNode. Remove when we update @types/react.\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":["useRef","useStyles2","useEffect","jsx","SVG","notFoundSvg","css"],"mappings":";;;;;;;;;;;;;;;;AAUA,MAAM,gBAAA,GAAmB,CAAA,EAAA;AACzB,MAAM,gBAAA,GAAmB,CAAA;AACzB,MAAM,mBAAA,GAAsB,CAAA,CAAA;AAC5B,MAAM,mBAAA,GAAsB,CAAA;AAOrB,MAAM,eAAe,CAAC,EAAE,KAAA,GAAQ,MAAA,EAAQ,QAAO,KAAa;AACjE,EAAA,MAAM,MAAA,GAASA,aAAmB,IAAI,CAAA;AACtC,EAAA,MAAM,MAAA,GAASC,wBAAW,SAAS,CAAA;AAEnC,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,eAAA,GAAkB,CAAC,KAAA,KAAsB;AAzBnD,MAAA,IAAA,EAAA,EAAA,EAAA;AA2BM,MAAA,IAAI,MAAA,CAAO,UAAA,CAAW,iCAAiC,CAAA,CAAE,OAAA,EAAS;AAChE,QAAA;AAAA,MACF;AAEA,MAAA,MAAM,OAAA,GAAA,CAAU,EAAA,GAAA,MAAA,CAAO,OAAA,KAAP,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAgB,aAAA,CAAc,qBAAA,CAAA;AAC9C,MAAA,MAAM,aAAA,GAAA,CAAgB,EAAA,GAAA,MAAA,CAAO,OAAA,KAAP,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAgB,aAAA,CAAc,2BAAA,CAAA;AAEpD,MAAA,MAAM,EAAE,OAAA,EAAS,OAAA,EAAQ,GAAI,KAAA;AAC7B,MAAA,MAAM,EAAE,UAAA,EAAY,WAAA,EAAY,GAAI,MAAA;AACpC,MAAA,MAAM,cAAc,OAAA,GAAU,WAAA;AAC9B,MAAA,MAAM,aAAa,OAAA,GAAU,UAAA;AAC7B,MAAA,MAAM,QAAA,GAAW,oBAAA,CAAqB,WAAA,EAAa,gBAAA,EAAkB,gBAAgB,CAAA;AACrF,MAAA,MAAM,WAAA,GAAc,oBAAA,CAAqB,UAAA,EAAY,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,CAAA,kBAAA,EAAqB,QAAQ,mBAAmB,WAAW,CAAA,EAAA,CAAA,CAAA;AAC1F,QAAA,aAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,aAAA,CAAe,YAAA,CAAa,OAAA,EAAS,CAAA,kBAAA,EAAqB,QAAQ,mBAAmB,WAAW,CAAA,EAAA,CAAA,CAAA;AAAA,MAClG,CAAC,CAAA;AAAA,IACH,CAAA;AAEA,IAAA,MAAA,CAAO,gBAAA,CAAiB,aAAa,eAAe,CAAA;AAEpD,IAAA,OAAO,MAAM;AACX,MAAA,MAAA,CAAO,mBAAA,CAAoB,aAAa,eAAe,CAAA;AAAA,IACzD,CAAA;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAGL,EAAA,uBAAOC,cAAA,CAACC,oBAAA,EAAA,EAAI,QAAA,EAAU,MAAA,EAAQ,GAAA,EAAKC,cAAa,SAAA,EAAW,MAAA,CAAO,GAAA,EAAK,MAAA,EAAgB,KAAA,EAAc,CAAA;AACvG;AAEA,YAAA,CAAa,WAAA,GAAc,cAAA;AAE3B,MAAM,SAAA,GAAY,CAAC,KAAA,KAAyB;AAC1C,EAAA,OAAO;AAAA,IACL,KAAKC,OAAA,CAAI;AAAA,MACP,gDAAA,EAAkD;AAAA,QAChD,eAAA,EAAiB;AAAA;AACnB,KACD;AAAA,GACH;AACF,CAAA;AAMA,MAAM,oBAAA,GAAuB,CAAC,KAAA,EAAe,KAAA,EAAe,GAAA,KAAgB;AAC1E,EAAA,MAAM,KAAA,GAAQ,KAAA,IAAS,GAAA,GAAM,KAAA,CAAA,GAAS,KAAA;AACtC,EAAA,OAAO,KAAA;AACT,CAAA;;;;"}