react-progress-button-for-images-uploader - npm Package Compare versions

Comparing version 5.0.1 to 5.1.0

lib/index.js

@@ -8,2 +8,4 @@ 'use strict';
 
+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');
@@ -13,2 +15,6 @@
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -18,2 +24,8 @@
 
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+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 STATE = exports.STATE = {
@@ -27,171 +39,175 @@ LOADING: 'loading',
 
-var ProgressButton = _react2.default.createClass({
-  displayName: 'ProgressButton',
+var ProgressButton = function (_Component) {
+  _inherits(ProgressButton, _Component);
 
-  propTypes: {
-    classNamespace: _react2.default.PropTypes.string,
-    durationError: _react2.default.PropTypes.number,
-    durationSuccess: _react2.default.PropTypes.number,
-    form: _react2.default.PropTypes.string,
-    onClick: _react2.default.PropTypes.func,
-    onError: _react2.default.PropTypes.func,
-    onSuccess: _react2.default.PropTypes.func,
-    state: _react2.default.PropTypes.oneOf(Object.keys(STATE).map(function (k) {
-      return STATE[k];
-    })),
-    type: _react2.default.PropTypes.string,
-    shouldAllowClickOnLoading: _react2.default.PropTypes.bool
-  },
+  function ProgressButton() {
+    var _ref;
 
-  getDefaultProps: function getDefaultProps() {
-    return {
-      classNamespace: 'pb-',
-      durationError: 1200,
-      durationSuccess: 500,
-      onClick: function onClick() {},
-      onError: function onError() {},
-      onSuccess: function onSuccess() {},
+    var _temp, _this, _ret;
 
-      shouldAllowClickOnLoading: false
-    };
-  },
-  getInitialState: function getInitialState() {
-    return {
-      currentState: this.props.state || STATE.NOTHING
-    };
-  },
-  componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
-    if (nextProps.state === this.props.state) {
-      return;
+    _classCallCheck(this, ProgressButton);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
     }
-    switch (nextProps.state) {
-      case STATE.SUCCESS:
-        this.success();
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ProgressButton.__proto__ || Object.getPrototypeOf(ProgressButton)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+      currentState: _this.props.state || STATE.NOTHING
+    }, _this.handleClick = function (e) {
+      if ((_this.props.shouldAllowClickOnLoading || _this.state.currentState !== 'loading') && _this.state.currentState !== 'disabled') {
+        _this.props.onClick(e);
+      } else {
+        e.preventDefault();
+      }
+    }, _this.loading = function (promise) {
+      _this.setState({ currentState: 'loading' });
+      if (promise && promise.then && promise.catch) {
+        promise.then(function () {
+          _this.success();
+        }).catch(function () {
+          _this.error();
+        });
+      }
+    }, _this.notLoading = function () {
+      _this.setState({ currentState: STATE.NOTHING });
+    }, _this.enable = function () {
+      _this.setState({ currentState: STATE.NOTHING });
+    }, _this.disable = function () {
+      _this.setState({ currentState: STATE.DISABLED });
+    }, _this.success = function (callback, dontRemove) {
+      _this.setState({ currentState: STATE.SUCCESS });
+      _this._timeout = setTimeout(function () {
+        if (!dontRemove) {
+          _this.setState({ currentState: STATE.NOTHING });
+        }
+        callback = callback || _this.props.onSuccess;
+        if (typeof callback === 'function') {
+          callback();
+        }
+      }, _this.props.durationSuccess);
+    }, _this.error = function (callback) {
+      _this.setState({ currentState: STATE.ERROR });
+      _this._timeout = setTimeout(function () {
+        _this.setState({ currentState: STATE.NOTHING });
+        callback = callback || _this.props.onError;
+        if (typeof callback === 'function') {
+          callback();
+        }
+      }, _this.props.durationError);
+    }, _temp), _possibleConstructorReturn(_this, _ret);
+  }
+
+  _createClass(ProgressButton, [{
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(nextProps) {
+      if (nextProps.state === this.props.state) {
         return;
-      case STATE.ERROR:
-        this.error();
-        return;
-      case STATE.LOADING:
-        this.loading();
-        return;
-      case STATE.DISABLED:
-        this.disable();
-        return;
-      case STATE.NOTHING:
-        this.notLoading();
-        return;
-      default:
-        return;
+      }
+      switch (nextProps.state) {
+        case STATE.SUCCESS:
+          this.success();
+          return;
+        case STATE.ERROR:
+          this.error();
+          return;
+        case STATE.LOADING:
+          this.loading();
+          return;
+        case STATE.DISABLED:
+          this.disable();
+          return;
+        case STATE.NOTHING:
+          this.notLoading();
+          return;
+        default:
+          return;
+      }
     }
-  },
-  componentWillUnmount: function componentWillUnmount() {
-    clearTimeout(this._timeout);
-  },
-  render: function render() {
-    var _props = this.props,
-        className = _props.className,
-        classNamespace = _props.classNamespace,
-        children = _props.children,
-        type = _props.type,
-        form = _props.form,
-        durationError = _props.durationError,
-        durationSuccess = _props.durationSuccess,
-        onClick = _props.onClick,
-        onError = _props.onError,
-        onSuccess = _props.onSuccess,
-        state = _props.state,
-        shouldAllowClickOnLoading = _props.shouldAllowClickOnLoading,
-        containerProps = _objectWithoutProperties(_props, ['className', 'classNamespace', 'children', 'type', 'form', 'durationError', 'durationSuccess', 'onClick', 'onError', 'onSuccess', 'state', 'shouldAllowClickOnLoading']);
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      clearTimeout(this._timeout);
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _props = this.props,
+          className = _props.className,
+          classNamespace = _props.classNamespace,
+          children = _props.children,
+          type = _props.type,
+          form = _props.form,
+          durationError = _props.durationError,
+          durationSuccess = _props.durationSuccess,
+          onClick = _props.onClick,
+          onError = _props.onError,
+          onSuccess = _props.onSuccess,
+          state = _props.state,
+          shouldAllowClickOnLoading = _props.shouldAllowClickOnLoading,
+          containerProps = _objectWithoutProperties(_props, ['className', 'classNamespace', 'children', 'type', 'form', 'durationError', 'durationSuccess', 'onClick', 'onError', 'onSuccess', 'state', 'shouldAllowClickOnLoading']);
 
-    containerProps.className = classNamespace + 'container ' + this.state.currentState + ' ' + className;
-    containerProps.onClick = this.handleClick;
-    return _react2.default.createElement(
-      'div',
-      containerProps,
-      _react2.default.createElement(
-        'button',
-        { type: type, form: form, className: classNamespace + 'button' },
+      containerProps.className = classNamespace + 'container ' + this.state.currentState + ' ' + className;
+      containerProps.onClick = this.handleClick;
+      return _react2.default.createElement(
+        'div',
+        containerProps,
         _react2.default.createElement(
-          'span',
-          null,
-          children
-        ),
-        _react2.default.createElement(
-          'svg',
-          { className: classNamespace + 'progress-circle', viewBox: '0 0 41 41' },
-          _react2.default.createElement('path', { d: 'M38,20.5 C38,30.1685093 30.1685093,38 20.5,38' })
-        ),
-        _react2.default.createElement(
-          'svg',
-          { className: classNamespace + 'checkmark', viewBox: '0 0 70 70' },
-          _react2.default.createElement('path', { d: 'm31.5,46.5l15.3,-23.2' }),
-          _react2.default.createElement('path', { d: 'm31.5,46.5l-8.5,-7.1' })
-        ),
-        _react2.default.createElement(
-          'svg',
-          { className: classNamespace + 'cross', viewBox: '0 0 70 70' },
-          _react2.default.createElement('path', { d: 'm35,35l-9.3,-9.3' }),
-          _react2.default.createElement('path', { d: 'm35,35l9.3,9.3' }),
-          _react2.default.createElement('path', { d: 'm35,35l-9.3,9.3' }),
-          _react2.default.createElement('path', { d: 'm35,35l9.3,-9.3' })
+          'button',
+          { type: type, form: form, className: classNamespace + 'button' },
+          _react2.default.createElement(
+            'span',
+            null,
+            children
+          ),
+          _react2.default.createElement(
+            'svg',
+            { className: classNamespace + 'progress-circle', viewBox: '0 0 41 41' },
+            _react2.default.createElement('path', { d: 'M38,20.5 C38,30.1685093 30.1685093,38 20.5,38' })
+          ),
+          _react2.default.createElement(
+            'svg',
+            { className: classNamespace + 'checkmark', viewBox: '0 0 70 70' },
+            _react2.default.createElement('path', { d: 'm31.5,46.5l15.3,-23.2' }),
+            _react2.default.createElement('path', { d: 'm31.5,46.5l-8.5,-7.1' })
+          ),
+          _react2.default.createElement(
+            'svg',
+            { className: classNamespace + 'cross', viewBox: '0 0 70 70' },
+            _react2.default.createElement('path', { d: 'm35,35l-9.3,-9.3' }),
+            _react2.default.createElement('path', { d: 'm35,35l9.3,9.3' }),
+            _react2.default.createElement('path', { d: 'm35,35l-9.3,9.3' }),
+            _react2.default.createElement('path', { d: 'm35,35l9.3,-9.3' })
+          )
         )
-      )
-    );
-  },
-  handleClick: function handleClick(e) {
-    if ((this.props.shouldAllowClickOnLoading || this.state.currentState !== 'loading') && this.state.currentState !== 'disabled') {
-      this.props.onClick(e);
-    } else {
-      e.preventDefault();
+      );
     }
-  },
-  loading: function loading(promise) {
-    var _this = this;
+  }]);
 
-    this.setState({ currentState: 'loading' });
-    if (promise && promise.then && promise.catch) {
-      promise.then(function () {
-        _this.success();
-      }).catch(function () {
-        _this.error();
-      });
-    }
-  },
-  notLoading: function notLoading() {
-    this.setState({ currentState: STATE.NOTHING });
-  },
-  enable: function enable() {
-    this.setState({ currentState: STATE.NOTHING });
-  },
-  disable: function disable() {
-    this.setState({ currentState: STATE.DISABLED });
-  },
-  success: function success(callback, dontRemove) {
-    var _this2 = this;
+  return ProgressButton;
+}(_react.Component);
 
-    this.setState({ currentState: STATE.SUCCESS });
-    this._timeout = setTimeout(function () {
-      if (!dontRemove) {
-        _this2.setState({ currentState: STATE.NOTHING });
-      }
-      callback = callback || _this2.props.onSuccess;
-      if (typeof callback === 'function') {
-        callback();
-      }
-    }, this.props.durationSuccess);
-  },
-  error: function error(callback) {
-    var _this3 = this;
+ProgressButton.propTypes = {
+  classNamespace: _propTypes2.default.string,
+  durationError: _propTypes2.default.number,
+  durationSuccess: _propTypes2.default.number,
+  form: _propTypes2.default.string,
+  onClick: _propTypes2.default.func,
+  onError: _propTypes2.default.func,
+  onSuccess: _propTypes2.default.func,
+  state: _propTypes2.default.oneOf(Object.keys(STATE).map(function (k) {
+    return STATE[k];
+  })),
+  type: _propTypes2.default.string,
+  shouldAllowClickOnLoading: _propTypes2.default.bool
+};
+ProgressButton.defaultProps = {
+  classNamespace: 'pb-',
+  durationError: 1200,
+  durationSuccess: 500,
+  onClick: function onClick() {},
+  onError: function onError() {},
+  onSuccess: function onSuccess() {},
 
-    this.setState({ currentState: STATE.ERROR });
-    this._timeout = setTimeout(function () {
-      _this3.setState({ currentState: STATE.NOTHING });
-      callback = callback || _this3.props.onError;
-      if (typeof callback === 'function') {
-        callback();
-      }
-    }, this.props.durationError);
-  }
-});
-
+  shouldAllowClickOnLoading: false
+};
 exports.default = ProgressButton;

