diff --git a/apis/nucleus/src/components/listbox/ListBox.jsx b/apis/nucleus/src/components/listbox/ListBox.jsx index a46595acf..760968aad 100644 --- a/apis/nucleus/src/components/listbox/ListBox.jsx +++ b/apis/nucleus/src/components/listbox/ListBox.jsx @@ -4,6 +4,7 @@ import React, { useEffect, useState, useCallback, useRef } from 'react'; import { FixedSizeList } from 'react-window'; import InfiniteLoader from 'react-window-infinite-loader'; +import { makeStyles } from '@nebula.js/ui/theme'; import useLayout from '../../hooks/useLayout'; @@ -11,6 +12,34 @@ import useSelectionsInteractions from './useSelectionsInteractions'; import RowColumn from './ListBoxRowColumn'; +const scrollBarThumb = '#BBB'; +const scrollBarThumbHover = '#555'; +const scrollBarBackground = '#f1f1f1'; + +const useStyles = makeStyles(() => ({ + styledScrollbars: { + scrollbarColor: `${scrollBarThumb} ${scrollBarBackground}`, + + '&::-webkit-scrollbar': { + width: 10, + height: 10, + }, + + '&::-webkit-scrollbar-track': { + backgroundColor: scrollBarBackground, + }, + + '&::-webkit-scrollbar-thumb': { + backgroundColor: scrollBarThumb, + borderRadius: '1rem', + }, + + '&::-webkit-scrollbar-thumb:hover': { + backgroundColor: scrollBarThumbHover, + }, + }, +})); + function getSizeInfo({ isVertical, checkboxes, dense, height }) { let sizeVertical = checkboxes ? 40 : 33; if (dense) { @@ -45,6 +74,7 @@ export default function ListBox({ const isSingleSelect = !!(layout && layout.qListObject.qDimensionInfo.qIsOneAndOnlyOne); const [pages, setPages] = useState(null); const [isLoadingData, setIsLoadingData] = useState(false); + const styles = useStyles(); const { instantPages = [], interactionEvents, @@ -82,6 +112,9 @@ export default function ListBox({ [layout, pages] ); + // The time from scroll end until new data is being fetched, may be exposed in API later on. + const scrollTimeout = 0; + const loadMoreItems = useCallback( (startIndex, stopIndex) => { local.current.queue.push({ @@ -118,7 +151,7 @@ export default function ListBox({ resolve(); }); }, - isScrolling ? 500 : 0 + isScrolling ? scrollTimeout : 0 ); }); }, @@ -185,6 +218,7 @@ export default function ListBox({ width={width} itemCount={count} layout={listLayout} + className={styles.styledScrollbars} itemData={{ isLocked, column: !isVertical,