70 lines
1.9 KiB
TypeScript
70 lines
1.9 KiB
TypeScript
import {Handle, type NodeProps, Position} from '@xyflow/react'
|
|
import type {Schema} from 'amis'
|
|
import {Card, Dropdown} from 'antd'
|
|
import {DeleteFilled, EditFilled} from '@ant-design/icons'
|
|
import {isEqual} from 'licia'
|
|
|
|
export type AmisNodeType = 'normal' | 'start' | 'end'
|
|
|
|
const AmisNode = (
|
|
props: NodeProps,
|
|
type: AmisNodeType,
|
|
name: String,
|
|
description?: String,
|
|
columnSchema?: Schema[],
|
|
) => {
|
|
const {id, data} = props
|
|
const {getDataById, removeNode, editNode} = data
|
|
return (
|
|
<div className="p-1 w-64">
|
|
<Card
|
|
className="node-card"
|
|
title={name}
|
|
size="small"
|
|
hoverable
|
|
>
|
|
<Dropdown
|
|
className="card-container"
|
|
trigger={['contextMenu']}
|
|
menu={{
|
|
items: [
|
|
{
|
|
key: 'edit',
|
|
label: '编辑',
|
|
icon: <EditFilled className="text-gray-600 hover:text-blue-500"/>,
|
|
},
|
|
{
|
|
key: 'remove',
|
|
label: '删除',
|
|
icon: <DeleteFilled className="text-red-500 hover:text-red-500"/>,
|
|
},
|
|
],
|
|
onClick: menu => {
|
|
switch (menu.key) {
|
|
case 'edit':
|
|
// @ts-ignore
|
|
editNode(id, name, description, columnSchema)
|
|
break
|
|
case 'remove':
|
|
// @ts-ignore
|
|
removeNode(id)
|
|
break
|
|
}
|
|
},
|
|
}}
|
|
>
|
|
<div className="card-description p-2 text-secondary text-sm">
|
|
{description}
|
|
</div>
|
|
</Dropdown>
|
|
</Card>
|
|
{isEqual(type, 'start') || isEqual(type, 'normal')
|
|
? <Handle type="source" position={Position.Right}/> : undefined}
|
|
{isEqual(type, 'end') || isEqual(type, 'normal')
|
|
? <Handle type="target" position={Position.Left}/> : undefined}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default AmisNode
|