@tolokoban/ui
Version:
React components with theme
40 lines • 4.04 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import * as React from "react";
import Styles from "./DragAndDrop.module.css";
const MIMETYPE_PREFIX = "application/x-tolokoban-ui-";
export function ViewDragAndDrop(props) {
const mimetype = `${MIMETYPE_PREFIX}${props.type}`;
const [droppable, setDroppable] = React.useState(false);
const handleDrop = (evt) => {
setDroppable(false);
evt.preventDefault();
const data = evt.dataTransfer.getData(mimetype);
if (!data || data === props.data)
return;
if (props.onDrop)
props.onDrop(data);
};
const handleDragOver = (evt) => {
evt.preventDefault();
const data = evt.dataTransfer.getData(mimetype);
if (!data || data === props.data || !props.onDrop)
return;
setDroppable(true);
evt.dataTransfer.dropEffect = "move";
};
const handleDragStart = (evt) => {
var _a;
evt.dataTransfer.setData(mimetype, (_a = props.data) !== null && _a !== void 0 ? _a : "");
};
return (_jsx("div", { className: getClassNames(props, droppable), draggable: props.data ? true : false, onDragStart: handleDragStart, onDragOver: handleDragOver, onDrop: handleDrop, onDragLeave: () => setDroppable(false), children: props.children }));
}
function getClassNames(props, droppable) {
const classNames = [Styles.main];
if (typeof props.className === "string") {
classNames.push(props.className);
}
if (droppable)
classNames.push(Styles.droppable);
return classNames.join(" ");
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRHJhZ0FuZERyb3AuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvdmlldy9EcmFnQW5kRHJvcC9EcmFnQW5kRHJvcC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBRTlCLE9BQU8sTUFBTSxNQUFNLDBCQUEwQixDQUFBO0FBYTdDLE1BQU0sZUFBZSxHQUFHLDZCQUE2QixDQUFBO0FBRXJELE1BQU0sVUFBVSxlQUFlLENBQUMsS0FBMkI7SUFDdkQsTUFBTSxRQUFRLEdBQUcsR0FBRyxlQUFlLEdBQUcsS0FBSyxDQUFDLElBQUksRUFBRSxDQUFBO0lBQ2xELE1BQU0sQ0FBQyxTQUFTLEVBQUUsWUFBWSxDQUFDLEdBQUcsS0FBSyxDQUFDLFFBQVEsQ0FBQyxLQUFLLENBQUMsQ0FBQTtJQUN2RCxNQUFNLFVBQVUsR0FBRyxDQUFDLEdBQW9DLEVBQUUsRUFBRTtRQUN4RCxZQUFZLENBQUMsS0FBSyxDQUFDLENBQUE7UUFDbkIsR0FBRyxDQUFDLGNBQWMsRUFBRSxDQUFBO1FBQ3BCLE1BQU0sSUFBSSxHQUFHLEdBQUcsQ0FBQyxZQUFZLENBQUMsT0FBTyxDQUFDLFFBQVEsQ0FBQyxDQUFBO1FBQy9DLElBQUksQ0FBQyxJQUFJLElBQUksSUFBSSxLQUFLLEtBQUssQ0FBQyxJQUFJO1lBQUUsT0FBTTtRQUV4QyxJQUFJLEtBQUssQ0FBQyxNQUFNO1lBQUUsS0FBSyxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsQ0FBQTtJQUN4QyxDQUFDLENBQUE7SUFDRCxNQUFNLGNBQWMsR0FBRyxDQUFDLEdBQW9DLEVBQUUsRUFBRTtRQUM1RCxHQUFHLENBQUMsY0FBYyxFQUFFLENBQUE7UUFDcEIsTUFBTSxJQUFJLEdBQUcsR0FBRyxDQUFDLFlBQVksQ0FBQyxPQUFPLENBQUMsUUFBUSxDQUFDLENBQUE7UUFDL0MsSUFBSSxDQUFDLElBQUksSUFBSSxJQUFJLEtBQUssS0FBSyxDQUFDLElBQUksSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNO1lBQUUsT0FBTTtRQUV6RCxZQUFZLENBQUMsSUFBSSxDQUFDLENBQUE7UUFDbEIsR0FBRyxDQUFDLFlBQVksQ0FBQyxVQUFVLEdBQUcsTUFBTSxDQUFBO0lBQ3hDLENBQUMsQ0FBQTtJQUNELE1BQU0sZUFBZSxHQUFHLENBQUMsR0FBb0MsRUFBRSxFQUFFOztRQUM3RCxHQUFHLENBQUMsWUFBWSxDQUFDLE9BQU8sQ0FBQyxRQUFRLEVBQUUsTUFBQSxLQUFLLENBQUMsSUFBSSxtQ0FBSSxFQUFFLENBQUMsQ0FBQTtJQUN4RCxDQUFDLENBQUE7SUFDRCxPQUFPLENBQ0gsY0FDSSxTQUFTLEVBQUUsYUFBYSxDQUFDLEtBQUssRUFBRSxTQUFTLENBQUMsRUFDMUMsU0FBUyxFQUFFLEtBQUssQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsS0FBSyxFQUNwQyxXQUFXLEVBQUUsZUFBZSxFQUM1QixVQUFVLEVBQUUsY0FBYyxFQUMxQixNQUFNLEVBQUUsVUFBVSxFQUNsQixXQUFXLEVBQUUsR0FBRyxFQUFFLENBQUMsWUFBWSxDQUFDLEtBQUssQ0FBQyxZQUVyQyxLQUFLLENBQUMsUUFBUSxHQUNiLENBQ1QsQ0FBQTtBQUNMLENBQUM7QUFFRCxTQUFTLGFBQWEsQ0FDbEIsS0FBMkIsRUFDM0IsU0FBa0I7SUFFbEIsTUFBTSxVQUFVLEdBQUcsQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLENBQUE7SUFDaEMsSUFBSSxPQUFPLEtBQUssQ0FBQyxTQUFTLEtBQUssUUFBUSxFQUFFLENBQUM7UUFDdEMsVUFBVSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsU0FBUyxDQUFDLENBQUE7SUFDcEMsQ0FBQztJQUNELElBQUksU0FBUztRQUFFLFVBQVUsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLFNBQVMsQ0FBQyxDQUFBO0lBRWhELE9BQU8sVUFBVSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQTtBQUMvQixDQUFDIn0=