File size: 2,201 Bytes
68ed806 ba19dbf dcce454 b2b0160 f8510ae 4138aee dcce454 454aa85 dcce454 5365cac cd85d9e 5365cac b2b0160 dcce454 ddd1aa2 454aa85 f8510ae cd85d9e ba19dbf cd85d9e ba19dbf 4138aee 454aa85 b2b0160 38eebf9 b2b0160 454aa85 ba19dbf f8510ae 454aa85 dcce454 5365cac |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
import { useTranslate } from '@/hooks/common-hooks';
import { Card, Divider, Flex, Layout, Tooltip } from 'antd';
import classNames from 'classnames';
import lowerFirst from 'lodash/lowerFirst';
import React from 'react';
import { Operator, componentMenuList, operatorMap } from '../constant';
import { useHandleDrag } from '../hooks';
import OperatorIcon from '../operator-icon';
import styles from './index.less';
const { Sider } = Layout;
interface IProps {
setCollapsed: (width: boolean) => void;
collapsed: boolean;
}
const dividerProps = {
marginTop: 10,
marginBottom: 10,
padding: 0,
borderBlockColor: '#b4afaf',
borderStyle: 'dotted',
};
const FlowSide = ({ setCollapsed, collapsed }: IProps) => {
const { handleDragStart } = useHandleDrag();
const { t } = useTranslate('flow');
return (
<Sider
collapsible
collapsed={collapsed}
collapsedWidth={0}
theme={'light'}
onCollapse={(value) => setCollapsed(value)}
>
<Flex vertical gap={10} className={styles.siderContent}>
{componentMenuList.map((x) => {
return (
<React.Fragment key={x.name}>
{x.name === Operator.Note && (
<Divider style={dividerProps}></Divider>
)}
{x.name === Operator.DuckDuckGo && (
<Divider style={dividerProps}></Divider>
)}
<Card
key={x.name}
hoverable
draggable
className={classNames(styles.operatorCard)}
onDragStart={handleDragStart(x.name)}
>
<Flex align="center" gap={15}>
<OperatorIcon
name={x.name}
color={operatorMap[x.name].color}
></OperatorIcon>
<section>
<Tooltip title={t(`${lowerFirst(x.name)}Description`)}>
<b>{t(lowerFirst(x.name))}</b>
</Tooltip>
</section>
</Flex>
</Card>
</React.Fragment>
);
})}
</Flex>
</Sider>
);
};
export default FlowSide;
|