Moved focus tracing inside item.

Signed-off-by: Akos Kitta <a.kitta@arduino.cc>
arduino · francescospissu · Aug 27, 2022 · Aug 27, 2022 · Aug 27, 2022 · Aug 27, 2022
commit 2e8ce5b6b4edccc889db53901a1f557f76294409
diff --git a/arduino-ide-extension/src/browser/style/list-widget.css b/arduino-ide-extension/src/browser/style/list-widget.css
@@ -23,8 +23,7 @@
 }
 
 .filterable-list-container .items-container {
-    height: 100%; /* This has to be propagated down from the widget. */
-    position: relative; /* To fix the `top` of the vertical toolbar.  */
+    padding-bottom: calc(2 * var(--theia-statusBar-height));
 }
 
 .filterable-list-container .items-container > div > div:nth-child(odd) {
@@ -42,14 +41,6 @@
     filter: contrast(90%);
 }
 
-/* Perfect scrollbar does not like if we explicitly set the `background-color` of the contained elements.
-See above: `.filterable-list-container .items-container > div:nth-child(odd|event)`.
-We have to increase `z-index` of the scroll-bar thumb. Otherwise, the thumb is not visible.
-https://github.com/arduino/arduino-pro-ide/issues/82 */
-.arduino-list-widget .filterable-list-container .items-container .ps__rail-y {
-    z-index: 1;
-}
-
 .component-list-item {
     padding: 10px 10px 10px 15px;
     font-size: var(--theia-ui-font-size1);
@@ -113,7 +104,7 @@ https://github.com/arduino/arduino-pro-ide/issues/82 */
 
 .component-list-item[min-width~="170px"] .footer {
     padding: 5px 5px 0px 0px;
-    min-height: 30px;
+    min-height: 35px;
     display: flex;
     flex-direction: row-reverse;
 }
@@ -122,10 +113,6 @@ https://github.com/arduino/arduino-pro-ide/issues/82 */
     flex-direction: column-reverse;
 }
 
-.component-list-item .footer > * {
-    display: none
-}
-
 .component-list-item:hover .footer > * {
     display: inline-block;
     margin: 5px 0px 0px 10px;

diff --git a/arduino-ide-extension/src/browser/widgets/component-list/component-list-item.tsx b/arduino-ide-extension/src/browser/widgets/component-list/component-list-item.tsx
@@ -14,11 +14,38 @@ export class ComponentListItem<
       )[0];
       this.state = {
         selectedVersion: version,
+        focus: false,
       };
     }
   }
 
