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