zkit-ui 2.0.19 → 2.0.20

package/dist/ui/Switch/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/Switch/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/Switch/index.tsx"],"names":[],"mappings":"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"}

package/dist/ui/Switch/index.js

@@ -459,6 +459,11 @@ function SwitchImpl({ checked: checkedProp, defaultChecked = false, onCheckedCha
         const pressedOpacity = (0, react_native_reanimated_1.interpolate)(pressSv.value, [0, 1], [1, PRESSED_OPACITY]);
         return { opacity: pressedOpacity };
     });
+    const trackAnimatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        return {
+            backgroundColor: (0, react_native_reanimated_1.interpolateColor)(progressSv.value, [0, 1], [visualUncheckedTrackColor, visualCheckedTrackColor]),
+        };
+    }, [visualCheckedTrackColor, visualUncheckedTrackColor]);
     const focusRingAnimatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
         const opacity = (0, react_native_reanimated_1.interpolate)(focusSv.value, [0, 1], [0, 1]);
         const scale = (0, react_native_reanimated_1.interpolate)(focusSv.value, [0, 1], [0.96, 1]);
@@ -467,9 +472,6 @@ function SwitchImpl({ checked: checkedProp, defaultChecked = false, onCheckedCha
             transform: [{ scale }],
         };
     });
-    const checkedTrackAnimatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
-        return { opacity: progressSv.value };
-    });
     const thumbAnimatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
         if (!thumbColorChanges) {
             return {
@@ -562,20 +564,16 @@ function SwitchImpl({ checked: checkedProp, defaultChecked = false, onCheckedCha
                         borderColor: focusRingColor,
                     },
                     focusRingAnimatedStyle,
-                ] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
-                    react_native_1.StyleSheet.absoluteFillObject,
-                    {
-                        borderRadius: trackRadius,
-                        backgroundColor: visualUncheckedTrackColor,
-                    },
-                    trackStyle,
                 ] }), (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { pointerEvents: "none", style: [
-                    react_native_1.StyleSheet.absoluteFillObject,
+                    styles.track,
                     {
+                        width: trackWidth,
+                        height: trackHeight,
                         borderRadius: trackRadius,
-                        backgroundColor: visualCheckedTrackColor,
+                        backgroundColor: checked ? visualCheckedTrackColor : visualUncheckedTrackColor,
                     },
-                    checkedTrackAnimatedStyle,
+                    trackAnimatedStyle,
+                    trackStyle,
                 ] }), hasStateText ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { pointerEvents: "none", style: styles.stateTextLayer, children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [styles.stateTextSlot, checkedTextSlotStyle, checkedTextAnimatedStyle], children: (0, jsx_runtime_1.jsx)(Text_1.Text, { allowFontScaling: false, ellipsizeMode: "clip", numberOfLines: 1, style: [
                                 styles.stateText,
                                 {
@@ -624,6 +622,8 @@ exports.Switch.displayName = 'Switch';
 const styles = react_native_1.StyleSheet.create({
     root: {
         alignSelf: 'flex-start',
+        maxWidth: '100%',
+        minWidth: 0,
     },
     content: {
         alignItems: 'center',
@@ -643,6 +643,11 @@ const styles = react_native_1.StyleSheet.create({
         flexShrink: 0,
         overflow: 'visible',
     },
+    track: {
+        left: 0,
+        position: 'absolute',
+        top: 0,
+    },
     focusRing: {
         position: 'absolute',
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zkit-ui",
-  "version": "2.0.19",
+  "version": "2.0.20",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/ui/Switch/index.tsx

@@ -724,6 +724,16 @@ function SwitchImpl(
     return { opacity: pressedOpacity };
   });
 
+  const trackAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      backgroundColor: interpolateColor(
+        progressSv.value,
+        [0, 1],
+        [visualUncheckedTrackColor, visualCheckedTrackColor]
+      ),
+    };
+  }, [visualCheckedTrackColor, visualUncheckedTrackColor]);
+
   const focusRingAnimatedStyle = useAnimatedStyle(() => {
     const opacity = interpolate(focusSv.value, [0, 1], [0, 1]);
     const scale = interpolate(focusSv.value, [0, 1], [0.96, 1]);
@@ -733,10 +743,6 @@ function SwitchImpl(
     };
   });
 
-  const checkedTrackAnimatedStyle = useAnimatedStyle(() => {
-    return { opacity: progressSv.value };
-  });
-
   const thumbAnimatedStyle = useAnimatedStyle(() => {
     if (!thumbColorChanges) {
       return {
@@ -895,25 +901,18 @@ function SwitchImpl(
           focusRingAnimatedStyle,
         ]}
       />
-      <View
-        style={[
-          StyleSheet.absoluteFillObject,
-          {
-            borderRadius: trackRadius,
-            backgroundColor: visualUncheckedTrackColor,
-          },
-          trackStyle,
-        ]}
-      />
       <Animated.View
         pointerEvents="none"
         style={[
-          StyleSheet.absoluteFillObject,
+          styles.track,
           {
+            width: trackWidth,
+            height: trackHeight,
             borderRadius: trackRadius,
-            backgroundColor: visualCheckedTrackColor,
+            backgroundColor: checked ? visualCheckedTrackColor : visualUncheckedTrackColor,
           },
-          checkedTrackAnimatedStyle,
+          trackAnimatedStyle,
+          trackStyle,
         ]}
       />
 
@@ -1046,6 +1045,8 @@ Switch.displayName = 'Switch';
 const styles = StyleSheet.create({
   root: {
     alignSelf: 'flex-start',
+    maxWidth: '100%',
+    minWidth: 0,
   },
   content: {
     alignItems: 'center',
@@ -1065,6 +1066,11 @@ const styles = StyleSheet.create({
     flexShrink: 0,
     overflow: 'visible',
   },
+  track: {
+    left: 0,
+    position: 'absolute',
+    top: 0,
+  },
   focusRing: {
     position: 'absolute',
   },