### 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:
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user