Release v1.1.0

mironov · May 5, 2016 · 2ae9e0d · 2ae9e0d
1 parent d75ef18
commit 2ae9e0d
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 71 deletions.
diff --git a/README.md b/README.md
@@ -71,15 +71,9 @@ const store = createStore(
 
 If you're not using `redux-promise-middleware`, you can skip installing the `loadingBarMiddleware` and dispatch `SHOW`/`HIDE` actions manually. The other option is to write your own middleware that will be similar to the [bundled one](https://github.com/mironov/react-redux-loading-bar/blob/master/src/loading_bar_middleware.js).
 
-## Customizing
+## Usage without middleware
 
-You can change the color and height of the Loading Bar:
-
-```es6
-<LoadingBar color="blue" height="5px" />
-```
-
-You can dispatch `SHOW`/`HIDE` actions wherever you want by importing the corresponding functions:
+You can dispatch `SHOW`/`HIDE` actions wherever you want by importing the corresponding action creators:
 
 ```es6
 import { showLoading, hideLoading } from 'react-redux-loading-bar'
@@ -89,7 +83,7 @@ dispatch(showLoading())
 dispatch(hideLoading())
 ```
 
-You can dispatch `SHOW` action multiple times and the loading bar will be shown until the `HIDE` action is called for same times. In other words, the loading bar is shown until all long running tasks complete.
+You can dispatch the `SHOW` action multiple times and the loading bar will be shown until the `HIDE` action is called for same times. In other words, the loading bar is shown until all long running tasks complete.
 
 ## Usage with jQuery Ajax Requests
 
@@ -102,6 +96,20 @@ $(document).on('ajaxStop', this.props.actions.hideLoading)
 
 See [a demo](http://mironov.github.io/react-redux-loading-bar/?ajax) or checkout [the code](https://github.com/mironov/react-redux-loading-bar/blob/gh-pages/src/demo_ajax.js).
 
+## Styling
+
+You can apply custom styling right on the `LoadingBar` component, for example you can change the color and height of it:
+
+```es6
+<LoadingBar style={{ backgroundColor: 'blue', height: '5px' }} />
+```
+
+Or specify your own CSS class:
+
+```es6
+<LoadingBar className="loading" />
+```
+
 ## Tests
 
 ```bash
@@ -116,5 +124,8 @@ Add unit tests for any new or changed functionality. Lint and test your code.
 ## Release History
 
 * 1.0.0 Initial release
+* 1.0.1 Update dependencies
+* 1.0.2 Fix middleware to work with `redux-thunk`
+* 1.1.0 Add ability to apply custom styling and relax dependencies
 
 Licensed MIT. Copyright 2016-current Anton Mironov.
diff --git a/build/loading_bar.js b/build/loading_bar.js
@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.LoadingBar = exports.PROGRESS_INCREASE = exports.MAX_PROGRESS = exports.UPDATE_TIME = undefined;
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
 var _react = require('react');
@@ -88,39 +90,51 @@ var LoadingBar = exports.LoadingBar = function (_React$Component) {
       return percent > 0 && percent <= 100 && this.props.loading !== 0;
     }
   }, {
-    key: 'render',
-    value: function render() {
-      var loadingStyle = {
-        height: this.props.height,
+    key: 'buildStyle',
+    value: function buildStyle() {
+      var style = {
+        height: '3px',
         width: this.state.percent + '%',
-        backgroundColor: this.props.color,
+        backgroundColor: 'red',
         transition: 'width 400ms ease-out, height 400ms linear',
         position: 'absolute'
       };
 
+      return _extends({}, style, this.props.style);
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var style = this.buildStyle();
+
       if (this.shouldShow(this.state.percent)) {
-        loadingStyle.display = 'block';
+        style.display = 'block';
       } else {
-        loadingStyle.display = 'none';
+        style.display = 'none';
       }
 
-      return _react2.default.createElement('div', { style: loadingStyle });
+      return _react2.default.createElement(
+        'div',
+        null,
+        _react2.default.createElement('div', { style: style, className: this.props.className }),
+        _react2.default.createElement('div', { style: { display: 'table', clear: 'both' } })
+      );
     }
   }]);
 
   return LoadingBar;
 }(_react2.default.Component);
 
 LoadingBar.propTypes = {
-  color: _react.PropTypes.string,
-  height: _react.PropTypes.string,
+  style: _react.PropTypes.object,
+  className: _react.PropTypes.string,
   actions: _react.PropTypes.object,
   loading: _react.PropTypes.number
 };
 
 LoadingBar.defaultProps = {
-  color: 'red',
-  height: '3px',
+  style: {},
+  className: undefined,
   loading: 0
 };
 

diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-redux-loading-bar",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "Simple Loading Bar for Redux and React",
   "main": "build/index.js",
   "scripts": {
@@ -31,11 +31,11 @@
     "url": "https://github.com/mironov/react-redux-loading-bar/issues"
   },
   "homepage": "https://github.com/mironov/react-redux-loading-bar",
-  "dependencies": {
-    "react": "^15.0.2",
-    "react-dom": "^15.0.2",
-    "react-redux": "^4.4.5",
-    "redux": "^3.5.2"
+  "peerDependencies": {
+    "react": "^0.14.0 || ^15.0.0",
+    "react-dom": "^0.14.0 || ^15.0.0",
+    "react-redux": "^3.0.0 || ^4.0.0",
+    "redux": "^3.0.0"
   },
   "devDependencies": {
     "babel-cli": "^6.7.7",
@@ -56,6 +56,10 @@
     "istanbul": "^1.0.0-alpha.2",
     "lolex": "^1.4.0",
     "mocha": "^2.4.5",
-    "react-addons-test-utils": "^15.0.2"
+    "react": "^15.0.2",
+    "react-addons-test-utils": "^15.0.2",
+    "react-dom": "^15.0.2",
+    "react-redux": "^4.4.5",
+    "redux": "^3.5.2"
   }
 }
diff --git a/spec/loading_bar.js b/spec/loading_bar.js
@@ -23,16 +23,17 @@ describe('LoadingBar', () => {
     it('renders by default hidden 3px height red element', () => {
       const wrapper = shallow(<LoadingBar />)
 
-      const resultStyle = wrapper.node.props.style
+      const resultStyle = wrapper.children().node.props.style
       expect(resultStyle.display).toEqual('none')
       expect(resultStyle.backgroundColor).toEqual('red')
       expect(resultStyle.height).toEqual('3px')
     })
 
     it('renders an element with passed color and height', () => {
-      const wrapper = shallow(<LoadingBar color="blue" height="5px" />)
+      const style = { backgroundColor: 'blue', height: '5px' }
+      const wrapper = shallow(<LoadingBar style={style} />)
 
-      const resultStyle = wrapper.node.props.style
+      const resultStyle = wrapper.children().node.props.style
       expect(resultStyle.backgroundColor).toEqual('blue')
       expect(resultStyle.height).toEqual('5px')
     })
@@ -41,7 +42,7 @@ describe('LoadingBar', () => {
       const wrapper = shallow(<LoadingBar loading={1} />)
       wrapper.setState({ percent: 10 })
 
-      const resultStyle = wrapper.node.props.style
+      const resultStyle = wrapper.children().node.props.style
       expect(resultStyle.display).toEqual('block')
       expect(resultStyle.backgroundColor).toEqual('red')
       expect(resultStyle.height).toEqual('3px')

diff --git a/src/loading_bar.js b/src/loading_bar.js
@@ -57,38 +57,46 @@ export class LoadingBar extends React.Component {
     return (percent > 0) && (percent <= 100) && (this.props.loading !== 0)
   }
 
-  render() {
-    let loadingStyle = {
-      height: this.props.height,
+  buildStyle() {
+    const style = {
+      height: '3px',
       width: `${this.state.percent}%`,
-      backgroundColor: this.props.color,
+      backgroundColor: 'red',
       transition: 'width 400ms ease-out, height 400ms linear',
       position: 'absolute',
     }
 
+    return { ...style, ...this.props.style }
+  }
+
+  render() {
+    const style = this.buildStyle()
+
     if (this.shouldShow(this.state.percent)) {
-      loadingStyle.display = 'block'
+      style.display = 'block'
     } else {
-      loadingStyle.display = 'none'
+      style.display = 'none'
     }
 
     return (
-      <div style={loadingStyle}>
+      <div>
+        <div style={style} className={this.props.className}></div>
+        <div style={{ display: 'table', clear: 'both' }}></div>
       </div>
     )
   }
 }
 
 LoadingBar.propTypes = {
-  color: PropTypes.string,
-  height: PropTypes.string,
+  style: PropTypes.object,
+  className: PropTypes.string,
   actions: PropTypes.object,
   loading: PropTypes.number,
 }
 
 LoadingBar.defaultProps = {
-  color: 'red',
-  height: '3px',
+  style: {},
+  className: undefined,
   loading: 0,
 }