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 | 1x 1x 1x 1x | import cx from 'classnames'
import PropTypes from 'prop-types'
import {SIZES, STATUS} from '../settings.js'
import {INDICATOR_CLASS_NAME} from './settings.js'
const Indicator = ({percentage, status, errorIcon, size, children}) => {
Iif (status === STATUS.LOADING) return null
return (
<span
className={cx(INDICATOR_CLASS_NAME, `${INDICATOR_CLASS_NAME}--${status}`, `${INDICATOR_CLASS_NAME}--${size}`)}
>
{status === STATUS.PROGRESS && (children || `${percentage}%`)}
{status === STATUS.ERROR && errorIcon}
</span>
)
}
Indicator.propTypes = {
percentage: PropTypes.number.isRequired,
status: PropTypes.oneOf(Object.values(STATUS)),
errorIcon: PropTypes.node,
size: PropTypes.oneOf(Object.values(SIZES)),
children: PropTypes.node
}
export default Indicator
|