50 lines
1.8 KiB
TypeScript
50 lines
1.8 KiB
TypeScript
import { type FC } from 'react';
|
|
import { useTranslation } from 'react-i18next'
|
|
import { Card, Space } from 'antd'
|
|
|
|
import { nodeLibrary } from '../constant';
|
|
|
|
const NodeLibrary: FC = () => {
|
|
const { t } = useTranslation()
|
|
|
|
console.log('nodeLibrary', nodeLibrary)
|
|
|
|
return (
|
|
<div className="rb:w-80 rb:fixed rb:h-[calc(100%-64px)] rb:left-0 rb:py-5 rb:px-5.5 rb:overflow-y-auto">
|
|
<Space size={12} direction="vertical" className="rb:w-full">
|
|
{nodeLibrary.map(category => (
|
|
<Card
|
|
key={category.category}
|
|
type="inner"
|
|
title={t(`workflow.${category.category}`)}
|
|
classNames={{
|
|
body: "rb:p-[10px]!",
|
|
header: "rb:bg-[#F6F8FC]!"
|
|
}}
|
|
>
|
|
<Space size={8} direction="vertical" className="rb:w-full">
|
|
{category.nodes
|
|
.filter(node => node.type !== 'cycle-start' && node.type !== 'break')
|
|
.map((node, nodeIndex) => (
|
|
<div
|
|
key={nodeIndex}
|
|
className="rb:bg-white rb:rounded-lg rb:p-2 rb:border rb:border-[#DFE4ED] rb:cursor-pointer rb:flex rb:items-center rb:gap-2 rb:hover:border-[#155EEF] rb:hover:shadow-[0px_2px_4px_0px_rgba(33,35,50,0.15)]"
|
|
draggable
|
|
onDragStart={(e) => {
|
|
e.dataTransfer.setData('application/reactflow', node.type);
|
|
e.dataTransfer.setData('application/json', JSON.stringify(node));
|
|
}}
|
|
>
|
|
<img src={node.icon} className="rb:w-5 rb:h-5" />
|
|
<span className="rb:font-medium rb:text-[12px]">{t(`workflow.${node.type}`)}</span>
|
|
</div>
|
|
))}
|
|
</Space>
|
|
</Card>
|
|
))}
|
|
</Space>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default NodeLibrary; |