import classNames from 'classnames'; import PropTypes from 'prop-types'; import React from 'react'; import { ColorImpairedConsumer } from 'App/ColorImpairedContext'; import { kinds, sizes } from 'Helpers/Props'; import styles from './ProgressBar.css'; function ProgressBar(props) { const { className, containerClassName, title, progress, precision, showText, text, kind, size, width } = props; const progressPercent = `${progress.toFixed(precision)}%`; const progressText = text || progressPercent; const actualWidth = width ? `${width}px` : '100%'; return ( {(enableColorImpairedMode) => { return (
{ showText && width ?
{progressText}
: null }
{ showText ?
{progressText}
: null }
); }} ); } ProgressBar.propTypes = { className: PropTypes.string, containerClassName: PropTypes.string, title: PropTypes.string, progress: PropTypes.number.isRequired, precision: PropTypes.number.isRequired, showText: PropTypes.bool.isRequired, text: PropTypes.string, kind: PropTypes.oneOf(kinds.all).isRequired, size: PropTypes.oneOf(sizes.all).isRequired, width: PropTypes.number }; ProgressBar.defaultProps = { className: styles.progressBar, containerClassName: styles.container, precision: 1, showText: false, kind: kinds.PRIMARY, size: sizes.MEDIUM }; export default ProgressBar;