Tom Butcher
044abf32a8
- Introduced DashboardOverviewPage and DashboardOverviewFlexColumns components to streamline the layout and management of dashboard sections, improving overall organization and usability. - Replaced individual collapsible sections in Finance, Inventory, Production, and Sales overviews with a unified structure, enhancing maintainability and consistency across the dashboard. - Added ActionsButton component for improved action handling and keyboard shortcuts, enhancing user interaction capabilities. - Updated styles in App.css to support new drag-and-drop functionality and layout features, ensuring a cohesive visual experience. - Refactored existing components to utilize the new structure, improving code clarity and reducing redundancy.
71 lines
1.7 KiB
JavaScript
71 lines
1.7 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,
|
|
dragHandle = null,
|
|
extra = null
|
|
}) => {
|
|
return (
|
|
<Collapse
|
|
ghost
|
|
expandIconPosition='end'
|
|
activeKey={canCollapse ? (active ? [collapseKey] : []) : [collapseKey]}
|
|
onChange={(keys) => {
|
|
if (!canCollapse) return
|
|
onToggle(keys.length > 0)
|
|
}}
|
|
expandIcon={({ isActive }) =>
|
|
canCollapse ? (
|
|
<CaretLeftOutlined
|
|
rotate={isActive ? -90 : 0}
|
|
className='info-collapse-expand-icon'
|
|
/>
|
|
) : null
|
|
}
|
|
className={`no-h-padding-collapse ${className} info-collapse`}
|
|
items={[
|
|
{
|
|
key: collapseKey,
|
|
children: children,
|
|
label: (
|
|
<Flex align='center' gap={'middle'} className='info-collapse-label'>
|
|
{dragHandle}
|
|
{icon}
|
|
<Title level={5} style={{ margin: 0 }}>
|
|
{title}
|
|
</Title>
|
|
{extra}
|
|
</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,
|
|
dragHandle: PropTypes.node,
|
|
extra: PropTypes.node
|
|
}
|
|
|
|
export default InfoCollapse
|