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

Comparing version 1.10.0 to 2.0.0

lib/CircleProgressBar/Circle/index.js

@@ -0,1 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState, useEffect } from 'react';
@@ -50,23 +53,24 @@ import cx from 'classnames';
 
-  return /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/_jsxs("svg", {
     className: cx(baseClassName + "-circle", (_cx = {}, _cx[baseClassName + "-circle--" + modifier] = !!modifier, _cx[baseClassName + "-circle--" + size] = !!size, _cx)),
-    viewBox: "0 0 100 100"
-  }, /*#__PURE__*/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"
-  })), /*#__PURE__*/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"
-  })));
+    viewBox: "0 0 100 100",
+    children: [/*#__PURE__*/_jsx("path", _extends({
+      className: cx(baseClassName + "-trail", (_cx2 = {}, _cx2[baseClassName + "-trail--" + modifier] = !!modifier, _cx2))
+    }, getPathStyles({
+      percentage: 100,
+      strokeWidth: strokeWidth
+    }), {
+      strokeWidth: strokeWidth,
+      fillOpacity: "0"
+    })), /*#__PURE__*/_jsx("path", _extends({
+      className: cx(baseClassName + "-path", (_cx3 = {}, _cx3[baseClassName + "-path--" + modifier] = !!modifier, _cx3))
+    }, getPathStyles({
+      percentage: percentage,
+      strokeWidth: strokeWidth
+    }), {
+      strokeLinecap: "square",
+      strokeWidth: strokeWidth,
+      fillOpacity: "0"
+    }))]
+  });
 };
@@ -73,0 +77,0 @@

lib/CircleProgressBar/index.js

@@ -0,1 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
 var _SIZE_TO_WIDTH_LINE_M;
@@ -8,2 +11,3 @@
   LARGE: 'large',
+  MEDIUM: 'medium',
   SMALL: 'small'
@@ -16,23 +20,7 @@ };
 };
-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.SMALL] = 8, _SIZE_TO_WIDTH_LINE_M);
-var BASE_CLASS_NAME = 'sui-AtomCircleProgressBar';
+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);
+var BASE_CLASS_NAME = 'sui-AtomCircleProgressBarV2';
 var INDICATOR_CLASS_NAME = BASE_CLASS_NAME + "-indicator";
 
