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 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 | 1x 8x 8x 8x 5x 5x 5x 1x 1x | import cx from 'classnames'
import PropTypes from 'prop-types'
import {SIZES, STATUS} from '../settings.js'
import Line from './Line.js'
import {
BASE_CLASS,
BASE_CLASS_LINE,
BASE_CLASS_LINE_DOUBLE,
BASE_CLASS_LINE_SIMPLE,
CLASS_CONTAINER_BAR
} from './settings.js'
import useIndicator from './useIndicator.js'
import usePercentage from './usePercentage.js'
const ProgressBarLine = ({
hideIndicator,
indicatorBottom,
indicatorTotal,
isAnimatedOnChange,
isBorderless = false,
percentage,
mainBarPercentage,
extraBarPercentage,
status,
size = SIZES.MEDIUM
}) => {
const percentageArray = usePercentage({
percentage,
mainBarPercentage,
extraBarPercentage
})
const [indicatorTopElement, indicatorBottomElement] = useIndicator({
hideIndicator,
indicatorBottom,
percentage: percentageArray[0],
indicatorTotal
})
return (
<div className={BASE_CLASS}>
{!hideIndicator && !indicatorBottom && indicatorTopElement}
<div
className={cx(CLASS_CONTAINER_BAR, {
[`${CLASS_CONTAINER_BAR}--size-${size}`]: size,
[`${CLASS_CONTAINER_BAR}--borderless`]: isBorderless,
[`${CLASS_CONTAINER_BAR}--success`]: status === STATUS.SUCCESS,
[`${CLASS_CONTAINER_BAR}--error`]: status === STATUS.ERROR,
[`${CLASS_CONTAINER_BAR}--loading`]: status === STATUS.LOADING
})}
>
{percentageArray.map((percentageValue, currentIndex, array) => {
const index = array.length - 1 - currentIndex
const isExtra = array.length === 2 && currentIndex === 0
return (
<Line
key={index}
className={cx({
[BASE_CLASS_LINE_SIMPLE]: array.length === 1,
[BASE_CLASS_LINE_DOUBLE]: array.length === 2,
[`${BASE_CLASS_LINE}--status-${status}`]: status
})}
isAnimatedOnChange={isAnimatedOnChange}
percentage={array[index]}
isExtra={isExtra}
/>
)
})}
</div>
{!hideIndicator && indicatorBottom && indicatorBottomElement}
</div>
)
}
ProgressBarLine.displayName = 'ProgressBarLine'
ProgressBarLine.propTypes = {
percentage: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]),
/** Hide the indicator */
hideIndicator: PropTypes.bool,
/** If the indicator should be placed below the bar */
indicatorBottom: PropTypes.bool,
/** If the indicator should be displayed with the pattern → {percentage}/100 ({percentage}% as default) */
indicatorTotal: PropTypes.bool,
/** If the bar "value" (width) should be displayed with animation */
isAnimatedOnChange: PropTypes.bool,
/** If true, the progress bar will not display any border */
isBorderless: PropTypes.bool,
/** Percentage value to be displayed in main bar as number and as bar width */
mainBarPercentage: PropTypes.number,
/** Percentage value to be displayed in extra bar as number */
extraBarPercentage: PropTypes.number,
/** Current status of the progress [progress, loading, error] */
status: PropTypes.oneOf(Object.values(STATUS)),
/** The size of the circle, it can be "small" or "large" */
size: PropTypes.oneOf(Object.values(SIZES))
}
export default ProgressBarLine
|