zkit-ui 2.0.18 → 2.0.20

package/dist/services/LoadingService/index.js

@@ -95,7 +95,7 @@ const TITLE_MAX_WIDTH = (0, zkit_tools_1.wp)(214);
 const IOS_SHADOW_OFFSET_Y = (0, zkit_tools_1.wp)(9);
 const IOS_SHADOW_RADIUS = (0, zkit_tools_1.wp)(22);
 const CONTENT_ENTER_OFFSET = (0, zkit_tools_1.wp)(3);
-const HOST_BACKDROP = 'transparent';
+const HOST_BACKDROP = 'rgba(17, 24, 39, 0.48)';
 const IS_IOS = react_native_1.Platform.OS === 'ios';
 const IS_ANDROID = react_native_1.Platform.OS === 'android';
 const IS_WEB = react_native_1.Platform.OS === 'web';
@@ -625,7 +625,7 @@ function LoadingHost({ item, onExited }) {
     if (!item)
         return null;
     const pointerEvents = item.open ? (item.blocking ? 'auto' : 'none') : 'none';
-    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { pointerEvents: pointerEvents, style: styles.host, accessibilityElementsHidden: !item.open, importantForAccessibility: item.open ? 'yes' : 'no-hide-descendants', collapsable: false, children: (0, jsx_runtime_1.jsx)(LoadingCard, { item: item, onExited: onExited }) }));
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { pointerEvents: pointerEvents, style: [react_native_1.StyleSheet.absoluteFill, styles.host], accessibilityElementsHidden: !item.open, importantForAccessibility: item.open ? 'yes' : 'no-hide-descendants', collapsable: false, children: (0, jsx_runtime_1.jsx)(LoadingCard, { item: item, onExited: onExited }) }));
 }
 function resolveColors(item, themeColors) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
@@ -724,7 +724,7 @@ function LoadingCard({ item, onExited }) {
         opacity: (0, react_native_reanimated_1.interpolate)(contentProgress.value, [0, 1], [0.72, 1]),
         transform: [{ translateY: (0, react_native_reanimated_1.interpolate)(contentProgress.value, [0, 1], [CONTENT_ENTER_OFFSET, 0]) }],
     }));
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { pointerEvents: "none", style: [styles.backdrop, { backgroundColor: colors.backdrop }, backdropStyle] }), (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { pointerEvents: item.open && item.blocking ? 'auto' : 'none', renderToHardwareTextureAndroid: IS_ANDROID && item.open, style: [
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { pointerEvents: "none", style: [react_native_1.StyleSheet.absoluteFill, styles.backdrop, { backgroundColor: colors.backdrop }, backdropStyle] }), (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { pointerEvents: item.open && item.blocking ? 'auto' : 'none', renderToHardwareTextureAndroid: IS_ANDROID && item.open, style: [
                     styles.frame,
                     webShadowStyle,
                     IS_IOS ? { shadowColor: colors.shadow } : undefined,
@@ -779,14 +779,11 @@ function renderDefaultIcon(item, colors) {
 // ============================================================================
 const styles = react_native_1.StyleSheet.create({
     host: {
-        ...react_native_1.StyleSheet.absoluteFillObject,
         alignItems: 'center',
         justifyContent: 'center',
         zIndex: HOST_Z_INDEX,
     },
-    backdrop: {
-        ...react_native_1.StyleSheet.absoluteFillObject,
-    },
+    backdrop: {},
     frame: {
         alignSelf: 'center',
         borderRadius: HUD_RADIUS,

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.18",
+  "version": "2.0.20",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/services/LoadingService/README.md

@@ -8,6 +8,7 @@
 - 全局只展示一个 HUD；新请求默认替换旧请求，并向旧请求派发 `replace`
 - `loading.promise()` 绑定异步任务，成功/失败结果只会更新当前仍活跃的 handle
 - `loading` 默认 15s 超时自动关闭，`success/error` 默认短暂停留后关闭
+- blocking loading 默认使用全屏蒙层并将 HUD 居中显示；可通过 `colors.backdrop` 自定义蒙层颜色
 - Android 不使用 `elevation` 或额外阴影层；iOS/Web 阴影跟随同一动画层，退出完成后卸载，避免残影
 - 默认文案来自 i18n，可通过 `ZKitProvider loading` 或 `LoadingProvider defaults` 覆盖
 

package/src/services/LoadingService/index.tsx

@@ -240,7 +240,7 @@ const TITLE_MAX_WIDTH = wp(214);
 const IOS_SHADOW_OFFSET_Y = wp(9);
 const IOS_SHADOW_RADIUS = wp(22);
 const CONTENT_ENTER_OFFSET = wp(3);
-const HOST_BACKDROP = 'transparent';
+const HOST_BACKDROP = 'rgba(17, 24, 39, 0.48)';
 
 const IS_IOS = Platform.OS === 'ios';
 const IS_ANDROID = Platform.OS === 'android';
@@ -829,7 +829,7 @@ function LoadingHost({ item, onExited }: LoadingHostProps) {
   return (
     <View
       pointerEvents={pointerEvents}
-      style={styles.host}
+      style={[StyleSheet.absoluteFill, styles.host]}
       accessibilityElementsHidden={!item.open}
       importantForAccessibility={item.open ? 'yes' : 'no-hide-descendants'}
       collapsable={false}
@@ -953,7 +953,7 @@ function LoadingCard({ item, onExited }: LoadingCardProps) {
     <>
       <Animated.View
         pointerEvents="none"
-        style={[styles.backdrop, { backgroundColor: colors.backdrop }, backdropStyle]}
+        style={[StyleSheet.absoluteFill, styles.backdrop, { backgroundColor: colors.backdrop }, backdropStyle]}
       />
       <Animated.View
         pointerEvents={item.open && item.blocking ? 'auto' : 'none'}
@@ -1066,14 +1066,11 @@ function renderDefaultIcon(item: LoadingItem, colors: ResolvedColors) {
 
 const styles = StyleSheet.create({
   host: {
-    ...StyleSheet.absoluteFillObject,
     alignItems: 'center',
     justifyContent: 'center',
     zIndex: HOST_Z_INDEX,
   },
-  backdrop: {
-    ...StyleSheet.absoluteFillObject,
-  },
+  backdrop: {},
   frame: {
     alignSelf: 'center',
     borderRadius: HUD_RADIUS,

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',
   },