56 lines
1.3 KiB
JavaScript
56 lines
1.3 KiB
JavaScript
import React from 'react'
|
|
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'
|
|
}) => {
|
|
return (
|
|
<Collapse
|
|
ghost
|
|
expandIconPosition='end'
|
|
activeKey={active ? [collapseKey] : []}
|
|
onChange={(keys) => onToggle(keys.length > 0)}
|
|
expandIcon={({ isActive }) => (
|
|
<CaretLeftOutlined rotate={isActive ? -90 : 0} />
|
|
)}
|
|
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
|
|
}
|
|
|
|
export default InfoCollapse
|