44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
TypeScript
import { DropAreaProps, DropAreaState } from "./interfaces";
|
|
import * as React from "react";
|
|
import { STEP_DATATRANSFER_IDENTIFER } from "./actions";
|
|
|
|
export class DropArea extends React.Component<DropAreaProps, DropAreaState> {
|
|
|
|
state: DropAreaState = { isHovered: false };
|
|
|
|
dragOver = (e: React.DragEvent<HTMLElement>) => {
|
|
e.preventDefault();
|
|
}
|
|
|
|
drop = (e: React.DragEvent<HTMLElement>) => {
|
|
e.preventDefault();
|
|
const key = e.dataTransfer.getData(STEP_DATATRANSFER_IDENTIFER);
|
|
const fn = this.props.callback;
|
|
if (fn) {
|
|
fn(key);
|
|
}
|
|
this.toggle();
|
|
}
|
|
|
|
toggle = () => {
|
|
this.setState({ isHovered: !this.state.isHovered });
|
|
};
|
|
|
|
render() {
|
|
const isVisible = this.props.isLocked || this.state.isHovered;
|
|
const visible = isVisible ? "visible" : "";
|
|
return <div
|
|
className={`drag-drop-area ${visible}`}
|
|
onDragLeave={this.toggle}
|
|
onDragEnter={(e) => {
|
|
e.preventDefault();
|
|
this.toggle();
|
|
}}
|
|
onDragOver={this.dragOver}
|
|
onDrop={this.drop}
|
|
style={{ minHeight: "2rem" }}>
|
|
{this.props.children}
|
|
</div>;
|
|
}
|
|
}
|