diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..720e06c --- /dev/null +++ b/.babelrc @@ -0,0 +1,5 @@ +// .babelrc +{ + "presets": ["es2015"], + "plugins": ["transform-react-jsx", "babel-plugin-add-module-exports"] +} \ No newline at end of file diff --git a/README.md b/README.md index d89fa96..365dc09 100644 --- a/README.md +++ b/README.md @@ -16,6 +16,12 @@ ## Usage +Accepted props: + +`refreshTimeout`: The milisecond you want to refresh your progress, it will stop and start again. + +`className`: Your custom class name + Include `react-progress-2/main.css` to your project. With [SystemJS CSS plugin](https://github.com/systemjs/plugin-css) you simply need to write this line: ```js import "react-progress-2/main.css!" diff --git a/dev/app.jsx b/dev/app.jsx index af25b91..d4bed9b 100644 --- a/dev/app.jsx +++ b/dev/app.jsx @@ -5,8 +5,8 @@ import Progress from '../src/main' class Application extends React.Component { render() { return ( -
- +
+
diff --git a/lib/main.js b/lib/main.js index 8606d5b..de24ace 100644 --- a/lib/main.js +++ b/lib/main.js @@ -1,20 +1,19 @@ 'use strict'; -Object.defineProperty(exports, '__esModule', { +Object.defineProperty(exports, "__esModule", { value: true }); -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } - var _react = require('react'); var _react2 = _interopRequireDefault(_react); -var Component = _react2['default'].createClass({ - displayName: 'Component', +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } +var Component = _react2.default.createClass({ count: 0, runningTimerId: null, + refreshTimerId: null, hidingTimerId: null, getInitialState: function getInitialState() { @@ -22,28 +21,26 @@ var Component = _react2['default'].createClass({ state: 'hidden' }; }, - getDefaultProps: function getDefaultProps() { return { - cls: '' + className: '', + refreshTimeout: 0 }; }, - render: function render() { - var cls = 'loader-60devs ' + this.props.cls; + var className = 'loader-60devs ' + this.props.className; - return _react2['default'].createElement( + return _react2.default.createElement( 'div', - { className: cls, 'data-state': this.state.state, ref: 'element' }, - _react2['default'].createElement('div', { className: 'loader-60devs-progress' }) + { className: className, 'data-state': this.state.state, ref: 'element' }, + _react2.default.createElement('div', { className: 'loader-60devs-progress' }) ); }, - show: function show() { if (++this.count > 1) return; clearTimeout(this.hidingTimerId); - + clearTimeout(this.refreshTimerId); var element = this.refs.element; var progressEl = element.querySelector('.loader-60devs-progress'); @@ -55,38 +52,39 @@ var Component = _react2['default'].createClass({ element.setAttribute('data-state', ''); element.offsetHeight; element.setAttribute('data-state', 'running'); + var that = this; + if (this.props.refreshTimeout > 0) { + this.refreshTimerId = setTimeout(function () { + that.hide(); + that.show(); + }, this.props.refreshTimeout); + } }, - hide: function hide() { if (--this.count > 0) return; - + clearTimeout(this.refreshTimerId); this.refs.element.setAttribute('data-state', 'finishing'); this.hidingTimerId = setTimeout(this.toHiddenState, 500); }, - hideAll: function hideAll() { this.count = 1; this.hide(); }, - toHiddenState: function toHiddenState() { - this.refs.element.setAttribute('data-state', 'hidden'); + this.refs.element && this.refs.element.setAttribute('data-state', 'hidden'); }, - componentWillMount: function componentWillMount() { Component.instance = this; }, - componentWillUnmount: function componentWillUnmount() { delete Component.instance; }, - isVisible: function isVisible() { - return this.refs.element.getAttribute('data-state') != 'hidden'; + return this.refs.element && this.refs.element.getAttribute('data-state') != 'hidden'; } }); -exports['default'] = { +exports.default = { Component: Component, show: function show() { Component.instance.show(); @@ -101,4 +99,4 @@ exports['default'] = { return Component.instance.isVisible(); } }; -module.exports = exports['default']; +module.exports = exports['default']; \ No newline at end of file diff --git a/package.json b/package.json index 984fd6a..4d11473 100644 --- a/package.json +++ b/package.json @@ -3,11 +3,18 @@ "version": "4.2.1", "description": "React progress 2", "scripts": { + "build": "babel src -d lib --ignore __tests__", "test": "echo \"Error: no test specified\" && exit 1" }, "main": "lib/main.js", "dependencies": {}, - "devDependencies": {}, + "devDependencies": { + "babel-cli": "^6.18.0", + "babel-plugin-add-module-exports": "^0.2.1", + "babel-preset-latest": "^6.16.0", + "babel-register": "^6.18.0", + "babel-plugin-transform-react-jsx": "^6.18.0" + }, "repository": { "type": "git", "url": "git+https://github.com/milworm/react-progress-2.git" diff --git a/src/main.js b/src/main.js index 49cc1d1..ead5d14 100644 --- a/src/main.js +++ b/src/main.js @@ -3,6 +3,7 @@ import React from 'react' let Component = React.createClass({ count: 0, runningTimerId: null, + refreshTimerId: null, hidingTimerId: null, getInitialState() { @@ -13,15 +14,16 @@ let Component = React.createClass({ getDefaultProps() { return { - cls: '' + className: '', + refreshTimeout: 0, } }, render() { - let cls = `loader-60devs ${this.props.cls}` + let className = `loader-60devs ${this.props.className}` return ( -
+
) @@ -32,7 +34,7 @@ let Component = React.createClass({ return clearTimeout(this.hidingTimerId) - + clearTimeout(this.refreshTimerId) var {element} = this.refs let progressEl = element.querySelector('.loader-60devs-progress') @@ -43,12 +45,19 @@ let Component = React.createClass({ element.setAttribute('data-state', '') element.offsetHeight element.setAttribute('data-state', 'running') + var that = this; + if (this.props.refreshTimeout > 0) { + this.refreshTimerId = setTimeout(function() { + that.hide(); + that.show(); + }, this.props.refreshTimeout); + } }, hide() { if(-- this.count > 0) return - + clearTimeout(this.refreshTimerId) this.refs.element.setAttribute('data-state', 'finishing') this.hidingTimerId = setTimeout(this.toHiddenState, 500) }, @@ -59,7 +68,7 @@ let Component = React.createClass({ }, toHiddenState() { - this.refs.element.setAttribute('data-state', 'hidden') + this.refs.element && this.refs.element.setAttribute('data-state', 'hidden') }, componentWillMount() { @@ -71,7 +80,7 @@ let Component = React.createClass({ }, isVisible() { - return this.refs.element.getAttribute('data-state') != 'hidden' + return this.refs.element && this.refs.element.getAttribute('data-state') != 'hidden' } })