-  protected async install(item: T): Promise<void> {
+  override componentDidUpdate(
+    prevProps: ComponentListItem.Props<T>,
+    prevState: ComponentListItem.State
+  ): void {
+    if (this.state.focus !== prevState.focus) {
+      this.props.onFocusDidChange();
+    }
+  }
+
+  override render(): React.ReactNode {
+    const { item, itemRenderer } = this.props;
+    return (
+      <div
+        onMouseEnter={() => this.setState({ focus: true })}
+        onMouseLeave={() => this.setState({ focus: false })}
+      >
+        {itemRenderer.renderItem(
+          Object.assign(this.state, { item }),
+          this.install.bind(this),
+          this.uninstall.bind(this),
+          this.onVersionChange.bind(this)
+        )}
+      </div>
+    );
+  }
+
+  private async install(item: T): Promise<void> {
     const toInstall = this.state.selectedVersion;
     const version = this.props.item.availableVersions.filter(
       (version) => version !== this.state.selectedVersion
@@ -35,23 +62,13 @@ export class ComponentListItem<
     }
   }
 
-  protected async uninstall(item: T): Promise<void> {
+  private async uninstall(item: T): Promise<void> {
     await this.props.uninstall(item);
   }
 
-  protected onVersionChange(version: Installable.Version): void {
+  private onVersionChange(version: Installable.Version): void {
     this.setState({ selectedVersion: version });
   }
-
-  override render(): React.ReactNode {
-    const { item, itemRenderer } = this.props;
-    return itemRenderer.renderItem(
-      Object.assign(this.state, { item }),
-      this.install.bind(this),
-      this.uninstall.bind(this),
-      this.onVersionChange.bind(this)
-    );
-  }
 }
 
 export namespace ComponentListItem {
@@ -60,9 +77,11 @@ export namespace ComponentListItem {
     readonly install: (item: T, version?: Installable.Version) => Promise<void>;
     readonly uninstall: (item: T) => Promise<void>;
     readonly itemRenderer: ListItemRenderer<T>;
+    readonly onFocusDidChange: () => void;
   }
 
   export interface State {
     selectedVersion?: Installable.Version;
+    focus: boolean;
   }
 }
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
@@ -14,9 +14,26 @@ import { Installable } from '../../../common/protocol/installable';
 import { ComponentListItem } from './component-list-item';
 import { ListItemRenderer } from './list-item-renderer';
 
+function sameAs<T>(left: T[], right: T[], key: (item: T) => string): boolean {
+  if (left === right) {
+    return true;
+  }
+  const leftLength = left.length;
+  if (leftLength !== right.length) {
+    return false;
+  }
+  for (let i = 0; i < leftLength; i++) {
+    const leftKey = key(left[i]);
+    const rightKey = key(right[i]);
+    if (leftKey !== rightKey) {
+      return false;
+    }
+  }
+  return true;
+}
+
 export class ComponentList<T extends ArduinoComponent> extends React.Component<
-  ComponentList.Props<T>,
-  ComponentList.State
+  ComponentList.Props<T>
 > {
   private readonly cache: CellMeasurerCache;
   private resizeAllFlag: boolean;
@@ -25,9 +42,8 @@ export class ComponentList<T extends ArduinoComponent> extends React.Component<
 
   constructor(props: ComponentList.Props<T>) {
     super(props);
-    this.state = { focusIndex: 'none' };
     this.cache = new CellMeasurerCache({
-      defaultHeight: 200,
+      defaultHeight: 300,
       fixedWidth: true,
     });
   }
@@ -38,14 +54,13 @@ export class ComponentList<T extends ArduinoComponent> extends React.Component<
         {({ width, height }) => {
           if (this.mostRecentWidth && this.mostRecentWidth !== width) {
             this.resizeAllFlag = true;
-            setTimeout(this.clearAll, 0);
+            setTimeout(() => this.clearAll(), 0);
           }
           this.mostRecentWidth = width;
           return (
             <List
               className={'items-container'}
               rowRenderer={this.createItem}
-              overscanRowCount={100}
               height={height}
               width={width}
               rowCount={this.props.items.length}
@@ -59,19 +74,12 @@ export class ComponentList<T extends ArduinoComponent> extends React.Component<
     );
   }
 
-  override componentDidUpdate(
-    prevProps: ComponentList.Props<T>,
-    prevState: ComponentList.State
-  ): void {
-    if (this.resizeAllFlag || this.props.items !== prevProps.items) {
+  override componentDidUpdate(prevProps: ComponentList.Props<T>): void {
+    if (
+      this.resizeAllFlag ||
+      !sameAs(this.props.items, prevProps.items, this.props.itemLabel)
+    ) {
       this.clearAll(true);
-    } else if (this.state.focusIndex !== prevState.focusIndex) {
-      if (typeof this.state.focusIndex === 'number') {
-        this.clear(this.state.focusIndex);
-      }
-      if (typeof prevState.focusIndex === 'number') {
-        this.clear(prevState.focusIndex);
-      }
     }
   }
 
@@ -112,17 +120,14 @@ export class ComponentList<T extends ArduinoComponent> extends React.Component<
         rowIndex={index}
         parent={parent}
       >
-        <div
-          style={style}
-          onMouseEnter={() => this.setState({ focusIndex: index })}
-          onMouseLeave={() => this.setState({ focusIndex: 'none' })}
-        >
+        <div style={style}>
           <ComponentListItem<T>
             key={this.props.itemLabel(item)}
             item={item}
             itemRenderer={this.props.itemRenderer}
             install={this.props.install}
             uninstall={this.props.uninstall}
+            onFocusDidChange={() => this.clear(index)}
           />
         </div>
       </CellMeasurer>
@@ -139,7 +144,4 @@ export namespace ComponentList {
     readonly install: (item: T, version?: Installable.Version) => Promise<void>;
     readonly uninstall: (item: T) => Promise<void>;
   }
-  export interface State {
-    focusIndex: number | 'none';
-  }
 }
diff --git a/arduino-ide-extension/src/browser/widgets/component-list/list-item-renderer.tsx b/arduino-ide-extension/src/browser/widgets/component-list/list-item-renderer.tsx
@@ -14,7 +14,7 @@ export class ListItemRenderer<T extends ArduinoComponent> {
 
   protected onMoreInfoClick = (
     event: React.SyntheticEvent<HTMLAnchorElement, Event>
-  ) => {
+  ): void => {
     const { target } = event.nativeEvent;
     if (target instanceof HTMLAnchorElement) {
       this.windowService.openNewWindow(target.href, { external: true });
@@ -28,7 +28,7 @@ export class ListItemRenderer<T extends ArduinoComponent> {
     uninstall: (item: T) => Promise<void>,
     onVersionChange: (version: Installable.Version) => void
   ): React.ReactNode {
-    const { item } = input;
+    const { item, focus } = input;
     let nameAndAuthor: JSX.Element;
     if (item.name && item.author) {
       const name = <span className="name">{item.name}</span>;
@@ -120,10 +120,12 @@ export class ListItemRenderer<T extends ArduinoComponent> {
           {description}
         </div>
         <div className="info">{moreInfo}</div>
-        <div className="footer">
-          {versions}
-          {installButton}
-        </div>
+        {focus && (
+          <div className="footer">
+            {versions}
+            {installButton}
+          </div>
+        )}
       </div>
     );
   }