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

Catalog Browse page Add Button with menu (#4223)

Browse Source 
* Adding MenuItems to catalog browse add button

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Convert menuItems from Array to Map

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Clean up

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-11-02 18:46:18 +03:00 committed by GitHub
parent d8538eaa75
commit dec043f3f2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 58 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,21 +23,24 @@ 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
};
type CategoryId = string;
@observer
export class CatalogAddButton extends React.Component<CatalogAddButtonProps> {
@observable protected isOpen = false;
protected menuItems = observable.array<CatalogEntityAddMenu>([]);
@observable menuItems = new Map<CategoryId, CatalogEntityAddMenu[]>();
constructor(props: CatalogAddButtonProps) {
super(props);
@ -45,21 +48,48 @@ export class CatalogAddButton extends React.Component<CatalogAddButtonProps> {
}
componentDidMount() {
disposeOnUnmount(this, [
reaction(() => this.props.category, (category) => {
this.updateMenuItems();
}
componentDidUpdate(prevProps: CatalogAddButtonProps) {
if (prevProps.category != this.props.category) {
this.updateMenuItems();
}
}
get categories() {
return catalogCategoryRegistry.filteredItems;
}
@action
updateMenuItems() {
this.menuItems.clear();
if (category && category instanceof EventEmitter) {
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) => {
if (category instanceof EventEmitter) {
const menuItems: CatalogEntityAddMenu[] = [];
const context: CatalogEntityAddMenuContext = {
navigate: (url: string) => navigate(url),
menuItems: this.menuItems
menuItems
};
category.emit("catalogAddMenu", context);
this.menuItems.set(category.getId(), menuItems);
}
}, { fireImmediately: true })
]);
}
};
getCategoryFilteredItems = (category: CatalogCategory) => {
return category.filteredItems(this.menuItems.get(category.getId()) || []);
};
@boundMethod
onOpen() {
@ -73,17 +103,21 @@ 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.items.find(item => item.defaultAction)?.onClick;
const clickAction = defaultAction || (this.items.length === 1 ? this.items[0].onClick : null);
clickAction?.();
}
render() {
const filteredItems = this.props.category ? this.props.category.filteredItems(this.menuItems) : [];
get items() {
const { category } = this.props;
if (filteredItems.length === 0) {
return category ? this.getCategoryFilteredItems(category) :
this.categories.map(this.getCategoryFilteredItems).flat();
}
render() {
if (this.items.length === 0) {
return null;
}
@ -98,7 +132,7 @@ export class CatalogAddButton extends React.Component<CatalogAddButtonProps> {
direction="up"
onClick={this.onButtonClick}
>
{filteredItems.map((menuItem, index) => {
{this.items.map((menuItem, index) => {
return <SpeedDialAction
key={index}
icon={<Icon material={menuItem.icon}/>}