diginet-core-ui 1.3.81 → 1.3.82

package/components/progress/circular.js

@@ -167,12 +167,12 @@ const CircularProgress = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const radius = Math.max(0, (containerW - circleStrokeW) / 2);
   const radiusX10 = radius * 10;
   const circumference = radius * 2 * Math.PI;
-  const _ContainerCSS = ContainerCSS(containerW);
+  const _ContainerCSS = ContainerCSS(containerW, directionAngle);
   const _CircleBackgroundCSS = CircleBackgroundCSS(background, !determinate);
   const _CircleMainCSS = CircleMainCSS(color);
   const _CircleMainIndeterminateCSS = CircleMainIndeterminateCSS(radiusX10);
-  const _CircleMainDeterminateCSS = CircleMainDeterminateCSS(circumference, percent, directionAngle, duration);
-  const _TextCSS = TextCSS(percentColor, color, dimension);
+  const _CircleMainDeterminateCSS = CircleMainDeterminateCSS(circumference, percent, duration);
+  const _TextCSS = TextCSS(percentColor, color, dimension, directionAngle);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
@@ -234,9 +234,11 @@ const keyframeDash = r => keyframes`
 		stroke-dashoffset: -${r * 124 / 200};
 	}
 `;
-const ContainerCSS = containerW => css`
+const ContainerCSS = (containerW, directionAngle) => css`
     ${displayInlineBlock};
     ${parseWidthHeight(containerW)};
+    transform: rotate(${directionAngle}deg);
+    transform-origin: center;
 `;
 const AnimationRotateCSS = css`
     animation: ${keyframeRotate} 2s linear infinite;
@@ -251,11 +253,9 @@ const CircleMainCSS = color => css`
     stroke: ${color};
     stroke-linecap: round;
 `;
-const CircleMainDeterminateCSS = (circumference, percent, directionAngle, duration) => css`
+const CircleMainDeterminateCSS = (circumference, percent, duration) => css`
     stroke-dasharray: ${`${circumference} ${circumference}`};
     stroke-dashoffset: ${circumference - validatePercent(percent) / 100 * circumference};
-    // transform: rotate(${directionAngle}deg);
-    transform-origin: center;
     transition: stroke-dashoffset ${duration}s cubic-bezier(0.77, 0, 0.175, 1); /* easeInOutQuart */
 `;
 const CircleMainIndeterminateCSS = radiusX10 => css`
@@ -263,11 +263,13 @@ const CircleMainIndeterminateCSS = radiusX10 => css`
     stroke-dashoffset: 0;
     animation: ${keyframeDash(radiusX10)} 2s ease-in-out infinite;
 `;
-const TextCSS = (percentColor, color, dimension) => css`
+const TextCSS = (percentColor, color, dimension, directionAngle) => css`
     ${userSelectNone};
     fill: ${percentColor ? percentColor : color};
     ${dimension.labelStyle}
     text-anchor: middle;
+    transform: rotate(${-directionAngle}deg);
+    transform-origin: center;
 `;
 CircularProgress.defaultProps = {
   background: lineCategory,
@@ -278,7 +280,7 @@ CircularProgress.defaultProps = {
   duration: 1,
   percent: 25,
   percentColor: semanticInfo,
-  showValue: false,
+  showValue: true,
   size: 'medium',
   style: {}
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.81",
+  "version": "1.3.82",
   "description": "The DigiNet core ui",
   "homepage": "https://diginet.com.vn",
   "main": "index.js",

package/readme.md

@@ -38,6 +38,9 @@ npm test
 ```
 
 ## Changelog
+## 1.3.82
+- \[Fixed\]: CircularProgress – Fix transform rotate wrong inside flex column
+
 ## 1.3.81
 - \[Added\]: Icon – Feedback, Newspaper
 - \[Changed\]: Button – Add prop href, urlParams