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

Grafana Components Library

{"version":3,"file":"ScrollIndicators.mjs","sources":["../../../../src/components/CustomScrollbar/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      />\n      <div className={styles.scrollContent}>\n        <div ref={scrollTopMarker} />\n        {children}\n        <div ref={scrollBottomMarker} />\n      </div>\n      <div\n        className={cx(styles.scrollIndicator, styles.scrollBottomIndicator, {\n          [styles.scrollIndicatorVisible]: showScrollBottomIndicator,\n        })}\n      />\n    </>\n  );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    scrollContent: css({\n      flex: 1,\n      position: 'relative',\n    }),\n    scrollIndicator: css({\n      height: theme.spacing(6),\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, ${theme.colors.background.canvas})`,\n      top: 0,\n    }),\n    scrollBottomIndicator: css({\n      background: `linear-gradient(180deg, transparent, ${theme.colors.background.canvas})`,\n      bottom: 0,\n    }),\n    scrollIndicatorVisible: css({\n      opacity: 1,\n    }),\n  };\n};\n"],"names":[],"mappings":"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"}