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

Comparing version 2.9.0 to 2.10.0

lib/index.js

@@ -7,10 +7,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import ProgressBarLine from './ProgressBarLine/index.js';
-import { SIZES, STATUS, TYPES } from './settings.js';
+import { LINE_CAPS, SIZES, STATUS, STROKE_SIZES, TYPES } from './settings.js';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 var AtomProgressBar = function AtomProgressBar(_ref) {
   var type = _ref.type,
-      size = _ref.size,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+    size = _ref.size,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
   switch (type) {
@@ -21,3 +19,2 @@ case TYPES.CIRCLE:
       }, props));
-
     case TYPES.LINE:
@@ -31,3 +28,2 @@ case TYPES.LINE_DOUBLE_BAR:
 };
-
 AtomProgressBar.displayName = 'AtomProgressBar';
@@ -39,2 +35,2 @@ AtomProgressBar.defaultProps = {
 export default AtomProgressBar;
-export { TYPES as atomProgressBarTypes, SIZES as atomProgressBarSizes, STATUS as atomProgressBarStatus };
+export { LINE_CAPS as atomProgressBarLineCaps, STROKE_SIZES as atomProgressBarStrokeSizes, SIZES as atomProgressBarSizes, STATUS as atomProgressBarStatus, TYPES as atomProgressBarTypes };

lib/ProgressBarCircle/Circle/index.js

@@ -8,21 +8,18 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
 var Circle = function Circle(_ref) {
   var _cx, _cx2, _cx3;
-
   var baseClassName = _ref.baseClassName,
-      modifier = _ref.modifier,
-      percentage = _ref.percentage,
-      strokeWidth = _ref.strokeWidth,
-      size = _ref.size,
-      withAnimation = _ref.withAnimation;
-
+    modifier = _ref.modifier,
+    percentage = _ref.percentage,
+    size = _ref.size,
+    withAnimation = _ref.withAnimation,
+    mainStrokeWidth = _ref.mainStrokeWidth,
+    progressStrokeWidth = _ref.progressStrokeWidth,
+    strokeLineCap = _ref.strokeLineCap;
   var _useState = useState(percentage),
-      currentPercentage = _useState[0],
-      setCurrentPercentage = _useState[1];
-
+    currentPercentage = _useState[0],
+    setCurrentPercentage = _useState[1];
   var _useState2 = useState(0),
-      transitionTime = _useState2[0],
-      setTransitionTime = _useState2[1];
-
+    transitionTime = _useState2[0],
+    setTransitionTime = _useState2[1];
   useEffect(function (currentPercentage, percentage) {
@@ -37,7 +34,9 @@ if (Math.abs(percentage - currentPercentage) < 5) {
   }, [currentPercentage, percentage]);
-
+  var getRadius = function getRadius() {
+    return mainStrokeWidth === progressStrokeWidth ? 50 - mainStrokeWidth / 2 : 50 - Math.max.apply(Math, [progressStrokeWidth, mainStrokeWidth]) / 2;
+  };
   var getPathStyles = function getPathStyles(_ref2) {
     var percentage = _ref2.percentage,
-        strokeWidth = _ref2.strokeWidth;
-    var radius = 50 - strokeWidth / 2;
+      strokeWidth = _ref2.strokeWidth;
+    var radius = getRadius();
     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;
@@ -55,3 +54,2 @@ var len = Math.PI * 2 * radius;
   };
-
   return /*#__PURE__*/_jsxs("svg", {
@@ -64,5 +62,5 @@ className: cx(baseClassName + "-circle", (_cx = {}, _cx[baseClassName + "-circle--" + modifier] = !!modifier, _cx[baseClassName + "-circle--" + size] = !!size, _cx)),
       percentage: 100,
-      strokeWidth: strokeWidth
+      strokeWidth: mainStrokeWidth
     }), {
-      strokeWidth: strokeWidth,
+      strokeWidth: mainStrokeWidth,
       fillOpacity: "0"
@@ -73,6 +71,6 @@ })), /*#__PURE__*/_jsx("path", _extends({
       percentage: percentage,
-      strokeWidth: strokeWidth
+      strokeWidth: progressStrokeWidth
     }), {
-      strokeLinecap: "square",
-      strokeWidth: strokeWidth,
+      strokeLinecap: strokeLineCap,
+      strokeWidth: progressStrokeWidth,
       fillOpacity: "0"
@@ -82,3 +80,2 @@ }))]
 };
