Do not render Tooltip and Menu elements until needed (#5168)

* Clean up Menu DOM elements

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Clean up Tooltip DOM

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Do not render Animate when not in need

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Update snapshots

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* clean up <Animate/> and <Tooltip/>

Signed-off-by: Roman <ixrock@gmail.com>

Co-authored-by: Roman <ixrock@gmail.com>
This commit is contained in:
Alex AndreevandRoman authored and GitHub committed 2022-04-06 16:44:14 +03:00
1 parent ca21e0842a
commit 93a8d0f157
5 files changed
+31 -234

No files matched your search

+2 -3
View File
@@ -93,7 +93,6 @@ export class Menu extends React.Component<MenuProps, State> {
this.opener.addEventListener(this.props.toggleEvent, this.toggle);
this.opener.addEventListener("keydown", this.onKeyDown);
}
this.elem.addEventListener("keydown", this.onKeyDown);
window.addEventListener("resize", this.onWindowResize);
window.addEventListener("click", this.onClickOutside, true);
window.addEventListener("scroll", this.onScrollOutside, true);
@@ -106,7 +105,6 @@ export class Menu extends React.Component<MenuProps, State> {
this.opener.removeEventListener(this.props.toggleEvent, this.toggle);
this.opener.removeEventListener("keydown", this.onKeyDown);
}
this.elem.removeEventListener("keydown", this.onKeyDown);
window.removeEventListener("resize", this.onWindowResize);
window.removeEventListener("click", this.onClickOutside, true);
window.removeEventListener("scroll", this.onScrollOutside, true);
@@ -218,7 +216,7 @@ export class Menu extends React.Component<MenuProps, State> {
}
}
onKeyDown(evt: KeyboardEvent) {
onKeyDown(evt: React.KeyboardEvent | KeyboardEvent) {
if (!this.isOpen) return;
switch (evt.code) {
@@ -330,6 +328,7 @@ export class Menu extends React.Component<MenuProps, State> {
left: this.state?.menuStyle?.left,
top: this.state?.menuStyle?.top,
}}
onKeyDown={this.onKeyDown}
>
{menuItems}
</ul>