@unif/react-native-design 0.24.1 → 0.26.0

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

@@ -5,10 +5,17 @@ import type { ConfirmOptions } from './types';
  * Confirm 的纯状态机 —— 不含任何 React / 渲染依赖,可直接单测。
  *
  * 两条不变量:
- * 1. **唯一 owner** —— 同一时间只有一个 `<ConfirmHost />` 持有订阅。重复挂载拿到 `null`
- *    lease、永久惰性,不会出现两个 Host 争抢同一个 entry。
+ * 1. **单一活跃 owner + 栈式接管** —— 同一时间只有一个 `<ConfirmHost />` 收事件,但
+ *    后挂载者**接管**、前任入栈挂起,卸载时自动归还。RN `Modal` 是独立 native window,
+ *    根 Host 渲染的对话框会被 Modal 物理盖住(iOS 兄弟 Modal 更是不叠放),所以
+ *    「Modal 内自挂一个 Host」是唯一正解、必须是合法用法 —— 旧的 first-wins 把它判成
+ *    恒惰性死码,才是要修的东西。
  * 2. **唯一 active entry** —— 同一时间只有一个未决对话框。所有关闭路径(确认 / 取消 /
- *    backdrop / 系统返回 / Host 卸载 / subscriber 抛错)都汇聚到 `settle()`。
+ *    backdrop / 系统返回 / Host 卸载 / owner 切换 / subscriber 抛错)都汇聚到 `settle()`。
+ *
+ * 由 1 派生出一条关键不变量:**active entry 永远属于当前 owner**。owner 每次切换
+ * (接管或归还)前都把 active 排空为 `false`,因此挂起中的 owner 手里不可能有未决
+ * 对话框,恢复时也不会继承一个自己没见过 `show` 的槽位。
  *
  * `settle()` 用 **identity guard**(`active !== entry` 直接返回 false)而非 id 比较:
  * 旧 entry 的迟到回调拿着的是旧对象引用,永远匹配不上新 active,因此不可能误关新对话框。
@@ -32,13 +39,15 @@ export type ConfirmHostLease = {
   /**
    * Host 卸载。`heldEntry` 是 Host 当时手里那个未决 entry(没有则传 `null`)——
    * 只有它仍是 active 时才会被 settle 成 `false`,避免误伤后来的对话框。
+   * 幂等:重复调用、或本 owner 早已被接管者顶下去,都是无副作用的 no-op。
    */
   release(heldEntry: ConfirmEntry | null): void;
 };
 
 export type ConfirmStore = {
   request(options: ConfirmOptions): Promise<boolean>;
-  registerHost(subscriber: ConfirmSubscriber): ConfirmHostLease | null;
+  /** 挂载 Host。恒返回可用 lease —— 已有 owner 时走接管,不再拒绝。 */
+  registerHost(subscriber: ConfirmSubscriber): ConfirmHostLease;
   settle(entry: ConfirmEntry, result: boolean): boolean;
   activeEntry(): ConfirmEntry | null;
 };
