diff --git a/arduino-ide-extension/src/browser/style/list-widget.css b/arduino-ide-extension/src/browser/style/list-widget.css index ae5168bf5..f60159e34 100644 --- a/arduino-ide-extension/src/browser/style/list-widget.css +++ b/arduino-ide-extension/src/browser/style/list-widget.css @@ -44,10 +44,6 @@ height: 100%; /* This has top be 100% down to the `scrollContainer`. */ } -.filterable-list-container .items-container { - padding-bottom: calc(2 * var(--theia-statusBar-height)); -} - .filterable-list-container .items-container > div > div:nth-child(odd) { background-color: var(--theia-sideBar-background); filter: contrast(105%); diff --git a/arduino-ide-extension/src/browser/widgets/component-list/component-list.tsx b/arduino-ide-extension/src/browser/widgets/component-list/component-list.tsx index e142de629..067fbc6af 100644 --- a/arduino-ide-extension/src/browser/widgets/component-list/component-list.tsx +++ b/arduino-ide-extension/src/browser/widgets/component-list/component-list.tsx @@ -1,3 +1,4 @@ +import 'react-virtualized/styles.css'; import * as React from '@theia/core/shared/react'; import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer'; import { @@ -14,7 +15,11 @@ import { Installable } from '../../../common/protocol/installable'; import { ComponentListItem } from './component-list-item'; import { ListItemRenderer } from './list-item-renderer'; -function sameAs(left: T[], right: T[], key: (item: T) => string): boolean { +function sameAs( + left: T[], + right: T[], + ...compareProps: (keyof T)[] +): boolean { if (left === right) { return true; } @@ -23,10 +28,12 @@ function sameAs(left: T[], right: T[], key: (item: T) => string): boolean { return false; } for (let i = 0; i < leftLength; i++) { - const leftKey = key(left[i]); - const rightKey = key(right[i]); - if (leftKey !== rightKey) { - return false; + for (const prop of compareProps) { + const leftValue = left[i][prop]; + const rightValue = right[i][prop]; + if (leftValue !== rightValue) { + return false; + } } } return true; @@ -43,7 +50,7 @@ export class ComponentList extends React.Component< constructor(props: ComponentList.Props) { super(props); this.cache = new CellMeasurerCache({ - defaultHeight: 300, + defaultHeight: 140, fixedWidth: true, }); } @@ -67,6 +74,11 @@ export class ComponentList extends React.Component< rowHeight={this.cache.rowHeight} deferredMeasurementCache={this.cache} ref={this.setListRef} + estimatedRowSize={140} + // If default value, then `react-virtualized` will optimize and list item will not receive a `:hover` event. + // Hence, install and version `