chore: update demo and docs

Author: RylanBot

packages/components/dialog/_example/modal.tsx

@@ -2,37 +2,46 @@ import React, { useState } from 'react';
 import { Button, Dialog, Space } from 'tdesign-react';
 
 export default function NotModalExample() {
-  const [modelessAndDraggable, setModelessAndDraggable] = useState(false);
-  const [modeless, setModeless] = useState(false);
   const [modal, setModal] = useState(false);
+  const [draggableModal, setDraggableModal] = useState(false);
+  const [draggableModeless, setDraggableModeless] = useState(false);
+  const [modeless, setModeless] = useState(false);
 
   return (
     <>
       <Space>
-        <Button theme="primary" variant="outline" onClick={() => setModelessAndDraggable(true)}>
-          非模态对话框（可拖拽）
+        <Button theme="primary" onClick={() => setModal(true)}>
+          普通对话框（不可拖拽）
+        </Button>
+        <Button theme="primary" variant="outline" onClick={() => setDraggableModal(true)}>
+          普通对话框（可拖拽）
         </Button>
         <Button theme="primary" onClick={() => setModeless(true)}>
           非模态对话框（不可拖拽）
         </Button>
-        <Button theme="primary" onClick={() => setModal(true)}>
-          普通对话框（不可拖拽）
+        <Button theme="primary" variant="outline" onClick={() => setDraggableModeless(true)}>
+          非模态对话框（可拖拽）
         </Button>
       </Space>
 
-      <Dialog
-        mode="modeless"
-        header="非模态对话框（可拖拽）"
-        draggable
-        visible={modelessAndDraggable}
-        onClose={() => setModelessAndDraggable(false)}
-      >
+      <Dialog header="普通对话框（不可拖拽）" visible={modal} onClose={() => setModal(false)}>
+        <p>This is a dialog</p>
+      </Dialog>
+
+      <Dialog header="普通对话框（可拖拽）" draggable visible={draggableModal} onClose={() => setDraggableModal(false)}>
         <p>This is a dialog</p>
       </Dialog>
+
       <Dialog mode="modeless" header="非模态对话框（不可拖拽）" visible={modeless} onClose={() => setModeless(false)}>
         <p>This is a dialog</p>
       </Dialog>
-      <Dialog header="普通对话框（不可拖拽）" visible={modal} onClose={() => setModal(false)}>
+      <Dialog
+        mode="modeless"
+        header="非模态对话框（可拖拽）"
+        draggable
+        visible={draggableModeless}
+        onClose={() => setDraggableModeless(false)}
+      >
         <p>This is a dialog</p>
       </Dialog>
     </>

packages/components/dialog/dialog.en-US.md

@@ -1,6 +1,7 @@
 :: BASE_DOC ::
 
 ## API
+
 ### DialogCard Props
 
 name | type | default | description | required
@@ -28,9 +29,8 @@ confirmLoading | Boolean | undefined | confirm button loading status | N
 confirmOnEnter | Boolean | - | confirm on enter | N
 destroyOnClose | Boolean | false | \- | N
 dialogClassName | String | - | \- | N
-draggable | Boolean | false | \- | N
+draggable | Boolean | false | not effective in `full-screen` mode | N
 footer | TNode | true | Typescript: `boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
-forceRender | Boolean | false | to force render Dialog, deprecated, please use `lazy` compatibility support | N
 header | TNode | true | Typescript: `string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
 lazy | Boolean | true | Enable Dialog lazy loading, the contents of the dialog box are not rendered when enable | N
 mode | String | modal | options: modal/modeless/full-screen | N
@@ -79,7 +79,7 @@ name | params | default | description
 -- | -- | -- | --
 options | \- | - | Typescript: `DialogOptions`
 
-插件返回值：`DialogInstance`
+Return value: `DialogInstance`
 
 ### dialog.confirm 或 DialogPlugin.confirm
 

packages/components/dialog/dialog.md

@@ -22,6 +22,7 @@
 
 {{ plugin }}
 ## API
+
 ### DialogCard Props
 
 名称 | 类型 | 默认值 | 描述 | 必传
@@ -49,9 +50,8 @@ confirmLoading | Boolean | undefined | 确认按钮加载状态 | N
 confirmOnEnter | Boolean | - | 是否在按下回车键时，触发确认事件 | N
 destroyOnClose | Boolean | false | 是否在关闭弹框的时候销毁子元素 | N
 dialogClassName | String | - | 弹框元素类名，示例：'t-class-dialog-first t-class-dialog-second' | N
-draggable | Boolean | false | 对话框是否可以拖拽（仅在非模态对话框时有效） | N
+draggable | Boolean | false | 是否可以拖拽（对全屏对话框无效） | N
 footer | TNode | true | 底部操作栏，默认会有“确认”和“取消”两个按钮。值为 true 显示默认操作按钮，值为 false 不显示任何内容，值类型为 Function 表示自定义底部内容。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
-forceRender | Boolean | false | 是否强制渲染Dialog，已废弃，请更为使用 `lazy` 兼容支持 | N
 header | TNode | true | 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容，值类型为 string 则直接显示值，值类型为 Function 表示自定义头部内容。TS 类型：`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
 lazy | Boolean | true | 是否启用对话框懒加载，启用时对话框内的内容不渲染 | N
 mode | String | modal | 对话框类型，有 3 种：模态对话框、非模态对话框、全屏对话框。弹出「模态对话框」时，只能操作对话框里面的内容，不能操作其他内容。弹出「非模态对话框」时，则可以操作页面内所有内容。「普通对话框」是指没有脱离文档流的对话框，可以在这个基础上开发更多的插件。可选项：modal/modeless/full-screen | N

packages/components/dialog/type.ts

@@ -61,7 +61,7 @@ export interface TdDialogProps {
    */
   dialogClassName?: string;
   /**
-   * 对话框是否可以拖拽（仅在非模态对话框时有效）
+   * 是否可以拖拽（对全屏对话框无效）
    * @default false
    */
   draggable?: boolean;

test/snap/__snapshots__/csr.test.jsx.snap

@@ -43614,6 +43614,20 @@ exports[`csr snapshot test > csr test packages/components/dialog/_example/modal.
     class="t-space t-space-horizontal"
     style="gap: 16px;"
   >
+    <div
+      class="t-space-item"
+    >
+      <button
+        class="t-button t-button--theme-primary t-button--variant-base"
+        type="button"
+      >
+        <span
+          class="t-button__text"
+        >
+          普通对话框（不可拖拽）
+        </span>
+      </button>
+    </div>
     <div
       class="t-space-item"
     >
@@ -43624,7 +43638,7 @@ exports[`csr snapshot test > csr test packages/components/dialog/_example/modal.
         <span
           class="t-button__text"
         >
-          非模态对话框（可拖拽）
+          普通对话框（可拖拽）
         </span>
       </button>
     </div>
@@ -43646,13 +43660,13 @@ exports[`csr snapshot test > csr test packages/components/dialog/_example/modal.
       class="t-space-item"
     >
       <button
-        class="t-button t-button--theme-primary t-button--variant-base"
+        class="t-button t-button--theme-primary t-button--variant-outline"
         type="button"
       >
         <span
           class="t-button__text"
         >
-          普通对话框（不可拖拽）
+          非模态对话框（可拖拽）
         </span>
       </button>
     </div>
@@ -149861,7 +149875,7 @@ exports[`ssr snapshot test > ssr test packages/components/dialog/_example/custom
 
 exports[`ssr snapshot test > ssr test packages/components/dialog/_example/icon.tsx 1`] = `"<button type="button" class="t-button t-button--theme-primary t-button--variant-base"><span class="t-button__text">Open Modal</span></button>"`;
 
-exports[`ssr snapshot test > ssr test packages/components/dialog/_example/modal.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-horizontal"><div class="t-space-item"><button type="button" class="t-button t-button--theme-primary t-button--variant-outline"><span class="t-button__text">非模态对话框（可拖拽）</span></button></div><div class="t-space-item"><button type="button" class="t-button t-button--theme-primary t-button--variant-base"><span class="t-button__text">非模态对话框（不可拖拽）</span></button></div><div class="t-space-item"><button type="button" class="t-button t-button--theme-primary t-button--variant-base"><span class="t-button__text">普通对话框（不可拖拽）</span></button></div></div>"`;
+exports[`ssr snapshot test > ssr test packages/components/dialog/_example/modal.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-horizontal"><div class="t-space-item"><button type="button" class="t-button t-button--theme-primary t-button--variant-base"><span class="t-button__text">普通对话框（不可拖拽）</span></button></div><div class="t-space-item"><button type="button" class="t-button t-button--theme-primary t-button--variant-outline"><span class="t-button__text">普通对话框（可拖拽）</span></button></div><div class="t-space-item"><button type="button" class="t-button t-button--theme-primary t-button--variant-base"><span class="t-button__text">非模态对话框（不可拖拽）</span></button></div><div class="t-space-item"><button type="button" class="t-button t-button--theme-primary t-button--variant-outline"><span class="t-button__text">非模态对话框（可拖拽）</span></button></div></div>"`;
 
 exports[`ssr snapshot test > ssr test packages/components/dialog/_example/plugin.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><p>函数调用方式一：DialogPlugin(options)</p></div><div class="t-space-item"><p>函数调用方式二：DialogPlugin.confirm(options)</p></div><div class="t-space-item"><p>函数调用方式三：DialogPlugin.alert(options)</p></div><div class="t-space-item"><div><button style="margin-right:16px" type="button" class="t-button t-button--theme-primary t-button--variant-base"><span class="t-button__text">dialog</span></button><button style="margin-right:16px" type="button" class="t-button t-button--theme-primary t-button--variant-base"><span class="t-button__text">handleDialogNode</span></button><button style="margin-right:16px" type="button" class="t-button t-button--theme-primary t-button--variant-base"><span class="t-button__text">confirm</span></button><button style="margin-right:16px" type="button" class="t-button t-button--theme-primary t-button--variant-base"><span class="t-button__text">alert</span></button><button style="margin-right:16px" type="button" class="t-button t-button--theme-primary t-button--variant-base"><span class="t-button__text">DialogPlugin.confirm</span></button></div></div></div>"`;
 

test/snap/__snapshots__/ssr.test.jsx.snap

@@ -340,7 +340,7 @@ exports[`ssr snapshot test > ssr test packages/components/dialog/_example/custom
 
 exports[`ssr snapshot test > ssr test packages/components/dialog/_example/icon.tsx 1`] = `"<button type="button" class="t-button t-button--theme-primary t-button--variant-base"><span class="t-button__text">Open Modal</span></button>"`;
 
-exports[`ssr snapshot test > ssr test packages/components/dialog/_example/modal.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-horizontal"><div class="t-space-item"><button type="button" class="t-button t-button--theme-primary t-button--variant-outline"><span class="t-button__text">非模态对话框（可拖拽）</span></button></div><div class="t-space-item"><button type="button" class="t-button t-button--theme-primary t-button--variant-base"><span class="t-button__text">非模态对话框（不可拖拽）</span></button></div><div class="t-space-item"><button type="button" class="t-button t-button--theme-primary t-button--variant-base"><span class="t-button__text">普通对话框（不可拖拽）</span></button></div></div>"`;
+exports[`ssr snapshot test > ssr test packages/components/dialog/_example/modal.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-horizontal"><div class="t-space-item"><button type="button" class="t-button t-button--theme-primary t-button--variant-base"><span class="t-button__text">普通对话框（不可拖拽）</span></button></div><div class="t-space-item"><button type="button" class="t-button t-button--theme-primary t-button--variant-outline"><span class="t-button__text">普通对话框（可拖拽）</span></button></div><div class="t-space-item"><button type="button" class="t-button t-button--theme-primary t-button--variant-base"><span class="t-button__text">非模态对话框（不可拖拽）</span></button></div><div class="t-space-item"><button type="button" class="t-button t-button--theme-primary t-button--variant-outline"><span class="t-button__text">非模态对话框（可拖拽）</span></button></div></div>"`;
 
 exports[`ssr snapshot test > ssr test packages/components/dialog/_example/plugin.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><p>函数调用方式一：DialogPlugin(options)</p></div><div class="t-space-item"><p>函数调用方式二：DialogPlugin.confirm(options)</p></div><div class="t-space-item"><p>函数调用方式三：DialogPlugin.alert(options)</p></div><div class="t-space-item"><div><button style="margin-right:16px" type="button" class="t-button t-button--theme-primary t-button--variant-base"><span class="t-button__text">dialog</span></button><button style="margin-right:16px" type="button" class="t-button t-button--theme-primary t-button--variant-base"><span class="t-button__text">handleDialogNode</span></button><button style="margin-right:16px" type="button" class="t-button t-button--theme-primary t-button--variant-base"><span class="t-button__text">confirm</span></button><button style="margin-right:16px" type="button" class="t-button t-button--theme-primary t-button--variant-base"><span class="t-button__text">alert</span></button><button style="margin-right:16px" type="button" class="t-button t-button--theme-primary t-button--variant-base"><span class="t-button__text">DialogPlugin.confirm</span></button></div></div></div>"`;