@unif/react-native-design 0.14.0 → 0.14.1

package/lib/module/components/ui/Confirm/ConfirmHost.js

@@ -1,13 +1,17 @@
 "use strict";
 
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { Modal, Pressable, Text, View } from 'react-native';
+import { Animated, Easing, Modal, Pressable, Text, View, useWindowDimensions } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { space, useThemedStyles } from "../../../theme/index.js";
 import { Button } from "../Button/index.js";
 import { _subs } from "./confirm.js";
 import { makeStyles } from "./styles.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/** 遮罩淡入 / 淡出时长(ms)—— 出场略长于入场,与 Modal slide 退场(~300ms)大致同步收完。 */
+const SCRIM_IN_MS = 220;
+const SCRIM_OUT_MS = 260;
+
 /**
  * Confirm 对话框宿主 —— App 根挂一次,监听 `confirm()` 调用并渲染。
  *
@@ -18,6 +22,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 export function ConfirmHost() {
   const styles = useThemedStyles(makeStyles);
   const insets = useSafeAreaInsets();
+  const {
+    height: screenH
+  } = useWindowDimensions();
   const [entry, setEntry] = useState(null);
 
   // 跟踪当前未决 entry,供 unmount cleanup resolve(false)。
@@ -48,20 +55,39 @@ export function ConfirmHost() {
     entry?.resolve(false);
     setEntry(null);
   }, [entry]);
+
+  // 遮罩自持淡入 / 淡出(不蹭 Modal 的位移动画,理由见下方 scrim 注释)。退场也要淡:
+  // entry 置 null 后 Modal 仍在滑出、本层仍挂载,不淡的话遮罩会在滑出末尾硬切消失。
+  const scrimOpacity = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    Animated.timing(scrimOpacity, {
+      toValue: entry ? 1 : 0,
+      duration: entry ? SCRIM_IN_MS : SCRIM_OUT_MS,
+      easing: Easing.out(Easing.quad),
+      useNativeDriver: true
+    }).start();
+  }, [entry, scrimOpacity]);
   return /*#__PURE__*/_jsx(Modal, {
     visible: !!entry,
     transparent: true,
     animationType: "slide",
     statusBarTranslucent: true,
     onRequestClose: handleCancel,
-    children: /*#__PURE__*/_jsx(Pressable, {
+    children: /*#__PURE__*/_jsxs(Pressable, {
       style: styles.backdrop,
       onPress: handleCancel
       // [M-16] accessible={false}:否则 backdrop 把整个子树合并成单一「关闭, 按钮」,
       // 遮蔽 sheet 内的 title/message/按钮。SR 取消路径走 cancel 按钮 + onRequestClose。
       ,
       accessible: false,
-      children: /*#__PURE__*/_jsx(Pressable, {
+      children: [/*#__PURE__*/_jsx(Animated.View, {
+        pointerEvents: "none",
+        style: [styles.scrim, {
+          top: -screenH,
+          opacity: scrimOpacity
+        }],
+        testID: "confirm-scrim"
+      }), /*#__PURE__*/_jsx(Pressable, {
         style: [styles.sheet, {
           paddingBottom: insets.bottom + space['7']
         }],
@@ -95,7 +121,7 @@ export function ConfirmHost() {
             })]
           })]
         }) : null
-      })
+      })]
     })
   });
 }

package/lib/module/components/ui/Confirm/ConfirmHost.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useEffect","useRef","useState","Modal","Pressable","Text","View","useSafeAreaInsets","space","useThemedStyles","Button","_subs","makeStyles","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","ConfirmHost","styles","insets","entry","setEntry","pendingRef","current","lastEntryRef","display","sub","next","add","delete","resolve","handleConfirm","handleCancel","visible","transparent","animationType","statusBarTranslucent","onRequestClose","children","style","backdrop","onPress","accessible","sheet","paddingBottom","bottom","body","title","accessibilityRole","message","actions","testID","label","cancelLabel","variant","block","confirmLabel","destructive"],"sourceRoot":"../../../../../src","sources":["components/ui/Confirm/ConfirmHost.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useCallback","useEffect","useRef","useState","Animated","Easing","Modal","Pressable","Text","View","useWindowDimensions","useSafeAreaInsets","space","useThemedStyles","Button","_subs","makeStyles","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","SCRIM_IN_MS","SCRIM_OUT_MS","ConfirmHost","styles","insets","height","screenH","entry","setEntry","pendingRef","current","lastEntryRef","display","sub","next","add","delete","resolve","handleConfirm","handleCancel","scrimOpacity","Value","timing","toValue","duration","easing","out","quad","useNativeDriver","start","visible","transparent","animationType","statusBarTranslucent","onRequestClose","children","style","backdrop","onPress","accessible","pointerEvents","scrim","top","opacity","testID","sheet","paddingBottom","bottom","body","title","accessibilityRole","message","actions","label","cancelLabel","variant","block","confirmLabel","destructive"],"sourceRoot":"../../../../../src","sources":["components/ui/Confirm/ConfirmHost.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/ui/Confirm/styles.js

