@stack-spot/portal-components 2.26.0 → 2.27.0

package/src/components/FadingOverflow.tsx

@@ -1,265 +1,265 @@
-import { IconBox } from '@citric/core'
-import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from '@citric/icons'
-import { listToClass, theme, WithStyle } from '@stack-spot/portal-theme'
-import { debounce } from 'lodash'
-import { useEffect, useRef } from 'react'
-import { styled } from 'styled-components'
-
-type Side = 'top' | 'right' | 'left' | 'bottom'
-type ScrollType = 'none' | 'wheel' | 'bar' | 'arrows'
-
-interface Props extends WithStyle {
-  /**
-   * How to scroll the content.
-   * - none: overflow is hidden. No scrolling.
-   * - wheel: the content is solely scrollable through the mouse wheel and keyboard arrows, no scroll bars are rendered.
-   * - bar: this is the normal browser scroll. The content will be scrollable through the mouse wheel, keyboard and scrollbar.
-   * - arrows: arrows will be placed in the far edges of the sides that must be scrolled. The content is scrolled through the mouse wheel,
-   * keyboard and these arrows. Hovering an arrow slowly scrolls the content, clicking the arrow fully scrolls the content in its direction.
-   * There are no scrollbars in this scenario.
-   * @default 'none'
-   */
-  scroll?: ScrollType,
-  /**
-   * If true, a horizontal scroll can be performed by using the vertical mouse wheel.
-   * @default false
-   */
-  enableHorizontalScrollWithVerticalWheel?: boolean,
-  /**
-   * Which sides to fade when the content overflows.
-   * 
-   * Important: it seems the current solution doesn't support mixing vertical and horizontal scrolls. I'm not sure if this is possible, I
-   * believed combining linear gradients would work, but it doesn't.
-   */
-  sides?: Side[],
-  children?: React.ReactNode,
-}
-
-// Scrolling can be very fast, this sets a lower limit for us to run listeners without impacting performance.
-const MIN_CHECK_INTERVAL_MS = 20
-// The interval which to scroll the content when a scroll arrow is hovered.
-const SCROLL_INTERVAL_MS = 20
-// This sets the speed of the scroll when the user hovers a scroll arrow.
-const SCROLL_PX = 4
-// Fade masks
-const masks = {
-  right: 'linear-gradient(to left, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgba(0, 0, 0) 100%)',
-  left: 'linear-gradient(to right, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgba(0, 0, 0) 100%)',
-  top: 'linear-gradient(to bottom, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgba(0, 0, 0) 100%)',
-  bottom: 'linear-gradient(to top, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgba(0, 0, 0) 100%)',
-  horizontal: 'linear-gradient(to left, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgb(0, 0, 0) max(70%, calc(100% - 100px)), rgba(0, 0, 0, 0) 100%)',
-  vertical: 'linear-gradient(to top, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgb(0, 0, 0) max(70%, calc(100% - 100px)), rgba(0, 0, 0, 0) 100%)',
-}
-
-const OverflowBox = styled.div`
-  &.hidden-scroll-bars::-webkit-scrollbar, &.scroll-arrows ::-webkit-scrollbar {
-    width: 0;
-    height: 0;
-  }
-
-  &.scroll-arrows {
-    position: relative;
-
-    > .content {
-      width: 100%;
-    }
-  }
-
-  .scroll-to-left, .scroll-to-right, .scroll-to-top, .scroll-to-bottom {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    width: 30px;
-    height: 30px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 0.3s;
-
-    ${IconBox} {
-      background-color: ${theme.color.light[300]};
-      border-radius: 50%;
-      width: 16px;
-      height: 16px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    &.visible {
-      opacity: 0.6;
-      pointer-events: auto;
-
-      &:hover {
-        opacity: 1;
-      }
-    }
-  }
-
-  .scroll-to-left {
-    right: unset;
-    height: unset;
-  }
-  
-  .scroll-to-right {
-    left: unset;
-    height: unset;
-  }
-  
-  .scroll-to-top {
-    bottom: unset;
-    width: unset;
-  }
-  
-  .scroll-to-bottom {
-    top: unset;
-    width: unset;
-  }
-`
-
-/**
- * This component applies a fading graphical effect to its content if it overflows in any of the sides specified by the props.
- * 
- * This also controls how this overflow is scrolled, introducing a new scrolling technique, which applies arrows to the overflowing side.
- */
-export const FadingOverflow = (
-  { children, scroll = 'none', sides, enableHorizontalScrollWithVerticalWheel, className, ...props }: Props,
-) => {
-  const ref = useRef<HTMLDivElement>(null)
-  const scrollIntervalId = useRef<number>()
-  // Add a margin to compensate for rounding inaccuracies
-  const SCROLL_MARGIN = 2
-
-  useEffect(() => {
-    if (!ref.current) return
-    const element = ref.current
-    const fadeTop = !sides || sides.includes('top')
-    const fadeRight = !sides || sides.includes('right')
-    const fadeBottom = !sides || sides.includes('bottom')
-    const fadeLeft = !sides || sides.includes('left')
-    const overflow = scroll === 'none' ? 'clip' : 'auto'
-    element.style.overflowX = (fadeLeft || fadeRight) ? overflow : ''
-    element.style.overflowY = (fadeTop || fadeBottom) ? overflow : ''
-    if (scroll === 'arrows' || scroll === 'wheel') element.classList.add('hidden-scroll-bars')
-
-    function stopScrolling() {
-      clearInterval(scrollIntervalId.current)
-    }
-
-    function checkOverflow() {
-      // masking (fading)
-      const overflowsRight = element.clientWidth < element.scrollWidth && element.scrollLeft < (element.scrollWidth - element.clientWidth)
-      const overflowsLeft = element.scrollLeft > 0
-      const overflowsBottom = element.clientHeight < element.scrollHeight
-        && element.scrollTop < (element.scrollHeight - element.clientHeight - SCROLL_MARGIN)
-      const overflowsTop = element.scrollTop > 0
-      const masksToApply: string[] = []
-      if (overflowsLeft && fadeLeft && overflowsRight && fadeRight) masksToApply.push(masks.horizontal)
-      else {
-        if (overflowsRight && fadeRight) masksToApply.push(masks.right)
-        if (overflowsLeft && fadeLeft) masksToApply.push(masks.left)
-      }
-      if (overflowsTop && fadeTop && overflowsBottom && fadeBottom) masksToApply.push(masks.vertical)
-      else {
-        if (overflowsTop && fadeTop) masksToApply.push(masks.top)
-        if (overflowsBottom && fadeBottom) masksToApply.push(masks.bottom)
-      }
-      element.style.maskImage = masksToApply.join(', ')
-
-      // arrow buttons
-      if (scroll !== 'arrows') return
-
-      function startScrolling(side: Side) {
-        stopScrolling()
-        const direction = side === 'bottom' || side === 'top' ? 'scrollTop' : 'scrollLeft'
-        const multiplier = side === 'bottom' || side === 'right' ? 1 : -1
-        scrollIntervalId.current = window.setInterval(() => {
-          element[direction] += SCROLL_PX * multiplier
-        }, SCROLL_INTERVAL_MS)
-      }
-  
-      const startScrollingBySide = {
-        left: () => startScrolling('left'),
-        right: () => startScrolling('right'),
-        top: () => startScrolling('top'),
-        bottom: () => startScrolling('bottom'),
-      }
-
-      const scrollToMaxBySide = {
-        left: () => element.scrollLeft = 0,
-        right: () => element.scrollLeft = element.scrollWidth - element.clientWidth,
-        top: () => element.scrollTop = 0,
-        bottom: () => element.scrollTop = element.scrollHeight - element.clientHeight,
-      }
-  
-      function enableArrowButton(side: Side) {
-        const button = element.parentNode?.querySelector(`.scroll-to-${side}`)
-        if (button?.classList.contains('visible')) return
-        button?.classList.add('visible')
-        button?.addEventListener('mouseenter', startScrollingBySide[side])
-        button?.addEventListener('mouseleave', stopScrolling)
-        button?.addEventListener('click', scrollToMaxBySide[side])
-      }
-  
-      function disableArrowButton(side: Side) {
-        const button = element.parentNode?.querySelector(`.scroll-to-${side}`)
-        if (!button?.classList.contains('visible')) return
-        button?.classList.remove('visible')
-        stopScrolling()
-        button?.removeEventListener('mouseenter', startScrollingBySide[side])
-        button?.removeEventListener('mouseleave', stopScrolling)
-        button?.removeEventListener('click', scrollToMaxBySide[side])
-      }
-      
-      if (overflowsRight && fadeRight) enableArrowButton('right')
-      else disableArrowButton('right')
-      if (overflowsLeft && fadeLeft) enableArrowButton('left')
-      else disableArrowButton('left')
-      if (overflowsTop && fadeTop) enableArrowButton('top')
-      else disableArrowButton('top')
-      if (overflowsBottom && fadeBottom) enableArrowButton('bottom')
-      else disableArrowButton('bottom')
-    }
-
-    const debouncedCheck = debounce(checkOverflow, MIN_CHECK_INTERVAL_MS)
-    const resizeObserver = new ResizeObserver(debouncedCheck)
-    resizeObserver.observe(element)
-    element.addEventListener('scroll', debouncedCheck)
-
-    return () => {
-      stopScrolling()
-      resizeObserver.disconnect()
-      element.removeEventListener('scroll', debouncedCheck)
-    }
-  }, [sides, ref.current, scroll])
-
-  useEffect(() => {
-    if (!enableHorizontalScrollWithVerticalWheel || !ref.current) return
-    const element = ref.current
-
-    function scrollWithWheel(event: WheelEvent) {
-      if (event.deltaY) {
-        element.scrollLeft += event.deltaY
-        event.preventDefault()
-        event.stopPropagation()
-      }
-    }
-
-    element.addEventListener('wheel', scrollWithWheel)
-    return () => element.removeEventListener('wheel', scrollWithWheel)
-  }, [ref.current, enableHorizontalScrollWithVerticalWheel])
-
-  return scroll === 'arrows' ? (
-    <OverflowBox {...props} className={listToClass(['scroll-arrows', className])}>
-      <div className="content" ref={ref}>{children}</div>
-      <div className="scroll-to-left" aria-hidden><IconBox size="xs"><ChevronLeft /></IconBox></div>
-      <div className="scroll-to-right" aria-hidden><IconBox size="xs"><ChevronRight /></IconBox></div>
-      <div className="scroll-to-top" aria-hidden><IconBox size="xs"><ChevronUp /></IconBox></div>
-      <div className="scroll-to-bottom" aria-hidden><IconBox size="xs"><ChevronDown /></IconBox></div>
-    </OverflowBox>
-  ) : <OverflowBox {...props} className={className} ref={ref}>{children}</OverflowBox>
-}
+import { IconBox } from '@citric/core'
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from '@citric/icons'
+import { listToClass, theme, WithStyle } from '@stack-spot/portal-theme'
+import { debounce } from 'lodash'
+import { useEffect, useRef } from 'react'
+import { styled } from 'styled-components'
+
+type Side = 'top' | 'right' | 'left' | 'bottom'
+type ScrollType = 'none' | 'wheel' | 'bar' | 'arrows'
+
+interface Props extends WithStyle {
+  /**
+   * How to scroll the content.
+   * - none: overflow is hidden. No scrolling.
+   * - wheel: the content is solely scrollable through the mouse wheel and keyboard arrows, no scroll bars are rendered.
+   * - bar: this is the normal browser scroll. The content will be scrollable through the mouse wheel, keyboard and scrollbar.
+   * - arrows: arrows will be placed in the far edges of the sides that must be scrolled. The content is scrolled through the mouse wheel,
+   * keyboard and these arrows. Hovering an arrow slowly scrolls the content, clicking the arrow fully scrolls the content in its direction.
+   * There are no scrollbars in this scenario.
+   * @default 'none'
+   */
+  scroll?: ScrollType,
+  /**
+   * If true, a horizontal scroll can be performed by using the vertical mouse wheel.
+   * @default false
+   */
+  enableHorizontalScrollWithVerticalWheel?: boolean,
+  /**
+   * Which sides to fade when the content overflows.
+   * 
+   * Important: it seems the current solution doesn't support mixing vertical and horizontal scrolls. I'm not sure if this is possible, I
+   * believed combining linear gradients would work, but it doesn't.
+   */
+  sides?: Side[],
+  children?: React.ReactNode,
+}
+
+// Scrolling can be very fast, this sets a lower limit for us to run listeners without impacting performance.
+const MIN_CHECK_INTERVAL_MS = 20
+// The interval which to scroll the content when a scroll arrow is hovered.
+const SCROLL_INTERVAL_MS = 20
+// This sets the speed of the scroll when the user hovers a scroll arrow.
+const SCROLL_PX = 4
+// Fade masks
+const masks = {
+  right: 'linear-gradient(to left, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgba(0, 0, 0) 100%)',
+  left: 'linear-gradient(to right, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgba(0, 0, 0) 100%)',
+  top: 'linear-gradient(to bottom, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgba(0, 0, 0) 100%)',
+  bottom: 'linear-gradient(to top, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgba(0, 0, 0) 100%)',
+  horizontal: 'linear-gradient(to left, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgb(0, 0, 0) max(70%, calc(100% - 100px)), rgba(0, 0, 0, 0) 100%)',
+  vertical: 'linear-gradient(to top, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgb(0, 0, 0) max(70%, calc(100% - 100px)), rgba(0, 0, 0, 0) 100%)',
+}
+
+const OverflowBox = styled.div`
+  &.hidden-scroll-bars::-webkit-scrollbar, &.scroll-arrows ::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  &.scroll-arrows {
+    position: relative;
+
+    > .content {
+      width: 100%;
+    }
+  }
+
+  .scroll-to-left, .scroll-to-right, .scroll-to-top, .scroll-to-bottom {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s;
+
+    ${IconBox} {
+      background-color: ${theme.color.light[300]};
+      border-radius: 50%;
+      width: 16px;
+      height: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &.visible {
+      opacity: 0.6;
+      pointer-events: auto;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+
+  .scroll-to-left {
+    right: unset;
+    height: unset;
+  }
+  
+  .scroll-to-right {
+    left: unset;
+    height: unset;
+  }
+  
+  .scroll-to-top {
+    bottom: unset;
+    width: unset;
+  }
+  
+  .scroll-to-bottom {
+    top: unset;
+    width: unset;
+  }
+`
+
+/**
+ * This component applies a fading graphical effect to its content if it overflows in any of the sides specified by the props.
+ * 
+ * This also controls how this overflow is scrolled, introducing a new scrolling technique, which applies arrows to the overflowing side.
+ */
+export const FadingOverflow = (
+  { children, scroll = 'none', sides, enableHorizontalScrollWithVerticalWheel, className, ...props }: Props,
+) => {
+  const ref = useRef<HTMLDivElement>(null)
+  const scrollIntervalId = useRef<number>()
+  // Add a margin to compensate for rounding inaccuracies
+  const SCROLL_MARGIN = 2
+
+  useEffect(() => {
+    if (!ref.current) return
+    const element = ref.current
+    const fadeTop = !sides || sides.includes('top')
+    const fadeRight = !sides || sides.includes('right')
+    const fadeBottom = !sides || sides.includes('bottom')
+    const fadeLeft = !sides || sides.includes('left')
+    const overflow = scroll === 'none' ? 'clip' : 'auto'
+    element.style.overflowX = (fadeLeft || fadeRight) ? overflow : ''
+    element.style.overflowY = (fadeTop || fadeBottom) ? overflow : ''
+    if (scroll === 'arrows' || scroll === 'wheel') element.classList.add('hidden-scroll-bars')
+
+    function stopScrolling() {
+      clearInterval(scrollIntervalId.current)
+    }
+
+    function checkOverflow() {
+      // masking (fading)
+      const overflowsRight = element.clientWidth < element.scrollWidth && element.scrollLeft < (element.scrollWidth - element.clientWidth)
+      const overflowsLeft = element.scrollLeft > 0
+      const overflowsBottom = element.clientHeight < element.scrollHeight
+        && element.scrollTop < (element.scrollHeight - element.clientHeight - SCROLL_MARGIN)
+      const overflowsTop = element.scrollTop > 0
+      const masksToApply: string[] = []
+      if (overflowsLeft && fadeLeft && overflowsRight && fadeRight) masksToApply.push(masks.horizontal)
+      else {
+        if (overflowsRight && fadeRight) masksToApply.push(masks.right)
+        if (overflowsLeft && fadeLeft) masksToApply.push(masks.left)
+      }
+      if (overflowsTop && fadeTop && overflowsBottom && fadeBottom) masksToApply.push(masks.vertical)
+      else {
+        if (overflowsTop && fadeTop) masksToApply.push(masks.top)
+        if (overflowsBottom && fadeBottom) masksToApply.push(masks.bottom)
+      }
+      element.style.maskImage = masksToApply.join(', ')
+
+      // arrow buttons
+      if (scroll !== 'arrows') return
+
+      function startScrolling(side: Side) {
+        stopScrolling()
+        const direction = side === 'bottom' || side === 'top' ? 'scrollTop' : 'scrollLeft'
+        const multiplier = side === 'bottom' || side === 'right' ? 1 : -1
+        scrollIntervalId.current = window.setInterval(() => {
+          element[direction] += SCROLL_PX * multiplier
+        }, SCROLL_INTERVAL_MS)
+      }
+  
+      const startScrollingBySide = {
+        left: () => startScrolling('left'),
+        right: () => startScrolling('right'),
+        top: () => startScrolling('top'),
+        bottom: () => startScrolling('bottom'),
+      }
+
+      const scrollToMaxBySide = {
+        left: () => element.scrollLeft = 0,
+        right: () => element.scrollLeft = element.scrollWidth - element.clientWidth,
+        top: () => element.scrollTop = 0,
+        bottom: () => element.scrollTop = element.scrollHeight - element.clientHeight,
+      }
+  
+      function enableArrowButton(side: Side) {
+        const button = element.parentNode?.querySelector(`.scroll-to-${side}`)
+        if (button?.classList.contains('visible')) return
+        button?.classList.add('visible')
+        button?.addEventListener('mouseenter', startScrollingBySide[side])
+        button?.addEventListener('mouseleave', stopScrolling)
+        button?.addEventListener('click', scrollToMaxBySide[side])
+      }
+  
+      function disableArrowButton(side: Side) {
+        const button = element.parentNode?.querySelector(`.scroll-to-${side}`)
+        if (!button?.classList.contains('visible')) return
+        button?.classList.remove('visible')
+        stopScrolling()
+        button?.removeEventListener('mouseenter', startScrollingBySide[side])
+        button?.removeEventListener('mouseleave', stopScrolling)
+        button?.removeEventListener('click', scrollToMaxBySide[side])
+      }
+      
+      if (overflowsRight && fadeRight) enableArrowButton('right')
+      else disableArrowButton('right')
+      if (overflowsLeft && fadeLeft) enableArrowButton('left')
+      else disableArrowButton('left')
+      if (overflowsTop && fadeTop) enableArrowButton('top')
+      else disableArrowButton('top')
+      if (overflowsBottom && fadeBottom) enableArrowButton('bottom')
+      else disableArrowButton('bottom')
+    }
+
+    const debouncedCheck = debounce(checkOverflow, MIN_CHECK_INTERVAL_MS)
+    const resizeObserver = new ResizeObserver(debouncedCheck)
+    resizeObserver.observe(element)
+    element.addEventListener('scroll', debouncedCheck)
+
+    return () => {
+      stopScrolling()
+      resizeObserver.disconnect()
+      element.removeEventListener('scroll', debouncedCheck)
+    }
+  }, [sides, ref.current, scroll])
+
+  useEffect(() => {
+    if (!enableHorizontalScrollWithVerticalWheel || !ref.current) return
+    const element = ref.current
+
+    function scrollWithWheel(event: WheelEvent) {
+      if (event.deltaY) {
+        element.scrollLeft += event.deltaY
+        event.preventDefault()
+        event.stopPropagation()
+      }
+    }
+
+    element.addEventListener('wheel', scrollWithWheel)
+    return () => element.removeEventListener('wheel', scrollWithWheel)
+  }, [ref.current, enableHorizontalScrollWithVerticalWheel])
+
+  return scroll === 'arrows' ? (
+    <OverflowBox {...props} className={listToClass(['scroll-arrows', className])}>
+      <div className="content" ref={ref}>{children}</div>
+      <div className="scroll-to-left" aria-hidden><IconBox size="xs"><ChevronLeft /></IconBox></div>
+      <div className="scroll-to-right" aria-hidden><IconBox size="xs"><ChevronRight /></IconBox></div>
+      <div className="scroll-to-top" aria-hidden><IconBox size="xs"><ChevronUp /></IconBox></div>
+      <div className="scroll-to-bottom" aria-hidden><IconBox size="xs"><ChevronDown /></IconBox></div>
+    </OverflowBox>
+  ) : <OverflowBox {...props} className={className} ref={ref}>{children}</OverflowBox>
+}