Skip to content

Commit b080270

Browse files
author
Minh Tran
committed
Spinner position
1 parent f8eda2a commit b080270

File tree

10 files changed

+116
-131
lines changed

10 files changed

+116
-131
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ Example [here](http://codepen.io/vn38minhtran/pen/QjaZrm)
6262
| onTop | bool | false | Progress bar will ontop & height 100% |
6363
| autoIncrement | bool | false | if `true` percent will auto increment `Math.random() + 1 - Math.random()`% in `intervalTime` ms. |
6464
| intervalTime | number | 200 | Interval time for auto increment. |
65-
| showSpinner | bool | true | Pass `false` to hide spinner icon. |
65+
| spinner | oneOf([false, 'left', 'right']) | left | Spinner position. Pass `false` to hide spinner icon. |
6666

6767
## Example
6868

‎bower.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-progress-bar-plus",
3-
"version": "1.0.0",
3+
"version": "1.1.0",
44
"description": "Progress bar component for ReactJS.",
55
"main": ["dist/progress-bar.css", "dist/react-progress-bar-plus.js"],
66
"keywords": [

‎dist/progress-bar.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/react-progress-bar-plus.js‎

Lines changed: 1 addition & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/app/components/pages/AutoIncrement/index.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,8 @@ class PageExample1 extends React.Component {
3030
<div>
3131
<ProgressBar percent={this.state.percent}
3232
autoIncrement={true}
33-
intervalTime={this.state.intervalTime}/>
33+
intervalTime={this.state.intervalTime}
34+
spinner="right"/>
3435

3536
<div className="text-center">
3637
<h4>

‎lib/ProgressBar.js‎

Lines changed: 50 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,5 @@
11
'use strict';
22

3-
var _reactTransformHmr2 = require('react-transform-hmr');
4-
5-
var _reactTransformHmr3 = _interopRequireDefault(_reactTransformHmr2);
6-
7-
var _react = require('react');
8-
93
Object.defineProperty(exports, '__esModule', {
104
value: true
115
});
@@ -14,53 +8,63 @@ var _createClass = (function () { function defineProperties(target, props) { for
148

159
var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
1610

17-
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
18-
19-
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
11+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
2012

21-
var _react2 = _interopRequireDefault(_react);
13+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
2214

23-
var _classnames = require('classnames');
15+
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
2416

25-
var _classnames2 = _interopRequireDefault(_classnames);
17+
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
2618

27-
var _components = {
28-
_$ProgressBar: {
29-
displayName: 'ProgressBar'
30-
}
31-
};
19+
var _react = require('react');
3220

33-
var _reactComponentWrapper = (0, _reactTransformHmr3['default'])({
34-
filename: '/home/dmitry/projects/react-progress-bar-plus/src/ProgressBar.js',
35-
components: _components,
36-
locals: [module],
37-
imports: [_react]
38-
});
21+
var _react2 = _interopRequireDefault(_react);
3922

40-
function _wrapComponent(uniqueId) {
41-
return function (ReactClass) {
42-
return _reactComponentWrapper(ReactClass, uniqueId);
43-
};
44-
}
23+
var _classnames2 = require('classnames');
4524

46-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
25+
var _classnames3 = _interopRequireDefault(_classnames2);
4726

4827
var ProgressBar = (function (_React$Component) {
4928
_inherits(ProgressBar, _React$Component);
5029

5130
function ProgressBar() {
5231
var _this = this;
5332

54-
_classCallCheck(this, _ProgressBar);
33+
_classCallCheck(this, ProgressBar);
5534

56-
_get(Object.getPrototypeOf(_ProgressBar.prototype), 'constructor', this).apply(this, arguments);
35+
_get(Object.getPrototypeOf(ProgressBar.prototype), 'constructor', this).apply(this, arguments);
5736

5837
this.state = {
5938
percent: this.props.percent
6039
};
6140

41+
this.componentDidMount = function () {
42+
_this.handleProps(_this.props);
43+
};
44+
45+
this.componentWillReceiveProps = function (nextProps) {
46+
if (_this.interval) {
47+
clearInterval(_this.interval);
48+
}
49+
if (_this.timeout) {
50+
clearTimeout(_this.timeout);
51+
}
52+
_this.handleProps(nextProps);
53+
};
54+
55+
this.componentWillUnmount = function () {
56+
if (_this.interval) {
57+
clearInterval(_this.interval);
58+
}
59+
if (_this.timeout) {
60+
clearTimeout(_this.timeout);
61+
}
62+
};
63+
6264
this.increment = function () {
63-
var percent = _this.state.percent + (Math.random() + 1 - Math.random());
65+
var percent = _this.state.percent;
66+
67+
percent = percent + (Math.random() + 1 - Math.random());
6468
percent = percent < 99 ? percent : 99;
6569
_this.setState({
6670
percent: percent
@@ -88,47 +92,29 @@ var ProgressBar = (function (_React$Component) {
8892
});
8993
}
9094
};
91-
92-
this.componentDidMount = function () {
93-
_this.handleProps(_this.props);
94-
};
95-
96-
this.componentWillReceiveProps = function (nextProps) {
97-
if (_this.interval) {
98-
clearInterval(_this.interval);
99-
}
100-
if (_this.timeout) {
101-
clearTimeout(_this.timeout);
102-
}
103-
_this.handleProps(nextProps);
104-
};
105-
106-
this.componentWillUnmount = function () {
107-
if (_this.interval) {
108-
clearInterval(_this.interval);
109-
}
110-
if (_this.timeout) {
111-
clearTimeout(_this.timeout);
112-
}
113-
};
11495
}
11596

11697
_createClass(ProgressBar, [{
11798
key: 'render',
11899
value: function render() {
119-
var className = (0, _classnames2['default'])({
120-
'react-progress-bar': true,
121-
'react-progress-bar-on-top': this.props.onTop,
122-
'react-progress-bar-hide': this.state.percent < 0 || this.state.percent >= 100
100+
var _props = this.props;
101+
var onTop = _props.onTop;
102+
var spinner = _props.spinner;
103+
var percent = this.state.percent;
104+
105+
var className = (0, _classnames3['default'])('react-progress-bar', {
106+
'react-progress-bar-on-top': onTop,
107+
'react-progress-bar-hide': percent < 0 || percent >= 100
123108
});
124-
var style = { width: (this.state.percent < 0 ? 0 : this.state.percent) + '%' };
109+
var style = { width: (percent < 0 ? 0 : percent) + '%' };
110+
var spinnerClassName = (0, _classnames3['default'])('react-progress-bar-spinner', _defineProperty({}, 'react-progress-bar-spinner-' + spinner, spinner));
125111
return _react2['default'].createElement(
126112
'div',
127113
{ className: className },
128114
_react2['default'].createElement('div', { className: 'react-progress-bar-percent', style: style }),
129-
this.props.showSpinner ? _react2['default'].createElement(
115+
spinner ? _react2['default'].createElement(
130116
'div',
131-
{ className: 'react-progress-bar-spinner' },
117+
{ className: spinnerClassName },
132118
_react2['default'].createElement('div', { className: 'react-progress-bar-spinner-icon' })
133119
) : null
134120
);
@@ -140,7 +126,7 @@ var ProgressBar = (function (_React$Component) {
140126
onTop: _react2['default'].PropTypes.bool,
141127
autoIncrement: _react2['default'].PropTypes.bool,
142128
intervalTime: _react2['default'].PropTypes.number,
143-
showSpinner: _react2['default'].PropTypes.bool
129+
spinner: _react2['default'].PropTypes.oneOf([false, 'left', 'right'])
144130
},
145131
enumerable: true
146132
}, {
@@ -150,13 +136,11 @@ var ProgressBar = (function (_React$Component) {
150136
onTop: false,
151137
autoIncrement: false,
152138
intervalTime: 200,
153-
showSpinner: true
139+
spinner: 'left'
154140
},
155141
enumerable: true
156142
}]);
157143

158-
var _ProgressBar = ProgressBar;
159-
ProgressBar = _wrapComponent('_$ProgressBar')(ProgressBar) || ProgressBar;
160144
return ProgressBar;
161145
})(_react2['default'].Component);
162146

‎lib/progress-bar.css‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,3 @@
1-
@-webkit-keyframes react-progress-spinner {
2-
0% {
3-
-webkit-transform: rotate(0deg);
4-
}
5-
100% {
6-
-webkit-transform: rotate(360deg);
7-
}
8-
}
9-
101
@keyframes react-progress-spinner {
112
0% {
123
transform: rotate(0deg);
@@ -24,7 +15,7 @@
2415
visibility: visible;
2516
opacity: 1;
2617
transition: all 400ms;
27-
z-index: 9999999;
18+
z-index: 9999;
2819
}
2920

3021
.react-progress-bar.react-progress-bar-on-top {
@@ -48,7 +39,16 @@
4839
display: block;
4940
position: fixed;
5041
top: 15px;
42+
}
43+
44+
.react-progress-bar-spinner-left {
5145
left: 15px;
46+
right: auto;
47+
}
48+
49+
.react-progress-bar-spinner-right {
50+
left: auto;
51+
right: 15px;
5252
}
5353

5454
.react-progress-bar-spinner-icon {
@@ -59,6 +59,5 @@
5959
border-top-color: #29d;
6060
border-left-color: #29d;
6161
border-radius: 50%;
62-
-webkit-animation: react-progress-spinner 400ms linear infinite;
6362
animation: react-progress-spinner 400ms linear infinite;
6463
}

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-progress-bar-plus",
3-
"version": "1.0.0",
3+
"version": "1.1.0",
44
"description": "Progress bar component for ReactJS.",
55
"main": "lib/index.js",
66
"scripts": {

‎src/ProgressBar.js‎

Lines changed: 39 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -7,23 +7,47 @@ class ProgressBar extends React.Component {
77
onTop: React.PropTypes.bool,
88
autoIncrement: React.PropTypes.bool,
99
intervalTime: React.PropTypes.number,
10-
showSpinner: React.PropTypes.bool
10+
spinner: React.PropTypes.oneOf([false, 'left', 'right'])
1111
};
1212

1313
static defaultProps = {
1414
percent: -1,
1515
onTop: false,
1616
autoIncrement: false,
1717
intervalTime: 200,
18-
showSpinner: true
18+
spinner: 'left'
1919
};
2020

2121
state = {
2222
percent: this.props.percent
2323
};
2424

25+
componentDidMount = () => {
26+
this.handleProps(this.props);
27+
};
28+
29+
componentWillReceiveProps = (nextProps) => {
30+
if (this.interval) {
31+
clearInterval(this.interval);
32+
}
33+
if (this.timeout) {
34+
clearTimeout(this.timeout);
35+
}
36+
this.handleProps(nextProps);
37+
};
38+
39+
componentWillUnmount = () => {
40+
if (this.interval) {
41+
clearInterval(this.interval);
42+
}
43+
if (this.timeout) {
44+
clearTimeout(this.timeout);
45+
}
46+
};
47+
2548
increment = () => {
26-
let percent = this.state.percent + (Math.random() + 1 - Math.random());
49+
let {percent} = this.state;
50+
percent = percent + (Math.random() + 1 - Math.random());
2751
percent = percent < 99 ? percent : 99;
2852
this.setState({
2953
percent: percent
@@ -52,45 +76,26 @@ class ProgressBar extends React.Component {
5276
}
5377
};
5478

55-
componentDidMount = () => {
56-
this.handleProps(this.props);
57-
};
58-
59-
componentWillReceiveProps = (nextProps) => {
60-
if (this.interval) {
61-
clearInterval(this.interval);
62-
}
63-
if (this.timeout) {
64-
clearTimeout(this.timeout);
65-
}
66-
this.handleProps(nextProps);
67-
};
68-
69-
componentWillUnmount = () => {
70-
if (this.interval) {
71-
clearInterval(this.interval);
72-
}
73-
if (this.timeout) {
74-
clearTimeout(this.timeout);
75-
}
76-
};
77-
7879
render() {
79-
let className = classnames({
80-
'react-progress-bar': true,
81-
'react-progress-bar-on-top': this.props.onTop,
82-
'react-progress-bar-hide': this.state.percent < 0 || this.state.percent >= 100
80+
let {onTop, spinner} = this.props;
81+
let {percent} = this.state;
82+
let className = classnames('react-progress-bar', {
83+
'react-progress-bar-on-top': onTop,
84+
'react-progress-bar-hide': percent < 0 || percent >= 100
85+
});
86+
let style = {width: (percent < 0 ? 0 : percent) + '%'};
87+
let spinnerClassName = classnames('react-progress-bar-spinner', {
88+
[`react-progress-bar-spinner-${spinner}`]: spinner
8389
});
84-
let style = {width: (this.state.percent < 0 ? 0 : this.state.percent) + '%'};
8590
return (
8691
<div className={className}>
8792
<div className="react-progress-bar-percent" style={style}/>
8893
{
89-
this.props.showSpinner ?
90-
<div className="react-progress-bar-spinner">
94+
spinner ?
95+
<div className={spinnerClassName}>
9196
<div className="react-progress-bar-spinner-icon"/>
9297
</div>
93-
: null
98+
: null
9499
}
95100
</div>
96101
);

0 commit comments

Comments
 (0)