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

Adding MenuItems to catalog browse add button

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-11-02 12:58:07 +03:00
parent f73ec81cf3
commit 502a62a173
1 changed files with 43 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
src/renderer/components/+catalog/catalog-add-button.tsx
View File

@ -23,12 +23,13 @@ import "./catalog-add-button.scss";
import React from "react";
import { SpeedDial, SpeedDialAction } from "@material-ui/lab";
import { Icon } from "../icon";
import { disposeOnUnmount, observer } from "mobx-react";
import { observable, reaction, makeObservable } from "mobx";
import { observer } from "mobx-react";
import { observable, makeObservable, action } from "mobx";
import { boundMethod } from "../../../common/utils";
import type { CatalogCategory, CatalogEntityAddMenuContext, CatalogEntityAddMenu } from "../../api/catalog-entity";
import { EventEmitter } from "events";
import { navigate } from "../../navigation";
import { catalogCategoryRegistry } from "../../api/catalog-category-registry";
export type CatalogAddButtonProps = {
category: CatalogCategory
@ -37,7 +38,7 @@ export type CatalogAddButtonProps = {
@observer
export class CatalogAddButton extends React.Component<CatalogAddButtonProps> {
@observable protected isOpen = false;
protected menuItems = observable.array<CatalogEntityAddMenu>([]);
@observable menuItems: CatalogEntityAddMenu[] = [];
constructor(props: CatalogAddButtonProps) {
super(props);
@ -45,22 +46,43 @@ export class CatalogAddButton extends React.Component<CatalogAddButtonProps> {
}
componentDidMount() {
disposeOnUnmount(this, [
reaction(() => this.props.category, (category) => {
this.menuItems.clear();
if (category && category instanceof EventEmitter) {
const context: CatalogEntityAddMenuContext = {
navigate: (url: string) => navigate(url),
menuItems: this.menuItems
};
category.emit("catalogAddMenu", context);
}
}, { fireImmediately: true })
]);
this.updateMenuItems();
}
componentDidUpdate(prevProps: CatalogAddButtonProps) {
if (prevProps.category != this.props.category) {
this.updateMenuItems();
}
}
get categories() {
return catalogCategoryRegistry.filteredItems;
}
updateMenuItems() {
this.menuItems = [];
if (this.props.category) {
this.updateCategoryItems(this.props.category);
} else {
// Show menu items from all categories
this.categories.forEach(this.updateCategoryItems);
}
}
@action
updateCategoryItems = (category: CatalogCategory) => {
const context: CatalogEntityAddMenuContext = {
navigate: (url: string) => navigate(url),
menuItems: this.menuItems
};
if (category instanceof EventEmitter) {
category.emit("catalogAddMenu", context);
this.menuItems = category.filteredItems(this.menuItems);
}
};
@boundMethod
onOpen() {
this.isOpen = true;
@ -73,17 +95,14 @@ export class CatalogAddButton extends React.Component<CatalogAddButtonProps> {
@boundMethod
onButtonClick() {
const filteredItems = this.props.category ? this.props.category.filteredItems(this.menuItems) : [];
const defaultAction = filteredItems.find(item => item.defaultAction)?.onClick;
const clickAction = defaultAction || (filteredItems.length === 1 ? filteredItems[0].onClick : null);
const defaultAction = this.menuItems.find(item => item.defaultAction)?.onClick;
const clickAction = defaultAction || (this.menuItems.length === 1 ? this.menuItems[0].onClick : null);
clickAction?.();
}
render() {
const filteredItems = this.props.category ? this.props.category.filteredItems(this.menuItems) : [];
if (filteredItems.length === 0) {
if (this.menuItems.length === 0) {
return null;
}
@ -98,7 +117,7 @@ export class CatalogAddButton extends React.Component<CatalogAddButtonProps> {
direction="up"
onClick={this.onButtonClick}
>
{filteredItems.map((menuItem, index) => {
{this.menuItems.map((menuItem, index) => {
return <SpeedDialAction
key={index}
icon={<Icon material={menuItem.icon}/>}