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

Switch to better tracking of enabled state, use actions, fix deleting item from details page

Browse Source 
Signed-off-by: Sebastian Malton <sebastian@malton.name>
This commit is contained in:
Sebastian Malton 2021-06-16 09:59:56 -04:00
parent 685fd971a7
commit 3cffaaab43
9 changed files with 104 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/common/catalog-entities/kubernetes-cluster.ts
View File

@ -114,7 +114,6 @@ export class KubernetesCluster extends CatalogEntity<CatalogEntityMetadata, Kube
icon: "delete", icon: "delete",
onClick: () => { onClick: () => {
HotbarStore.getInstance().removeAllHotbarItems(this.getId()); HotbarStore.getInstance().removeAllHotbarItems(this.getId());
context.hideDetails();
requestMain(clusterDeleteHandler, this.metadata.uid); requestMain(clusterDeleteHandler, this.metadata.uid);
}, },
confirm: { confirm: {

1
src/common/catalog/catalog-entity.ts
View File

@ -135,7 +135,6 @@ export interface CatalogEntitySettingsMenu {
export interface CatalogEntityContextMenuContext { export interface CatalogEntityContextMenuContext {
navigate: (url: string) => void; navigate: (url: string) => void;
hideDetails: () => void;
menuItems: CatalogEntityContextMenu[]; menuItems: CatalogEntityContextMenu[];
} }

7
src/main/cluster-manager.ts
View File

@ -62,7 +62,7 @@ export class ClusterManager extends Singleton {
observe(this.deleting, change => { observe(this.deleting, change => {
if (change.type === "add") { if (change.type === "add") {
catalogEntityRegistry.getById(change.newValue).status.phase = "deleting"; this.updateEntityStatus(catalogEntityRegistry.getById(change.newValue));
} }
}); });
@ -122,12 +122,13 @@ export class ClusterManager extends Singleton {
catalogEntityRegistry.items.splice(index, 1, entity); catalogEntityRegistry.items.splice(index, 1, entity);
} }
protected updateEntityStatus(entity: KubernetesCluster, cluster: Cluster) { @action
protected updateEntityStatus(entity: KubernetesCluster, cluster?: Cluster) {
if (this.deleting.has(entity.getId())) { if (this.deleting.has(entity.getId())) {
entity.status.phase = "deleting"; entity.status.phase = "deleting";
entity.status.enabled = false; entity.status.enabled = false;
} else { } else {
entity.status.phase = cluster.accessible ? "connected" : "disconnected"; entity.status.phase = cluster?.accessible ? "connected" : "disconnected";
entity.status.enabled = true; entity.status.enabled = true;
} }
} }

70
src/renderer/components/+catalog/catalog-entity-details.tsx
View File

@ -26,28 +26,18 @@ import { Drawer, DrawerItem, DrawerItemLabels } from "../drawer";
import { CatalogEntity, catalogEntityRunContext } from "../../api/catalog-entity"; import { CatalogEntity, catalogEntityRunContext } from "../../api/catalog-entity";
import type { CatalogCategory } from "../../../common/catalog"; import type { CatalogCategory } from "../../../common/catalog";
import { Icon } from "../icon"; import { Icon } from "../icon";
import { KubeObject } from "../../api/kube-object";
import { CatalogEntityDrawerMenu } from "./catalog-entity-drawer-menu"; import { CatalogEntityDrawerMenu } from "./catalog-entity-drawer-menu";
import { CatalogEntityDetailRegistry } from "../../../extensions/registries"; import { CatalogEntityDetailRegistry } from "../../../extensions/registries";
import { HotbarIcon } from "../hotbar/hotbar-icon"; import { HotbarIcon } from "../hotbar/hotbar-icon";
import type { CatalogEntityItem } from "./catalog-entity.store";
interface Props { interface Props<T extends CatalogEntity> {
entity: CatalogEntity; item: CatalogEntityItem<T> | null | undefined;
hideDetails(): void; hideDetails(): void;
} }
@observer @observer
export class CatalogEntityDetails extends Component<Props> { export class CatalogEntityDetails<T extends CatalogEntity> extends Component<Props<T>> {
private abortController?: AbortController;
constructor(props: Props) {
super(props);
}
componentWillUnmount() {
this.abortController?.abort();
}
categoryIcon(category: CatalogCategory) { categoryIcon(category: CatalogCategory) {
if (category.metadata.icon.includes("<svg")) { if (category.metadata.icon.includes("<svg")) {
return <Icon svg={category.metadata.icon} smallest />; return <Icon svg={category.metadata.icon} smallest />;
@ -56,16 +46,10 @@ export class CatalogEntityDetails extends Component<Props> {
} }
} }
openEntity() { renderContent(item: CatalogEntityItem<T>) {
this.props.entity.onRun(catalogEntityRunContext); const detailItems = CatalogEntityDetailRegistry.getInstance().getItemsForKind(item.kind, item.apiVersion);
} const details = detailItems.map(({ components }, index) => {
return <components.Details entity={item.entity} key={index}/>;
renderContent() {
const { entity } = this.props;
const labels = KubeObject.stringifyLabels(entity.metadata.labels);
const detailItems = CatalogEntityDetailRegistry.getInstance().getItemsForKind(entity.kind, entity.apiVersion);
const details = detailItems.map((item, index) => {
return <item.components.Details entity={entity} key={index}/>;
}); });
const showDetails = detailItems.find((item) => item.priority > 999) === undefined; const showDetails = detailItems.find((item) => item.priority > 999) === undefined;
@ -76,29 +60,35 @@ export class CatalogEntityDetails extends Component<Props> {
<div className="flex CatalogEntityDetails"> <div className="flex CatalogEntityDetails">
<div className="EntityIcon box top left"> <div className="EntityIcon box top left">
<HotbarIcon <HotbarIcon
uid={entity.metadata.uid} uid={item.id}
title={entity.metadata.name} title={item.name}
source={entity.metadata.source} source={item.source}
icon={entity.spec.iconData} icon={item.entity.spec.iconData}
onClick={() => this.openEntity()} disabled={!item?.enabled}
onClick={() => item.onRun(catalogEntityRunContext)}
size={128} /> size={128} />
<div className="IconHint"> {item?.enabled && (
Click to open <div className="IconHint">
</div> Click to open
</div>
)}
</div> </div>
<div className="box grow EntityMetadata"> <div className="box grow EntityMetadata">
<DrawerItem name="Name"> <DrawerItem name="Name">
{entity.metadata.name} {item.name}
</DrawerItem> </DrawerItem>
<DrawerItem name="Kind"> <DrawerItem name="Kind">
{entity.kind} {item.kind}
</DrawerItem> </DrawerItem>
<DrawerItem name="Source"> <DrawerItem name="Source">
{entity.metadata.source} {item.source}
</DrawerItem>
<DrawerItem name="Status">
{item.phase}
</DrawerItem> </DrawerItem>
<DrawerItemLabels <DrawerItemLabels
name="Labels" name="Labels"
labels={labels} labels={item.labels}
/> />
</div> </div>
</div> </div>
@ -111,8 +101,8 @@ export class CatalogEntityDetails extends Component<Props> {
} }
render() { render() {
const { entity, hideDetails } = this.props; const { item, hideDetails } = this.props;
const title = `${entity.kind}: ${entity.metadata.name}`; const title = `${item.kind}: ${item.name}`;
return ( return (
<Drawer <Drawer
@ -120,10 +110,10 @@ export class CatalogEntityDetails extends Component<Props> {
usePortal={true} usePortal={true}
open={true} open={true}
title={title} title={title}
toolbar={<CatalogEntityDrawerMenu entity={entity} key={entity.getId()} hideDrawer={hideDetails} />} toolbar={<CatalogEntityDrawerMenu item={item} key={item.getId()} />}
onClose={hideDetails} onClose={hideDetails}
> >
{this.renderContent()} {item && this.renderContent(item)}
</Drawer> </Drawer>
); );
} }

15
src/renderer/components/+catalog/catalog-entity-drawer-menu.tsx
View File

@ -30,10 +30,10 @@ import { MenuItem } from "../menu";
import { ConfirmDialog } from "../confirm-dialog"; import { ConfirmDialog } from "../confirm-dialog";
import { HotbarStore } from "../../../common/hotbar-store"; import { HotbarStore } from "../../../common/hotbar-store";
import { Icon } from "../icon"; import { Icon } from "../icon";
import type { CatalogEntityItem } from "./catalog-entity.store";
export interface CatalogEntityDrawerMenuProps<T extends CatalogEntity> extends MenuActionsProps { export interface CatalogEntityDrawerMenuProps<T extends CatalogEntity> extends MenuActionsProps {
entity: T | null | undefined; item: CatalogEntityItem<T> | null | undefined;
hideDrawer: () => void,
} }
@observer @observer
@ -49,9 +49,8 @@ export class CatalogEntityDrawerMenu<T extends CatalogEntity> extends React.Comp
this.contextMenu = { this.contextMenu = {
menuItems: [], menuItems: [],
navigate: (url: string) => navigate(url), navigate: (url: string) => navigate(url),
hideDetails: this.props.hideDrawer,
}; };
this.props.entity?.onContextMenuOpen(this.contextMenu); this.props.item?.onContextMenuOpen(this.contextMenu);
} }
onMenuItemClick(menuItem: CatalogEntityContextMenu) { onMenuItemClick(menuItem: CatalogEntityContextMenu) {
@ -109,19 +108,19 @@ export class CatalogEntityDrawerMenu<T extends CatalogEntity> extends React.Comp
} }
render() { render() {
if (!this.contextMenu) { const { className, item: entity, ...menuProps } = this.props;
if (!this.contextMenu || !entity.enabled) {
return null; return null;
} }
const { className, entity, ...menuProps } = this.props;
return ( return (
<MenuActions <MenuActions
className={cssNames("CatalogEntityDrawerMenu", className)} className={cssNames("CatalogEntityDrawerMenu", className)}
toolbar toolbar
{...menuProps} {...menuProps}
> >
{this.getMenuItems(entity)} {this.getMenuItems(entity.entity)}
</MenuActions> </MenuActions>
); );
} }

17
src/renderer/components/+catalog/catalog-entity.store.ts
View File

@ -25,13 +25,17 @@ import type { CatalogEntity, CatalogEntityActionContext } from "../../api/catalo
import { ItemObject, ItemStore } from "../../item.store"; import { ItemObject, ItemStore } from "../../item.store";
import { CatalogCategory, catalogCategoryRegistry } from "../../../common/catalog"; import { CatalogCategory, catalogCategoryRegistry } from "../../../common/catalog";
import { autoBind } from "../../../common/utils"; import { autoBind } from "../../../common/utils";
export class CatalogEntityItem implements ItemObject { export class CatalogEntityItem<T extends CatalogEntity> implements ItemObject {
constructor(public entity: CatalogEntity) {} constructor(public entity: T) {}
get kind() { get kind() {
return this.entity.kind; return this.entity.kind;
} }
get apiVersion() {
return this.entity.apiVersion;
}
get name() { get name() {
return this.entity.metadata.name; return this.entity.metadata.name;
} }
@ -52,7 +56,7 @@ export class CatalogEntityItem implements ItemObject {
return this.entity.status.phase; return this.entity.status.phase;
} }
@computed get enabled() { get enabled() {
return this.entity.status.enabled ?? true; return this.entity.status.enabled ?? true;
} }
@ -91,7 +95,7 @@ export class CatalogEntityItem implements ItemObject {
} }
} }
export class CatalogEntityStore extends ItemStore<CatalogEntityItem> { export class CatalogEntityStore extends ItemStore<CatalogEntityItem<CatalogEntity>> {
constructor() { constructor() {
super(); super();
makeObservable(this); makeObservable(this);
@ -99,6 +103,7 @@ export class CatalogEntityStore extends ItemStore<CatalogEntityItem> {
} }
@observable activeCategory?: CatalogCategory; @observable activeCategory?: CatalogCategory;
@observable selectedItemId?: string;
@computed get entities() { @computed get entities() {
if (!this.activeCategory) { if (!this.activeCategory) {
@ -108,6 +113,10 @@ export class CatalogEntityStore extends ItemStore<CatalogEntityItem> {
return catalogEntityRegistry.getItemsForCategory(this.activeCategory).map(entity => new CatalogEntityItem(entity)); return catalogEntityRegistry.getItemsForCategory(this.activeCategory).map(entity => new CatalogEntityItem(entity));
} }
@computed get selectedItem() {
return this.entities.find(e => e.getId() === this.selectedItemId);
}
watch() { watch() {
const disposers: IReactionDisposer[] = [ const disposers: IReactionDisposer[] = [
reaction(() => this.entities, () => this.loadAll()), reaction(() => this.entities, () => this.loadAll()),

63
src/renderer/components/+catalog/catalog.tsx
View File

@ -32,7 +32,7 @@ import type { CatalogEntityContextMenu, CatalogEntityContextMenuContext } from "
import { Badge } from "../badge"; import { Badge } from "../badge";
import { HotbarStore } from "../../../common/hotbar-store"; import { HotbarStore } from "../../../common/hotbar-store";
import { ConfirmDialog } from "../confirm-dialog"; import { ConfirmDialog } from "../confirm-dialog";
import { catalogCategoryRegistry } from "../../../common/catalog"; import { catalogCategoryRegistry, CatalogEntity } from "../../../common/catalog";
import { CatalogAddButton } from "./catalog-add-button"; import { CatalogAddButton } from "./catalog-add-button";
import type { RouteComponentProps } from "react-router"; import type { RouteComponentProps } from "react-router";
import { Notifications } from "../notifications"; import { Notifications } from "../notifications";
@ -59,7 +59,6 @@ export class Catalog extends React.Component<Props> {
@observable private catalogEntityStore?: CatalogEntityStore; @observable private catalogEntityStore?: CatalogEntityStore;
@observable private contextMenu: CatalogEntityContextMenuContext; @observable private contextMenu: CatalogEntityContextMenuContext;
@observable activeTab?: string; @observable activeTab?: string;
@observable selectedItem?: CatalogEntityItem;
constructor(props: Props) { constructor(props: Props) {
super(props); super(props);
@ -80,7 +79,6 @@ export class Catalog extends React.Component<Props> {
this.contextMenu = { this.contextMenu = {
menuItems: observable.array([]), menuItems: observable.array([]),
navigate: (url: string) => navigate(url), navigate: (url: string) => navigate(url),
hideDetails: () => this.selectedItem = null,
}; };
this.catalogEntityStore = new CatalogEntityStore(); this.catalogEntityStore = new CatalogEntityStore();
disposeOnUnmount(this, [ disposeOnUnmount(this, [
@ -104,12 +102,12 @@ export class Catalog extends React.Component<Props> {
]); ]);
} }
addToHotbar(item: CatalogEntityItem): void { addToHotbar(item: CatalogEntityItem<CatalogEntity>): void {
HotbarStore.getInstance().addToHotbar(item.entity); HotbarStore.getInstance().addToHotbar(item.entity);
} }
onDetails = (item: CatalogEntityItem) => { onDetails = (item: CatalogEntityItem<CatalogEntity>) => {
this.selectedItem = item; this.catalogEntityStore.selectedItemId = item.getId();
}; };
onMenuItemClick(menuItem: CatalogEntityContextMenu) { onMenuItemClick(menuItem: CatalogEntityContextMenu) {
@ -145,7 +143,7 @@ export class Catalog extends React.Component<Props> {
return <CatalogMenu activeItem={this.activeTab} onItemClick={this.onTabChange}/>; return <CatalogMenu activeItem={this.activeTab} onItemClick={this.onTabChange}/>;
} }
renderItemMenu = (item: CatalogEntityItem) => { renderItemMenu = (item: CatalogEntityItem<CatalogEntity>) => {
const onOpen = () => { const onOpen = () => {
this.contextMenu.menuItems = []; this.contextMenu.menuItems = [];
@ -168,7 +166,7 @@ export class Catalog extends React.Component<Props> {
); );
}; };
renderIcon(item: CatalogEntityItem) { renderIcon(item: CatalogEntityItem<CatalogEntity>) {
return ( return (
<HotbarIcon <HotbarIcon
uid={item.getId()} uid={item.getId()}
@ -189,12 +187,12 @@ export class Catalog extends React.Component<Props> {
store={this.catalogEntityStore} store={this.catalogEntityStore}
tableId="catalog-items" tableId="catalog-items"
sortingCallbacks={{ sortingCallbacks={{
[sortBy.name]: (item: CatalogEntityItem) => item.name, [sortBy.name]: (item: CatalogEntityItem<CatalogEntity>) => item.name,
[sortBy.source]: (item: CatalogEntityItem) => item.source, [sortBy.source]: (item: CatalogEntityItem<CatalogEntity>) => item.source,
[sortBy.status]: (item: CatalogEntityItem) => item.phase, [sortBy.status]: (item: CatalogEntityItem<CatalogEntity>) => item.phase,
}} }}
searchFilters={[ searchFilters={[
(entity: CatalogEntityItem) => entity.searchFields, (entity: CatalogEntityItem<CatalogEntity>) => entity.searchFields,
]} ]}
renderTableHeader={[ renderTableHeader={[
{ title: "", className: css.iconCell }, { title: "", className: css.iconCell },
@ -203,10 +201,10 @@ export class Catalog extends React.Component<Props> {
{ title: "Labels", className: css.labelsCell }, { title: "Labels", className: css.labelsCell },
{ title: "Status", className: css.statusCell, sortBy: sortBy.status }, { title: "Status", className: css.statusCell, sortBy: sortBy.status },
]} ]}
customizeTableRowProps={(item: CatalogEntityItem) => ({ customizeTableRowProps={(item: CatalogEntityItem<CatalogEntity>) => ({
disabled: !item.enabled, disabled: !item.enabled,
})} })}
renderTableContents={(item: CatalogEntityItem) => [ renderTableContents={(item: CatalogEntityItem<CatalogEntity>) => [
this.renderIcon(item), this.renderIcon(item),
item.name, item.name,
item.source, item.source,
@ -228,13 +226,13 @@ export class Catalog extends React.Component<Props> {
store={this.catalogEntityStore} store={this.catalogEntityStore}
tableId="catalog-items" tableId="catalog-items"
sortingCallbacks={{ sortingCallbacks={{
[sortBy.name]: (item: CatalogEntityItem) => item.name, [sortBy.name]: (item: CatalogEntityItem<CatalogEntity>) => item.name,
[sortBy.kind]: (item: CatalogEntityItem) => item.kind, [sortBy.kind]: (item: CatalogEntityItem<CatalogEntity>) => item.kind,
[sortBy.source]: (item: CatalogEntityItem) => item.source, [sortBy.source]: (item: CatalogEntityItem<CatalogEntity>) => item.source,
[sortBy.status]: (item: CatalogEntityItem) => item.phase, [sortBy.status]: (item: CatalogEntityItem<CatalogEntity>) => item.phase,
}} }}
searchFilters={[ searchFilters={[
(entity: CatalogEntityItem) => entity.searchFields, (entity: CatalogEntityItem<CatalogEntity>) => entity.searchFields,
]} ]}
renderTableHeader={[ renderTableHeader={[
{ title: "", className: css.iconCell }, { title: "", className: css.iconCell },
@ -244,10 +242,10 @@ export class Catalog extends React.Component<Props> {
{ title: "Labels", className: css.labelsCell }, { title: "Labels", className: css.labelsCell },
{ title: "Status", className: css.statusCell, sortBy: sortBy.status }, { title: "Status", className: css.statusCell, sortBy: sortBy.status },
]} ]}
customizeTableRowProps={(item: CatalogEntityItem) => ({ customizeTableRowProps={(item: CatalogEntityItem<CatalogEntity>) => ({
disabled: !item.enabled, disabled: !item.enabled,
})} })}
renderTableContents={(item: CatalogEntityItem) => [ renderTableContents={(item: CatalogEntityItem<CatalogEntity>) => [
this.renderIcon(item), this.renderIcon(item),
item.name, item.name,
item.kind, item.kind,
@ -255,7 +253,7 @@ export class Catalog extends React.Component<Props> {
item.labels.map((label) => <Badge className={css.badge} key={label} label={label} title={label} />), item.labels.map((label) => <Badge className={css.badge} key={label} label={label} title={label} />),
{ title: item.phase, className: cssNames(css[item.phase]) } { title: item.phase, className: cssNames(css[item.phase]) }
]} ]}
detailsItem={this.selectedItem} detailsItem={this.catalogEntityStore.selectedItem}
onDetails={this.onDetails} onDetails={this.onDetails}
renderItemMenu={this.renderItemMenu} renderItemMenu={this.renderItemMenu}
/> />
@ -272,15 +270,18 @@ export class Catalog extends React.Component<Props> {
<div className="p-6 h-full"> <div className="p-6 h-full">
{ this.catalogEntityStore.activeCategory ? this.renderSingleCategoryList() : this.renderAllCategoriesList() } { this.catalogEntityStore.activeCategory ? this.renderSingleCategoryList() : this.renderAllCategoriesList() }
</div> </div>
{ !this.selectedItem && ( {
<CatalogAddButton category={this.catalogEntityStore.activeCategory} /> this.catalogEntityStore.selectedItem
)} ? (
{ this.selectedItem && ( <CatalogEntityDetails
<CatalogEntityDetails item={this.catalogEntityStore.selectedItem}
entity={this.selectedItem.entity} hideDetails={() => this.catalogEntityStore.selectedItemId = null}
hideDetails={() => this.selectedItem = null} />
/> )
)} : (
<CatalogAddButton category = {this.catalogEntityStore.activeCategory} />
)
}
</MainLayout> </MainLayout>
); );
} }

3
src/renderer/components/hotbar/hotbar-entity-icon.tsx
View File

@ -27,7 +27,7 @@ import type { CatalogEntity, CatalogEntityContextMenu, CatalogEntityContextMenuC
import { catalogCategoryRegistry } from "../../api/catalog-category-registry"; import { catalogCategoryRegistry } from "../../api/catalog-category-registry";
import { catalogEntityRegistry } from "../../api/catalog-entity-registry"; import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
import { navigate } from "../../navigation"; import { navigate } from "../../navigation";
import { cssNames, IClassName, noop } from "../../utils"; import { cssNames, IClassName } from "../../utils";
import { Icon } from "../icon"; import { Icon } from "../icon";
import { HotbarIcon } from "./hotbar-icon"; import { HotbarIcon } from "./hotbar-icon";
import { HotbarStore } from "../../../common/hotbar-store"; import { HotbarStore } from "../../../common/hotbar-store";
@ -55,7 +55,6 @@ export class HotbarEntityIcon extends React.Component<Props> {
this.contextMenu = { this.contextMenu = {
menuItems: [], menuItems: [],
navigate: (url: string) => navigate(url), navigate: (url: string) => navigate(url),
hideDetails: noop,
}; };
} }

21
src/renderer/components/hotbar/hotbar-icon.tsx
View File

@ -62,7 +62,7 @@ function onMenuItemClick(menuItem: CatalogEntityContextMenu) {
} }
export const HotbarIcon = observer(({menuItems = [], size = 40, ...props}: HotbarIconProps) => { export const HotbarIcon = observer(({menuItems = [], size = 40, ...props}: HotbarIconProps) => {
const { uid, title, icon, active, className, source, disabled, onMenuOpen, children, ...rest } = props; const { uid, title, icon, active, className, source, disabled, onMenuOpen, onClick, children, ...rest } = props;
const id = `hotbarIcon-${uid}`; const id = `hotbarIcon-${uid}`;
const [menuOpen, setMenuOpen] = useState(false); const [menuOpen, setMenuOpen] = useState(false);
@ -77,7 +77,13 @@ export const HotbarIcon = observer(({menuItems = [], size = 40, ...props}: Hotba
src={icon} src={icon}
className={active ? "active" : "default"} className={active ? "active" : "default"}
width={size} width={size}
height={size} />; height={size}
onClick={(event) => {
if (!disabled) {
onClick?.(event);
}
}}
/>;
} else { } else {
return <Avatar return <Avatar
{...rest} {...rest}
@ -86,6 +92,11 @@ export const HotbarIcon = observer(({menuItems = [], size = 40, ...props}: Hotba
className={active ? "active" : "default"} className={active ? "active" : "default"}
width={size} width={size}
height={size} height={size}
onClick={(event) => {
if (!disabled) {
onClick?.(event);
}
}}
/>; />;
} }
}; };
@ -106,8 +117,10 @@ export const HotbarIcon = observer(({menuItems = [], size = 40, ...props}: Hotba
toggleEvent="contextmenu" toggleEvent="contextmenu"
position={{right: true, bottom: true }} // FIXME: position does not work position={{right: true, bottom: true }} // FIXME: position does not work
open={() => { open={() => {
onMenuOpen?.(); if (!disabled) {
toggleMenu(); onMenuOpen?.();
toggleMenu();
}
}} }}
close={() => toggleMenu()}> close={() => toggleMenu()}>
{ menuItems.map((menuItem) => { { menuItems.map((menuItem) => {