@@ -49,6 +58,8 @@ export function createConfirmStore(log: Logger): ConfirmStore {
   let nextId = 0;
   let active: ConfirmEntry | null = null;
   let owner: Owner | null = null;
+  /** 被接管而挂起的前任,栈顶 = 最近一个。当前 owner 卸载时从这里恢复。 */
+  const suspended: Owner[] = [];
 
   function settle(entry: ConfirmEntry, result: boolean): boolean {
     if (entry.settled || active !== entry) return false;
@@ -88,7 +99,7 @@ export function createConfirmStore(log: Logger): ConfirmStore {
     const current = owner;
     if (!current?.subscriber) {
       log.warn(
-        'confirm() 调用时未挂载 <ConfirmHost />,对话框无法显示,已 resolve(false)。请在 app 根附近挂一次 <ConfirmHost />。'
+        'confirm() 调用时未挂载 <ConfirmHost />,对话框无法显示,已 resolve(false)。请在 app 根附近挂一个 <ConfirmHost />。'
       );
       return Promise.resolve(false);
     }
@@ -114,26 +125,63 @@ export function createConfirmStore(log: Logger): ConfirmStore {
     });
   }
 
-  function registerHost(
-    subscriber: ConfirmSubscriber
-  ): ConfirmHostLease | null {
-    if (owner) {
-      log.warn(
-        '检测到多个 <ConfirmHost />。只有第一个生效,重复挂载的实例保持惰性 —— 请在 app 根只挂一次。'
-      );
-      return null;
+  /**
+   * owner 切换前把 active 排空为 `false` —— Promise 不悬挂、单例槽不被带走。
+   *
+   * 每轮 settle 成功即 `active = null`,只有 clear 回调同步再 `request()` 时才会多转
+   * 一轮;settle 返回 false(排不动)立即退出,不给死循环留口子。
+   */
+  function drainActive(): void {
+    while (active) {
+      if (!settle(active, false)) break;
     }
+  }
+
+  /** 弹出最近一个仍可用的挂起 owner;抛错被作废的(subscriber 已置空)直接丢弃。 */
+  function popSuspended(): Owner | null {
+    while (suspended.length > 0) {
+      const next = suspended.pop();
+      if (next?.subscriber) return next;
+    }
+    return null;
+  }
+
+  function registerHost(subscriber: ConfirmSubscriber): ConfirmHostLease {
     const token = Symbol('ConfirmHostOwner');
     const self: Owner = { token, subscriber };
+    if (owner) {
+      // 先排空再换人:此刻前任仍是 owner,clear 事件正好发给它,它的对话框就地关闭。
+      // 顺序反过来(先换 owner 再 settle)clear 会误投给刚接管的新 Host。
+      drainActive();
+      // 排空期间 clear 回调若抛错,settle 已把前任作废(owner 置 null)—— 作废的不入栈,
+      // 免得恢复出一个死订阅;若回调期间又有人注册,入栈的就是那位,同样不丢。
+      const outgoing = owner;
+      if (outgoing) suspended.push(outgoing);
+    }
     owner = self;
     return {
       ownerToken: token,
       release(heldEntry: ConfirmEntry | null): void {
+        const index = suspended.indexOf(self);
+        if (index >= 0) {
+          // 乱序卸载(父 Modal 先于内层 Host 卸载):挂起者的 active 在被接管时已结算,
+          // 这里只把它摘出栈,绝不能碰当前 owner。
+          suspended.splice(index, 1);
+          self.subscriber = null;
+          return;
+        }
         if (owner?.token !== token) return;
         // 先摘订阅,再结算:settle 内部发的 clear 事件不应再回到正在卸载的 Host。
         self.subscriber = null;
         owner = null;
         if (heldEntry) settle(heldEntry, false);
+        const successor = popSuspended();
+        if (successor) {
+          // 归还前再排空一次:前任没见过残留 entry 的 show,不能让它继承一个锁死的槽。
+          // 此刻 owner 为 null,排空不会发出任何 clear。
+          drainActive();
+          owner = successor;
+        }
       },
     };
   }

package/src/components/ui/Toast/ToastHost.tsx

@@ -27,9 +27,13 @@ type DeliveryIdentity = {
 };
 
 /**
- * 在根附近挂**一次**。监听 toast() 调用并渲染当前 toast。
+ * 在根附近挂一个。监听 toast() 调用并渲染当前 toast。
  * 同一时间只显示一条 —— 新的会替换旧的(latest-wins)。
  *
+ * 栈式 owner:后挂载的实例接管投递,前任挂起并收起当前 toast;接管者卸载后自动归还。
+ * 因此**允许**在自己的 `Modal` 里再挂一个 —— RN `Modal` 是独立 native window,根 Host
+ * 的 toast 会被它物理盖住,内层自挂才看得见。
+ *
  * 位置由 `entry.position`('top' / 'bottom' / 'center')决定,top/bottom 自动避让
  * safe-area;进入动画方向随位置(top 从上滑、bottom/center 从下滑)。
  *
@@ -66,7 +70,21 @@ export function ToastHost({
       };
       setDelivery(next);
     };
-    const lease = registerToastHost(subscriber);
+    // 被后挂载的 Host 接管:立刻收起当前 toast。store 已丢弃这次投递,自身的退场
+    // timer 从此过不了 CAS —— 不主动清,这条 toast 会冻在屏幕上直到本 Host 卸载。
+    const clearOnSuspend = () => {
+      currentDeliveryRef.current = null;
+      if (dismissTimer.current) {
+        clearTimeout(dismissTimer.current);
+        dismissTimer.current = null;
+      }
+      cancelAnimation(op);
+      cancelAnimation(ty);
+      setDelivery(null);
+    };
+    const lease = registerToastHost(subscriber, clearOnSuspend);
+    // null lease 只剩一种成因:补投 pending 时 subscriber 抛错,本 owner 当场被作废
+    //(不再是「重复挂载」—— 那条现在走接管)。惰性到卸载为止。
     if (!lease) {
       setInert(true);
       return;

package/src/components/ui/Toast/ToastHost.web.tsx

@@ -34,6 +34,7 @@ type DeliveryIdentity = {
  * - opacity 0→1 + translateY 8→0 入场(motion.base ms)
  * - 停留 entry.duration ms
  * - opacity 1→0 + translateY 0→8 退场后 unmount
+ * - 栈式 owner:后挂载者接管、前任挂起并收起 toast,接管者卸载后自动归还
  *
  * 竞态纪律与 native 版一致:timer / RAF 在改 UI 或上报完成前,都要同时通过同步 ref
  * 与 `isCurrentToastDelivery(delivery)` 两道校验。
@@ -79,7 +80,16 @@ export function ToastHost({
       };
       setDelivery(next);
     };
-    const lease = registerToastHost(subscriber);
+    // 被后挂载的 Host 接管:立刻收起当前 toast。store 已丢弃这次投递,自身的退场
+    // timer/RAF 从此过不了 CAS —— 不主动清,这条 toast 会冻在屏幕上直到本 Host 卸载。
+    const clearOnSuspend = () => {
+      currentDeliveryRef.current = null;
+      cancelCallbacks();
+      setDelivery(null);
+    };
+    const lease = registerToastHost(subscriber, clearOnSuspend);
+    // null lease 只剩一种成因:补投 pending 时 subscriber 抛错,本 owner 当场被作废
+    //(不再是「重复挂载」—— 那条现在走接管)。惰性到卸载为止。
     if (!lease) {
       setInert(true);
       return;

package/src/components/ui/Toast/store.ts

@@ -17,6 +17,18 @@ import type { ToastEntry } from './types';
  *
  * `leaseId` 单调递增,同一 entry 被重新投递(Host 重挂)也会拿到新的 leaseId ——
  * 仅比较 entry.id 不足以区分「同一条消息的两次投递」。
+ *
+ * **栈式 owner**(与 Confirm 同构):后挂载的 Host 接管投递,前任入栈挂起并收到 clear,
+ * 接管者卸载后自动归还。RN `Modal` 是独立 native window,根 Host 渲染的 toast 会被
+ * Modal 物理盖住,只有「Modal 内自挂一个 Host」能显示 —— 旧的 first-wins 把这条唯一
+ * 正解判成恒惰性死码。
+ *
+ * 两个方向对在途 toast 的处理**刻意不同**:
+ * - **接管**(有人挂到我上面)→ 在途 toast **丢弃**。它属于「已经被盖住的过去」,
+ *   搬到接管者身上重放没有意义。
+ * - **归还**(接管者卸载、我恢复)→ 在途 toast **整条交回、立即重投**。
+ *   「Modal 内操作成功 → toast → 关窗」是最常见的一条路径,那条 toast 刚发出、用户
+ *   一眼都还没看到;丢掉的话比不挂内层 Host 还糟。不追剩余时长,重投 = 完整重播一遍。
  */
 
 export type ToastDelivery = {
@@ -27,27 +39,49 @@ export type ToastDelivery = {
 
 export type ToastSubscriber = (delivery: ToastDelivery) => void;
 
+/**
+ * owner 被接管 / 归还时的撤回通知 —— 对应 Confirm 的 `clear` 事件。
+ *
+ * 没有它,挂起中的 Host 会把最后一条 toast **冻在屏幕上**:store 已丢弃那次投递,
+ * Host 自己的退场 timer 过不了 `isCurrent` CAS,永远走不到清 UI 那一步。
+ */
+export type ToastClearSubscriber = () => void;
+
 export type ToastHostLease = {
   readonly ownerToken: symbol;
+  /** Host 卸载。幂等:重复调用、或本 owner 已被摘掉,都是无副作用的 no-op。 */
   release(): void;
 };
 
 export type ToastStore = {
   publish(entry: ToastEntry): void;
-  registerHost(subscriber: ToastSubscriber): ToastHostLease | null;
+  /**
+   * 挂载 Host。已有 owner 时走接管(不再拒绝);返回 `null` 只剩一种含义 ——
+   * 补投 pending 时 subscriber 抛错,这个 owner 当场就被作废了。
+   */
+  registerHost(
+    subscriber: ToastSubscriber,
+    onClear?: ToastClearSubscriber
+  ): ToastHostLease | null;
   complete(ownerToken: symbol, leaseId: number, entryId: number): boolean;
   isCurrent(delivery: ToastDelivery): boolean;
   pendingEntry(): ToastEntry | null;
   currentDelivery(): ToastDelivery | null;
 };
 
-type Owner = { token: symbol; subscriber: ToastSubscriber | null };
+type Owner = {
+  token: symbol;
+  subscriber: ToastSubscriber | null;
+  onClear: ToastClearSubscriber | null;
+};
 
 export function createToastStore(log: Logger): ToastStore {
   let pending: ToastEntry | null = null;
   let delivered: ToastDelivery | null = null;
   let owner: Owner | null = null;
   let leaseCounter = 0;
+  /** 被接管而挂起的前任,栈顶 = 最近一个。当前 owner 卸载时从这里恢复。 */
+  const suspended: Owner[] = [];
 
   function beginDelivery(entry: ToastEntry, capturedOwner: Owner): void {
     const delivery: ToastDelivery = {
@@ -85,30 +119,92 @@ export function createToastStore(log: Logger): ToastStore {
     beginDelivery(entry, current);
   }
 
-  function registerHost(subscriber: ToastSubscriber): ToastHostLease | null {
-    if (owner) {
-      log.warn(
-        '检测到多个 <ToastHost />。只有第一个生效,重复挂载的实例保持惰性 —— 请在 app 根只挂一次。'
-      );
-      return null;
+  /** 把前任降为挂起态:丢弃它的在途投递,并通知它收起屏幕上那条 toast。 */
+  function suspendOwner(target: Owner): void {
+    // 不回退到 pending —— 否则接管者一挂上就把前任那条补投一遍(跨 owner 重放)。
+    if (delivered?.ownerToken === target.token) delivered = null;
+    const notify = target.onClear;
+    if (!notify) return;
+    try {
+      notify();
+    } catch (error) {
+      log.error('ToastHost clear 回调抛错', error);
+      // 坏 Host 就地作废:留在栈里也只会在恢复时接着抛。
+      target.subscriber = null;
+      target.onClear = null;
+    }
+  }
+
+  /** 弹出最近一个仍可用的挂起 owner;抛错被作废的(subscriber 已置空)直接丢弃。 */
+  function popSuspended(): Owner | null {
+    while (suspended.length > 0) {
+      const next = suspended.pop();
+      if (next?.subscriber) return next;
     }
+    return null;
+  }
+
+  /** 刚上任的 owner 在首投里抛错被作废:继续往下弹,别把栈里剩下的人一起埋掉。 */
+  function resumeAfterFailedInstall(): void {
+    const fallback = popSuspended();
+    if (fallback) owner = fallback;
+  }
+
+  function registerHost(
+    subscriber: ToastSubscriber,
+    onClear?: ToastClearSubscriber
+  ): ToastHostLease | null {
     const token = Symbol('ToastHostOwner');
-    const self: Owner = { token, subscriber };
+    const self: Owner = { token, subscriber, onClear: onClear ?? null };
+    const previous = owner;
+    // 先换 owner 再通知前任:clear 回调里同步 publish() 的那条应当投给**接管者**,
+    // 投给正在退场的前任会立刻变成一条冻在屏幕上的孤儿 toast。
+    //(Confirm 那侧顺序相反 —— 它的 clear 由 settle 发给当时的 owner,必须先排空。)
     owner = self;
+    if (previous) {
+      suspendOwner(previous);
+      // clear 回调抛错作废的前任不入栈,免得恢复出一个死订阅。
+      if (previous.subscriber) suspended.push(previous);
+    }
     if (pending) beginDelivery(pending, self);
-    // 首投期间 subscriber 抛错会把 owner 作废 —— 此时不能发出可用的 lease。
-    if (owner?.token !== token) return null;
+    // 首投期间 subscriber 抛错会把 owner 作废 —— 此时不能发出可用的 lease,
+    // 并且要立刻把刚挂起的前任放回 owner,否则栈里的人再也醒不过来。
+    if (owner?.token !== token) {
+      resumeAfterFailedInstall();
+      return null;
+    }
     return {
       ownerToken: token,
       release(): void {
+        const index = suspended.indexOf(self);
+        if (index >= 0) {
+          // 乱序卸载(父 Modal 先于内层 Host 卸载):挂起者的在途投递在被接管时已丢弃,
+          // 这里只把它摘出栈,绝不能碰当前 owner。
+          suspended.splice(index, 1);
+          self.subscriber = null;
+          self.onClear = null;
+          return;
+        }
         if (owner?.token !== token) return;
         self.subscriber = null;
+        self.onClear = null;
         owner = null;
-        if (delivered?.ownerToken === token) {
-          // 未完成的投递退回 pending,让下一个 Host 能补投;但更新的 pending 优先。
-          if (!pending) pending = delivered.entry;
-          delivered = null;
-        }
+        const mine = delivered?.ownerToken === token ? delivered : null;
+        if (mine) delivered = null;
+        // 归还方向**不丢**在途 toast —— 与接管方向相反,这条区分是有实证的:
+        // 「Modal 内操作成功 → toast → setVisible(false)」是最常见的一条路径,
+        // 内层 Host 跟着 Modal 一起卸载,这条 toast 刚发出、用户一眼都没看到。
+        // 接管方向丢弃是因为前任那条属于「已经被盖住的过去」;归还方向是把刚发生的
+        // 事情**交回上一层**,不是跨 owner 重放。整条交回、不追剩余时长 —— 这正是
+        // 既有的「owner A 卸载后 B 拿到同一 entry、新 leaseId」形态。
+        if (mine && !pending) pending = mine.entry;
+        const successor = popSuspended();
+        if (!successor) return;
+        owner = successor;
+        // 有人接手就当场重投(新 ownerToken + 新 leaseId,前任的迟到回调仍认不出它);
+        // 没人接手时它就停在 pending,等下一个挂上来的 Host 补投 —— 既有语义不变。
+        if (pending) beginDelivery(pending, successor);
+        if (owner?.token !== successor.token) resumeAfterFailedInstall();
       },
     };
   }

package/src/components/ui/Toast/toast.ts

@@ -56,7 +56,8 @@ function emit(input: ToastInput, kind: ToastKind = 'info') {
 }
 
 /**
- * 命令式 toast API。在 app 根附近挂一次 `<ToastHost />` 即可。
+ * 命令式 toast API。在 app 根附近挂一个 `<ToastHost />` 即可;需要在 `Modal` 里显示
+ * 时可在 Modal 内再挂一个,它会接管、关闭后自动归还。
  *
  * toast('已切换到日报');
  * toast.success('订单提交成功');
@@ -69,7 +70,7 @@ export const toast = Object.assign((input: ToastInput) => emit(input, 'info'), {
   error: (input: ToastInput) => emit(input, 'error'),
 });
 
-/** 内部:ToastHost 挂载时注册唯一 owner;重复挂载得到 null。 */
+/** 内部:ToastHost 挂载时接管 owner;前任入栈挂起,本 lease 释放时归还。 */
 export const registerToastHost = store.registerHost;
 
 /** 内部:三重身份 CAS —— owner token + leaseId + entry id 全对才算完成。 */

package/src/icons/data.ts

@@ -76,6 +76,7 @@ export type IconName =
   | 'menu'
   | 'mic-on'
   | 'mic'
+  | 'minimize'
   | 'more-h'
   | 'more-v'
   | 'order'
@@ -1509,6 +1510,15 @@ export const ICONS: Record<IconName, IconDef> = {
       },
     ],
   },
+  'minimize': {
+    strokeWidth: 1.75,
+    elements: [
+      {
+        kind: 'path',
+        d: 'M4 14h6v6M20 10h-6V4M14 10l7-7M3 21l7-7',
+      },
+    ],
+  },
   'more-h': {
     strokeWidth: 1.75,
     elements: [
@@ -2566,6 +2576,7 @@ export const ICON_NAMES: IconName[] = [
   'menu',
   'mic-on',
   'mic',
+  'minimize',
   'more-h',
   'more-v',
   'order',