zkit-ui 2.0.18 → 2.0.19

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zkit-ui",
-  "version": "2.0.18",
+  "version": "2.0.19",
   "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,