hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Do not create Animate DOM element until its needed

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2022-03-24 14:44:14 +03:00
parent c2dcb06d23
commit 25293de92f
2 changed files with 7 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/renderer/components/animate/animate.tsx
View File

@ -90,9 +90,13 @@ export class Animate extends React.Component<AnimateProps> {
"--leave-duration": `${leaveDuration}ms`, "--leave-duration": `${leaveDuration}ms`,
} as React.CSSProperties; } as React.CSSProperties;
if (!this.isVisible) {
return null;
}
return React.cloneElement(contentElem, { return React.cloneElement(contentElem, {
className: cssNames("Animate", name, contentElem.props.className, this.statusClassName), className: cssNames("Animate", name, contentElem.props.className, this.statusClassName),
children: this.isVisible ? contentElem.props.children : null, children: contentElem.props.children,
style: { style: {
...contentElem.props.style, ...contentElem.props.style,
...durations, ...durations,

5
src/renderer/components/menu/menu.tsx
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(this.props.toggleEvent, this.toggle);
this.opener.addEventListener("keydown", this.onKeyDown); this.opener.addEventListener("keydown", this.onKeyDown);
} }
this.elem.addEventListener("keydown", this.onKeyDown);
window.addEventListener("resize", this.onWindowResize); window.addEventListener("resize", this.onWindowResize);
window.addEventListener("click", this.onClickOutside, true); window.addEventListener("click", this.onClickOutside, true);
window.addEventListener("scroll", this.onScrollOutside, 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(this.props.toggleEvent, this.toggle);
this.opener.removeEventListener("keydown", this.onKeyDown); this.opener.removeEventListener("keydown", this.onKeyDown);
} }
this.elem.removeEventListener("keydown", this.onKeyDown);
window.removeEventListener("resize", this.onWindowResize); window.removeEventListener("resize", this.onWindowResize);
window.removeEventListener("click", this.onClickOutside, true); window.removeEventListener("click", this.onClickOutside, true);
window.removeEventListener("scroll", this.onScrollOutside, 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; if (!this.isOpen) return;
switch (evt.code) { switch (evt.code) {
@ -330,6 +328,7 @@ export class Menu extends React.Component<MenuProps, State> {
left: this.state?.menuStyle?.left, left: this.state?.menuStyle?.left,
top: this.state?.menuStyle?.top, top: this.state?.menuStyle?.top,
}} }}
onKeyDown={this.onKeyDown}
> >
{menuItems} {menuItems}
</ul> </ul>