package.json

 {
   "name": "react-progress-button-for-images-uploader",
-  "version": "5.0.1",
+  "version": "5.1.0",
   "description": "Simple react.js component for a inline progress indicator",
@@ -29,4 +29,4 @@ "main": "lib/index.js",
     "mocha": "^3.0.0",
-    "react": "^15.1.0",
-    "react-dom": "^15.1.0",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
     "sinon": "^1.17.3",
@@ -36,8 +36,7 @@ "webpack": "^1.12.15"
   "scripts": {
-    "prepublish": "make clean build",
-    "test": "make test"
+    "prepublish": "make clean build"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/aleksei0807/react-progress-button"
+    "url": "https://github.com/mathieudutour/react-progress-button"
   },
@@ -55,5 +54,5 @@ "keywords": [
   "bugs": {
-    "url": "https://github.com/aleksei0807/react-progress-button/issues"
+    "url": "https://github.com/mathieudutour/react-progress-button/issues"
   },
-  "homepage": "https://github.com/aleksei0807/react-progress-button"
+  "homepage": "https://github.com/mathieudutour/react-progress-button"
 }

src/index.js

@@ -1,2 +0,3 @@
-import React from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 
@@ -11,35 +12,31 @@ export const STATE = {
 
-const ProgressButton = React.createClass({
-  propTypes: {
-    classNamespace: React.PropTypes.string,
-    durationError: React.PropTypes.number,
-    durationSuccess: React.PropTypes.number,
-    form: React.PropTypes.string,
-    onClick: React.PropTypes.func,
-    onError: React.PropTypes.func,
-    onSuccess: React.PropTypes.func,
-    state: React.PropTypes.oneOf(Object.keys(STATE).map(k => STATE[k])),
-    type: React.PropTypes.string,
-    shouldAllowClickOnLoading: React.PropTypes.bool
-  },
+class ProgressButton extends Component {
+  static propTypes = {
+    classNamespace: PropTypes.string,
+    durationError: PropTypes.number,
+    durationSuccess: PropTypes.number,
+    form: PropTypes.string,
+    onClick: PropTypes.func,
+    onError: PropTypes.func,
+    onSuccess: PropTypes.func,
+    state: PropTypes.oneOf(Object.keys(STATE).map(k => STATE[k])),
+    type: PropTypes.string,
+    shouldAllowClickOnLoading: PropTypes.bool,
+  }
 
-  getDefaultProps () {
-    return {
-      classNamespace: 'pb-',
-      durationError: 1200,
-      durationSuccess: 500,
-      onClick () {},
-      onError () {},
-      onSuccess () {},
-      shouldAllowClickOnLoading: false
-    }
-  },
+  static defaultProps = {
+    classNamespace: 'pb-',
+    durationError: 1200,
+    durationSuccess: 500,
+    onClick () {},
+    onError () {},
+    onSuccess () {},
+    shouldAllowClickOnLoading: false,
+  }
 
-  getInitialState () {
-    return {
-      currentState: this.props.state || STATE.NOTHING
-    }
-  },
+  state = {
+    currentState: this.props.state || STATE.NOTHING,
+  }
 
-  componentWillReceiveProps (nextProps) {
+  componentWillReceiveProps(nextProps) {
     if (nextProps.state === this.props.state) { return }
@@ -65,50 +62,9 @@ switch (nextProps.state) {
     }
-  },
+  }
 
-  componentWillUnmount () {
+  componentWillUnmount() {
     clearTimeout(this._timeout)
-  },
+  }
 
-  render () {
-    const {
-      className,
-      classNamespace,
-      children,
-      type,
-      form,
-      durationError, // eslint-disable-line no-unused-vars
-      durationSuccess, // eslint-disable-line no-unused-vars
-      onClick, // eslint-disable-line no-unused-vars
-      onError, // eslint-disable-line no-unused-vars
-      onSuccess, // eslint-disable-line no-unused-vars
-      state, // eslint-disable-line no-unused-vars
-      shouldAllowClickOnLoading, // eslint-disable-line no-unused-vars
-      ...containerProps
-    } = this.props
-
-    containerProps.className = classNamespace + 'container ' + this.state.currentState + ' ' + className
-    containerProps.onClick = this.handleClick
-    return (
-      <div {...containerProps}>
-        <button type={type} form={form} className={classNamespace + 'button'}>
-          <span>{children}</span>
-          <svg className={classNamespace + 'progress-circle'} viewBox='0 0 41 41'>
-            <path d='M38,20.5 C38,30.1685093 30.1685093,38 20.5,38' />
-          </svg>
-          <svg className={classNamespace + 'checkmark'} viewBox='0 0 70 70'>
-            <path d='m31.5,46.5l15.3,-23.2' />
-            <path d='m31.5,46.5l-8.5,-7.1' />
-          </svg>
-          <svg className={classNamespace + 'cross'} viewBox='0 0 70 70'>
-            <path d='m35,35l-9.3,-9.3' />
-            <path d='m35,35l9.3,9.3' />
-            <path d='m35,35l-9.3,9.3' />
-            <path d='m35,35l9.3,-9.3' />
-          </svg>
-        </button>
-      </div>
-    )
-  },
-
-  handleClick (e) {
+  handleClick = (e) => {
     if ((this.props.shouldAllowClickOnLoading ||
@@ -122,5 +78,5 @@ this.state.currentState !== 'loading') &&
     }
-  },
+  }
 
-  loading (promise) {
+  loading = (promise) => {
     this.setState({currentState: 'loading'})
@@ -136,17 +92,17 @@ if (promise && promise.then && promise.catch) {
     }
-  },
+  }
 
-  notLoading () {
+  notLoading = () => {
     this.setState({currentState: STATE.NOTHING})
-  },
+  }
 
-  enable () {
+  enable = () => {
     this.setState({currentState: STATE.NOTHING})
-  },
+  }
 
-  disable () {
+  disable = () => {
     this.setState({currentState: STATE.DISABLED})
-  },
+  }
 
-  success (callback, dontRemove) {
+  success = (callback, dontRemove) => {
     this.setState({currentState: STATE.SUCCESS})
@@ -158,5 +114,5 @@ this._timeout = setTimeout(() => {
     }, this.props.durationSuccess)
-  },
+  }
 
-  error (callback) {
+  error = (callback) => {
     this.setState({currentState: STATE.ERROR})
@@ -169,4 +125,45 @@ this._timeout = setTimeout(() => {
   }
-})
 
+  render() {
+    const {
+      className,
+      classNamespace,
+      children,
+      type,
+      form,
+      durationError, // eslint-disable-line no-unused-vars
+      durationSuccess, // eslint-disable-line no-unused-vars
+      onClick, // eslint-disable-line no-unused-vars
+      onError, // eslint-disable-line no-unused-vars
+      onSuccess, // eslint-disable-line no-unused-vars
+      state, // eslint-disable-line no-unused-vars
+      shouldAllowClickOnLoading, // eslint-disable-line no-unused-vars
+      ...containerProps,
+    } = this.props
+
+    containerProps.className = classNamespace + 'container ' + this.state.currentState + ' ' + className
+    containerProps.onClick = this.handleClick
+    return (
+      <div {...containerProps}>
+        <button type={type} form={form} className={classNamespace + 'button'}>
+          <span>{children}</span>
+          <svg className={classNamespace + 'progress-circle'} viewBox='0 0 41 41'>
+            <path d='M38,20.5 C38,30.1685093 30.1685093,38 20.5,38' />
+          </svg>
+          <svg className={classNamespace + 'checkmark'} viewBox='0 0 70 70'>
+            <path d='m31.5,46.5l15.3,-23.2' />
+            <path d='m31.5,46.5l-8.5,-7.1' />
+          </svg>
+          <svg className={classNamespace + 'cross'} viewBox='0 0 70 70'>
+            <path d='m35,35l-9.3,-9.3' />
+            <path d='m35,35l9.3,9.3' />
+            <path d='m35,35l-9.3,9.3' />
+            <path d='m35,35l9.3,-9.3' />
+          </svg>
+        </button>
+      </div>
+    )
+  }
+}
+
 export default ProgressButton

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

21145

increased by11.1%

Lines of code

438

increased by1.62%

No dependency changes