@s-ui/react-atom-progress-bar - npm Package Compare versions

Comparing version 1.4.0 to 1.5.0

CHANGELOG.md

@@ -5,3 +5,11 @@ # Change Log
 
-<a name="1.4.0"></a>
+# 1.5.0 (2020-03-11)
+
+
+### Features
+
+* Use new [@s-ui-theme](https://github.com/s-ui-theme) ([78e006c](https://github.com/SUI-Components/sui-components/commit/78e006c1ecf71740efb2f1a4bf37b5e1efcf744c))
+
+
+
 # 1.4.0 (2019-04-09)
@@ -12,7 +20,6 @@
 
-* fix sizes for error case ([a3d991a](https://github.com/SUI-Components/sui-components/commit/a3d991a))
+* fix sizes for error case ([a3d991a](https://github.com/SUI-Components/sui-components/commit/a3d991ae862691ab1e84df2de25cae2ed0892a3d))
 
 
 
-<a name="1.3.0"></a>
 # 1.3.0 (2019-03-27)
@@ -23,7 +30,6 @@
 
-* lint issues ([36cd0f0](https://github.com/SUI-Components/sui-components/commit/36cd0f0))
+* lint issues ([36cd0f0](https://github.com/SUI-Components/sui-components/commit/36cd0f063b7a612934ddad4430581ceba7d2cf4e))
 
 
 
-<a name="1.2.0"></a>
 # 1.2.0 (2019-03-22)
@@ -34,17 +40,16 @@
 
-* added circle variant ([1be8ead](https://github.com/SUI-Components/sui-components/commit/1be8ead))
-* added error and loading state ([1c65928](https://github.com/SUI-Components/sui-components/commit/1c65928))
-* added proptype descriptions ([a624acb](https://github.com/SUI-Components/sui-components/commit/a624acb))
-* added small playground examples ([f20380c](https://github.com/SUI-Components/sui-components/commit/f20380c))
-* created component vars ([784bc0c](https://github.com/SUI-Components/sui-components/commit/784bc0c))
-* dinamyc transition time ([5eabb0f](https://github.com/SUI-Components/sui-components/commit/5eabb0f))
-* fix lint warnings ([4b64ee7](https://github.com/SUI-Components/sui-components/commit/4b64ee7))
-* fix stroke width ([c0ea478](https://github.com/SUI-Components/sui-components/commit/c0ea478))
-* fix style ([a11d7cf](https://github.com/SUI-Components/sui-components/commit/a11d7cf))
-* pr comments ([5882491](https://github.com/SUI-Components/sui-components/commit/5882491))
-* styles for small size ([17f77e0](https://github.com/SUI-Components/sui-components/commit/17f77e0))
+* added circle variant ([1be8ead](https://github.com/SUI-Components/sui-components/commit/1be8ead5684b67a323e0d8e568b630f283650c0c))
+* added error and loading state ([1c65928](https://github.com/SUI-Components/sui-components/commit/1c659286db96775ea2a855e2c0e92cee2d45cb02))
+* added proptype descriptions ([a624acb](https://github.com/SUI-Components/sui-components/commit/a624acb67d496df3a7426969631356c85d519e98))
+* added small playground examples ([f20380c](https://github.com/SUI-Components/sui-components/commit/f20380c51942d55317589c042ae9ad854e04e495))
+* created component vars ([784bc0c](https://github.com/SUI-Components/sui-components/commit/784bc0cc8f7163868422e3d1b01efd81f012e245))
+* dinamyc transition time ([5eabb0f](https://github.com/SUI-Components/sui-components/commit/5eabb0ff64b66b836af0fdba9a92370d32621a14))
+* fix lint warnings ([4b64ee7](https://github.com/SUI-Components/sui-components/commit/4b64ee71407f169ca1b9a9b31787b9ff8829dda1))
+* fix stroke width ([c0ea478](https://github.com/SUI-Components/sui-components/commit/c0ea4780315a91613b298b1d2ef76a8a25955ed9))
+* fix style ([a11d7cf](https://github.com/SUI-Components/sui-components/commit/a11d7cf663745452bbfc68fbcbd99b4ee2cb59f6))
+* pr comments ([5882491](https://github.com/SUI-Components/sui-components/commit/5882491c466036ec913391600bc87ce345ef441c))
+* styles for small size ([17f77e0](https://github.com/SUI-Components/sui-components/commit/17f77e084d4c9ac15e7a5a7e4d832a4611996ffa))
 
 
 
-<a name="1.1.0"></a>
 # 1.1.0 (2018-10-23)
@@ -55,15 +60,15 @@
 
-* !default only on needed ([752666e](https://github.com/SUI-Components/sui-components/commit/752666e))
-* !default sass variables ([d57f232](https://github.com/SUI-Components/sui-components/commit/d57f232))
-* better description ([207a7f4](https://github.com/SUI-Components/sui-components/commit/207a7f4))
-* border-radius w/ sui-theme variable ([1da566b](https://github.com/SUI-Components/sui-components/commit/1da566b))
-* component creation ([d0cef50](https://github.com/SUI-Components/sui-components/commit/d0cef50))
-* component implementation ([cf3aef8](https://github.com/SUI-Components/sui-components/commit/cf3aef8))
-* dynamic behaviour added ([b5a21f7](https://github.com/SUI-Components/sui-components/commit/b5a21f7))
-* fix margin indicator ([b683597](https://github.com/SUI-Components/sui-components/commit/b683597))
-* fixed linter sass ([be2c3f8](https://github.com/SUI-Components/sui-components/commit/be2c3f8))
-* imporovements after code review ([c15c256](https://github.com/SUI-Components/sui-components/commit/c15c256))
-* linter sass ([c03ec31](https://github.com/SUI-Components/sui-components/commit/c03ec31))
+* !default only on needed ([752666e](https://github.com/SUI-Components/sui-components/commit/752666eced4c32b29495b008b81de33996f8b854))
+* !default sass variables ([d57f232](https://github.com/SUI-Components/sui-components/commit/d57f23298a2d447f3add618845d086ea0c5c3779))
+* better description ([207a7f4](https://github.com/SUI-Components/sui-components/commit/207a7f4050d67a48ca1909003035ea5c5ce558ff))
+* border-radius w/ sui-theme variable ([1da566b](https://github.com/SUI-Components/sui-components/commit/1da566b7663a5a87ef35bf250f354946c840143b))
+* component creation ([d0cef50](https://github.com/SUI-Components/sui-components/commit/d0cef509c7a06c8ef196709a0a877c8136be2396))
+* component implementation ([cf3aef8](https://github.com/SUI-Components/sui-components/commit/cf3aef80ceec6d839771ae8334dbf0af1f705f50))
+* dynamic behaviour added ([b5a21f7](https://github.com/SUI-Components/sui-components/commit/b5a21f78376f8a3e97d07dd299b80212bdc1d6ac))
+* fix margin indicator ([b683597](https://github.com/SUI-Components/sui-components/commit/b68359751a94c8994b0f5998cd876435b4bce46e))
+* fixed linter sass ([be2c3f8](https://github.com/SUI-Components/sui-components/commit/be2c3f8545d19d9fa3d6cf875ccfc202d1c300fb))
+* imporovements after code review ([c15c256](https://github.com/SUI-Components/sui-components/commit/c15c256ed09a877e32175950973df35729f68a18))
+* linter sass ([c03ec31](https://github.com/SUI-Components/sui-components/commit/c03ec31fed28408a04318ab37a885a3b728e9442))
 
 
 

lib/CircleProgressBar/Circle/index.js

@@ -1,45 +0,37 @@
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import React, { Component } from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
+var MAX_TRANSITION_TIME_IN_MS = 1250;
 
-var Circle =
-/*#__PURE__*/
-function (_Component) {
-  _inheritsLoose(Circle, _Component);
+var Circle = function Circle(_ref) {
+  var _cx, _cx2, _cx3;
 
-  function Circle() {
-    var _this;
+  var baseClassName = _ref.baseClassName,
+      modifier = _ref.modifier,
+      percentage = _ref.percentage,
+      strokeWidth = _ref.strokeWidth,
+      size = _ref.size,
+      withAnimation = _ref.withAnimation;
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+  var _useState = useState(percentage),
+      currentPercentage = _useState[0],
+      setCurrentPercentage = _useState[1];
 
-    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
-    _this.state = {
-      currentPercentage: _this.props.percentage,
-      transitionTime: 0
-    };
-    return _this;
-  }
+  var _useState2 = useState(0),
+      transitionTime = _useState2[0],
+      setTransitionTime = _useState2[1];
 
-  Circle.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
-    if (Math.abs(props.percentage - state.currentPercentage) < 5) {
-      return {
-        currentPercentage: props.percentage,
-        transitionTime: 0
-      };
+  useEffect(function (currentPercentage, percentage) {
+    if (Math.abs(percentage - currentPercentage) < 5) {
+      setCurrentPercentage(percentage);
+      setTransitionTime(0);
+    } else {
+      setCurrentPercentage(percentage);
+      setTransitionTime(MAX_TRANSITION_TIME_IN_MS * percentage / 100 / 1000);
     }
+  }, [currentPercentage, percentage]);
 
-    return {
-      currentPercentage: props.percentage,
-      transitionTime: Circle.MAX_TRANSITION_TIME_IN_MS * props.percentage / 100 / 1000
-    };
-  };
-
-  var _proto = Circle.prototype;
-
-  _proto.getPathStyles = function getPathStyles(percentage, strokeWidth) {
-    var transitionTime = this.state.transitionTime;
-    var withAnimation = this.props.withAnimation;
+  var getPathStyles = function getPathStyles(_ref2) {
+    var percentage = _ref2.percentage,
+        strokeWidth = _ref2.strokeWidth;
     var radius = 50 - strokeWidth / 2;
@@ -59,55 +51,25 @@ var d = "M 50,50 m 0,-" + radius + "\n     a " + radius + "," + radius + " 0 1 1 0," + 2 * radius + "\n     a " + radius + "," + radius + " 0 1 1 0,-" + 2 * radius;
 
-  _proto.getStokeList = function getStokeList() {
-    var _cx;
+  return React.createElement("svg", {
+    className: cx(baseClassName + "-circle", (_cx = {}, _cx[baseClassName + "-circle--" + modifier] = !!modifier, _cx[baseClassName + "-circle--" + size] = !!size, _cx)),
+    viewBox: "0 0 100 100"
+  }, React.createElement("path", Object.assign({
+    className: cx(baseClassName + "-trail", (_cx2 = {}, _cx2[baseClassName + "-trail--" + modifier] = !!modifier, _cx2))
+  }, getPathStyles({
+    percentage: 100,
+    strokeWidth: strokeWidth
+  }), {
+    strokeWidth: strokeWidth,
+    fillOpacity: "0"
+  })), React.createElement("path", Object.assign({
+    className: cx(baseClassName + "-path", (_cx3 = {}, _cx3[baseClassName + "-path--" + modifier] = !!modifier, _cx3))
+  }, getPathStyles({
+    percentage: percentage,
+    strokeWidth: strokeWidth
+  }), {
+    strokeLinecap: "square",
+    strokeWidth: strokeWidth,
+    fillOpacity: "0"
+  })));
+};
 
-    var _this$props = this.props,
-        baseClassName = _this$props.baseClassName,
-        modifier = _this$props.modifier,
-        percentage = _this$props.percentage,
-        strokeWidth = _this$props.strokeWidth;
-
-    var _this$getPathStyles = this.getPathStyles(percentage, strokeWidth),
-        pathString = _this$getPathStyles.pathString,
-        pathStyle = _this$getPathStyles.pathStyle;
-
-    return React.createElement("path", {
-      className: cx(baseClassName + "-path", (_cx = {}, _cx[baseClassName + "-path--" + modifier] = !!modifier, _cx)),
-      d: pathString,
-      strokeLinecap: "square",
-      strokeWidth: strokeWidth,
-      fillOpacity: "0",
-      style: pathStyle
-    });
-  };
-
-  _proto.render = function render() {
-    var _cx2, _cx3, _cx4;
-
-    var _this$props2 = this.props,
-        baseClassName = _this$props2.baseClassName,
-        modifier = _this$props2.modifier,
-        percentage = _this$props2.percentage,
-        strokeWidth = _this$props2.strokeWidth,
-        size = _this$props2.size;
-    return React.createElement("svg", {
-      className: cx(baseClassName + "-circle", (_cx2 = {}, _cx2[baseClassName + "-circle--" + modifier] = !!modifier, _cx2[baseClassName + "-circle--" + size] = !!size, _cx2)),
-      viewBox: "0 0 100 100"
-    }, React.createElement("path", Object.assign({
-      className: cx(baseClassName + "-trail", (_cx3 = {}, _cx3[baseClassName + "-trail--" + modifier] = !!modifier, _cx3))
-    }, this.getPathStyles(100, strokeWidth), {
-      strokeWidth: strokeWidth,
-      fillOpacity: "0"
-    })), React.createElement("path", Object.assign({
-      className: cx(baseClassName + "-path", (_cx4 = {}, _cx4[baseClassName + "-path--" + modifier] = !!modifier, _cx4))
-    }, this.getPathStyles(percentage, strokeWidth), {
-      strokeLinecap: "square",
-      strokeWidth: strokeWidth,
-      fillOpacity: "0"
-    })));
-  };
-
-  return Circle;
-}(Component);
-
-Circle.MAX_TRANSITION_TIME_IN_MS = 1250;
 Circle.defaultProps = {
@@ -114,0 +76,0 @@ withAnimation: true

lib/index.js

@@ -1,2 +0,2 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React from 'react';
@@ -3,0 +3,0 @@ import PropTypes from 'prop-types';

lib/LineProgressBar/index.js

@@ -1,3 +0,2 @@
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import React, { PureComponent } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
@@ -21,36 +20,21 @@ import cx from 'classnames';
 
-var LineProgressBar =
-/*#__PURE__*/
-function (_PureComponent) {
-  _inheritsLoose(LineProgressBar, _PureComponent);
-
-  function LineProgressBar() {
-    return _PureComponent.apply(this, arguments) || this;
-  }
-
-  var _proto = LineProgressBar.prototype;
-
-  _proto.render = function render() {
-    var _this$props = this.props,
-        percentage = _this$props.percentage,
-        indicatorBottom = _this$props.indicatorBottom,
-        isAnimatedOnChange = _this$props.isAnimatedOnChange;
-    var width = percentage + "%";
-    var styleBar = {
-      width: width
-    };
-    return React.createElement("div", {
-      className: BASE_CLASS
-    }, !indicatorBottom && React.createElement(Indicator, this.props), React.createElement("div", {
-      className: CLASS_CONTAINER_BAR
-    }, React.createElement("span", {
-      className: cx(CLASS_BAR, isAnimatedOnChange && CLASS_BAR_ANIMATED),
-      style: styleBar
-    })), indicatorBottom && React.createElement(Indicator, this.props));
+var LineProgressBar = function LineProgressBar(props) {
+  var percentage = props.percentage,
+      indicatorBottom = props.indicatorBottom,
+      isAnimatedOnChange = props.isAnimatedOnChange;
+  var width = percentage + "%";
+  var styleBar = {
+    width: width
   };
+  return React.createElement("div", {
+    className: BASE_CLASS
+  }, !indicatorBottom && React.createElement(Indicator, props), React.createElement("div", {
+    className: CLASS_CONTAINER_BAR
+  }, React.createElement("span", {
+    className: cx(CLASS_BAR, isAnimatedOnChange && CLASS_BAR_ANIMATED),
+    style: styleBar
+  })), indicatorBottom && React.createElement(Indicator, props));
+};
 
-  return LineProgressBar;
-}(PureComponent);
-
 LineProgressBar.displayName = 'LineProgressBar';
 export default LineProgressBar;

package.json

 {
   "name": "@s-ui/react-atom-progress-bar",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

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

22451

increased by28.75%

Number of package files

12

increased by9.09%

Worsened metrics

Lines of code

194

decreased by-17.8%

No dependency changes