release: v0.4.0 — React 适配器、loading链式id稳定、dragThreshold、RTL适配、dedupe插件
- React 适配器子包:@metona-team/metona-toast/react — useToast() hook + 声明式 <Toast /> 组件,组件卸载自动清理;react 为 optional peerDependency,主包保持零依赖 - loading 链式转换改原地 update:id 稳定不重建 DOM,转换后 duration 恢复默认自动关闭;update() 支持 duration 变更动态重启计时器 - _emit 幽灵实例修复:beforeShow 拦截后的 toast 不再注册进 _toasts - dragThreshold 配置项(默认 120px,原硬编码);RTL 容器 dir 属性 + 进度条/side 条/色条镜像 - dedupe 预设插件:相同 type+message 自动去重,支持 uninstall - jest 环境隔离测试独立成 tests/ssr.test.ts(resetModules 不再污染共享模块状态);新增 tests/setup.ts 补 TextEncoder - 文档:README/docs.html 补 React 适配器、dedupe、dragThreshold;CHANGELOG 更新;328 测试全过
This commit is contained in:
@@ -13,8 +13,8 @@
|
||||
- **11 种动画** — slide/fade/scale/bounce/flip/rotate/zoom/slideUp/slideDown/slideLeft/slideRight,每种效果明显不同
|
||||
- **主题系统** — light/dark/auto/warm 四种内置主题,支持 `registerTheme()` 注册自定义主题
|
||||
- **国际化** — 内置 zh-CN / en-US 完整翻译(去重优化),可通过 `addTranslations()` 扩展
|
||||
- **插件系统** — 3 款预设插件 (keyboard/persistence/accessibility) + 自定义插件
|
||||
- **可拖拽关闭** — 拖动 Toast 任意方向即可关闭
|
||||
- **插件系统** — 4 款预设插件 (keyboard/persistence/accessibility/dedupe) + 自定义插件
|
||||
- **可拖拽关闭** — 拖动 Toast 任意方向即可关闭,阈值可配置
|
||||
- **TypeScript** — 严格模式,源码级类型安全,类型从源码自动生成无手动维护
|
||||
- **全局错误回调** — `onError` 捕获所有钩子异常和定时器错误,方便接入监控系统
|
||||
|
||||
@@ -82,9 +82,11 @@ MeToast.info('系统维护中');
|
||||
// 带标题
|
||||
MeToast.success({ title: '保存成功', message: '文件已同步到云端' });
|
||||
|
||||
// 加载 → 成功链式转换
|
||||
// 加载 → 成功链式转换(原地更新同一实例,id 稳定)
|
||||
const loading = MeToast.loading('正在提交...');
|
||||
setTimeout(() => loading.success('提交成功!'), 2000);
|
||||
const toast = await wait();
|
||||
loading.success('提交成功!');
|
||||
// toast.id === loading.id
|
||||
|
||||
// Promise 风格
|
||||
await MeToast.promise(fetch('/api/data'), {
|
||||
@@ -105,6 +107,8 @@ MeToast.configure({
|
||||
animation: 'slide', // slide | fade | scale | bounce | flip | rotate | zoom | slideUp | slideDown | slideLeft | slideRight
|
||||
pauseOnHover: true, // 悬停暂停计时
|
||||
closeOnClick: true, // 点击关闭
|
||||
draggable: true, // 允许拖拽关闭
|
||||
dragThreshold: 120, // 拖拽关闭阈值(px)
|
||||
showProgress: true, // 显示进度条
|
||||
draggable: true, // 允许拖拽关闭
|
||||
locale: 'zh-CN', // 语言
|
||||
@@ -197,6 +201,7 @@ MeToast.stack(['消息1', '消息2', '消息3'], { stagger: 150 });
|
||||
MeToast.use('keyboard'); // ESC 关闭所有 Toast
|
||||
MeToast.use('persistence'); // 配置持久化到 localStorage
|
||||
MeToast.use('accessibility'); // 屏幕阅读器朗读公告
|
||||
MeToast.use('dedupe'); // 相同 type+message 自动去重(更新已有实例)
|
||||
|
||||
// 自定义插件(通过 install 中注册 Toast 生命周期钩子)
|
||||
import MeToast, { Toast } from '@metona-team/metona-toast';
|
||||
@@ -262,6 +267,40 @@ MeToast.configure({
|
||||
});
|
||||
```
|
||||
|
||||
## React 适配器
|
||||
|
||||
主包保持零依赖;React 适配器通过子路径导入,`react` 为 optional peerDependency。
|
||||
|
||||
```bash
|
||||
npm install @metona-team/metona-toast react
|
||||
```
|
||||
|
||||
```tsx
|
||||
import { useToast, Toast } from '@metona-team/metona-toast/react';
|
||||
|
||||
function SubmitButton() {
|
||||
// 本组件创建的 Toast 会在组件卸载时自动移除
|
||||
const toast = useToast();
|
||||
|
||||
const submit = async () => {
|
||||
const loading = toast.loading('正在提交...');
|
||||
try {
|
||||
await api.submit();
|
||||
loading.success('提交成功!');
|
||||
} catch (e) {
|
||||
loading.error('提交失败');
|
||||
}
|
||||
};
|
||||
|
||||
return <button onClick={submit}>提交</button>;
|
||||
}
|
||||
|
||||
// 声明式 Toast — props 变化时更新,组件卸载时自动移除
|
||||
function SaveIndicator({ saving }: { saving: boolean }) {
|
||||
return saving ? <Toast type="info" message="正在保存..." /> : null;
|
||||
}
|
||||
```
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
|
||||
Reference in New Issue
Block a user