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

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

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