1 | import React from 'react';
|
2 | import PropTypes from 'prop-types';
|
3 | import classNames from 'classnames';
|
4 | import toNumber from 'lodash.tonumber';
|
5 | import { mapToCssModules, tagPropType } from './utils';
|
6 |
|
7 | const propTypes = {
|
8 | children: PropTypes.node,
|
9 | bar: PropTypes.bool,
|
10 | multi: PropTypes.bool,
|
11 | tag: tagPropType,
|
12 | value: PropTypes.oneOfType([
|
13 | PropTypes.string,
|
14 | PropTypes.number,
|
15 | ]),
|
16 | max: PropTypes.oneOfType([
|
17 | PropTypes.string,
|
18 | PropTypes.number,
|
19 | ]),
|
20 | animated: PropTypes.bool,
|
21 | striped: PropTypes.bool,
|
22 | color: PropTypes.string,
|
23 | className: PropTypes.string,
|
24 | barClassName: PropTypes.string,
|
25 | cssModule: PropTypes.object,
|
26 | };
|
27 |
|
28 | const defaultProps = {
|
29 | tag: 'div',
|
30 | value: 0,
|
31 | max: 100,
|
32 | };
|
33 |
|
34 | const Progress = (props) => {
|
35 | const {
|
36 | children,
|
37 | className,
|
38 | barClassName,
|
39 | cssModule,
|
40 | value,
|
41 | max,
|
42 | animated,
|
43 | striped,
|
44 | color,
|
45 | bar,
|
46 | multi,
|
47 | tag: Tag,
|
48 | ...attributes
|
49 | } = props;
|
50 |
|
51 | const percent = ((toNumber(value) / toNumber(max)) * 100);
|
52 |
|
53 | const progressClasses = mapToCssModules(classNames(
|
54 | className,
|
55 | 'progress'
|
56 | ), cssModule);
|
57 |
|
58 | const progressBarClasses = mapToCssModules(classNames(
|
59 | 'progress-bar',
|
60 | bar ? className || barClassName : barClassName,
|
61 | animated ? 'progress-bar-animated' : null,
|
62 | color ? `bg-${color}` : null,
|
63 | striped || animated ? 'progress-bar-striped' : null
|
64 | ), cssModule);
|
65 |
|
66 | const ProgressBar = multi ? children : (
|
67 | <div
|
68 | className={progressBarClasses}
|
69 | style={{ width: `${percent}%` }}
|
70 | role="progressbar"
|
71 | aria-valuenow={value}
|
72 | aria-valuemin="0"
|
73 | aria-valuemax={max}
|
74 | children={children}
|
75 | />
|
76 | );
|
77 |
|
78 | if (bar) {
|
79 | return ProgressBar;
|
80 | }
|
81 |
|
82 | return (
|
83 | <Tag {...attributes} className={progressClasses} children={ProgressBar} />
|
84 | );
|
85 | };
|
86 |
|
87 | Progress.propTypes = propTypes;
|
88 | Progress.defaultProps = defaultProps;
|
89 |
|
90 | export default Progress;
|