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

Make <MenuActions /> not animated if toolbar to increase determinism

Browse Source 
Signed-off-by: Sebastian Malton <sebastian@malton.name>
This commit is contained in:
Sebastian Malton 2022-05-02 12:13:00 -04:00
parent 4d57bcaf9a
commit 8dc7342255
3 changed files with 36 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/renderer/components/kube-object-menu/__snapshots__/kube-object-menu.test.tsx.snap
View File

@ -5,8 +5,7 @@ exports[`kube-object-menu given kube object renders 1`] = `
<div>
<div>
<ul
class="Animate opacity Menu MenuActions flex KubeObjectMenu toolbar gaps right bottom"
style="--enter-duration: 100ms; --leave-duration: 100ms;"
class="Menu MenuActions flex KubeObjectMenu toolbar gaps right bottom"
>
<li>
Some menu item
@ -45,8 +44,7 @@ exports[`kube-object-menu given kube object when removing kube object renders 1`
<div>
<div>
<ul
class="Animate opacity Menu MenuActions flex KubeObjectMenu toolbar gaps right bottom enter"
style="--enter-duration: 100ms; --leave-duration: 100ms;"
class="Menu MenuActions flex KubeObjectMenu toolbar gaps right bottom"
>
<li>
Some menu item
@ -139,8 +137,7 @@ exports[`kube-object-menu given kube object with namespace when removing kube ob
<div>
<div>
<ul
class="Animate opacity Menu MenuActions flex KubeObjectMenu toolbar gaps right bottom"
style="--enter-duration: 100ms; --leave-duration: 100ms;"
class="Menu MenuActions flex KubeObjectMenu toolbar gaps right bottom"
>
<li>
Some menu item
@ -233,8 +230,7 @@ exports[`kube-object-menu given kube object without namespace when removing kube
<div>
<div>
<ul
class="Animate opacity Menu MenuActions flex KubeObjectMenu toolbar gaps right bottom enter"
style="--enter-duration: 100ms; --leave-duration: 100ms;"
class="Menu MenuActions flex KubeObjectMenu toolbar gaps right bottom"
>
<li>
Some menu item
@ -326,8 +322,7 @@ exports[`kube-object-menu given no kube object, renders 1`] = `
<body>
<div>
<ul
class="Animate opacity Menu MenuActions flex KubeObjectMenu toolbar gaps right bottom"
style="--enter-duration: 100ms; --leave-duration: 100ms;"
class="Menu MenuActions flex KubeObjectMenu toolbar gaps right bottom"
/>
</div>
</body>

1
src/renderer/components/menu/menu-actions.tsx
View File

@ -137,6 +137,7 @@ class NonInjectedMenuActions extends React.Component<MenuActionsProps & Dependen
toolbar,
gaps: toolbar, // add spacing for .flex
})}
animated={!toolbar}
usePortal={autoClose}
closeOnScroll={autoClose}
closeOnClickItem={autoCloseOnSelect ?? autoClose}

46
src/renderer/components/menu/menu.tsx
View File

@ -42,6 +42,7 @@ export interface MenuProps {
closeOnScroll?: boolean; // applicable when usePortal={true}
position?: MenuPosition; // applicable when usePortal={false}
children?: ReactNode;
animated?: boolean;
toggleEvent?: "click" | "contextmenu";
}
@ -58,6 +59,7 @@ const defaultPropsMenu: Partial<MenuProps> = {
closeOnClickOutside: true,
closeOnScroll: false,
toggleEvent: "click",
animated: true,
};
export class Menu extends React.Component<MenuProps, State> {
@ -297,7 +299,7 @@ export class Menu extends React.Component<MenuProps, State> {
}
render() {
const { position, id } = this.props;
const { position, id, animated } = this.props;
let { className, usePortal } = this.props;
className = cssNames("Menu", className, this.state.position || position, {
@ -319,28 +321,40 @@ export class Menu extends React.Component<MenuProps, State> {
return item;
});
const menu = (
<MenuContext.Provider value={this}>
let menu = (
<ul
id={id}
ref={this.bindRef}
className={className}
style={{
left: this.state?.menuStyle?.left,
top: this.state?.menuStyle?.top,
}}
onKeyDown={this.onKeyDown}
>
{menuItems}
</ul>
);
if (animated) {
menu = (
<Animate enter={this.isOpen}>
<ul
id={id}
ref={this.bindRef}
className={className}
style={{
left: this.state?.menuStyle?.left,
top: this.state?.menuStyle?.top,
}}
onKeyDown={this.onKeyDown}
>
{menuItems}
</ul>
{menu}
</Animate>
);
}
menu = (
<MenuContext.Provider value={this}>
{menu}
</MenuContext.Provider>
);
if (usePortal === true) usePortal = document.body;
return usePortal instanceof HTMLElement ? createPortal(menu, usePortal) : menu;
return usePortal instanceof HTMLElement
? createPortal(menu, usePortal)
: menu;
}
}