1
0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00

HotbarToggleItem component for pinning entity

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-10-11 16:06:40 +03:00
parent c5840e4293
commit 1fb20bcb1f

View File

@ -19,7 +19,7 @@
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/ */
import React from "react"; import React, { useState } from "react";
import { cssNames } from "../../utils"; import { cssNames } from "../../utils";
import { MenuActions, MenuActionsProps } from "../menu/menu-actions"; import { MenuActions, MenuActionsProps } from "../menu/menu-actions";
import type { CatalogEntity, CatalogEntityContextMenu, CatalogEntityContextMenuContext } from "../../api/catalog-entity"; import type { CatalogEntity, CatalogEntityContextMenu, CatalogEntityContextMenuContext } from "../../api/catalog-entity";
@ -70,14 +70,6 @@ export class CatalogEntityDrawerMenu<T extends CatalogEntity> extends React.Comp
} }
} }
addToHotbar(entity: CatalogEntity): void {
HotbarStore.getInstance().addToHotbar(entity);
}
removeFromHotbar(item: CatalogEntity): void {
HotbarStore.getInstance().removeFromHotbar(item.getId());
}
getMenuItems(entity: T): React.ReactChild[] { getMenuItems(entity: T): React.ReactChild[] {
if (!entity) { if (!entity) {
return []; return [];
@ -102,21 +94,7 @@ export class CatalogEntityDrawerMenu<T extends CatalogEntity> extends React.Comp
); );
} }
const isAddedEntity = () => HotbarStore.getInstance().isAddedToActive(entity); items.push(<HotbarToggleItem key="hotbar-toggle" entity={entity}/>);
if (!isAddedEntity) {
items.push(
<MenuItem key="add-to-hotbar" onClick={() => this.addToHotbar(entity) }>
<Icon material="push_pin" small tooltip="Add to Hotbar" />
</MenuItem>
);
} else {
items.push(
<MenuItem key="remove-from-hotbar" onClick={() => this.removeFromHotbar(entity)}>
<Icon material="push_pin" small tooltip="Remove from Hotbar" />
</MenuItem>
);
}
return items; return items;
} }
@ -139,3 +117,19 @@ export class CatalogEntityDrawerMenu<T extends CatalogEntity> extends React.Comp
); );
} }
} }
function HotbarToggleItem(props: { entity: CatalogEntity }) {
const store = HotbarStore.getInstance(false);
const add = () => store?.addToHotbar(props.entity);
const remove = () => store?.removeFromHotbar(props.entity.getId());
const [itemInHotbar, setItemInHotbar] = useState(store?.isAddedToActive(props.entity));
return (
<MenuItem onClick={() => {
itemInHotbar ? remove() : add();
setItemInHotbar(!itemInHotbar);
}}>
<Icon material="push_pin" small tooltip={itemInHotbar ? "Remove from Hotbar" : "Add to Hotbar"}/>
</MenuItem>
);
}