-var Indicator = function Indicator(props) {
-  var _cx;
-
-  var percentage = props.percentage,
-      status = props.status,
-      errorIcon = props.errorIcon,
-      size = props.size; // eslint-disable-line react/prop-types
-
-  if (status === STATUS.LOADING) return null;
-  return /*#__PURE__*/React.createElement("span", {
-    className: cx(INDICATOR_CLASS_NAME, (_cx = {}, _cx[INDICATOR_CLASS_NAME + "--small"] = size === SIZES.SMALL, _cx[INDICATOR_CLASS_NAME + "--inner"] = size === SIZES.LARGE || status === STATUS.ERROR, _cx[INDICATOR_CLASS_NAME + "--outer"] = size === SIZES.SMALL && status !== STATUS.ERROR, _cx[INDICATOR_CLASS_NAME + "--error"] = status === STATUS.ERROR, _cx))
-  }, status === STATUS.PROGRESS && /*#__PURE__*/React.createElement("span", null, percentage, "%"), status === STATUS.ERROR && errorIcon);
-};
-
-var CircleProgressBar = function CircleProgressBar(_ref) {
-  var _cx2;
-
+var Indicator = function Indicator(_ref) {
   var percentage = _ref.percentage,
@@ -42,20 +30,36 @@ status = _ref.status,
       size = _ref.size,
-      isAnimatedOnChange = _ref.isAnimatedOnChange,
-      hideIndicator = _ref.hideIndicator;
+      children = _ref.children;
+  if (status === STATUS.LOADING) return null;
+  return /*#__PURE__*/_jsxs("span", {
+    className: cx(INDICATOR_CLASS_NAME, INDICATOR_CLASS_NAME + "--" + status, INDICATOR_CLASS_NAME + "--" + size),
+    children: [status === STATUS.PROGRESS && (children || percentage + "%"), status === STATUS.ERROR && errorIcon]
+  });
+};
+
+var CircleProgressBar = function CircleProgressBar(_ref2) {
+  var percentage = _ref2.percentage,
+      status = _ref2.status,
+      errorIcon = _ref2.errorIcon,
+      size = _ref2.size,
+      isAnimatedOnChange = _ref2.isAnimatedOnChange,
+      hideIndicator = _ref2.hideIndicator,
+      children = _ref2.children;
   var circleWidth = SIZE_TO_WIDTH_LINE_MAP[size];
-  return /*#__PURE__*/React.createElement("div", {
-    className: cx(BASE_CLASS_NAME, (_cx2 = {}, _cx2[BASE_CLASS_NAME + "--" + size] = !!size && status !== STATUS.ERROR, _cx2))
-  }, /*#__PURE__*/React.createElement(Circle, {
-    baseClassName: BASE_CLASS_NAME,
-    modifier: status,
-    percentage: status === STATUS.PROGRESS ? percentage : 0,
-    withAnimation: isAnimatedOnChange,
-    strokeWidth: circleWidth,
-    size: size
-  }), !hideIndicator && /*#__PURE__*/React.createElement(Indicator, {
-    percentage: percentage,
-    size: size,
-    status: status,
-    errorIcon: errorIcon
-  }));
+  return /*#__PURE__*/_jsxs("div", {
+    className: cx(BASE_CLASS_NAME, BASE_CLASS_NAME + "--" + size, BASE_CLASS_NAME + "--" + status),
+    children: [/*#__PURE__*/_jsx(Circle, {
+      baseClassName: BASE_CLASS_NAME,
+      modifier: status,
+      percentage: status === STATUS.PROGRESS ? percentage : 0,
+      withAnimation: isAnimatedOnChange,
+      strokeWidth: circleWidth,
+      size: size
+    }), !hideIndicator && /*#__PURE__*/_jsx(Indicator, {
+      percentage: percentage,
+      size: size,
+      status: status,
+      errorIcon: errorIcon,
+      children: children
+    })]
+  });
 };
@@ -62,0 +66,0 @@

lib/index.js

@@ -0,2 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
@@ -21,6 +23,6 @@ import LineProgressBar from './LineProgressBar';
     case TYPES.LINE:
-      return /*#__PURE__*/React.createElement(LineProgressBar, props);
+      return /*#__PURE__*/_jsx(LineProgressBar, _extends({}, props));
 
     case TYPES.CIRCLE:
-      return /*#__PURE__*/React.createElement(CircleProgressBar, Object.assign({
+      return /*#__PURE__*/_jsx(CircleProgressBar, _extends({
         size: size
@@ -30,3 +32,3 @@ }, props));
     default:
-      return /*#__PURE__*/React.createElement(LineProgressBar, props);
+      return /*#__PURE__*/_jsx(LineProgressBar, _extends({}, props));
   }
@@ -33,0 +35,0 @@ };

lib/LineProgressBar/index.js

@@ -0,8 +1,11 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import cx from 'classnames';
-var BASE_CLASS = 'sui-AtomLineProgressBar';
-var CLASS_INDICATOR = 'sui-AtomLineProgressBar-indicator';
-var CLASS_CONTAINER_BAR = 'sui-AtomLineProgressBar-container';
-var CLASS_BAR = 'sui-AtomLineProgressBar-bar';
-var CLASS_BAR_ANIMATED = 'sui-AtomLineProgressBar-bar--animated';
+var BASE_CLASS = 'sui-AtomLineProgressBarV2';
+var CLASS_INDICATOR = BASE_CLASS + "-indicator";
+var CLASS_CONTAINER_BAR = BASE_CLASS + "-container";
+var CLASS_BAR = BASE_CLASS + "-bar";
+var CLASS_BAR_ANIMATED = CLASS_BAR + "--animated";
 
@@ -14,5 +17,8 @@ var Indicator = function Indicator(props) {
 
-  return /*#__PURE__*/React.createElement("span", {
-    className: cx(CLASS_INDICATOR, CLASS_INDICATOR + "--" + (indicatorBottom ? 'bottom' : 'top'))
-  }, /*#__PURE__*/React.createElement("strong", null, percentage), indicatorTotal ? "/100" : "%");
+  return /*#__PURE__*/_jsxs("span", {
+    className: cx(CLASS_INDICATOR, CLASS_INDICATOR + "--" + (indicatorBottom ? 'bottom' : 'top')),
+    children: [/*#__PURE__*/_jsx("strong", {
+      children: percentage
+    }), indicatorTotal ? "/100" : "%"]
+  });
 };
@@ -29,10 +35,12 @@
   };
-  return /*#__PURE__*/React.createElement("div", {
-    className: BASE_CLASS
-  }, !hideIndicator && !indicatorBottom && /*#__PURE__*/React.createElement(Indicator, props), /*#__PURE__*/React.createElement("div", {
-    className: CLASS_CONTAINER_BAR
-  }, /*#__PURE__*/React.createElement("span", {
-    className: cx(CLASS_BAR, isAnimatedOnChange && CLASS_BAR_ANIMATED),
-    style: styleBar
-  })), !hideIndicator && indicatorBottom && /*#__PURE__*/React.createElement(Indicator, props));
+  return /*#__PURE__*/_jsxs("div", {
+    className: BASE_CLASS,
+    children: [!hideIndicator && !indicatorBottom && /*#__PURE__*/_jsx(Indicator, _extends({}, props)), /*#__PURE__*/_jsx("div", {
+      className: CLASS_CONTAINER_BAR,
+      children: /*#__PURE__*/_jsx("span", {
+        className: cx(CLASS_BAR, isAnimatedOnChange && CLASS_BAR_ANIMATED),
+        style: styleBar
+      })
+    }), !hideIndicator && indicatorBottom && /*#__PURE__*/_jsx(Indicator, _extends({}, props))]
+  });
 };
@@ -39,0 +47,0 @@

package.json

 {
   "name": "@s-ui/react-atom-progress-bar",
-  "version": "1.10.0",
+  "version": "2.0.0",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
-    "build": "npx rimraf ./lib && npx mkdirp ./lib && npm run build:js && npm run build:styles",
+    "prepare": "npx rimraf ./lib && npx mkdirp ./lib && npm run build:js && npm run build:styles",
     "build:js": "../../../node_modules/.bin/babel --presets sui ./src --out-dir ./lib",
@@ -9,0 +9,0 @@ "build:styles": "../../../node_modules/.bin/cpx './src/**/*.scss' ./lib"

No alert changes

Improved metrics

Total package byte prevSize

24863

increased by5.02%

Lines of code

212

increased by9.84%

No dependency changes