@@ -3,13 +3,23 @@
 import { StyleSheet } from 'react-native';
 import { fw, r, space, type as t } from "../../../theme/index.js";
 /** Confirm 对话框 styles —— 原生 Modal(transparent + slide)底部弹出卡片:
- *  backdrop 半透黑铺满、点击取消;sheet 贴底圆角顶。不依赖 @gorhom。 */
+ *  backdrop 铺满、点击取消(**不挂半透黑** —— 见 ConfirmHost 的 scrim 注释);
+ *  scrim 半透黑独立一层;sheet 贴底圆角顶。不依赖 @gorhom。 */
 export const makeStyles = c => StyleSheet.create({
   backdrop: {
     flex: 1,
-    backgroundColor: c.scrim,
     justifyContent: 'flex-end'
   },
+  // 半透黑遮罩层(纯视觉,不接触控):绝对定位四边贴合 backdrop,`top` 由 ConfirmHost 内联
+  // 覆写成 -屏高(向上外扩一屏,盖住 Modal slide 位移期露出的顶部)。
+  scrim: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: c.scrim
+  },
   sheet: {
     backgroundColor: c.surface,
     borderTopLeftRadius: r(20),

package/lib/module/components/ui/Confirm/styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["StyleSheet","fw","r","space","type","t","makeStyles","c","create","backdrop","flex","backgroundColor","scrim","justifyContent","sheet","surface","borderTopLeftRadius","borderTopRightRadius","paddingTop","body","paddingHorizontal","gap","title","fontSize","heroSm","fontWeight","semi","color","foreground","letterSpacing","message","foregroundMuted","lineHeight","actions","flexDirection"],"sourceRoot":"../../../../../src","sources":["components/ui/Confirm/styles.ts"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,EAAE,EAAEC,CAAC,EAAEC,KAAK,EAAEC,IAAI,IAAIC,CAAC,QAAQ,yBAAgB;AAGxD;AACA;AACA,OAAO,MAAMC,UAAU,GAAIC,CAAc,IACvCP,UAAU,CAACQ,MAAM,CAAC;EAChBC,QAAQ,EAAE;IACRC,IAAI,EAAE,CAAC;IACPC,eAAe,EAAEJ,CAAC,CAACK,KAAK;IACxBC,cAAc,EAAE;EAClB,CAAC;EACDC,KAAK,EAAE;IACLH,eAAe,EAAEJ,CAAC,CAACQ,OAAO;IAC1BC,mBAAmB,EAAEd,CAAC,CAAC,EAAE,CAAC;IAC1Be,oBAAoB,EAAEf,CAAC,CAAC,EAAE,CAAC;IAC3BgB,UAAU,EAAEf,KAAK,CAAC,GAAG;EACvB,CAAC;EACDgB,IAAI,EAAE;IACJC,iBAAiB,EAAEjB,KAAK,CAAC,GAAG,CAAC;IAC7BkB,GAAG,EAAElB,KAAK,CAAC,GAAG;EAChB,CAAC;EACDmB,KAAK,EAAE;IACLC,QAAQ,EAAElB,CAAC,CAACmB,MAAM;IAClBC,UAAU,EAAExB,EAAE,CAACyB,IAAI;IACnBC,KAAK,EAAEpB,CAAC,CAACqB,UAAU;IACnBC,aAAa,EAAE,CAAC;EAClB,CAAC;EACDC,OAAO,EAAE;IACPP,QAAQ,EAAElB,CAAC,CAACc,IAAI;IAChBQ,KAAK,EAAEpB,CAAC,CAACwB,eAAe;IACxBC,UAAU,EAAE3B,CAAC,CAACc,IAAI,GAAG;EACvB,CAAC;EACDc,OAAO,EAAE;IACPC,aAAa,EAAE,KAAK;IACpBb,GAAG,EAAElB,KAAK,CAAC,GAAG,CAAC;IACfiB,iBAAiB,EAAEjB,KAAK,CAAC,GAAG,CAAC;IAC7Be,UAAU,EAAEf,KAAK,CAAC,GAAG;EACvB;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["StyleSheet","fw","r","space","type","t","makeStyles","c","create","backdrop","flex","justifyContent","scrim","position","top","left","right","bottom","backgroundColor","sheet","surface","borderTopLeftRadius","borderTopRightRadius","paddingTop","body","paddingHorizontal","gap","title","fontSize","heroSm","fontWeight","semi","color","foreground","letterSpacing","message","foregroundMuted","lineHeight","actions","flexDirection"],"sourceRoot":"../../../../../src","sources":["components/ui/Confirm/styles.ts"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,EAAE,EAAEC,CAAC,EAAEC,KAAK,EAAEC,IAAI,IAAIC,CAAC,QAAQ,yBAAgB;AAGxD;AACA;AACA;AACA,OAAO,MAAMC,UAAU,GAAIC,CAAc,IACvCP,UAAU,CAACQ,MAAM,CAAC;EAChBC,QAAQ,EAAE;IACRC,IAAI,EAAE,CAAC;IACPC,cAAc,EAAE;EAClB,CAAC;EACD;EACA;EACAC,KAAK,EAAE;IACLC,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,CAAC;IACNC,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE,CAAC;IACRC,MAAM,EAAE,CAAC;IACTC,eAAe,EAAEX,CAAC,CAACK;EACrB,CAAC;EACDO,KAAK,EAAE;IACLD,eAAe,EAAEX,CAAC,CAACa,OAAO;IAC1BC,mBAAmB,EAAEnB,CAAC,CAAC,EAAE,CAAC;IAC1BoB,oBAAoB,EAAEpB,CAAC,CAAC,EAAE,CAAC;IAC3BqB,UAAU,EAAEpB,KAAK,CAAC,GAAG;EACvB,CAAC;EACDqB,IAAI,EAAE;IACJC,iBAAiB,EAAEtB,KAAK,CAAC,GAAG,CAAC;IAC7BuB,GAAG,EAAEvB,KAAK,CAAC,GAAG;EAChB,CAAC;EACDwB,KAAK,EAAE;IACLC,QAAQ,EAAEvB,CAAC,CAACwB,MAAM;IAClBC,UAAU,EAAE7B,EAAE,CAAC8B,IAAI;IACnBC,KAAK,EAAEzB,CAAC,CAAC0B,UAAU;IACnBC,aAAa,EAAE,CAAC;EAClB,CAAC;EACDC,OAAO,EAAE;IACPP,QAAQ,EAAEvB,CAAC,CAACmB,IAAI;IAChBQ,KAAK,EAAEzB,CAAC,CAAC6B,eAAe;IACxBC,UAAU,EAAEhC,CAAC,CAACmB,IAAI,GAAG;EACvB,CAAC;EACDc,OAAO,EAAE;IACPC,aAAa,EAAE,KAAK;IACpBb,GAAG,EAAEvB,KAAK,CAAC,GAAG,CAAC;IACfsB,iBAAiB,EAAEtB,KAAK,CAAC,GAAG,CAAC;IAC7BoB,UAAU,EAAEpB,KAAK,CAAC,GAAG;EACvB;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/typescript/src/components/ui/Confirm/ConfirmHost.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmHost.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Confirm/ConfirmHost.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AASxE;;;;;;GAMG;AACH,wBAAgB,WAAW,IAAI,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CA0FtD"}
+{"version":3,"file":"ConfirmHost.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Confirm/ConfirmHost.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAqBxE;;;;;;GAMG;AACH,wBAAgB,WAAW,IAAI,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAmHtD"}

package/lib/typescript/src/components/ui/Confirm/styles.d.ts

@@ -1,12 +1,20 @@
 import type { ColorTokens } from '../../../theme';
 /** Confirm 对话框 styles —— 原生 Modal(transparent + slide)底部弹出卡片:
- *  backdrop 半透黑铺满、点击取消;sheet 贴底圆角顶。不依赖 @gorhom。 */
+ *  backdrop 铺满、点击取消(**不挂半透黑** —— 见 ConfirmHost 的 scrim 注释);
+ *  scrim 半透黑独立一层;sheet 贴底圆角顶。不依赖 @gorhom。 */
 export declare const makeStyles: (c: ColorTokens) => Readonly<{
     backdrop: {
         flex: number;
-        backgroundColor: string;
         justifyContent: "flex-end";
     };
+    scrim: {
+        position: "absolute";
+        top: number;
+        left: number;
+        right: number;
+        bottom: number;
+        backgroundColor: string;
+    };
     sheet: {
         backgroundColor: string;
         borderTopLeftRadius: number;

package/lib/typescript/src/components/ui/Confirm/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Confirm/styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD;mDACmD;AACnD,eAAO,MAAM,UAAU,GAAI,GAAG,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkCrC,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Confirm/styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD;;6CAE6C;AAC7C,eAAO,MAAM,UAAU,GAAI,GAAG,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2CrC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unif/react-native-design",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "Unif 设计系统:theme + icons + utils + components",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/components/ui/Confirm/ConfirmHost.tsx

@@ -1,5 +1,13 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { Modal, Pressable, Text, View } from 'react-native';
+import {
+  Animated,
+  Easing,
+  Modal,
+  Pressable,
+  Text,
+  View,
+  useWindowDimensions,
+} from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { space, useThemedStyles } from '../../../theme';
 import { Button } from '../Button';
@@ -7,6 +15,10 @@ import { _subs } from './confirm';
 import { makeStyles } from './styles';
 import type { ConfirmEntry, Subscriber } from './types';
 
+/** 遮罩淡入 / 淡出时长(ms)—— 出场略长于入场,与 Modal slide 退场(~300ms)大致同步收完。 */
+const SCRIM_IN_MS = 220;
+const SCRIM_OUT_MS = 260;
+
 /**
  * Confirm 对话框宿主 —— App 根挂一次,监听 `confirm()` 调用并渲染。
  *
@@ -17,6 +29,7 @@ import type { ConfirmEntry, Subscriber } from './types';
 export function ConfirmHost(): React.JSX.Element | null {
   const styles = useThemedStyles(makeStyles);
   const insets = useSafeAreaInsets();
+  const { height: screenH } = useWindowDimensions();
   const [entry, setEntry] = useState<ConfirmEntry | null>(null);
 
   // 跟踪当前未决 entry,供 unmount cleanup resolve(false)。
@@ -51,6 +64,18 @@ export function ConfirmHost(): React.JSX.Element | null {
     setEntry(null);
   }, [entry]);
 
+  // 遮罩自持淡入 / 淡出(不蹭 Modal 的位移动画,理由见下方 scrim 注释)。退场也要淡:
+  // entry 置 null 后 Modal 仍在滑出、本层仍挂载,不淡的话遮罩会在滑出末尾硬切消失。
+  const scrimOpacity = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    Animated.timing(scrimOpacity, {
+      toValue: entry ? 1 : 0,
+      duration: entry ? SCRIM_IN_MS : SCRIM_OUT_MS,
+      easing: Easing.out(Easing.quad),
+      useNativeDriver: true,
+    }).start();
+  }, [entry, scrimOpacity]);
+
   return (
     <Modal
       visible={!!entry}
@@ -67,6 +92,18 @@ export function ConfirmHost(): React.JSX.Element | null {
         // 遮蔽 sheet 内的 title/message/按钮。SR 取消路径走 cancel 按钮 + onRequestClose。
         accessible={false}
       >
+        {/* 半透黑遮罩 —— 两点都是必需的,少一点就露白:
+            ① **向上外扩一屏**:animationType="slide" 位移的是 Modal 的**整个容器**(遮罩也在其中),
+               位移 t 时屏幕 [0, t) 这段根本没有遮罩 —— 顶部挂着一条未压暗的白带,一路缩到动画
+               结束才没(缓出末段最慢,细白带在状态栏那儿赖得最久)。外扩后任意 t 都盖满视口。
+            ② **自持淡入淡出**:外扩解决了「盖不到」,但遮罩会随容器一起硬切出现 —— 故不蹭容器的
+               位移动画,自己走 opacity。sheet 的 slide 仍由 Modal 原生驱动。
+            pointerEvents=none:点击穿透到 backdrop(取消路径不变)。 */}
+        <Animated.View
+          pointerEvents="none"
+          style={[styles.scrim, { top: -screenH, opacity: scrimOpacity }]}
+          testID="confirm-scrim"
+        />
         <Pressable
           style={[styles.sheet, { paddingBottom: insets.bottom + space['7'] }]}
           onPress={() => {}}

package/src/components/ui/Confirm/styles.ts

@@ -3,14 +3,24 @@ import { fw, r, space, type as t } from '../../../theme';
 import type { ColorTokens } from '../../../theme';
 
 /** Confirm 对话框 styles —— 原生 Modal(transparent + slide)底部弹出卡片:
- *  backdrop 半透黑铺满、点击取消;sheet 贴底圆角顶。不依赖 @gorhom。 */
+ *  backdrop 铺满、点击取消(**不挂半透黑** —— 见 ConfirmHost 的 scrim 注释);
+ *  scrim 半透黑独立一层;sheet 贴底圆角顶。不依赖 @gorhom。 */
 export const makeStyles = (c: ColorTokens) =>
   StyleSheet.create({
     backdrop: {
       flex: 1,
-      backgroundColor: c.scrim,
       justifyContent: 'flex-end',
     },
+    // 半透黑遮罩层(纯视觉,不接触控):绝对定位四边贴合 backdrop,`top` 由 ConfirmHost 内联
+    // 覆写成 -屏高(向上外扩一屏,盖住 Modal slide 位移期露出的顶部)。
+    scrim: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: c.scrim,
+    },
     sheet: {
       backgroundColor: c.surface,
       borderTopLeftRadius: r(20),