File size: 2,082 Bytes
b2b0160 ba19dbf dcce454 b2b0160 f8510ae ba19dbf dcce454 454aa85 dcce454 5365cac b2b0160 dcce454 ddd1aa2 454aa85 f8510ae ba19dbf 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 |
import { useTranslate } from '@/hooks/commonHooks';
import { Card, Divider, Flex, Layout, Tooltip } from 'antd';
import classNames from 'classnames';
import lowerFirst from 'lodash/lowerFirst';
import React from 'react';
import { Operator, componentMenuList } 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 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.DuckDuckGo && (
<Divider
style={{
marginTop: 10,
marginBottom: 10,
padding: 0,
borderBlockColor: '#b4afaf',
borderStyle: 'dotted',
}}
></Divider>
)}
<Card
key={x.name}
hoverable
draggable
className={classNames(styles.operatorCard)}
onDragStart={handleDragStart(x.name)}
>
<Flex align="center" gap={15}>
<OperatorIcon name={x.name}></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;
|