@alicloud/xconsole-rc-dialog2 v1.0.0

@alicloud/xconsole-rc-dialog2

对 @alicloud/console-base-rc-dialog 的 XConsole UI 转接。

有了它，Fusion Dialog、SlidePanel 等都可以不需要了。

绝对好用，任何问题联系 @驳是。

简介

引入

XConsole 3 的用户，这样使用：

import {
  Dialog2
} from '@alicloud/xconsole';

非 XConsole 的用户，建议直接使用 @alicloud/console-base-rc-dialog。

输出

总的输出是 Dialog2 组件，它上边挂载了一些静态组件、方法和 hook，如下

// 默认输出组件
Dialog2
 ├── AltWrap
 ├── openIndirect
 ├── open
 ├── slide
 ├── slideUp
 ├── alert
 ├── confirm
 ├── prompt
 └── useDialog
// 枚举
Dialog2Mode
Dialog2Size
// 类型
Dialog2IndirectPromise
Dialog2Props
Dialog2AlertProps
Dialog2ConfirmProps
Dialog2PromptProps
Dialog2ButtonProps
Dialog2AlertExtra
Dialog2ConfirmExtra
Dialog2PromptExtra

如何使用

你可以当成组件来使用，但你需要自己控制是否渲染它。通常作为一次性消费品来说，这很不好用。更多的是建议用这边封装好的便捷方法：

• openIndirect - 高阶用法，用于将多个 Dialog 合并为一个 Dialog 的场景，比如控制台下的 ErrorPrompt 就是用的它
• open - 打开一个 Dialog，在关闭后返回 Promise，可以指定 Promise 的返回值，也可以用 mode 指定展示模式
• slide - 右侧抽屉
• slideUp - 从页面底部出来的抽屉
• alert - window.alert 的替代，返回 Promise<void>，比只能传对象的 Fusion 好用
• confirm - window.confirm 的替代，返回 Promise<boolean>，比只能传对象的 Fusion 好用
• prompt - window.prompt 的替代，返回 Promise<string>，比只能传对象的 Fusion 好用

重点介绍 - useDialog

在 Dialog 的内容组件中，可以通过它获得与 Dialog 交互的能力，可以用来做以下事情：

• 锁定、解锁 Dialog，使其可以短期无法被关闭
• 关闭 Dialog（将解决 Promise）
• 更新 Dialog 的内容、按钮等
• 强制更新 Dialog，如更新 data 之后需要让 Dialog 重新渲染

FAQ

ok、cancel、onOk、onCancel？

没有，不需要。默认，你只需要写一个 button 的 label 即可，点击后会关掉 Dialog（这解决了你 75% 的工作），你也可以在 buttons 的 onClick 里处理有关的事情，然后选择是否关闭 Dialog。 总的来说，Dialog 没有 ok 或 cancel 这一说，对它来说，是 buttons，从而也没有 onOk、onCancel，这样的局限性太大了。

可否以组件的形式使用？

当然可以，毫无压力。

内容与 Dialog 如何交互？

内容组件以 props.content 传递给 Dialog，在内容组件中通过 useDialog 可以获得与 Dialog 交互的句柄，useDialog() 得到以下对象：

export interface IContextForContent<R = void, D = TDialogData> {
  data: D; // 存于 dialog 上的自定义数据
  focus(): void; // 触发默认的 focus，比如在 content 发生变化后，可以用它来使 conetnt 中的默认元素获得焦点
  resetScrollTop(): void; // content 发生变化后，可以重置滚动
  lock: TDispatchLock; // 锁住 Dialog，使其无论如何不可能被关闭，`lock(true)` 可以给默认按钮一个 loading 效果
  unlock(): void; // 解锁，lock 后必须 unlock
  update: TDispatchUpdateProps<R, D>; // 更新 Dialog 整体
  updateData: TDispatchUpdateData<D>; // 更新自定义数据，会触发重新 render
  forceUpdate(): void; // 强制重新 render，有的时候需要
  close: TFnCloseWithResult<R>; // 关闭 Dialog，将触发 Promise Resolve
}