From 6b5c90cbdb58f8edc6cff84975a3878330e5fabb Mon Sep 17 00:00:00 2001 From: Francesco Spissu <94986937+francescospissu@users.noreply.github.com> Date: Thu, 20 Oct 2022 08:56:21 +0200 Subject: [PATCH 1/3] prevent layout shift on hover in libs/board manager --- .../component-list/component-list-item.tsx | 23 ++----------------- .../component-list/list-item-renderer.tsx | 12 ++++------ 2 files changed, 7 insertions(+), 28 deletions(-) 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 index 2024d48a7..66d4b626a 100644 --- 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,30 +14,14 @@ export class ComponentListItem< )[0]; this.state = { selectedVersion: version, - focus: false, - versionUpdate: false, }; } } - override componentDidUpdate( - prevProps: ComponentListItem.Props, - prevState: ComponentListItem.State - ): void { - if (this.state.focus !== prevState.focus) { - this.props.onFocusDidChange(); - } - } - override render(): React.ReactNode { const { item, itemRenderer } = this.props; return ( -
this.setState({ focus: true })} - onMouseLeave={() => { - if (!this.state.versionUpdate) this.setState({ focus: false }); - }} - > +
{itemRenderer.renderItem( Object.assign(this.state, { item }), this.install.bind(this), @@ -55,7 +39,6 @@ export class ComponentListItem< )[0]; this.setState({ selectedVersion: version, - versionUpdate: false, }); try { await this.props.install(item, toInstall); @@ -71,7 +54,7 @@ export class ComponentListItem< } private onVersionChange(version: Installable.Version): void { - this.setState({ selectedVersion: version, versionUpdate: true }); + this.setState({ selectedVersion: version }); } } @@ -86,7 +69,5 @@ export namespace ComponentListItem { export interface State { selectedVersion?: Installable.Version; - focus: boolean; - versionUpdate: boolean; } } 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 index ff5b469b9..4e6d56364 100644 --- 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 @@ -28,7 +28,7 @@ export class ListItemRenderer { uninstall: (item: T) => Promise, onVersionChange: (version: Installable.Version) => void ): React.ReactNode { - const { item, focus } = input; + const { item } = input; let nameAndAuthor: JSX.Element; if (item.name && item.author) { const name = {item.name}; @@ -127,12 +127,10 @@ export class ListItemRenderer { {description}
{moreInfo}
- {focus && ( -
- {versions} - {installButton} -
- )} +
+ {versions} + {installButton} +
); } From 3bea8b18b3da3f69703e518261fe987dbf2d0c4b Mon Sep 17 00:00:00 2001 From: Francesco Spissu <94986937+francescospissu@users.noreply.github.com> Date: Thu, 20 Oct 2022 12:45:37 +0200 Subject: [PATCH 2/3] remove unused function --- .../src/browser/widgets/component-list/component-list-item.tsx | 1 - .../src/browser/widgets/component-list/component-list.tsx | 3 +-- 2 files changed, 1 insertion(+), 3 deletions(-) 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 index 66d4b626a..bd8815eb4 100644 --- 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 @@ -64,7 +64,6 @@ export namespace ComponentListItem { readonly install: (item: T, version?: Installable.Version) => Promise; readonly uninstall: (item: T) => Promise; readonly itemRenderer: ListItemRenderer; - readonly onFocusDidChange: () => void; } export interface State { 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 067fbc6af..2c49bbbcc 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 @@ -125,7 +125,7 @@ export class ComponentList extends React.Component< rowIndex={index} parent={parent} > - {({ measure, registerChild }) => ( + {({ registerChild }) => ( // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore
@@ -135,7 +135,6 @@ export class ComponentList extends React.Component< itemRenderer={this.props.itemRenderer} install={this.props.install} uninstall={this.props.uninstall} - onFocusDidChange={() => measure()} />
)} From 496f9be9fb78077d7422ec32050f92d574a75dd7 Mon Sep 17 00:00:00 2001 From: Francesco Spissu <94986937+francescospissu@users.noreply.github.com> Date: Mon, 24 Oct 2022 16:35:00 +0200 Subject: [PATCH 3/3] remove useless div --- .../browser/widgets/component-list/component-list-item.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 index bd8815eb4..121c01e03 100644 --- 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 @@ -21,14 +21,14 @@ export class ComponentListItem< 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) )} -
+ ); }