feat: add icon to graph nodes #918 (#1117)

### What problem does this PR solve?

feat: add icon to graph nodes #918

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
This commit is contained in:
balibabu
2024-06-11 18:01:19 +08:00
committed by GitHub
parent 8902d92d0e
commit ff5ea266d2
8 changed files with 91 additions and 46 deletions

View File

@@ -1,8 +1,9 @@
import { Avatar, Card, Flex, Layout, Space } from 'antd';
import { Card, Flex, Layout, Space } from 'antd';
import classNames from 'classnames';
import { componentList } from '../constant';
import { useHandleDrag } from '../hooks';
import OperatorIcon from '../operator-icon';
import styles from './index.less';
const { Sider } = Layout;
@@ -24,25 +25,31 @@ const FlowSide = ({ setCollapsed, collapsed }: IProps) => {
onCollapse={(value) => setCollapsed(value)}
>
<Flex vertical gap={10} className={styles.siderContent}>
{componentList.map((x) => (
<Card
key={x.name}
hoverable
draggable
className={classNames(styles.operatorCard)}
onDragStart={handleDragStart(x.name)}
>
<Flex justify="space-between" align="center">
<Space size={15}>
<Avatar icon={x.icon} shape={'square'} />
<section>
<b>{x.name}</b>
<div>{x.description}</div>
</section>
</Space>
</Flex>
</Card>
))}
{componentList.map((x) => {
return (
<Card
key={x.name}
hoverable
draggable
className={classNames(styles.operatorCard)}
onDragStart={handleDragStart(x.name)}
>
<Flex justify="space-between" align="center">
<Space size={15}>
<OperatorIcon name={x.name}></OperatorIcon>
{/* <Avatar
icon={<OperatorIcon name={x.name}></OperatorIcon>}
shape={'square'}
/> */}
<section>
<b>{x.name}</b>
<div>{x.description}</div>
</section>
</Space>
</Flex>
</Card>
);
})}
</Flex>
</Sider>
);