45 lines
1.5 KiB
TypeScript
45 lines
1.5 KiB
TypeScript
import { Handle, Position } from "react-flow-renderer";
|
||
import Draggable from "../../DragNDrop/Draggable";
|
||
|
||
type GenericNodeProps = {};
|
||
|
||
const GenericNode = (props: GenericNodeProps) => {
|
||
return (
|
||
// Базовый класс generic-node - прописана ширина и положение, цвет текста и фона
|
||
|
||
// Nandle - ручка для коннекта. Можно задать оформление при помощи className, тип (target / source) и позицию
|
||
|
||
// Label - подпись ноды. Можно стилизовать
|
||
|
||
// Select - DropDown меню, можно стилизовать. Стоит класс nodrag для предотвращения залипания
|
||
|
||
<div className="generic-node">
|
||
<Handle className="" type="target" position={Position.Top} />
|
||
|
||
<div className="generic-node-content">
|
||
<label htmlFor="select">Выбери своего покемона: </label>
|
||
<select className="nodrag">
|
||
<option>Гена</option>
|
||
<option>Чайка</option>
|
||
<option>Бульбазавр</option>
|
||
</select>
|
||
</div>
|
||
|
||
<Handle className="" type="source" position={Position.Bottom} />
|
||
</div>
|
||
);
|
||
};
|
||
|
||
const GenericNodeComponent = () => {
|
||
return (
|
||
<Draggable data={{ type: "generic" }}>
|
||
<div className="node-component bg-red-700">
|
||
<div className="node-component-handle" />
|
||
Тест
|
||
</div>
|
||
</Draggable>
|
||
);
|
||
};
|
||
|
||
export { GenericNode, GenericNodeComponent };
|