refactor(components): notify 采用 runWithOwner 处理上下文环境

Author: caixw

packages/components/src/notify/alert/root.tsx

@@ -4,7 +4,6 @@
 
 import type { JSX } from 'solid-js';
 
-import { useLocale, useOptions } from '@components/context';
 import { Message, type Props as MessageProps, type Ref as MessageRef } from '@components/notify/message';
 
 export type Props = Omit<MessageProps, 'transitionDuration' | 'closeAriaLabel'>;
@@ -15,7 +14,5 @@ export type Ref = MessageRef;
  * 警告框
  */
 export function Root(props: Props): JSX.Element {
-	const l = useLocale();
-	const [opt] = useOptions();
-	return <Message {...props} transitionDuration={opt.getTransitionDuration()} closeAriaLabel={l.t('_c.close')} />;
+	return <Message {...props} />;
 }

packages/components/src/notify/message/message.tsx

@@ -11,6 +11,7 @@ import IconWarning from '~icons/material-symbols/error-rounded';
 import IconInfo from '~icons/material-symbols/info-rounded';
 
 import { type BaseProps, type BaseRef, joinClass, type Palette, type RefProps } from '@components/base';
+import { useLocale, useOptions } from '@components/context';
 import styles from './style.module.css';
 
 export const types = ['error', 'warning', 'success', 'info'] as const;
@@ -92,14 +93,6 @@ export interface Props extends BaseProps, RefProps<Ref> {
 	 * 在将当前组件从 DOM 中移除之前执行的操作，返回 true 将阻止后续的移除操作。
 	 */
 	onClose?: () => Promise<boolean | undefined>;
-
-	// 指定动画时间，因为在 notify 中使用了 render 渲染到 Portal 中，无法在 Message 中使用 useOptions 获取动画时长。
-	transitionDuration: number;
-
-	/**
-	 * 关闭按钮的 aria-label，与 transitionDuration 相同的理由，不能放在 Message 组件内部。
-	 */
-	closeAriaLabel?: string;
 }
 
 /**
@@ -108,6 +101,9 @@ export interface Props extends BaseProps, RefProps<Ref> {
 export function Message(props: Props): JSX.Element {
 	props = mergeProps({ type: 'info' as Type }, props);
 
+	const l = useLocale();
+	const [opt] = useOptions();
+
 	let rootRef: HTMLDivElement;
 	let buttonRef: HTMLButtonElement;
 
@@ -116,12 +112,12 @@ export function Message(props: Props): JSX.Element {
 			return;
 		}
 
-		if (!props.transitionDuration) {
+		if (!opt.getTransitionDuration()) {
 			return;
 		}
 
 		rootRef.style.height = '0';
-		await sleep(props.transitionDuration); // 待动画结束
+		await sleep(opt.getTransitionDuration()); // 待动画结束
 		rootRef.remove();
 	};
 
@@ -219,7 +215,7 @@ export function Message(props: Props): JSX.Element {
 							type="button"
 							class={styles['close-wrap']}
 							ref={el => (buttonRef = el)}
-							aria-label={props.closeAriaLabel}
+							aria-label={l.t('_c.close')}
 						>
 							<IconClose onClick={close} class={styles.close} />
 						</button>

packages/components/src/notify/notify/notify.tsx

@@ -3,12 +3,12 @@
 // SPDX-License-Identifier: MIT
 
 import { sleep } from '@cmfx/core';
-import type { JSX, ParentProps } from 'solid-js';
+import { type JSX, type ParentProps, getOwner, runWithOwner } from 'solid-js';
 import { Portal, render } from 'solid-js/web';
 
 import type { MountProps } from '@components/base';
 import { joinClass } from '@components/base';
-import { useLocale, useOptions } from '@components/context';
+import { useOptions } from '@components/context';
 import { Message, type Props as MessageProps, type Type } from '@components/notify/message';
 import styles from './style.module.css';
 
@@ -123,9 +123,9 @@ export function NotifyProvider(props: ParentProps & MountProps): JSX.Element {
 
 function init(): JSX.Element {
 	const [opt, origin] = useOptions();
-	const l = useLocale();
 	let topRef: HTMLDivElement;
 	let bottomRef: HTMLDivElement;
+	const owner = getOwner();
 
 	notifyInst = async (
 		title: string,
@@ -151,18 +151,14 @@ function init(): JSX.Element {
 			type,
 			duration: duration ?? opt.getStays(),
 			closable: true,
-
-			// 通知可能放在 ThemeProvider 之外，所以使用 useOptions 的值。
-			transitionDuration: opt.getTransitionDuration(),
-			closeAriaLabel: l.t('_c.close'),
 		};
 
 		switch (pos) {
 			case 'top':
-				render(() => <Message {...props} />, topRef);
+				runWithOwner(owner, () => render(() => <Message {...props} />, topRef));
 				break;
 			case 'bottom':
-				render(() => <Message {...props} />, bottomRef);
+				runWithOwner(owner, () => render(() => <Message {...props} />, bottomRef));
 		}
 	};