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

Initial drag-n-drop implementation

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-04-29 13:13:25 +03:00
parent a001b651b9
commit b17d817696
1 changed files with 38 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/renderer/components/hotbar/hotbar-menu.tsx
View File

@ -1,7 +1,7 @@
import "./hotbar-menu.scss";
import "./hotbar.commands";
import React, { ReactNode, useState } from "react";
import React, { HTMLAttributes, ReactNode, useState } from "react";
import { observer } from "mobx-react";
import { HotbarIcon } from "./hotbar-icon";
import { cssNames, IClassName } from "../../utils";
@ -36,24 +36,45 @@ export class HotbarMenu extends React.Component<Props> {
return item ? catalogEntityRegistry.items.find((entity) => entity.metadata.uid === item.entity.uid) : null;
}
renderGrid() {
if (!this.hotbar.items.length) return;
onDragEnd() {
console.log("drag end")
}
renderGrid() {
return this.hotbar.items.map((item, index) => {
const entity = this.getEntity(item);
return (
<HotbarCell key={index} index={index}>
{entity && (
<HotbarIcon
key={index}
<Droppable droppableId={`droppable-${index}`} key={index} isCombineEnabled>
{(provided, snapshot) => (
<HotbarCell
index={index}
entity={entity}
isActive={this.isActive(entity)}
onClick={() => entity.onRun(catalogEntityRunContext)}
/>
ref={provided.innerRef}
style={{ backgroundColor: snapshot.isDraggingOver ? 'blue' : 'grey' }}
{...provided.droppableProps}
>
{entity && (
<Draggable draggableId={`draggable-${index}`} index={0}>
{(provided, snapshot) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
<HotbarIcon
key={index}
index={index}
entity={entity}
isActive={this.isActive(entity)}
onClick={() => entity.onRun(catalogEntityRunContext)}
/>
</div>
)}
</Draggable>
)}
</HotbarCell>
)}
</HotbarCell>
</Droppable>
);
});
}
@ -74,7 +95,9 @@ export class HotbarMenu extends React.Component<Props> {
return (
<div className={cssNames("HotbarMenu flex column", className)}>
<div className="HotbarItems flex column gaps">
{this.renderGrid()}
<DragDropContext onDragEnd={this.onDragEnd}>
{this.renderGrid()}
</DragDropContext>
{this.hotbar.items.length != defaultHotbarCells && this.renderAddCellButton()}
</div>
<HotbarSelector hotbar={hotbar}/>
@ -83,9 +106,10 @@ export class HotbarMenu extends React.Component<Props> {
}
}
interface HotbarCellProps {
interface HotbarCellProps extends HTMLAttributes<HTMLDivElement> {
children?: ReactNode;
index: number;
ref?: any;
}
function HotbarCell(props: HotbarCellProps) {