Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | 1x 1x 1x 1x 1x 1x | import cx from 'classnames'
import PropTypes from 'prop-types'
import {LINE_CAPS, SIZES, STATUS} from '../settings.js'
import Circle from './Circle/index.js'
import Indicator from './Indicator.js'
import {BASE_CLASS_NAME, SIZE_TO_WIDTH_LINE_MAP, STROKE_SIZE_MAP} from './settings.js'
const ProgressBarCircle = ({
percentage,
status = STATUS.PROGRESS,
errorIcon,
size = SIZES.LARGE,
isAnimatedOnChange = false,
hideIndicator = false,
children,
mainStrokeSize,
progressStrokeSize,
strokeLineCap = LINE_CAPS.SQUARE
}) => {
const mainStrokeWidth = STROKE_SIZE_MAP[mainStrokeSize] || SIZE_TO_WIDTH_LINE_MAP[size]
const progressStrokeWidth = STROKE_SIZE_MAP[progressStrokeSize] || SIZE_TO_WIDTH_LINE_MAP[size]
return (
<div className={cx(BASE_CLASS_NAME, `${BASE_CLASS_NAME}--${size}`, `${BASE_CLASS_NAME}--${status}`)}>
<Circle
baseClassName={BASE_CLASS_NAME}
mainStrokeWidth={mainStrokeWidth}
modifier={status}
percentage={status === STATUS.PROGRESS ? percentage : 0}
progressStrokeWidth={progressStrokeWidth}
size={size}
strokeLineCap={strokeLineCap}
withAnimation={isAnimatedOnChange}
/>
{!hideIndicator && (
<Indicator percentage={percentage} size={size} status={status} errorIcon={errorIcon}>
{children}
</Indicator>
)}
</div>
)
}
ProgressBarCircle.displayName = 'ProgressBarCircle'
ProgressBarCircle.propTypes = {
/** Percentage value to be displayed as number and as bar width */
percentage: PropTypes.number.isRequired,
/** Current status of the progress [progress, loading, error] */
status: PropTypes.oneOf(Object.values(STATUS)),
/** Icon to be displayed if error */
errorIcon: PropTypes.node,
/** The size of the circle, it can be "small" or "large" */
size: PropTypes.oneOf(Object.values(SIZES)),
/** If the bar "value" (width) should be displayed with animation */
isAnimatedOnChange: PropTypes.bool,
/** Hide the indicator */
hideIndicator: PropTypes.bool,
/** The shape of the end of line, it can be "round" or "square" */
strokeLineCap: PropTypes.oneOf(Object.values(LINE_CAPS)),
/** The size of the progress stroke, by default it is undefined, it can be "small", "medium" or "large" */
progressStrokeSize: PropTypes.literal,
/** The size of the main stroke, by default it is undefined, it can be "small", "medium" or "large" */
mainStrokeSize: PropTypes.literal,
/** Component to render inside the circle instead of the current progress */
children: PropTypes.node
}
export default ProgressBarCircle
|