2015-11-22 23:41:28 +03:00
|
|
|
import React from 'react';
|
2016-05-22 22:50:22 +03:00
|
|
|
import classnames from 'classnames';
|
|
|
|
import { themr } from 'react-css-themr';
|
2015-11-22 23:41:28 +03:00
|
|
|
import prefixer from '../utils/prefixer';
|
|
|
|
|
|
|
|
class ProgressBar extends React.Component {
|
|
|
|
static propTypes = {
|
|
|
|
buffer: React.PropTypes.number,
|
|
|
|
className: React.PropTypes.string,
|
|
|
|
max: React.PropTypes.number,
|
|
|
|
min: React.PropTypes.number,
|
2016-05-22 22:50:22 +03:00
|
|
|
mode: React.PropTypes.oneOf(['determinate', 'indeterminate']),
|
2015-11-22 23:41:28 +03:00
|
|
|
multicolor: React.PropTypes.bool,
|
2016-05-22 22:50:22 +03:00
|
|
|
theme: React.PropTypes.shape({
|
2016-05-25 01:25:43 +03:00
|
|
|
buffer: React.PropTypes.string,
|
|
|
|
circle: React.PropTypes.string,
|
|
|
|
circular: React.PropTypes.string,
|
|
|
|
indeterminate: React.PropTypes.string,
|
|
|
|
linear: React.PropTypes.string,
|
|
|
|
multicolor: React.PropTypes.string,
|
|
|
|
path: React.PropTypes.string,
|
|
|
|
value: React.PropTypes.string
|
2016-05-22 22:50:22 +03:00
|
|
|
}),
|
2015-11-28 18:17:11 +03:00
|
|
|
type: React.PropTypes.oneOf(['linear', 'circular']),
|
2015-11-22 23:41:28 +03:00
|
|
|
value: React.PropTypes.number
|
|
|
|
};
|
|
|
|
|
|
|
|
static defaultProps = {
|
|
|
|
buffer: 0,
|
|
|
|
className: '',
|
|
|
|
max: 100,
|
|
|
|
min: 0,
|
|
|
|
mode: 'indeterminate',
|
|
|
|
multicolor: false,
|
|
|
|
type: 'linear',
|
|
|
|
value: 0
|
|
|
|
};
|
|
|
|
|
|
|
|
calculateRatio (value) {
|
|
|
|
if (value < this.props.min) return 0;
|
|
|
|
if (value > this.props.max) return 1;
|
|
|
|
return (value - this.props.min) / (this.props.max - this.props.min);
|
|
|
|
}
|
|
|
|
|
|
|
|
circularStyle () {
|
|
|
|
if (this.props.mode !== 'indeterminate') {
|
|
|
|
return {strokeDasharray: `${2 * Math.PI * 25 * this.calculateRatio(this.props.value)}, 400`};
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
linearStyle () {
|
|
|
|
if (this.props.mode !== 'indeterminate') {
|
|
|
|
return {
|
|
|
|
buffer: prefixer({transform: `scaleX(${this.calculateRatio(this.props.buffer)})`}),
|
|
|
|
value: prefixer({transform: `scaleX(${this.calculateRatio(this.props.value)})`})
|
|
|
|
};
|
|
|
|
} else {
|
|
|
|
return {};
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
renderCircular () {
|
|
|
|
return (
|
2016-05-22 22:50:22 +03:00
|
|
|
<svg className={this.props.theme.circle}>
|
|
|
|
<circle className={this.props.theme.path} style={this.circularStyle()} cx='30' cy='30' r='25' />
|
2015-11-22 23:41:28 +03:00
|
|
|
</svg>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
renderLinear () {
|
|
|
|
const {buffer, value} = this.linearStyle();
|
|
|
|
return (
|
|
|
|
<div>
|
2016-05-22 22:50:22 +03:00
|
|
|
<span ref='buffer' data-ref='buffer' className={this.props.theme.buffer} style={buffer}></span>
|
|
|
|
<span ref='value' data-ref='value' className={this.props.theme.value} style={value}></span>
|
2015-11-22 23:41:28 +03:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
render () {
|
2016-05-22 22:50:22 +03:00
|
|
|
const { className, max, min, mode, multicolor, type, theme, value } = this.props;
|
|
|
|
const _className = classnames(theme[type], {
|
|
|
|
[theme[mode]]: mode,
|
|
|
|
[theme.multicolor]: multicolor
|
|
|
|
}, className);
|
2015-11-22 23:41:28 +03:00
|
|
|
|
|
|
|
return (
|
|
|
|
<div
|
|
|
|
data-react-toolbox='progress-bar'
|
2016-05-22 22:50:22 +03:00
|
|
|
aria-valuenow={value}
|
|
|
|
aria-valuemin={min}
|
|
|
|
aria-valuemax={max}
|
|
|
|
className={_className}
|
2015-11-22 23:41:28 +03:00
|
|
|
>
|
2016-05-22 22:50:22 +03:00
|
|
|
{type === 'circular' ? this.renderCircular() : this.renderLinear()}
|
2015-11-22 23:41:28 +03:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2016-05-22 22:50:22 +03:00
|
|
|
export default themr('ToolboxProgress')(ProgressBar);
|
2016-05-25 01:25:43 +03:00
|
|
|
export { ProgressBar };
|