Tom Butcher
f6736c9abb
- Added new icons for movement and settings in the ControlPrinter component. - Refactored InfoCollapse components to include better styling and structure. - Updated PrinterTemperaturePanel, PrinterPositionPanel, PrinterMovementPanel, and PrinterMiscPanel to support a disabled state based on connection status. - Improved layout and styling in App.css for better visual consistency across components.
62 lines
1.5 KiB
JavaScript
62 lines
1.5 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}
|
|
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'>
|
|
{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
|