更新 Drawer/Message/Notification/Dialog 等组件文档

src/dialog/defaultProps.ts

@@ -5,13 +5,22 @@
 import { TdDialogProps } from './type';
 
 export const dialogDefaultProps: TdDialogProps = {
+  attach: '',
+  body: '',
+  cancelBtn: '',
   closeBtn: true,
+  closeOnEscKeydown: undefined,
+  closeOnOverlayClick: undefined,
+  confirmBtn: '',
   destroyOnClose: false,
   draggable: false,
+  footer: true,
+  header: true,
   mode: 'modal',
   placement: 'top',
   preventScrollThrough: true,
   showInAttachedElement: false,
   showOverlay: true,
   theme: 'default',
+  visible: false,
 };

src/dialog/dialog.en-US.md

@@ -59,8 +59,6 @@ update | `(props: DialogOptions)` | \- | \-
 
 ### dialog 或 DialogPlugin
 
-这是一个插件函数，参数形式为顺序参数（形如：(a, b, c)），而非对象参数（形如：({ a, b, c })）。顺序参数如下，
-
 name | params | default | description
 -- | -- | -- | --
 options | \- | - | Typescript：`DialogOptions`
@@ -69,16 +67,12 @@ options | \- | - | Typescript：`DialogOptions`
 
 ### dialog.confirm 或 DialogPlugin.confirm
 
-这是一个插件函数，参数形式为顺序参数（形如：(a, b, c)），而非对象参数（形如：({ a, b, c })）。顺序参数如下，
-
 name | params | default | description
 -- | -- | -- | --
 options | \- | - | Typescript：`DialogOptions`
 
 ### dialog.alert 或 DialogPlugin.alert
 
-这是一个插件函数，参数形式为顺序参数（形如：(a, b, c)），而非对象参数（形如：({ a, b, c })）。顺序参数如下，
-
 name | params | default | description
 -- | -- | -- | --
 options | Object | - | Typescript：`Omit<DialogOptions, 'cancelBtn'>`

src/dialog/dialog.md

@@ -80,8 +80,6 @@ update | `(props: DialogOptions)` | \- | 更新弹框内容
 
 ### dialog 或 DialogPlugin
 
-这是一个插件函数，参数形式为顺序参数（形如：(a, b, c)），而非对象参数（形如：({ a, b, c })）。顺序参数如下，
-
 参数名称 | 参数类型 | 参数默认值 | 参数说明
 -- | -- | -- | --
 options | \- | - | TS 类型：`DialogOptions`
@@ -90,16 +88,12 @@ options | \- | - | TS 类型：`DialogOptions`
 
 ### dialog.confirm 或 DialogPlugin.confirm
 
-这是一个插件函数，参数形式为顺序参数（形如：(a, b, c)），而非对象参数（形如：({ a, b, c })）。顺序参数如下，
-
 参数名称 | 参数类型 | 参数默认值 | 参数说明
 -- | -- | -- | --
 options | \- | - | TS 类型：`DialogOptions`
 
 ### dialog.alert 或 DialogPlugin.alert
 
-这是一个插件函数，参数形式为顺序参数（形如：(a, b, c)），而非对象参数（形如：({ a, b, c })）。顺序参数如下，
-
 参数名称 | 参数类型 | 参数默认值 | 参数说明
 -- | -- | -- | --
 options | Object | - | TS 类型：`Omit<DialogOptions, 'cancelBtn'>`

src/dialog/type.ts

