@particle-network/ui-react 0.7.0-beta.13 → 0.7.0-beta.14

package/dist/components/ProgressWrapper/index.js

@@ -5,36 +5,61 @@ import { radiusMap, useThemeColor } from "@particle-network/ui-shared";
 import { useSize } from "ahooks";
 import { cn } from "../../utils/index.js";
 import { Center } from "../layout/index.js";
+function createPathData(x, y, w, h, r) {
+    if (0 === r) return `
+      M ${x + w} ${y + h}
+      L ${x} ${y + h}
+      L ${x} ${y}
+      L ${x + w} ${y}
+      Z
+    `;
+    return `
+      M ${x + w - r} ${y + h}
+      L ${x + r} ${y + h}
+      Q ${x} ${y + h} ${x} ${y + h - r}
+      L ${x} ${y + r}
+      Q ${x} ${y} ${x + r} ${y}
+      L ${x + w - r} ${y}
+      Q ${x + w} ${y} ${x + w} ${y + r}
+      L ${x + w} ${y + h - r}
+      Q ${x + w} ${y + h} ${x + w - r} ${y + h}
+      Z
+    `;
+}
 const ProgressWrapper = ({ className, value = 0, width, height, radius = 'sm', strokeWidth = 1, color = 'primary', children, svgClassName, ...restProps })=>{
     const uxColors = useThemeColor();
     const autoLayout = !width && !height;
     const containerRef = useRef(null);
-    const { width: childWidth, height: childHeight } = useSize(containerRef) ?? {
-        width: 0,
-        height: 0
-    };
-    const widthValue = useMemo(()=>{
-        if (width) return width;
-        return childWidth + 2 * strokeWidth;
+    const size = useSize(autoLayout ? containerRef : void 0);
+    const childWidth = size?.width ?? 0;
+    const childHeight = size?.height ?? 0;
+    const radiusValue = 'number' == typeof radius ? radius : radiusMap[radius];
+    const { widthValue, heightValue, pathData, perimeter, strokeDashoffset } = useMemo(()=>{
+        const w = width ?? childWidth + 2 * strokeWidth;
+        const h = height ?? childHeight + 2 * strokeWidth;
+        const rectWidth = w - strokeWidth;
+        const rectHeight = h - strokeWidth;
+        const rectXY = strokeWidth / 2;
+        const p = 2 * (rectWidth + rectHeight);
+        const clamped = Math.max(0, Math.min(100, value));
+        const offset = p * (1 - clamped / 100);
+        const path = createPathData(rectXY, rectXY, rectWidth, rectHeight, radiusValue);
+        return {
+            widthValue: w,
+            heightValue: h,
+            pathData: path,
+            perimeter: p,
+            strokeDashoffset: offset
+        };
     }, [
+        width,
+        height,
         childWidth,
-        strokeWidth,
-        width
-    ]);
-    const heightValue = useMemo(()=>{
-        if (height) return height;
-        return childHeight + 2 * strokeWidth;
-    }, [
         childHeight,
         strokeWidth,
-        height
+        value,
+        radiusValue
     ]);
-    const clampedProgress = Math.max(0, Math.min(100, value));
-    const rectWidth = widthValue - strokeWidth;
-    const rectHeight = heightValue - strokeWidth;
-    const rectXY = strokeWidth / 2;
-    const perimeter = 2 * (rectWidth + rectHeight);
-    const strokeDashoffset = perimeter * (1 - clampedProgress / 100);
     const colorValue = useMemo(()=>{
         if ('transparent' === color) return 'transparent';
         if (color.startsWith('#')) return color;
@@ -50,29 +75,6 @@ const ProgressWrapper = ({ className, value = 0, width, height, radius = 'sm', s
         color,
         colorValue
     ]);
-    const radiusValue = 'number' == typeof radius ? radius : radiusMap[radius];
-    const createPathData = (x, y, w, h, r)=>{
-        if (0 === r) return `
-        M ${x + w} ${y + h}
-        L ${x} ${y + h}
-        L ${x} ${y}
-        L ${x + w} ${y}
-        Z
-      `;
-        return `
-        M ${x + w - r} ${y + h}
-        L ${x + r} ${y + h}
-        Q ${x} ${y + h} ${x} ${y + h - r}
-        L ${x} ${y + r}
-        Q ${x} ${y} ${x + r} ${y}
-        L ${x + w - r} ${y}
-        Q ${x + w} ${y} ${x + w} ${y + r}
-        L ${x + w} ${y + h - r}
-        Q ${x + w} ${y + h} ${x + w - r} ${y + h}
-        Z
-      `;
-    };
-    const pathData = createPathData(rectXY, rectXY, rectWidth, rectHeight, radiusValue);
     return /*#__PURE__*/ jsxs(Center, {
         style: {
             width: `${widthValue}px`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-network/ui-react",
-  "version": "0.7.0-beta.13",
+  "version": "0.7.0-beta.14",
   "type": "module",
   "exports": {
     ".": {