Tom Butcher
8035c2ba59
- Replaced HProgress and ElipsisText with the new ProgressDisplay component in AppUpdateProgress for improved code clarity and reusability. - Updated TemplatePreview to utilize ProgressDisplay for rendering download progress, enhancing consistency across components. - Introduced ProgressDisplay component to encapsulate progress rendering logic, allowing for customizable label positioning and styling.
62 lines
1.2 KiB
JavaScript
62 lines
1.2 KiB
JavaScript
import PropTypes from 'prop-types'
|
|
import { Flex } from 'antd'
|
|
import HProgress from './HProgress'
|
|
import ElipsisText from './ElipsisText'
|
|
|
|
const ProgressDisplay = ({
|
|
children,
|
|
labelPosition = 'top',
|
|
labelType,
|
|
percent,
|
|
status,
|
|
showInfo,
|
|
style
|
|
}) => {
|
|
const label = children ? (
|
|
<ElipsisText type={labelType} style={{ width: '100%', minWidth: 0 }}>
|
|
{children}
|
|
</ElipsisText>
|
|
) : null
|
|
|
|
const progress = (
|
|
<HProgress
|
|
percent={percent}
|
|
status={status}
|
|
showInfo={showInfo}
|
|
style={{ flex: 1, margin: 0 }}
|
|
/>
|
|
)
|
|
|
|
return (
|
|
<Flex
|
|
vertical
|
|
gap={labelPosition === 'bottom' ? 2 : 10}
|
|
style={{ width: '100%', minWidth: 0, ...style }}
|
|
>
|
|
{labelPosition === 'bottom' ? (
|
|
<>
|
|
{progress}
|
|
{label}
|
|
</>
|
|
) : (
|
|
<>
|
|
{label}
|
|
{progress}
|
|
</>
|
|
)}
|
|
</Flex>
|
|
)
|
|
}
|
|
|
|
ProgressDisplay.propTypes = {
|
|
children: PropTypes.node,
|
|
labelPosition: PropTypes.oneOf(['top', 'bottom']),
|
|
labelType: PropTypes.oneOf(['secondary']),
|
|
percent: PropTypes.number,
|
|
status: PropTypes.oneOf(['normal', 'exception', 'active', 'success']),
|
|
showInfo: PropTypes.bool,
|
|
style: PropTypes.object
|
|
}
|
|
|
|
export default ProgressDisplay
|