mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Abstract out HotbarEntityIcon from HotbarIcon
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev
parent
e2220f95de
commit
4d70fffe17
115
src/renderer/components/hotbar/hotbar-entity-icon.tsx
Normal file
115
src/renderer/components/hotbar/hotbar-entity-icon.tsx
Normal file
@ -0,0 +1,115 @@
|
||||
import "./hotbar-icon.scss";
|
||||
|
||||
import React, { DOMAttributes } from "react";
|
||||
import { observable } from "mobx";
|
||||
import { observer } from "mobx-react";
|
||||
import randomColor from "randomcolor";
|
||||
|
||||
import { CatalogEntity, CatalogEntityContextMenu, CatalogEntityContextMenuContext } from "../../../common/catalog";
|
||||
import { catalogCategoryRegistry } from "../../api/catalog-category-registry";
|
||||
import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
|
||||
import { navigate } from "../../navigation";
|
||||
import { cssNames, IClassName } from "../../utils";
|
||||
import { ConfirmDialog } from "../confirm-dialog";
|
||||
import { Icon } from "../icon";
|
||||
import { HotbarIcon } from "./hotbar-icon";
|
||||
|
||||
interface Props extends DOMAttributes<HTMLElement> {
|
||||
entity: CatalogEntity;
|
||||
className?: IClassName;
|
||||
errorClass?: IClassName;
|
||||
remove: (uid: string) => void;
|
||||
}
|
||||
|
||||
@observer
|
||||
export class HotbarEntityIcon extends React.Component<Props> {
|
||||
@observable.deep private contextMenu: CatalogEntityContextMenuContext;
|
||||
|
||||
componentDidMount() {
|
||||
this.contextMenu = {
|
||||
menuItems: [],
|
||||
navigate: (url: string) => navigate(url)
|
||||
};
|
||||
}
|
||||
|
||||
get kindIcon() {
|
||||
const className = "badge";
|
||||
const category = catalogCategoryRegistry.getCategoryForEntity(this.props.entity);
|
||||
|
||||
if (!category) {
|
||||
return <Icon material="bug_report" className={className} />;
|
||||
}
|
||||
|
||||
if (category.metadata.icon.includes("<svg")) {
|
||||
return <Icon svg={category.metadata.icon} className={className} />;
|
||||
} else {
|
||||
return <Icon material={category.metadata.icon} className={className} />;
|
||||
}
|
||||
}
|
||||
|
||||
get ledIcon() {
|
||||
const className = cssNames("led", { online: this.props.entity.status.phase == "connected"}); // TODO: make it more generic
|
||||
|
||||
return <div className={className} />;
|
||||
}
|
||||
|
||||
isActive(item: CatalogEntity) {
|
||||
return catalogEntityRegistry.activeEntity?.metadata?.uid == item.getId();
|
||||
}
|
||||
|
||||
onMenuItemClick(menuItem: CatalogEntityContextMenu) {
|
||||
if (menuItem.confirm) {
|
||||
ConfirmDialog.open({
|
||||
okButtonProps: {
|
||||
primary: false,
|
||||
accent: true,
|
||||
},
|
||||
ok: () => {
|
||||
menuItem.onClick();
|
||||
},
|
||||
message: menuItem.confirm.message
|
||||
});
|
||||
} else {
|
||||
menuItem.onClick();
|
||||
}
|
||||
}
|
||||
|
||||
generateAvatarStyle(entity: CatalogEntity): React.CSSProperties {
|
||||
return {
|
||||
"backgroundColor": randomColor({ seed: `${entity.metadata.name}-${entity.metadata.source}`, luminosity: "dark" })
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
entity, errorClass, remove,
|
||||
children, ...elemProps
|
||||
} = this.props;
|
||||
const className = cssNames("HotbarEntityIcon", this.props.className, {
|
||||
interactive: true,
|
||||
active: this.isActive(entity),
|
||||
disabled: !entity
|
||||
});
|
||||
const onOpen = async () => {
|
||||
await entity.onContextMenuOpen(this.contextMenu);
|
||||
};
|
||||
const menuItems = this.contextMenu?.menuItems.filter((menuItem) => !menuItem.onlyVisibleForSource || menuItem.onlyVisibleForSource === entity.metadata.source);
|
||||
|
||||
return (
|
||||
<HotbarIcon
|
||||
uid={entity.getId()}
|
||||
title={entity.getName()}
|
||||
source={`${entity.metadata.source || "local"}`}
|
||||
className={className}
|
||||
active={this.isActive(entity)}
|
||||
remove={remove}
|
||||
onMenuOpen={onOpen}
|
||||
menuItems={menuItems}
|
||||
{...elemProps}
|
||||
>
|
||||
{ this.ledIcon }
|
||||
{ this.kindIcon }
|
||||
</HotbarIcon>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,27 +1,50 @@
|
||||
import "./hotbar-icon.scss";
|
||||
|
||||
import React, { DOMAttributes } from "react";
|
||||
import { observer } from "mobx-react";
|
||||
import { cssNames, IClassName, iter } from "../../utils";
|
||||
import { Tooltip } from "../tooltip";
|
||||
import React, { DOMAttributes, useState } from "react";
|
||||
import { Avatar } from "@material-ui/core";
|
||||
import { CatalogEntity, CatalogEntityContextMenu, CatalogEntityContextMenuContext } from "../../../common/catalog";
|
||||
import { Menu, MenuItem } from "../menu";
|
||||
import { Icon } from "../icon";
|
||||
import { computed, observable } from "mobx";
|
||||
import { navigate } from "../../navigation";
|
||||
import { HotbarStore } from "../../../common/hotbar-store";
|
||||
import { ConfirmDialog } from "../confirm-dialog";
|
||||
import randomColor from "randomcolor";
|
||||
import { catalogCategoryRegistry } from "../../api/catalog-category-registry";
|
||||
import GraphemeSplitter from "grapheme-splitter";
|
||||
|
||||
import { CatalogEntityContextMenu } from "../../../common/catalog";
|
||||
import { cssNames, IClassName, iter } from "../../utils";
|
||||
import { ConfirmDialog } from "../confirm-dialog";
|
||||
import { Icon } from "../icon";
|
||||
import { Menu, MenuItem } from "../menu";
|
||||
import { MaterialTooltip } from "../+catalog/material-tooltip/material-tooltip";
|
||||
|
||||
interface Props extends DOMAttributes<HTMLElement> {
|
||||
entity: CatalogEntity;
|
||||
index: number;
|
||||
uid: string;
|
||||
title: string;
|
||||
source: string;
|
||||
remove: (uid: string) => void;
|
||||
onMenuOpen?: () => void;
|
||||
className?: IClassName;
|
||||
errorClass?: IClassName;
|
||||
isActive?: boolean;
|
||||
active?: boolean;
|
||||
menuItems?: CatalogEntityContextMenu[];
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
function generateAvatarStyle(seed: string): React.CSSProperties {
|
||||
return {
|
||||
"backgroundColor": randomColor({ seed, luminosity: "dark" })
|
||||
};
|
||||
}
|
||||
|
||||
function onMenuItemClick(menuItem: CatalogEntityContextMenu) {
|
||||
if (menuItem.confirm) {
|
||||
ConfirmDialog.open({
|
||||
okButtonProps: {
|
||||
primary: false,
|
||||
accent: true,
|
||||
},
|
||||
ok: () => {
|
||||
menuItem.onClick();
|
||||
},
|
||||
message: menuItem.confirm.message
|
||||
});
|
||||
} else {
|
||||
menuItem.onClick();
|
||||
}
|
||||
}
|
||||
|
||||
function getNameParts(name: string): string[] {
|
||||
@ -40,20 +63,17 @@ function getNameParts(name: string): string[] {
|
||||
return name.split(/@+/);
|
||||
}
|
||||
|
||||
@observer
|
||||
export class HotbarIcon extends React.Component<Props> {
|
||||
@observable.deep private contextMenu: CatalogEntityContextMenuContext;
|
||||
@observable menuOpen = false;
|
||||
export function HotbarIcon(props: Props) {
|
||||
const { uid, title, className, source, active, remove, disabled, menuItems, onMenuOpen, children, ...rest } = props;
|
||||
const id = `hotbarIcon-${uid}`;
|
||||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
|
||||
componentDidMount() {
|
||||
this.contextMenu = {
|
||||
menuItems: [],
|
||||
navigate: (url: string) => navigate(url)
|
||||
};
|
||||
}
|
||||
const toggleMenu = () => {
|
||||
setMenuOpen(!menuOpen);
|
||||
};
|
||||
|
||||
@computed get iconString() {
|
||||
const [rawFirst, rawSecond, rawThird] = getNameParts(this.props.entity.metadata.name);
|
||||
const getIconString = () => {
|
||||
const [rawFirst, rawSecond, rawThird] = getNameParts(title);
|
||||
const splitter = new GraphemeSplitter();
|
||||
const first = splitter.iterateGraphemes(rawFirst);
|
||||
const second = rawSecond ? splitter.iterateGraphemes(rawSecond): first;
|
||||
@ -64,114 +84,50 @@ export class HotbarIcon extends React.Component<Props> {
|
||||
...iter.take(second, 1),
|
||||
...iter.take(third, 1),
|
||||
].filter(Boolean).join("");
|
||||
}
|
||||
};
|
||||
|
||||
get kindIcon() {
|
||||
const className = "badge";
|
||||
const category = catalogCategoryRegistry.getCategoryForEntity(this.props.entity);
|
||||
|
||||
if (!category) {
|
||||
return <Icon material="bug_report" className={className} />;
|
||||
}
|
||||
|
||||
if (category.metadata.icon.includes("<svg")) {
|
||||
return <Icon svg={category.metadata.icon} className={className} />;
|
||||
} else {
|
||||
return <Icon material={category.metadata.icon} className={className} />;
|
||||
}
|
||||
}
|
||||
|
||||
get ledIcon() {
|
||||
const className = cssNames("led", { online: this.props.entity.status.phase == "connected"}); // TODO: make it more generic
|
||||
|
||||
return <div className={className} />;
|
||||
}
|
||||
|
||||
toggleMenu() {
|
||||
this.menuOpen = !this.menuOpen;
|
||||
}
|
||||
|
||||
remove(item: CatalogEntity) {
|
||||
const hotbar = HotbarStore.getInstance();
|
||||
|
||||
hotbar.removeFromHotbar(item.getId());
|
||||
}
|
||||
|
||||
onMenuItemClick(menuItem: CatalogEntityContextMenu) {
|
||||
if (menuItem.confirm) {
|
||||
ConfirmDialog.open({
|
||||
okButtonProps: {
|
||||
primary: false,
|
||||
accent: true,
|
||||
},
|
||||
ok: () => {
|
||||
menuItem.onClick();
|
||||
},
|
||||
message: menuItem.confirm.message
|
||||
});
|
||||
} else {
|
||||
menuItem.onClick();
|
||||
}
|
||||
}
|
||||
|
||||
generateAvatarStyle(entity: CatalogEntity): React.CSSProperties {
|
||||
return {
|
||||
"backgroundColor": randomColor({ seed: `${entity.metadata.name}-${entity.metadata.source}`, luminosity: "dark" })
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
entity, errorClass, isActive,
|
||||
children, ...elemProps
|
||||
} = this.props;
|
||||
const entityIconId = `hotbar-icon-${this.props.index}`;
|
||||
const className = cssNames("HotbarIcon flex inline", this.props.className, {
|
||||
interactive: true,
|
||||
active: isActive,
|
||||
});
|
||||
const onOpen = async () => {
|
||||
await entity.onContextMenuOpen(this.contextMenu);
|
||||
this.toggleMenu();
|
||||
};
|
||||
const menuItems = this.contextMenu?.menuItems.filter((menuItem) => !menuItem.onlyVisibleForSource || menuItem.onlyVisibleForSource === entity.metadata.source);
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<Tooltip targetId={entityIconId}>{entity.metadata.name} ({entity.metadata.source || "local"})</Tooltip>
|
||||
<Avatar
|
||||
{...elemProps}
|
||||
id={entityIconId}
|
||||
variant="square"
|
||||
className={isActive ? "active" : "default"}
|
||||
style={this.generateAvatarStyle(entity)}
|
||||
>
|
||||
{this.iconString}
|
||||
</Avatar>
|
||||
{ this.ledIcon }
|
||||
{ this.kindIcon }
|
||||
<Menu
|
||||
usePortal
|
||||
htmlFor={entityIconId}
|
||||
className="HotbarIconMenu"
|
||||
isOpen={this.menuOpen}
|
||||
toggleEvent="contextmenu"
|
||||
position={{right: true, bottom: true }} // FIXME: position does not work
|
||||
open={() => onOpen()}
|
||||
close={() => this.toggleMenu()}>
|
||||
<MenuItem key="remove-from-hotbar" onClick={() => this.remove(entity) }>
|
||||
<Icon material="clear" small interactive={true} title="Remove from hotbar"/> Remove from Hotbar
|
||||
</MenuItem>
|
||||
{ this.contextMenu && menuItems.map((menuItem) => {
|
||||
return (
|
||||
<MenuItem key={menuItem.title} onClick={() => this.onMenuItemClick(menuItem) }>
|
||||
<Icon material={menuItem.icon} small interactive={true} title={menuItem.title}/> {menuItem.title}
|
||||
</MenuItem>
|
||||
);
|
||||
})}
|
||||
</Menu>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className={cssNames("HotbarIcon flex inline", className, { disabled })}>
|
||||
<MaterialTooltip title={`${title} (${source})`} placement="right">
|
||||
<div id={id}>
|
||||
<Avatar
|
||||
{...rest}
|
||||
variant="square"
|
||||
className={active ? "active" : "default"}
|
||||
style={generateAvatarStyle(`${title}-${source}`)}
|
||||
>
|
||||
{getIconString()}
|
||||
</Avatar>
|
||||
{children}
|
||||
</div>
|
||||
</MaterialTooltip>
|
||||
<Menu
|
||||
usePortal
|
||||
htmlFor={id}
|
||||
className="HotbarIconMenu"
|
||||
isOpen={menuOpen}
|
||||
toggleEvent="contextmenu"
|
||||
position={{right: true, bottom: true }} // FIXME: position does not work
|
||||
open={() => {
|
||||
onMenuOpen?.();
|
||||
toggleMenu();
|
||||
}}
|
||||
close={() => toggleMenu()}>
|
||||
<MenuItem key="remove-from-hotbar" onClick={() => remove(uid) }>
|
||||
<Icon material="clear" small interactive={true} title="Remove from hotbar"/> Remove from Hotbar
|
||||
</MenuItem>
|
||||
{ menuItems.map((menuItem) => {
|
||||
return (
|
||||
<MenuItem key={menuItem.title} onClick={() => onMenuItemClick(menuItem) }>
|
||||
<Icon material={menuItem.icon} small interactive={true} title={menuItem.title}/> {menuItem.title}
|
||||
</MenuItem>
|
||||
);
|
||||
})}
|
||||
</Menu>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
HotbarIcon.defaultProps = {
|
||||
menuItems: []
|
||||
};
|
||||
|
||||
@ -1,15 +1,17 @@
|
||||
import "./hotbar-menu.scss";
|
||||
import "./hotbar.commands";
|
||||
|
||||
import React, { HTMLAttributes, ReactNode, useState } from "react";
|
||||
import React from "react";
|
||||
import { observer } from "mobx-react";
|
||||
import { HotbarIcon } from "./hotbar-icon";
|
||||
import { HotbarEntityIcon } from "./hotbar-entity-icon";
|
||||
import { cssNames, IClassName } from "../../utils";
|
||||
import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
|
||||
import { defaultHotbarCells, HotbarItem, HotbarStore } from "../../../common/hotbar-store";
|
||||
import { CatalogEntity, catalogEntityRunContext } from "../../api/catalog-entity";
|
||||
import { catalogEntityRunContext } from "../../api/catalog-entity";
|
||||
import { DragDropContext, Draggable, Droppable, DropResult } from "react-beautiful-dnd";
|
||||
import { HotbarSelector } from "./hotbar-selector";
|
||||
import { HotbarCell } from "./hotbar-cell";
|
||||
import { HotbarIcon } from "./hotbar-icon";
|
||||
|
||||
interface Props {
|
||||
className?: IClassName;
|
||||
@ -21,10 +23,6 @@ export class HotbarMenu extends React.Component<Props> {
|
||||
return HotbarStore.getInstance().getActive();
|
||||
}
|
||||
|
||||
isActive(item: CatalogEntity) {
|
||||
return catalogEntityRegistry.activeEntity?.metadata?.uid == item.getId();
|
||||
}
|
||||
|
||||
getEntity(item: HotbarItem) {
|
||||
const hotbar = HotbarStore.getInstance().getActive();
|
||||
|
||||
@ -48,6 +46,12 @@ export class HotbarMenu extends React.Component<Props> {
|
||||
HotbarStore.getInstance().restackItems(from, to);
|
||||
}
|
||||
|
||||
removeItem(uid: string) {
|
||||
const hotbar = HotbarStore.getInstance();
|
||||
|
||||
hotbar.removeFromHotbar(uid);
|
||||
}
|
||||
|
||||
renderGrid() {
|
||||
return this.hotbar.items.map((item, index) => {
|
||||
const entity = this.getEntity(item);
|
||||
@ -62,8 +66,8 @@ export class HotbarMenu extends React.Component<Props> {
|
||||
className={cssNames({ isDraggingOver: snapshot.isDraggingOver })}
|
||||
{...provided.droppableProps}
|
||||
>
|
||||
{entity && (
|
||||
<Draggable draggableId={item.entity.uid} key={item.entity.uid} index={0}>
|
||||
{item && (
|
||||
<Draggable draggableId={item.entity.uid} key={item.entity.uid} index={0} >
|
||||
{(provided, snapshot) => {
|
||||
const style = {
|
||||
zIndex: defaultHotbarCells - index,
|
||||
@ -79,14 +83,22 @@ export class HotbarMenu extends React.Component<Props> {
|
||||
{...provided.dragHandleProps}
|
||||
style={style}
|
||||
>
|
||||
<HotbarIcon
|
||||
key={index}
|
||||
index={index}
|
||||
entity={entity}
|
||||
isActive={this.isActive(entity)}
|
||||
onClick={() => entity.onRun(catalogEntityRunContext)}
|
||||
className={cssNames({ isDragging: snapshot.isDragging })}
|
||||
/>
|
||||
{entity ? (
|
||||
<HotbarEntityIcon
|
||||
key={index}
|
||||
entity={entity}
|
||||
onClick={() => entity?.onRun(catalogEntityRunContext)}
|
||||
className={cssNames({ isDragging: snapshot.isDragging })}
|
||||
remove={this.removeItem}
|
||||
/>
|
||||
) : (
|
||||
<HotbarIcon
|
||||
uid={item.entity.uid}
|
||||
title={item.entity.name}
|
||||
source={item.entity.source}
|
||||
remove={this.removeItem}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
@ -117,33 +129,3 @@ export class HotbarMenu extends React.Component<Props> {
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
interface HotbarCellProps extends HTMLAttributes<HTMLDivElement> {
|
||||
children?: ReactNode;
|
||||
index: number;
|
||||
innerRef?: React.LegacyRef<HTMLDivElement>;
|
||||
}
|
||||
|
||||
function HotbarCell({ innerRef, children, className, ...rest }: HotbarCellProps) {
|
||||
const [animating, setAnimating] = useState(false);
|
||||
const onAnimationEnd = () => { setAnimating(false); };
|
||||
const onClick = () => {
|
||||
if (className.includes("isDraggingOver")) {
|
||||
return;
|
||||
}
|
||||
|
||||
setAnimating(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cssNames("HotbarCell", { animating }, className)}
|
||||
onAnimationEnd={onAnimationEnd}
|
||||
onClick={onClick}
|
||||
ref={innerRef}
|
||||
{...rest}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user