-
 Circle.defaultProps = {
@@ -85,0 +82,0 @@ withAnimation: true

lib/ProgressBarCircle/index.js

 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import { SIZES, STATUS } from '../settings.js';
+import { LINE_CAPS, SIZES, STATUS } from '../settings.js';
 import Circle from './Circle/index.js';
 import Indicator from './Indicator.js';
-import { BASE_CLASS_NAME, SIZE_TO_WIDTH_LINE_MAP } from './settings.js';
+import { BASE_CLASS_NAME, SIZE_TO_WIDTH_LINE_MAP, STROKE_SIZE_MAP } from './settings.js';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
 var ProgressBarCircle = function ProgressBarCircle(_ref) {
   var percentage = _ref.percentage,
-      status = _ref.status,
-      errorIcon = _ref.errorIcon,
-      size = _ref.size,
-      isAnimatedOnChange = _ref.isAnimatedOnChange,
-      hideIndicator = _ref.hideIndicator,
-      children = _ref.children;
-  var circleWidth = SIZE_TO_WIDTH_LINE_MAP[size];
+    status = _ref.status,
+    errorIcon = _ref.errorIcon,
+    size = _ref.size,
+    isAnimatedOnChange = _ref.isAnimatedOnChange,
+    hideIndicator = _ref.hideIndicator,
+    children = _ref.children,
+    mainStrokeSize = _ref.mainStrokeSize,
+    progressStrokeSize = _ref.progressStrokeSize,
+    strokeLineCap = _ref.strokeLineCap;
+  var mainStrokeWidth = STROKE_SIZE_MAP[mainStrokeSize] || SIZE_TO_WIDTH_LINE_MAP[size];
+  var progressStrokeWidth = STROKE_SIZE_MAP[progressStrokeSize] || SIZE_TO_WIDTH_LINE_MAP[size];
   return /*#__PURE__*/_jsxs("div", {
@@ -23,7 +26,9 @@ className: cx(BASE_CLASS_NAME, BASE_CLASS_NAME + "--" + size, BASE_CLASS_NAME + "--" + status),
       baseClassName: BASE_CLASS_NAME,
+      mainStrokeWidth: mainStrokeWidth,
       modifier: status,
       percentage: status === STATUS.PROGRESS ? percentage : 0,
-      withAnimation: isAnimatedOnChange,
-      strokeWidth: circleWidth,
-      size: size
+      progressStrokeWidth: progressStrokeWidth,
+      size: size,
+      strokeLineCap: strokeLineCap,
+      withAnimation: isAnimatedOnChange
     }), !hideIndicator && /*#__PURE__*/_jsx(Indicator, {
@@ -38,6 +43,6 @@ percentage: percentage,
 };
-
 ProgressBarCircle.displayName = 'ProgressBarCircle';
 ProgressBarCircle.defaultProps = {
   isAnimatedOnChange: false,
+  strokeLineCap: LINE_CAPS.SQUARE,
   status: STATUS.PROGRESS,
@@ -44,0 +49,0 @@ hideIndicator: false,

lib/ProgressBarCircle/Indicator.js

@@ -6,9 +6,8 @@ import cx from 'classnames';
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
 var Indicator = function Indicator(_ref) {
   var percentage = _ref.percentage,
-      status = _ref.status,
-      errorIcon = _ref.errorIcon,
-      size = _ref.size,
-      children = _ref.children;
+    status = _ref.status,
+    errorIcon = _ref.errorIcon,
+    size = _ref.size,
+    children = _ref.children;
   if (status === STATUS.LOADING) return null;
@@ -20,3 +19,2 @@ return /*#__PURE__*/_jsxs("span", {
 };
-
 export default Indicator;

lib/ProgressBarCircle/settings.js

@@ -1,6 +0,6 @@
-var _SIZE_TO_WIDTH_LINE_M;
-
+var _SIZE_TO_WIDTH_LINE_M, _STROKE_SIZE_MAP;
 import { BASE_CLASS, SIZES } from '../settings.js';
 export var BASE_CLASS_NAME = BASE_CLASS + "Circle";
 export var INDICATOR_CLASS_NAME = BASE_CLASS_NAME + "-indicator";
-export var SIZE_TO_WIDTH_LINE_MAP = (_SIZE_TO_WIDTH_LINE_M = {}, _SIZE_TO_WIDTH_LINE_M[SIZES.LARGE] = 4, _SIZE_TO_WIDTH_LINE_M[SIZES.MEDIUM] = 8, _SIZE_TO_WIDTH_LINE_M[SIZES.SMALL] = 8, _SIZE_TO_WIDTH_LINE_M);
+export var SIZE_TO_WIDTH_LINE_MAP = (_SIZE_TO_WIDTH_LINE_M = {}, _SIZE_TO_WIDTH_LINE_M[SIZES.EXTRA_LARGE] = 6, _SIZE_TO_WIDTH_LINE_M[SIZES.LARGE] = 4, _SIZE_TO_WIDTH_LINE_M[SIZES.MEDIUM] = 8, _SIZE_TO_WIDTH_LINE_M[SIZES.SMALL] = 8, _SIZE_TO_WIDTH_LINE_M);
+export var STROKE_SIZE_MAP = (_STROKE_SIZE_MAP = {}, _STROKE_SIZE_MAP[SIZES.LARGE] = 18, _STROKE_SIZE_MAP[SIZES.MEDIUM] = 12, _STROKE_SIZE_MAP[SIZES.SMALL] = 6, _STROKE_SIZE_MAP);

lib/ProgressBarLine/index.js

@@ -10,16 +10,14 @@ import cx from 'classnames';
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
 var ProgressBarLine = function ProgressBarLine(_ref) {
   var _cx;
-
   var hideIndicator = _ref.hideIndicator,
-      indicatorBottom = _ref.indicatorBottom,
-      indicatorTotal = _ref.indicatorTotal,
-      isAnimatedOnChange = _ref.isAnimatedOnChange,
-      percentage = _ref.percentage,
-      mainBarPercentage = _ref.mainBarPercentage,
-      extraBarPercentage = _ref.extraBarPercentage,
-      status = _ref.status,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? SIZES.MEDIUM : _ref$size;
+    indicatorBottom = _ref.indicatorBottom,
+    indicatorTotal = _ref.indicatorTotal,
+    isAnimatedOnChange = _ref.isAnimatedOnChange,
+    percentage = _ref.percentage,
+    mainBarPercentage = _ref.mainBarPercentage,
+    extraBarPercentage = _ref.extraBarPercentage,
+    status = _ref.status,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? SIZES.MEDIUM : _ref$size;
   var percentageArray = usePercentage({
@@ -30,12 +28,10 @@ percentage: percentage,
   });
-
   var _useIndicator = useIndicator({
-    hideIndicator: hideIndicator,
-    indicatorBottom: indicatorBottom,
-    percentage: percentageArray[0],
-    indicatorTotal: indicatorTotal
-  }),
-      indicatorTopElement = _useIndicator[0],
-      indicatorBottomElement = _useIndicator[1];
-
+      hideIndicator: hideIndicator,
+      indicatorBottom: indicatorBottom,
+      percentage: percentageArray[0],
+      indicatorTotal: indicatorTotal
+    }),
+    indicatorTopElement = _useIndicator[0],
+    indicatorBottomElement = _useIndicator[1];
   return /*#__PURE__*/_jsxs("div", {
@@ -47,3 +43,2 @@ className: BASE_CLASS,
         var _cx2;
-
         var index = array.length - 1 - currentIndex;
@@ -61,4 +56,3 @@ var isExtra = array.length === 2 && currentIndex === 0;
 };
-
 ProgressBarLine.displayName = 'ProgressBarLine';
 export default ProgressBarLine;

lib/ProgressBarLine/Indicator/index.js

@@ -6,7 +6,6 @@ import cx from 'classnames';
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
 var Indicator = function Indicator(_ref) {
   var indicatorBottom = _ref.indicatorBottom,
-      indicatorTotal = _ref.indicatorTotal,
-      percentage = _ref.percentage;
+    indicatorTotal = _ref.indicatorTotal,
+    percentage = _ref.percentage;
   return /*#__PURE__*/_jsxs("span", {
@@ -19,4 +18,3 @@ className: cx(CLASS_INDICATOR, CLASS_INDICATOR + "--" + (indicatorBottom ? 'bottom' : 'top')),
 };
-
 Indicator.displayName = 'Indicator';
 export default Indicator;

lib/ProgressBarLine/Line.js

@@ -5,8 +5,7 @@ import cx from 'classnames';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 var Line = function Line(_ref) {
   var isAnimatedOnChange = _ref.isAnimatedOnChange,
-      percentage = _ref.percentage,
-      className = _ref.className,
-      isExtra = _ref.isExtra;
+    percentage = _ref.percentage,
+    className = _ref.className,
+    isExtra = _ref.isExtra;
   return /*#__PURE__*/_jsx("span", {
@@ -19,4 +18,3 @@ className: cx(!isExtra && BASE_CLASS_LINE, isExtra && BASE_CLASS_EXTRA_LINE, className, isAnimatedOnChange && !isExtra && CLASS_BAR_ANIMATED, isAnimatedOnChange && isExtra && BASE_CLASS_EXTRA_LINE_ANIMATED),
 };
-
 Line.displayName = 'ProgressBarLine';
 export default Line;

lib/ProgressBarLine/useIndicator.js

 import Indicator from './Indicator/index.js';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 var useIndicator = function useIndicator(_ref) {
   var hideIndicator = _ref.hideIndicator,
-      indicatorBottom = _ref.indicatorBottom,
-      percentage = _ref.percentage,
-      indicatorTotal = _ref.indicatorTotal;
+    indicatorBottom = _ref.indicatorBottom,
+    percentage = _ref.percentage,
+    indicatorTotal = _ref.indicatorTotal;
   if (hideIndicator) return [];
-
   var indicator = /*#__PURE__*/_jsx(Indicator, {
@@ -16,6 +14,4 @@ indicatorBottom: indicatorBottom,
   });
-
   return [!indicatorBottom ? indicator : null, indicatorBottom ? indicator : null];
 };
-
 export default useIndicator;

lib/ProgressBarLine/usePercentage.js

 var usePercentage = function usePercentage(_ref) {
   var percentage = _ref.percentage,
-      mainBarPercentage = _ref.mainBarPercentage,
-      extraBarPercentage = _ref.extraBarPercentage;
+    mainBarPercentage = _ref.mainBarPercentage,
+    extraBarPercentage = _ref.extraBarPercentage;
   var response = [];
-
   if (Array.isArray(percentage) && percentage.length >= 0 && percentage.every(function (number) {
@@ -12,7 +11,5 @@ return typeof number === 'number';
   }
-
   if (typeof mainBarPercentage === 'number') {
     response.push(mainBarPercentage);
   }
-
   if (typeof extraBarPercentage === 'number') {
@@ -22,6 +19,4 @@ response[1] = extraBarPercentage;
   }
-
   return response.length === 0 && typeof percentage === 'number' ? [percentage] : response;
 };
-
 export default usePercentage;

lib/settings.js

@@ -8,2 +8,3 @@ export var BASE_CLASS = 'sui-AtomProgressBarV2';
 export var SIZES = {
+  EXTRA_LARGE: 'extraLarge',
   SMALL: 'small',
@@ -13,2 +14,11 @@ MEDIUM: 'medium',
 };
+export var STROKE_SIZES = {
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large'
+};
+export var LINE_CAPS = {
+  ROUND: 'round',
+  SQUARE: 'square'
+};
 export var STATUS = {
@@ -15,0 +25,0 @@ LOADING: 'loading',

package.json

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

No alert changes

Improved metrics

Lines of code

343

increased by7.19%

Worsened metrics

Total package byte prevSize

23429

decreased by-13.89%

Number of package files

23

decreased by-4.17%

No dependency changes