@grafana/ui/dist/esm/components/ScrollContainer/ScrollIndicators.mjs.map

Grafana Components Library

{"version":3,"file":"ScrollIndicators.mjs","sources":["../../../../src/components/ScrollContainer/ScrollIndicators.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { useEffect, useRef, useState } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\n\nexport const ScrollIndicators = ({ children }: React.PropsWithChildren<{}>) => {\n  const [showScrollTopIndicator, setShowTopScrollIndicator] = useState(false);\n  const [showScrollBottomIndicator, setShowBottomScrollIndicator] = useState(false);\n  const scrollTopMarker = useRef<HTMLDivElement>(null);\n  const scrollBottomMarker = useRef<HTMLDivElement>(null);\n  const styles = useStyles2(getStyles);\n\n  // Here we observe the top and bottom markers to determine if we should show the scroll indicators\n  useEffect(() => {\n    const intersectionObserver = new IntersectionObserver((entries) => {\n      entries.forEach((entry) => {\n        if (entry.target === scrollTopMarker.current) {\n          setShowTopScrollIndicator(!entry.isIntersecting);\n        } else if (entry.target === scrollBottomMarker.current) {\n          setShowBottomScrollIndicator(!entry.isIntersecting);\n        }\n      });\n    });\n    [scrollTopMarker, scrollBottomMarker].forEach((ref) => {\n      if (ref.current) {\n        intersectionObserver.observe(ref.current);\n      }\n    });\n    return () => intersectionObserver.disconnect();\n  }, []);\n\n  return (\n    <>\n      <div\n        className={cx(styles.scrollIndicator, styles.scrollTopIndicator, {\n          [styles.scrollIndicatorVisible]: showScrollTopIndicator,\n        })}\n        role=\"presentation\"\n      />\n      <div className={styles.scrollContent}>\n        <div ref={scrollTopMarker} className={cx(styles.scrollMarker, styles.scrollTopMarker)} />\n        {children}\n        <div ref={scrollBottomMarker} className={cx(styles.scrollMarker, styles.scrollBottomMarker)} />\n      </div>\n      <div\n        className={cx(styles.scrollIndicator, styles.scrollBottomIndicator, {\n          [styles.scrollIndicatorVisible]: showScrollBottomIndicator,\n        })}\n        role=\"presentation\"\n      />\n    </>\n  );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  // we specifically don't want a theme color here\n  // this gradient is more like a shadow\n  const scrollGradientColor = `rgba(0, 0, 0, ${theme.isDark ? 0.25 : 0.08})`;\n  return {\n    scrollContent: css({\n      display: 'flex',\n      flexDirection: 'column',\n      flexGrow: 1,\n      position: 'relative',\n    }),\n    scrollIndicator: css({\n      height: `max(5%, ${theme.spacing(3)})`,\n      left: 0,\n      opacity: 0,\n      pointerEvents: 'none',\n      position: 'absolute',\n      right: 0,\n      [theme.transitions.handleMotion('no-preference', 'reduce')]: {\n        transition: theme.transitions.create('opacity'),\n      },\n      zIndex: 1,\n    }),\n    scrollTopIndicator: css({\n      background: `linear-gradient(0deg, transparent, ${scrollGradientColor})`,\n      top: 0,\n    }),\n    scrollBottomIndicator: css({\n      background: `linear-gradient(180deg, transparent, ${scrollGradientColor})`,\n      bottom: 0,\n    }),\n    scrollIndicatorVisible: css({\n      opacity: 1,\n    }),\n    scrollMarker: css({\n      height: '1px',\n      left: 0,\n      pointerEvents: 'none',\n      position: 'absolute',\n      right: 0,\n    }),\n    scrollTopMarker: css({\n      top: 0,\n    }),\n    scrollBottomMarker: css({\n      bottom: 0,\n    }),\n  };\n};\n"],"names":[],"mappings":";;;;;;AAQO,MAAM,gBAAA,GAAmB,CAAC,EAAE,QAAA,EAAS,KAAmC;AAC7E,EAAA,MAAM,CAAC,sBAAA,EAAwB,yBAAyB,CAAA,GAAI,SAAS,KAAK,CAAA;AAC1E,EAAA,MAAM,CAAC,yBAAA,EAA2B,4BAA4B,CAAA,GAAI,SAAS,KAAK,CAAA;AAChF,EAAA,MAAM,eAAA,GAAkB,OAAuB,IAAI,CAAA;AACnD,EAAA,MAAM,kBAAA,GAAqB,OAAuB,IAAI,CAAA;AACtD,EAAA,MAAM,MAAA,GAAS,WAAW,SAAS,CAAA;AAGnC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,oBAAA,GAAuB,IAAI,oBAAA,CAAqB,CAAC,OAAA,KAAY;AACjE,MAAA,OAAA,CAAQ,OAAA,CAAQ,CAAC,KAAA,KAAU;AACzB,QAAA,IAAI,KAAA,CAAM,MAAA,KAAW,eAAA,CAAgB,OAAA,EAAS;AAC5C,UAAA,yBAAA,CAA0B,CAAC,MAAM,cAAc,CAAA;AAAA,QACjD,CAAA,MAAA,IAAW,KAAA,CAAM,MAAA,KAAW,kBAAA,CAAmB,OAAA,EAAS;AACtD,UAAA,4BAAA,CAA6B,CAAC,MAAM,cAAc,CAAA;AAAA,QACpD;AAAA,MACF,CAAC,CAAA;AAAA,IACH,CAAC,CAAA;AACD,IAAA,CAAC,eAAA,EAAiB,kBAAkB,CAAA,CAAE,OAAA,CAAQ,CAAC,GAAA,KAAQ;AACrD,MAAA,IAAI,IAAI,OAAA,EAAS;AACf,QAAA,oBAAA,CAAqB,OAAA,CAAQ,IAAI,OAAO,CAAA;AAAA,MAC1C;AAAA,IACF,CAAC,CAAA;AACD,IAAA,OAAO,MAAM,qBAAqB,UAAA,EAAW;AAAA,EAC/C,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA,CAAG,MAAA,CAAO,eAAA,EAAiB,OAAO,kBAAA,EAAoB;AAAA,UAC/D,CAAC,MAAA,CAAO,sBAAsB,GAAG;AAAA,SAClC,CAAA;AAAA,QACD,IAAA,EAAK;AAAA;AAAA,KACP;AAAA,oBACA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,aAAA,EACrB,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAK,eAAA,EAAiB,SAAA,EAAW,GAAG,MAAA,CAAO,YAAA,EAAc,MAAA,CAAO,eAAe,CAAA,EAAG,CAAA;AAAA,MACtF,QAAA;AAAA,sBACD,GAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAK,kBAAA,EAAoB,SAAA,EAAW,GAAG,MAAA,CAAO,YAAA,EAAc,MAAA,CAAO,kBAAkB,CAAA,EAAG;AAAA,KAAA,EAC/F,CAAA;AAAA,oBACA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA,CAAG,MAAA,CAAO,eAAA,EAAiB,OAAO,qBAAA,EAAuB;AAAA,UAClE,CAAC,MAAA,CAAO,sBAAsB,GAAG;AAAA,SAClC,CAAA;AAAA,QACD,IAAA,EAAK;AAAA;AAAA;AACP,GAAA,EACF,CAAA;AAEJ;AAEA,MAAM,SAAA,GAAY,CAAC,KAAA,KAAyB;AAG1C,EAAA,MAAM,mBAAA,GAAsB,CAAA,cAAA,EAAiB,KAAA,CAAM,MAAA,GAAS,OAAO,IAAI,CAAA,CAAA,CAAA;AACvE,EAAA,OAAO;AAAA,IACL,eAAe,GAAA,CAAI;AAAA,MACjB,OAAA,EAAS,MAAA;AAAA,MACT,aAAA,EAAe,QAAA;AAAA,MACf,QAAA,EAAU,CAAA;AAAA,MACV,QAAA,EAAU;AAAA,KACX,CAAA;AAAA,IACD,iBAAiB,GAAA,CAAI;AAAA,MACnB,MAAA,EAAQ,CAAA,QAAA,EAAW,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAC,CAAA,CAAA,CAAA;AAAA,MACnC,IAAA,EAAM,CAAA;AAAA,MACN,OAAA,EAAS,CAAA;AAAA,MACT,aAAA,EAAe,MAAA;AAAA,MACf,QAAA,EAAU,UAAA;AAAA,MACV,KAAA,EAAO,CAAA;AAAA,MACP,CAAC,KAAA,CAAM,WAAA,CAAY,aAAa,eAAA,EAAiB,QAAQ,CAAC,GAAG;AAAA,QAC3D,UAAA,EAAY,KAAA,CAAM,WAAA,CAAY,MAAA,CAAO,SAAS;AAAA,OAChD;AAAA,MACA,MAAA,EAAQ;AAAA,KACT,CAAA;AAAA,IACD,oBAAoB,GAAA,CAAI;AAAA,MACtB,UAAA,EAAY,sCAAsC,mBAAmB,CAAA,CAAA,CAAA;AAAA,MACrE,GAAA,EAAK;AAAA,KACN,CAAA;AAAA,IACD,uBAAuB,GAAA,CAAI;AAAA,MACzB,UAAA,EAAY,wCAAwC,mBAAmB,CAAA,CAAA,CAAA;AAAA,MACvE,MAAA,EAAQ;AAAA,KACT,CAAA;AAAA,IACD,wBAAwB,GAAA,CAAI;AAAA,MAC1B,OAAA,EAAS;AAAA,KACV,CAAA;AAAA,IACD,cAAc,GAAA,CAAI;AAAA,MAChB,MAAA,EAAQ,KAAA;AAAA,MACR,IAAA,EAAM,CAAA;AAAA,MACN,aAAA,EAAe,MAAA;AAAA,MACf,QAAA,EAAU,UAAA;AAAA,MACV,KAAA,EAAO;AAAA,KACR,CAAA;AAAA,IACD,iBAAiB,GAAA,CAAI;AAAA,MACnB,GAAA,EAAK;AAAA,KACN,CAAA;AAAA,IACD,oBAAoB,GAAA,CAAI;AAAA,MACtB,MAAA,EAAQ;AAAA,KACT;AAAA,GACH;AACF,CAAA;;;;"}