🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
react-progress-bar-plus
Advanced tools
react-progress-bar-plus - npm Package Compare versions
Comparing version 0.1.0 to 0.2.0
225
gulpfile.js
| 'use strict'; | ||
| var pkg = require('./package.json'); | ||
| var gulp = require('gulp'); | ||
| var gulpUtil = require('gulp-util'); | ||
| var del = require('del'); | ||
| var webpack = require('gulp-webpack'); | ||
| var named = require('vinyl-named'); | ||
| var minifyHtml = require('gulp-minify-html'); | ||
| var uglify = require('gulp-uglify'); | ||
| var eslint = require('gulp-eslint'); | ||
| var babel = require('gulp-babel'); | ||
| var sass = require('gulp-sass'); | ||
| var filter = require('gulp-filter'); | ||
| var autoprefixer = require('gulp-autoprefixer'); | ||
| var csso = require('gulp-csso'); | ||
| var imagemin = require('gulp-imagemin'); | ||
| var browserSync = require('browser-sync'); | ||
| var modRewrite = require('connect-modrewrite'); | ||
| var runSequence = require('run-sequence'); | ||
| var opn = require('opn'); | ||
| var karma = require('gulp-karma'); | ||
| var sass = require('gulp-sass'); | ||
| var babel = require('gulp-babel'); | ||
| var webpackStatsHelper = require('./example/helper/webpack-stats-helper'); | ||
| var path = require('path'); | ||
| var frep = require('gulp-frep'); | ||
| var minifyHtml = require('gulp-minify-html'); | ||
| var webpackStream = require('webpack-stream'); | ||
| var webpackConfig = require('./example/webpack.build.config'); | ||
| var webpack = require('webpack'); | ||
| var isBuild = false; | ||
| var isOpen = false; | ||
| var autoprefixerBrowsers = [ | ||
| 'ie >= 10', | ||
| 'ie_mob >= 10', | ||
| 'ff >= 30', | ||
| 'chrome >= 34', | ||
| 'safari >= 7', | ||
| 'opera >= 23', | ||
| 'ios >= 7', | ||
| 'android >= 4.4', | ||
| 'bb >= 10' | ||
| ]; | ||
| gulp.task('clean', function () { | ||
| del.sync(['.tmp', 'dist']); | ||
| del.sync(['lib']); | ||
| }); | ||
| gulp.task('webpack', function () { | ||
| var webpackConfigs = require('./webpack.example.config.js'); | ||
| webpackConfigs.quiet = !isBuild; | ||
| return gulp.src(['example/*.{js,jsx}']) | ||
| .pipe(named()) | ||
| .pipe(webpack(webpackConfigs)) | ||
| .pipe(gulp.dest('.tmp')); | ||
| gulp.task('lint', function () { | ||
| return gulp | ||
| .src(['src/**/*.js']) | ||
| .pipe(eslint()) | ||
| .pipe(eslint.format()) | ||
| .pipe(eslint.failOnError()); | ||
| }); | ||
| gulp.task('webpack:watch', function () { | ||
| var webpackConfigs = require('./webpack.example.config.js'); | ||
| webpackConfigs.watch = true; | ||
| return gulp.src('example/*.{js,jsx}') | ||
| .pipe(named()) | ||
| .pipe(webpack(webpackConfigs, null, function (error, stats) { | ||
| if (error) { | ||
| gulpUtil.log(error.toString()); | ||
| } else { | ||
| gulpUtil.log(stats.toString({ | ||
| colors: gulpUtil.colors.supportsColor, | ||
| hash: false, | ||
| timings: false, | ||
| chunks: false, | ||
| chunkModules: false, | ||
| modules: false, | ||
| children: false, | ||
| version: true, | ||
| cached: false, | ||
| cachedAssets: false, | ||
| reasons: false, | ||
| source: false, | ||
| errorDetails: false | ||
| })); | ||
| if (!isOpen) { | ||
| opn('http://localhost:3000', null, function () { | ||
| isOpen = true; | ||
| }); | ||
| } | ||
| } | ||
| })) | ||
| .pipe(gulp.dest('.tmp')); | ||
| }); | ||
| gulp.task('html', ['webpack'], function () { | ||
| return gulp.src('example/*.html') | ||
| .pipe(minifyHtml({empty: true, cdata: true, conditionals: true})) | ||
| .pipe(gulp.dest('dist')); | ||
| gulp.task('babel', function () { | ||
| return gulp | ||
| .src(['src/**/*.js']) | ||
| .pipe(babel()) | ||
| .pipe(gulp.dest('lib')); | ||
| }); | ||
| gulp.task('scripts', function () { | ||
| return gulp.src('.tmp/*.js') | ||
| .pipe(uglify()) | ||
| .pipe(gulp.dest('dist')); | ||
| }); | ||
| gulp.task('styles', function () { | ||
| return gulp.src('.tmp/*.css') | ||
| .pipe(autoprefixer(autoprefixerBrowsers)) | ||
| .pipe(csso()) | ||
| .pipe(gulp.dest('dist')); | ||
| }); | ||
| gulp.task('images', function () { | ||
| return gulp.src('.tmp/*.{png,jpg,gif}') | ||
| .pipe(imagemin({ | ||
| optimizationLevel: 3, | ||
| interlaced: true | ||
| gulp.task('sass', function () { | ||
| var cssFilter = filter('**/*.css'); | ||
| return gulp | ||
| .src(['src/*.scss', '!src/_*.scss']) | ||
| .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError)) | ||
| .pipe(cssFilter) | ||
| .pipe(autoprefixer({ | ||
| browsers: [ | ||
| 'ie >= 10', | ||
| 'ie_mob >= 10', | ||
| 'ff >= 30', | ||
| 'chrome >= 34', | ||
| 'safari >= 7', | ||
| 'opera >= 23', | ||
| 'ios >= 7', | ||
| 'android >= 4.4', | ||
| 'bb >= 10' | ||
| ] | ||
| })) | ||
| .pipe(gulp.dest('dist')); | ||
| .pipe(gulp.dest('lib')); | ||
| }); | ||
| gulp.task('fonts', function () { | ||
| return gulp.src('.tmp/*.{ttf,eot,svg,woff,woff2}') | ||
| .pipe(gulp.dest('dist')); | ||
| }); | ||
| gulp.task('copy', function () { | ||
| return gulp.src(['example/*.*', '!example/*.{html,js}'], {dot: true}) | ||
| .pipe(gulp.dest('dist')); | ||
| return gulp | ||
| .src(['src/**/*', '!src/**/*.{scss,js}']) | ||
| .pipe(gulp.dest('lib')); | ||
| }); | ||
| gulp.task('browserSync', function (callback) { | ||
| browserSync({ | ||
| files: ['example/*.html', '.tmp/**/*'], | ||
| server: { | ||
| baseDir: ['.tmp', 'example'], | ||
| middleware: [ | ||
| modRewrite([ | ||
| '!\\.\\w+$ /index.html [L]' | ||
| ]) | ||
| ] | ||
| }, | ||
| port: 3000, | ||
| reloadOnRestart: false, | ||
| open: false | ||
| }); | ||
| callback(); | ||
| gulp.task('build:lib', function (callback) { | ||
| runSequence('clean', 'lint', 'babel', 'sass', 'copy', callback); | ||
| }); | ||
| gulp.task('serve', function (callback) { | ||
| runSequence('clean', 'webpack', 'browserSync', 'webpack:watch', callback); | ||
| }); | ||
| gulp.task('test', function () { | ||
| return gulp.src('test/spec/**/*.js') | ||
| .pipe(karma({ | ||
| configFile: 'karma.conf.js', | ||
| action: 'run' | ||
| })); | ||
| gulp.task('example:clean', function () { | ||
| del.sync(['example/dist']); | ||
| }); | ||
| gulp.task('build', function (callback) { | ||
| isBuild = true; | ||
| runSequence('clean', 'html', 'scripts', 'styles', 'images', 'fonts', 'copy', callback); | ||
| gulp.task('example:webpack', function () { | ||
| return gulp | ||
| .src(['example/app/app.js']) | ||
| .pipe(webpackStream(webpackConfig, webpack)) | ||
| .pipe(gulp.dest('example/dist')); | ||
| }); | ||
| gulp.task('serve:dist', ['build'], function () { | ||
| browserSync({ | ||
| server: { | ||
| baseDir: 'dist' | ||
| } | ||
| }); | ||
| gulp.task('example:html', function () { | ||
| var patterns = webpackStatsHelper.getReplacePatterns(path.join(__dirname, './example/dist/webpack.stats.json')); | ||
| return gulp.src(['example/app/*.html']) | ||
| .pipe(frep(patterns)) | ||
| .pipe(minifyHtml()) | ||
| .pipe(gulp.dest('example/dist')); | ||
| }); | ||
| gulp.task('lib:clean', function () { | ||
| del.sync(['lib']); | ||
| gulp.task('example:copy', function () { | ||
| return gulp | ||
| .src(['example/app/*', '!example/app/*.{html,js}'], {nodir: true}) | ||
| .pipe(gulp.dest('example/dist')); | ||
| }); | ||
| gulp.task('lib:sass', function () { | ||
| gulp.src('src/*.scss') | ||
| .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError)) | ||
| .pipe(autoprefixer(autoprefixerBrowsers)) | ||
| .pipe(gulp.dest('lib')); | ||
| gulp.task('build:example', function (callback) { | ||
| runSequence('example:clean', 'example:webpack', 'example:html', 'example:copy', callback); | ||
| }); | ||
| gulp.task('lib:babel', function () { | ||
| return gulp.src('src/*.{js,jsx}') | ||
| .pipe(babel()) | ||
| .pipe(gulp.dest('lib')); | ||
| gulp.task('build', function (callback) { | ||
| runSequence('build:lib', 'build:example', callback); | ||
| }); | ||
| gulp.task('lib:copy', function () { | ||
| return gulp.src(['src/**/*', '!src/*.{scss,js}'], {dot: true}) | ||
| .pipe(gulp.dest('lib')); | ||
| }); | ||
| gulp.task('lib', function (callback) { | ||
| runSequence('lib:clean', 'lib:babel', 'lib:sass', 'lib:copy', callback); | ||
| }); | ||
| gulp.task('default', function () { | ||
| gulp.start('build'); | ||
| }); |
| 'use strict'; | ||
| var React = require('react'); | ||
| Object.defineProperty(exports, '__esModule', { | ||
| value: true | ||
| }); | ||
| var ProgressBar = React.createClass({ | ||
| displayName: 'ProgressBar', | ||
| 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; }; })(); | ||
| propTypes: { | ||
| percent: React.PropTypes.number.isRequired, | ||
| onTop: React.PropTypes.bool, | ||
| autoIncrement: React.PropTypes.bool, | ||
| intervalTime: React.PropTypes.number | ||
| }, | ||
| getDefaultProps: function getDefaultProps() { | ||
| return { | ||
| percent: -1, | ||
| onTop: false, | ||
| autoIncrement: false, | ||
| intervalTime: 200 | ||
| }; | ||
| }, | ||
| getInitialState: function getInitialState() { | ||
| return { | ||
| var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _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; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } }; | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } | ||
| function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } } | ||
| 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; } | ||
| var _react = require('react'); | ||
| var _react2 = _interopRequireDefault(_react); | ||
| var _classnames = require('classnames'); | ||
| var _classnames2 = _interopRequireDefault(_classnames); | ||
| var ProgressBar = (function (_React$Component) { | ||
| _inherits(ProgressBar, _React$Component); | ||
| function ProgressBar() { | ||
| var _this = this; | ||
| _classCallCheck(this, ProgressBar); | ||
| _get(Object.getPrototypeOf(ProgressBar.prototype), 'constructor', this).apply(this, arguments); | ||
| this.state = { | ||
| percent: this.props.percent | ||
| }; | ||
| }, | ||
| increment: function increment() { | ||
| var percent = this.state.percent + (Math.random() + 1 - Math.random()); | ||
| percent = percent < 99 ? percent : 99; | ||
| this.setState({ | ||
| percent: percent | ||
| }); | ||
| }, | ||
| componentWillUnmount: function componentWillUnmount() { | ||
| if (this.interval) { | ||
| clearInterval(this.interval); | ||
| } | ||
| }, | ||
| componentWillReceiveProps: function componentWillReceiveProps(nextProps) { | ||
| if (this.interval) { | ||
| clearInterval(this.interval); | ||
| } | ||
| if (nextProps.autoIncrement && nextProps.percent >= 0 && nextProps.percent < 99) { | ||
| this.interval = setInterval(this.increment, nextProps.intervalTime); | ||
| } | ||
| this.increment = function () { | ||
| var percent = _this.state.percent + (Math.random() + 1 - Math.random()); | ||
| percent = percent < 99 ? percent : 99; | ||
| _this.setState({ | ||
| percent: percent | ||
| }); | ||
| }; | ||
| if (nextProps.percent >= 100) { | ||
| this.setState({ | ||
| percent: 99.9 | ||
| }, function () { | ||
| setTimeout((function () { | ||
| this.setState({ | ||
| percent: 100 | ||
| }); | ||
| }).bind(this), 400); | ||
| this.componentWillUnmount = function () { | ||
| if (_this.interval) { | ||
| clearInterval(_this.interval); | ||
| } | ||
| }; | ||
| this.componentWillReceiveProps = function (nextProps) { | ||
| if (_this.interval) { | ||
| clearInterval(_this.interval); | ||
| } | ||
| if (nextProps.autoIncrement && nextProps.percent >= 0 && nextProps.percent < 99) { | ||
| _this.interval = setInterval(_this.increment, nextProps.intervalTime); | ||
| } | ||
| if (nextProps.percent >= 100) { | ||
| _this.setState({ | ||
| percent: 99.9 | ||
| }, function () { | ||
| setTimeout(function () { | ||
| _this.setState({ | ||
| percent: 100 | ||
| }); | ||
| }, 400); | ||
| }); | ||
| } else { | ||
| _this.setState({ | ||
| percent: nextProps.percent | ||
| }); | ||
| } | ||
| }; | ||
| } | ||
| _createClass(ProgressBar, [{ | ||
| key: 'render', | ||
| value: function render() { | ||
| var className = (0, _classnames2['default'])({ | ||
| 'react-progress-bar': true, | ||
| 'react-progress-bar-on-top': this.props.onTop, | ||
| 'react-progress-bar-hide': this.state.percent < 0 || this.state.percent >= 100 | ||
| }); | ||
| } else { | ||
| this.setState({ | ||
| percent: nextProps.percent | ||
| }); | ||
| var style = { width: this.state.percent + '%' }; | ||
| return _react2['default'].createElement( | ||
| 'div', | ||
| { className: className }, | ||
| _react2['default'].createElement('div', { className: 'react-progress-bar-percent', style: style }), | ||
| _react2['default'].createElement( | ||
| 'div', | ||
| { className: 'react-progress-bar-spinner' }, | ||
| _react2['default'].createElement('div', { className: 'react-progress-bar-spinner-icon' }) | ||
| ) | ||
| ); | ||
| } | ||
| }, | ||
| render: function render() { | ||
| var className = 'react-progress-bar' + (this.props.onTop ? ' react-progress-bar-on-top' : ''); | ||
| if (this.state.percent < 0 || this.state.percent >= 100) { | ||
| className += ' react-progress-bar-hide'; | ||
| } | ||
| var style = { width: this.state.percent + '%' }; | ||
| return React.createElement( | ||
| 'div', | ||
| { className: className }, | ||
| React.createElement('div', { className: 'react-progress-bar-percent', style: style }), | ||
| React.createElement( | ||
| 'div', | ||
| { className: 'react-progress-bar-spinner' }, | ||
| React.createElement('div', { className: 'react-progress-bar-spinner-icon' }) | ||
| ) | ||
| ); | ||
| } | ||
| }); | ||
| }], [{ | ||
| key: 'propTypes', | ||
| value: { | ||
| percent: _react2['default'].PropTypes.number.isRequired, | ||
| onTop: _react2['default'].PropTypes.bool, | ||
| autoIncrement: _react2['default'].PropTypes.bool, | ||
| intervalTime: _react2['default'].PropTypes.number | ||
| }, | ||
| enumerable: true | ||
| }, { | ||
| key: 'defaultProps', | ||
| value: { | ||
| percent: -1, | ||
| onTop: false, | ||
| autoIncrement: false, | ||
| intervalTime: 200 | ||
| }, | ||
| enumerable: true | ||
| }]); | ||
| module.exports = ProgressBar; | ||
| return ProgressBar; | ||
| })(_react2['default'].Component); | ||
| exports['default'] = ProgressBar; | ||
| module.exports = exports['default']; |
| { | ||
| "name": "react-progress-bar-plus", | ||
| "version": "0.1.0", | ||
| "version": "0.2.0", | ||
| "description": "Progress bar component for ReactJS.", | ||
| "main": "lib/ProgressBar.js", | ||
| "main": "lib/index.js", | ||
| "scripts": { | ||
| "serve": "gulp serve", | ||
| "serve:dist": "gulp serve:dist", | ||
| "test": "gulp test", | ||
| "build": "gulp build", | ||
| "lib": "gulp lib" | ||
| "start": "NODE_ENV=development node example/webpack.dev.server.js", | ||
| "build": "NODE_ENV=production gulp build" | ||
| }, | ||
@@ -22,45 +19,43 @@ "keywords": [ | ||
| "peerDependencies": { | ||
| "react": "0.13.x" | ||
| "react": "0.13 - 0.14" | ||
| }, | ||
| "dependencies": {}, | ||
| "dependencies": { | ||
| "classnames": "^2.1.5" | ||
| }, | ||
| "devDependencies": { | ||
| "babel-core": "^5.3.3", | ||
| "babel-eslint": "^3.1.1", | ||
| "babel-loader": "^5.0.0", | ||
| "browser-sync": "^2.7.1", | ||
| "connect-modrewrite": "^0.8.1", | ||
| "css-loader": "^0.12.0", | ||
| "del": "^1.1.1", | ||
| "eslint": "^0.21.0", | ||
| "eslint-loader": "^0.11.2", | ||
| "eslint-plugin-react": "^2.2.0", | ||
| "extract-text-webpack-plugin": "^0.8.0", | ||
| "file-loader": "^0.8.1", | ||
| "gulp": "^3.8.11", | ||
| "gulp-autoprefixer": "^2.2.0", | ||
| "gulp-babel": "^5.1.0", | ||
| "gulp-csso": "^1.0.0", | ||
| "gulp-imagemin": "^2.2.1", | ||
| "gulp-karma": "0.0.4", | ||
| "gulp-minify-html": "^1.0.2", | ||
| "gulp-sass": "^2.0.1", | ||
| "gulp-uglify": "^1.2.0", | ||
| "gulp-util": "^3.0.4", | ||
| "gulp-webpack": "^1.4.0", | ||
| "jasmine-core": "^2.3.4", | ||
| "json-loader": "^0.5.1", | ||
| "karma": "^0.12.31", | ||
| "karma-jasmine": "^0.3.5", | ||
| "karma-phantomjs-launcher": "^0.1.4", | ||
| "karma-webpack": "^1.5.1", | ||
| "less": "^2.5.0", | ||
| "less-loader": "^2.2.0", | ||
| "node-libs-browser": "^0.5.0", | ||
| "node-sass": "^2.1.1", | ||
| "opn": "^1.0.2", | ||
| "run-sequence": "^1.1.0", | ||
| "sass-loader": "^0.4.1", | ||
| "style-loader": "^0.12.2", | ||
| "vinyl-named": "^1.1.0", | ||
| "webpack": "^1.9.5" | ||
| "autoprefixer": "^6.0.3", | ||
| "babel-core": "^5.8.25", | ||
| "babel-eslint": "^4.1.3", | ||
| "babel-loader": "^5.3.2", | ||
| "css-loader": "^0.19.0", | ||
| "del": "^2.0.2", | ||
| "eslint": "^1.6.0", | ||
| "eslint-loader": "^1.0.0", | ||
| "eslint-plugin-react": "^3.5.1", | ||
| "express": "^4.13.3", | ||
| "file-loader": "^0.8.4", | ||
| "gulp": "^3.9.0", | ||
| "gulp-autoprefixer": "^3.0.2", | ||
| "gulp-babel": "^5.2.1", | ||
| "gulp-eslint": "^1.0.0", | ||
| "gulp-filter": "^3.0.1", | ||
| "gulp-frep": "^0.1.3", | ||
| "gulp-minify-html": "^1.0.4", | ||
| "gulp-sass": "^2.0.4", | ||
| "http-proxy": "^1.11.2", | ||
| "json-loader": "^0.5.3", | ||
| "less": "^2.5.3", | ||
| "less-loader": "^2.2.1", | ||
| "lodash.merge": "^3.3.2", | ||
| "node-sass": "^3.3.3", | ||
| "opn": "^3.0.2", | ||
| "postcss-loader": "^0.6.0", | ||
| "react-dom": "^0.14.0", | ||
| "react-hot-loader": "^1.3.0", | ||
| "run-sequence": "^1.1.4", | ||
| "sass-loader": "^3.0.0", | ||
| "style-loader": "^0.12.4", | ||
| "webpack": "^1.12.2", | ||
| "webpack-dev-server": "^1.12.0", | ||
| "webpack-stream": "^2.1.1" | ||
| }, | ||
@@ -67,0 +62,0 @@ "repository": { |
@@ -20,4 +20,2 @@ # React Progress Bar Plus | ||
| var percent = 0; | ||
| <ProgressBar percent={10}/> | ||
@@ -44,3 +42,3 @@ ``` | ||
| | percent | number | -1 | Progress percent | | ||
| | onTop | bool | false | Progrees bar will ontop & height 100% | | ||
| | onTop | bool | false | Progress bar will ontop & height 100% | | ||
| | autoIncrement | bool | false | if `true` percent will auto increment `Math.random() + 1 - Math.random()`% in `intervalTime` ms. | | ||
@@ -47,0 +45,0 @@ | intervalTime | number | 200 | Interval time for auto increment. | |
@@ -1,5 +0,6 @@ | ||
| var React = require('react'); | ||
| import React from 'react'; | ||
| import ClassNames from 'classnames'; | ||
| var ProgressBar = React.createClass({ | ||
| propTypes: { | ||
| class ProgressBar extends React.Component { | ||
| static propTypes = { | ||
| percent: React.PropTypes.number.isRequired, | ||
@@ -9,18 +10,17 @@ onTop: React.PropTypes.bool, | ||
| intervalTime: React.PropTypes.number | ||
| }, | ||
| getDefaultProps: function () { | ||
| return { | ||
| percent: -1, | ||
| onTop: false, | ||
| autoIncrement: false, | ||
| intervalTime: 200 | ||
| }; | ||
| }, | ||
| getInitialState: function () { | ||
| return { | ||
| percent: this.props.percent | ||
| }; | ||
| }, | ||
| increment: function () { | ||
| var percent = this.state.percent + (Math.random() + 1 - Math.random()); | ||
| }; | ||
| static defaultProps = { | ||
| percent: -1, | ||
| onTop: false, | ||
| autoIncrement: false, | ||
| intervalTime: 200 | ||
| }; | ||
| state = { | ||
| percent: this.props.percent | ||
| }; | ||
| increment = () => { | ||
| let percent = this.state.percent + (Math.random() + 1 - Math.random()); | ||
| percent = percent < 99 ? percent : 99; | ||
@@ -30,9 +30,11 @@ this.setState({ | ||
| }); | ||
| }, | ||
| componentWillUnmount: function () { | ||
| }; | ||
| componentWillUnmount = () => { | ||
| if (this.interval) { | ||
| clearInterval(this.interval); | ||
| } | ||
| }, | ||
| componentWillReceiveProps: function (nextProps) { | ||
| }; | ||
| componentWillReceiveProps = (nextProps) => { | ||
| if (this.interval) { | ||
@@ -49,8 +51,8 @@ clearInterval(this.interval); | ||
| percent: 99.9 | ||
| }, function () { | ||
| setTimeout(function () { | ||
| }, () => { | ||
| setTimeout(() => { | ||
| this.setState({ | ||
| percent: 100 | ||
| }); | ||
| }.bind(this), 400); | ||
| }, 400); | ||
| }); | ||
@@ -62,9 +64,11 @@ } else { | ||
| } | ||
| }, | ||
| render: function () { | ||
| var className = 'react-progress-bar' + (this.props.onTop ? ' react-progress-bar-on-top' : ''); | ||
| if (this.state.percent < 0 || this.state.percent >= 100) { | ||
| className += ' react-progress-bar-hide'; | ||
| } | ||
| var style = {width: this.state.percent + '%'}; | ||
| }; | ||
| render() { | ||
| let className = ClassNames({ | ||
| 'react-progress-bar': true, | ||
| 'react-progress-bar-on-top': this.props.onTop, | ||
| 'react-progress-bar-hide': this.state.percent < 0 || this.state.percent >= 100 | ||
| }); | ||
| let style = {width: this.state.percent + '%'}; | ||
| return ( | ||
@@ -79,4 +83,4 @@ <div className={className}> | ||
| } | ||
| }); | ||
| } | ||
| module.exports = ProgressBar; | ||
| export default ProgressBar; |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Dev dependency count
35
-10.26%Worsened metrics
- Total package byte prevSize
24831
-92.08%- Dependency count
2
100%- Number of package files
16
-44.83%- Lines of code
362
-94.86%- Number of lines in readme file
48
-4%- Number of medium supply chain risk alerts
1
Infinity%Dependency changes
+ Added
classnames@^2.1.5+ Added
asap@2.0.6(transitive)+ Added
classnames@2.5.1(transitive)+ Added
core-js@1.2.7(transitive)+ Added
fbjs@0.6.1(transitive)+ Added
js-tokens@4.0.0(transitive)+ Added
loose-envify@1.4.0(transitive)+ Added
promise@7.3.1(transitive)+ Added
react@0.14.10(transitive)+ Added
ua-parser-js@0.7.40(transitive)+ Added
whatwg-fetch@0.9.0(transitive)- Removed
react@0.13.3(transitive)