blob: 1b11ffb2e7929db2b83e5b871172592ea2f634df (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
import { FC } from 'react';
import { Element } from '../types';
interface ElementViewProps {
onElementCombine: (elementId: number) => void;
element: Element;
interactive: boolean;
isPreview: boolean;
}
const ElementView: FC<ElementViewProps> = ({
onElementCombine,
element,
interactive,
isPreview,
}) => {
const onDragStart = (e: React.DragEvent<HTMLDivElement>) => {
e.stopPropagation();
e.dataTransfer.setData('text/plain', element.name);
e.dataTransfer.setData('id', element.id.toString());
};
const onDragOver = (e: React.DragEvent<HTMLDivElement>) => {
e.preventDefault();
};
const onDrop = (e: React.DragEvent<HTMLDivElement>) => {
const elementId = e.dataTransfer.getData('id');
onElementCombine(Number.parseInt(elementId));
e.preventDefault();
};
return (
<div
draggable={interactive}
onDragStart={interactive ? onDragStart : undefined}
onDragOver={interactive ? onDragOver : undefined}
onDrop={interactive ? onDrop : undefined}
className="element flex flex-row rounded-md border border-gray-300 bg-gray-100 w-[96px] h-fit">
<div draggable={false} className="flex flex-col items-center w-full">
{isPreview ? (
<div
style={{
backgroundColor: element.icon,
}}
className="rounded-t w-full h-[96px]"></div>
) : (
<img
draggable={false}
className="rounded-t"
src={`data:image/png;base64,${element.icon}`}
width="96px"
height="96px"
/>
)}
<span
draggable={false}
className="my-1 mx-2 text-sm leading-tight text-center w-full">
{element.name.length > 0 ? element.name : '\u00A0'}
</span>
</div>
</div>
);
};
export default ElementView;
|
