57 lines
1.3 KiB
JavaScript
57 lines
1.3 KiB
JavaScript
import { Collapse, Flex, Typography } from 'antd'
|
|
import { CaretLeftOutlined } from '@ant-design/icons'
|
|
import PropTypes from 'prop-types'
|
|
|
|
const { Title } = Typography
|
|
|
|
const InfoCollapse = ({
|
|
title,
|
|
icon,
|
|
children,
|
|
active,
|
|
onToggle,
|
|
className = '',
|
|
collapseKey = 'default',
|
|
canCollapse = true
|
|
}) => {
|
|
return (
|
|
<Collapse
|
|
ghost
|
|
expandIconPosition='end'
|
|
activeKey={canCollapse ? (active ? [collapseKey] : []) : [collapseKey]}
|
|
onChange={(keys) => onToggle(keys.length > 0)}
|
|
expandIcon={({ isActive }) =>
|
|
canCollapse ? <CaretLeftOutlined rotate={isActive ? -90 : 0} /> : null
|
|
}
|
|
className={`no-h-padding-collapse ${className}`}
|
|
items={[
|
|
{
|
|
key: collapseKey,
|
|
children: children,
|
|
label: (
|
|
<Flex align='center' gap={'middle'}>
|
|
{icon}
|
|
<Title level={5} style={{ margin: 0 }}>
|
|
{title}
|
|
</Title>
|
|
</Flex>
|
|
)
|
|
}
|
|
]}
|
|
/>
|
|
)
|
|
}
|
|
|
|
InfoCollapse.propTypes = {
|
|
title: PropTypes.string.isRequired,
|
|
icon: PropTypes.node.isRequired,
|
|
children: PropTypes.node.isRequired,
|
|
active: PropTypes.bool.isRequired,
|
|
onToggle: PropTypes.func.isRequired,
|
|
className: PropTypes.string,
|
|
collapseKey: PropTypes.string,
|
|
canCollapse: PropTypes.bool
|
|
}
|
|
|
|
export default InfoCollapse
|