jprdonnelly/nebula.js
1
0
Fork 0
mirror of https://github.com/qlik-oss/nebula.js.git synced 2025-12-19 17:58:43 -05:00
Code Issues Projects Releases Wiki Activity

fix: get back the styled scrollbar (#899)

Browse Source 
* fix: make scrollbar styling work again

* chore: rm main field to prevent error

* refactor: make horizontal scrolling work

* refactor: make horizontal item width smaller

* fix: float not needed

* fix: revert the size change
This commit is contained in:
Johan Lahti
2022-08-24 10:51:33 +02:00
committed by GitHub
parent 59878886e5
commit 0743cd0e84
2 changed files with 8 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
apis/nucleus/src/components/listbox/ListBox.jsx
View File

@@ -24,8 +24,8 @@ const classes = {
styledScrollbars: `${PREFIX}-styledScrollbars`, styledScrollbars: `${PREFIX}-styledScrollbars`,
}; };
const StyledInfiniteLoader = styled(InfiniteLoader)(() => ({ const StyledFixedSizeList = styled(FixedSizeList)(() => ({
[`& .${classes.styledScrollbars}`]: { [`&.${classes.styledScrollbars}`]: {
scrollbarColor: `${scrollBarThumb} ${scrollBarBackground}`, scrollbarColor: `${scrollBarThumb} ${scrollBarBackground}`,
'&::-webkit-scrollbar': { '&::-webkit-scrollbar': {
@@ -49,11 +49,12 @@ const StyledInfiniteLoader = styled(InfiniteLoader)(() => ({
})); }));
function getSizeInfo({ isVertical, checkboxes, dense, height }) { function getSizeInfo({ isVertical, checkboxes, dense, height }) {
const sizeHorizontal = 200;
let sizeVertical = checkboxes ? 40 : 33; let sizeVertical = checkboxes ? 40 : 33;
if (dense) { if (dense) {
sizeVertical = 20; sizeVertical = 20;
} }
const itemSize = isVertical ? sizeVertical : 200; const itemSize = isVertical ? sizeVertical : sizeHorizontal;
const listHeight = height || 8 * itemSize; const listHeight = height || 8 * itemSize;
return { return {
@@ -248,7 +249,7 @@ export default function ListBox({
const { frequencyMax } = layout; const { frequencyMax } = layout;
return ( return (
<StyledInfiniteLoader <InfiniteLoader
isItemLoaded={isItemLoaded} isItemLoaded={isItemLoaded}
itemCount={listCount || 1} // must be more than 0 or loadMoreItems will never be called again itemCount={listCount || 1} // must be more than 0 or loadMoreItems will never be called again
loadMoreItems={loadMoreItems} loadMoreItems={loadMoreItems}
@@ -259,11 +260,10 @@ export default function ListBox({
{({ onItemsRendered, ref }) => { {({ onItemsRendered, ref }) => {
local.current.listRef = ref; local.current.listRef = ref;
return ( return (
<FixedSizeList <StyledFixedSizeList
direction={direction} direction={direction}
data-testid="fixed-size-list" data-testid="fixed-size-list"
useIsScrolling useIsScrolling
style={{}}
height={listHeight} height={listHeight}
width={width} width={width}
itemCount={listCount} itemCount={listCount}
@@ -298,9 +298,9 @@ export default function ListBox({
ref={ref} ref={ref}
> >
{RowColumn} {RowColumn}
</FixedSizeList> </StyledFixedSizeList>
); );
}} }}
</StyledInfiniteLoader> </InfiniteLoader>
); );
} }

1
examples/dev-mashup/package.json
View File

@@ -2,7 +2,6 @@
"name": "local-mashup", "name": "local-mashup",
"version": "1.0.0", "version": "1.0.0",
"description": "Simple local mashup", "description": "Simple local mashup",
"main": "index.js",
"scripts": { "scripts": {
"start": "parcel index.html --open --no-hmr", "start": "parcel index.html --open --no-hmr",
"build": "parcel build index.html" "build": "parcel build index.html"