@@ -71,10 +71,10 @@ export interface TdDialogProps {
    */
   header?: TNode;
   /**
-   * 对话框类型，有三种：模态对话框、非模态对话框和普通对话框。弹出「模态对话框」时，只能操作对话框里面的内容，不能操作其他内容。弹出「非模态对话框」时，则可以操作页面内所有内容。「普通对话框」是指没有脱离文档流的对话框，可以在这个基础上开发更多的插件
+   * 对话框类型，有 4 种：模态对话框、非模态对话框、普通对话框、全屏对话框。弹出「模态对话框」时，只能操作对话框里面的内容，不能操作其他内容。弹出「非模态对话框」时，则可以操作页面内所有内容。「普通对话框」是指没有脱离文档流的对话框，可以在这个基础上开发更多的插件
    * @default modal
    */
-  mode?: 'modal' | 'modeless' | 'normal';
+  mode?: 'modal' | 'modeless' | 'normal' | 'full-screen';
   /**
    * 对话框位置，内置两种：垂直水平居中显示 和 靠近顶部（top:20%）显示。默认情况，为避免贴顶或贴底，顶部和底部距离最小为 `48px`，可通过调整 `top` 覆盖默认大小
    * @default top
@@ -86,7 +86,7 @@ export interface TdDialogProps {
    */
   preventScrollThrough?: boolean;
   /**
-   * 【开发中】仅在挂载元素中显示抽屉，默认在浏览器可视区域显示。父元素需要有定位属性，如：position: relative
+   * 仅在挂载元素中显示抽屉，默认在浏览器可视区域显示。父元素需要有定位属性，如：position: relative
    * @default false
    */
   showInAttachedElement?: boolean;
@@ -172,19 +172,19 @@ export interface DialogInstance {
   /**
    * 销毁弹框
    */
-  destroy: () => void;
+  destroy?: () => void;
   /**
    * 隐藏弹框
    */
-  hide: () => void;
+  hide?: () => void;
   /**
    * 显示弹框
    */
-  show: () => void;
+  show?: () => void;
   /**
    * 更新弹框内容
    */
-  update: (props: DialogOptions) => void;
+  update?: (props: DialogOptions) => void;
 }
 
 export type DialogEventSource = 'esc' | 'close-btn' | 'cancel' | 'overlay';

src/drawer/defaultProps.ts

@@ -5,7 +5,11 @@
 import { TdDrawerProps } from './type';
 
 export const drawerDefaultProps: TdDrawerProps = {
-  closeBtn: true,
+  attach: '',
+  cancelBtn: '',
+  closeOnEscKeydown: undefined,
+  closeOnOverlayClick: undefined,
+  confirmBtn: '',
   destroyOnClose: false,
   footer: true,
   header: true,
@@ -14,6 +18,7 @@ export const drawerDefaultProps: TdDrawerProps = {
   preventScrollThrough: true,
   showInAttachedElement: false,
   showOverlay: true,
+  size: undefined,
   sizeDraggable: false,
   visible: false,
 };

src/drawer/drawer.en-US.md

@@ -1,7 +1,6 @@
 :: BASE_DOC ::
 
 ## API
-
 ### Drawer Props
 
 name | type | default | description | required
@@ -34,3 +33,27 @@ onCloseBtnClick | Function |  | Typescript：`(context: { e: MouseEvent }) => vo
 onConfirm | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
 onEscKeydown | Function |  | Typescript：`(context: { e: KeyboardEvent }) => void`<br/> | N
 onOverlayClick | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
+
+### DrawerOptions
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+attach | String / Function | 'body' | Typescript：`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+className | String | - | \- | N
+style | Object | - | Typescript：`Styles`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+`Omit<DrawerProps, 'attach'>` | \- | - | \- | N
+
+### DrawerInstance
+
+name | params | return | description
+-- | -- | -- | --
+destroy | \- | \- | \-
+hide | \- | \- | \-
+show | \- | \- | \-
+update | `(props: DrawerOptions)` | \- | \-
+
+### drawer 或 DrawerPlugin
+
+name | params | default | description
+-- | -- | -- | --
+options | \- | - | Typescript：`DrawerOptions`

src/drawer/drawer.md

@@ -33,3 +33,27 @@ onCloseBtnClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => voi
 onConfirm | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>如果“确认”按钮存在，则点击“确认”按钮时触发 | N
 onEscKeydown | Function |  | TS 类型：`(context: { e: KeyboardEvent }) => void`<br/>按下 ESC 键时触发 | N
 onOverlayClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>如果蒙层存在，点击蒙层时触发 | N
+
+### DrawerOptions
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+attach | String / Function | 'body' | 抽屉挂载的节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+className | String | - | 抽屉类名，示例：'t-class-drawer-first t-class-drawer-second' | N
+style | Object | - | 弹框 style 属性，输入 [CSSStyleDeclaration.cssText](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/cssText)。TS 类型：`Styles`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+`Omit<DrawerProps, 'attach'>` | \- | - | 继承 `Omit<DrawerProps, 'attach'>` 中的全部 API | N
+
+### DrawerInstance
+
+名称 | 参数 | 返回值 | 描述
+-- | -- | -- | --
+destroy | \- | \- | 销毁抽屉
+hide | \- | \- | 隐藏抽屉
+show | \- | \- | 显示抽屉
+update | `(props: DrawerOptions)` | \- | 更新抽屉内容
+
+### drawer 或 DrawerPlugin
+
+参数名称 | 参数类型 | 参数默认值 | 参数说明
+-- | -- | -- | --
+options | \- | - | TS 类型：`DrawerOptions`

src/drawer/type.ts

@@ -5,7 +5,7 @@
  * */
 
 import { ButtonProps } from '../button';
-import { TNode, AttachNode } from '../common';
+import { TNode, Styles, AttachNode } from '../common';
 import { MouseEvent, KeyboardEvent } from 'react';
 
 export interface TdDrawerProps {
@@ -29,17 +29,14 @@ export interface TdDrawerProps {
   children?: TNode;
   /**
    * 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。值类型为 TNode，则表示呈现自定义按钮示例
-   * @default true
    */
   closeBtn?: TNode;
   /**
    * 按下 ESC 时是否触发抽屉关闭事件
-   * @default true
    */
   closeOnEscKeydown?: boolean;
   /**
    * 点击蒙层时是否触发抽屉关闭事件
-   * @default true
    */
   closeOnOverlayClick?: boolean;
   /**
@@ -89,7 +86,6 @@ export interface TdDrawerProps {
   showOverlay?: boolean;
   /**
    * 尺寸，支持 'small', 'medium', 'large'，'35px', '30%',  '3em' 等。纵向抽屉调整的是抽屉宽度，横向抽屉调整的是抽屉高度
-   * @default small
    */
   size?: string;
   /**
@@ -132,6 +128,42 @@ export interface TdDrawerProps {
   onOverlayClick?: (context: { e: MouseEvent<HTMLDivElement> }) => void;
 }
 
+export interface DrawerOptions extends Omit<TdDrawerProps, 'attach'> {
+  /**
+   * 抽屉挂载的节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body
+   * @default 'body'
+   */
+  attach?: AttachNode;
+  /**
+   * 抽屉类名，示例：'t-class-drawer-first t-class-drawer-second'
+   * @default ''
+   */
+  className?: string;
+  /**
+   * 弹框 style 属性，输入 [CSSStyleDeclaration.cssText](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/cssText)
+   */
+  style?: Styles;
+}
+
+export interface DrawerInstance {
+  /**
+   * 销毁抽屉
+   */
+  destroy?: () => void;
+  /**
+   * 隐藏抽屉
+   */
+  hide?: () => void;
+  /**
+   * 显示抽屉
+   */
+  show?: () => void;
+  /**
+   * 更新抽屉内容
+   */
+  update?: (props: DrawerOptions) => void;
+}
+
 export type FooterButton = string | ButtonProps | TNode;
 
 export type DrawerEventSource = 'esc' | 'close-btn' | 'cancel' | 'overlay';
@@ -140,3 +172,5 @@ export interface DrawerCloseContext {
   trigger: DrawerEventSource;
   e: MouseEvent<HTMLDivElement | HTMLButtonElement> | KeyboardEvent<HTMLDivElement>;
 }
+
+export type DrawerMethod = (options?: DrawerOptions) => void;

src/message/message.en-US.md

@@ -12,7 +12,7 @@ content | TNode | - | Typescript：`string \| TNode`。[see more ts definition](
 duration | Number | 3000 | \- | N
 icon | TNode | true | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 theme | String | info | options：info/success/warning/error/question/loading。Typescript：`MessageThemeList` `type MessageThemeList = 'info' \| 'success' \| 'warning' \| 'error' \| 'question' \| 'loading'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/message/type.ts) | N
-onClose | Function |  | Typescript：`(context?: { trigger: 'duration' \| 'close-click' }) => void`<br/>close message event | N
+onClose | Function |  | Typescript：`(context: { trigger: 'close-click' \| 'duration-end', e?: MouseEvent }) => void`<br/>close message event | N
 onCloseBtnClick | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
 onDurationEnd | Function |  | Typescript：`() => void`<br/> | N
 
@@ -30,8 +30,6 @@ zIndex | Number | 5000 | \- | N
 
 ### message 或 MessagePlugin
 
-这是一个插件函数，参数形式为顺序参数（形如：(a, b, c)），而非对象参数（形如：({ a, b, c })）。顺序参数如下，
-
 name | params | default | description
 -- | -- | -- | --
 theme | String | - | required。Typescript：`MessageThemeList`
@@ -40,70 +38,54 @@ duration | Number | 3000 | \-
 
 ### message.info 或 MessagePlugin.info
 
-这是一个插件函数，参数形式为顺序参数（形如：(a, b, c)），而非对象参数（形如：({ a, b, c })）。顺序参数如下，
-
 name | params | default | description
 -- | -- | -- | --
 message | String / Object | - | required。Typescript：`string \| MessageInfoOptions` `type MessageInfoOptions = Omit<MessageOptions, 'theme'>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/message/type.ts)
 duration | Number | 3000 | \-
 
 ### message.error 或 MessagePlugin.error
 
-这是一个插件函数，参数形式为顺序参数（形如：(a, b, c)），而非对象参数（形如：({ a, b, c })）。顺序参数如下，
-
 name | params | default | description
 -- | -- | -- | --
 message | String / Object | - | required。Typescript：`string \| MessageInfoOptions`
 duration | Number | 3000 | \-
 
 ### message.warning 或 MessagePlugin.warning
 
-这是一个插件函数，参数形式为顺序参数（形如：(a, b, c)），而非对象参数（形如：({ a, b, c })）。顺序参数如下，
-
 name | params | default | description
 -- | -- | -- | --
 message | String / Object | - | required。Typescript：`string \| MessageInfoOptions`
 duration | Number | 3000 | \-
 
 ### message.success 或 MessagePlugin.success
 
-这是一个插件函数，参数形式为顺序参数（形如：(a, b, c)），而非对象参数（形如：({ a, b, c })）。顺序参数如下，
-
 name | params | default | description
 -- | -- | -- | --
 message | String / Object | - | required。Typescript：`string \| MessageInfoOptions`
 duration | Number | 3000 | \-
 
 ### message.loading 或 MessagePlugin.loading
 
-这是一个插件函数，参数形式为顺序参数（形如：(a, b, c)），而非对象参数（形如：({ a, b, c })）。顺序参数如下，
-
 name | params | default | description
 -- | -- | -- | --
 message | String / Object | - | required。Typescript：`string \| MessageInfoOptions`
 duration | Number | 3000 | \-
 
 ### message.question 或 MessagePlugin.question
 
-这是一个插件函数，参数形式为顺序参数（形如：(a, b, c)），而非对象参数（形如：({ a, b, c })）。顺序参数如下，
-
 name | params | default | description
 -- | -- | -- | --
 message | String / Object | - | required。Typescript：`string \| MessageInfoOptions`
 duration | Number | 3000 | \-
 
 ### message.closeAll 或 MessagePlugin.closeAll
 
-这是一个插件函数，参数形式为顺序参数（形如：(a, b, c)），而非对象参数（形如：({ a, b, c })）。顺序参数如下，
-
 name | params | default | description
 -- | -- | -- | --
 \- | \- | - | \-
 
 ### message.config 或 MessagePlugin.config
 
-这是一个插件函数，参数形式为顺序参数（形如：(a, b, c)），而非对象参数（形如：({ a, b, c })）。顺序参数如下，
-
 name | params | default | description
 -- | -- | -- | --
 message | Object | - | required。Typescript：`MessageOptions`