@particle-network/ui-native 0.7.0-beta.7 → 0.7.0-beta.9

package/dist/components/ProgressWrapper/index.js

@@ -1,40 +1,71 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from "react";
-import { StyleSheet, View } from "react-native";
+import { useCallback, useMemo, useState } from "react";
+import { View } from "react-native";
 import react_native_svg, { Path } from "react-native-svg";
 import { useColors, useRadius } from "../../hooks/index.js";
 import { Flex } from "../layout/Flex/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 = ({ style, svgStyle, value = 0, width, height, radius = 'sm', strokeWidth = 1, color = 'primary', children, ...restProps })=>{
     const { getColor } = useColors();
     const { getRadius } = useRadius();
     const autoLayout = !width && !height;
     const [childWidth, setChildWidth] = useState(0);
     const [childHeight, setChildHeight] = useState(0);
-    const widthValue = useMemo(()=>{
-        if (width) return width;
-        return childWidth + 2 * strokeWidth;
-    }, [
-        childWidth,
-        strokeWidth,
-        width
+    const radiusValue = useMemo(()=>getRadius(radius), [
+        getRadius,
+        radius
     ]);
-    const heightValue = useMemo(()=>{
-        if (height) return height;
-        return childHeight + 2 * strokeWidth;
+    const { widthValue, heightValue, svgWidth, svgHeight, pathData, perimeter, strokeDashoffset } = useMemo(()=>{
+        const w = width ?? childWidth + 2 * strokeWidth;
+        const h = height ?? childHeight + 2 * strokeWidth;
+        const padding = strokeWidth;
+        const sw = w + padding;
+        const sh = h + padding;
+        const rectWidth = w - strokeWidth;
+        const rectHeight = h - strokeWidth;
+        const rectXY = strokeWidth / 2 + padding / 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,
+            svgWidth: sw,
+            svgHeight: sh,
+            pathData: path,
+            perimeter: p,
+            strokeDashoffset: offset
+        };
     }, [
+        width,
+        height,
+        childWidth,
         childHeight,
         strokeWidth,
-        height
+        value,
+        radiusValue
     ]);
-    const clampedProgress = Math.max(0, Math.min(100, value));
-    const padding = strokeWidth;
-    const svgWidth = widthValue + padding;
-    const svgHeight = heightValue + padding;
-    const rectWidth = widthValue - strokeWidth;
-    const rectHeight = heightValue - strokeWidth;
-    const rectXY = strokeWidth / 2 + padding / 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,50 +81,30 @@ const ProgressWrapper = ({ style, svgStyle, value = 0, width, height, radius = '
         color,
         colorValue
     ]);
-    const radiusValue = getRadius(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);
-    const styles = StyleSheet.create({
-        container: {
+    const containerStyle = useMemo(()=>({
             width: widthValue,
             height: heightValue
-        },
-        svg: {
+        }), [
+        widthValue,
+        heightValue
+    ]);
+    const svgPositionStyle = useMemo(()=>({
             position: 'absolute',
-            left: -padding / 2,
-            top: -padding / 2
-        }
-    });
-    const handleLayout = (event)=>{
-        const { width, height } = event.nativeEvent.layout;
-        setChildWidth(width);
-        setChildHeight(height);
-    };
+            left: -strokeWidth / 2,
+            top: -strokeWidth / 2
+        }), [
+        strokeWidth
+    ]);
+    const handleLayout = useCallback((event)=>{
+        const { width: w, height: h } = event.nativeEvent.layout;
+        setChildWidth(w);
+        setChildHeight(h);
+    }, []);
     return /*#__PURE__*/ jsxs(Flex, {
         center: true,
         h: heightValue,
         style: [
-            styles.container,
+            containerStyle,
             style
         ],
         w: widthValue,
@@ -102,7 +113,7 @@ const ProgressWrapper = ({ style, svgStyle, value = 0, width, height, radius = '
             /*#__PURE__*/ jsxs(react_native_svg, {
                 height: svgHeight,
                 style: [
-                    styles.svg,
+                    svgPositionStyle,
                     svgStyle
                 ],
                 width: svgWidth,

package/dist/components/input/styles.js

@@ -40,8 +40,8 @@ const useStyles = (props)=>{
     ]);
     const borderColor = useMemo(()=>{
         if (isInvalid) return getColor('danger');
-        if (isFocused) return getColor('default' === color ? 'secondary' : color);
-        if ('bordered' === variant) return getColor('default' === color ? 'secondary' : color);
+        if (isFocused) return getColor(color);
+        if ('bordered' === variant) return getColor(color);
         return 'transparent';
     }, [
         color,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-network/ui-native",
-  "version": "0.7.0-beta.7",
+  "version": "0.7.0-beta.9",
   "main": "./entry.js",
   "react-native": "./dist/index.js",
   "module": "./dist/index.js",
@@ -53,8 +53,8 @@
     "react-native-size-matters": "^0.4.2",
     "react-native-toast-message": "^2.3.3",
     "react-native-worklets": "0.5.1",
-    "@particle-network/icons": "0.7.0-beta.5",
-    "@particle-network/ui-shared": "0.5.0"
+    "@particle-network/ui-shared": "0.5.0",
+    "@particle-network/icons": "0.7.0-beta.5"
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",