📝 docs: demo doc to en

ant-design · Feb 12, 2024 · 67ce7b1 · 67ce7b1
1 parent bd726f7
commit 67ce7b1
Show file tree

Hide file tree

Showing 17 changed files with 54 additions and 76 deletions.
diff --git a/src/ContextMenu/demos/index.tsx b/src/ContextMenu/demos/index.tsx
@@ -1,7 +1,3 @@
-/**
- * title: 右键菜单
- * description: 右键点击屏幕
- */
 import { CopyOutlined, ExpandOutlined, ZoomInOutlined, ZoomOutOutlined } from '@ant-design/icons';
 import { ContextMenu } from '@ant-design/pro-editor';
 

diff --git a/src/ContextMenu/index.en-US.md b/src/ContextMenu/index.en-US.md
@@ -1,19 +1,16 @@
 ---
 title: ContextMenu
 group: Basic
+atomId: ContextMenu
 ---
 
-# ContextMenu Context Menu
+# ContextMenu
 
-## When to use
+Display a context menu that can be triggered by right-clicking or long-pressing, and can be operated with the keyboard.
 
-This component is used to display context menus, which can be triggered by right-clicking or long-pressing and can be operated using the keyboard.
+## Code Example
 
-## Code Demo
-
-### Basic Usage
-
-<code src="./demos/index.tsx" center iframe></code>
+<code src="./demos/index.tsx" center iframe title="Right click menu" description="Right click the screen"></code>
 
 ## API
 

diff --git a/src/ContextMenu/index.zh-CN.md b/src/ContextMenu/index.zh-CN.md
@@ -10,7 +10,7 @@ title: ContextMenu 情景菜单
 
 ## 代码演示
 
-<code src="./demos/index.tsx" center iframe title="基本使用"></code>
+<code src="./demos/index.tsx" center iframe title="右键菜单" description="右键点击屏幕"></code>
 
 ## API
 

diff --git a/src/SortableList/demos/Basic.tsx b/src/SortableList/demos/Basic.tsx
@@ -1,6 +1,4 @@
 /**
- * title: 默认使用
- * description: 默认支持列表渲染
  * compact: true
  */
 import { SortableList } from '@ant-design/pro-editor';

diff --git a/src/SortableList/demos/controlled.tsx b/src/SortableList/demos/controlled.tsx
@@ -1,6 +1,4 @@
 /**
- * title: 受控模式
- * description: onChange 会返回变更数据
  * compact: true
  */
 import { SortableList } from '@ant-design/pro-editor';

diff --git a/src/SortableList/demos/creatorButtonProps.tsx b/src/SortableList/demos/creatorButtonProps.tsx
@@ -1,6 +1,4 @@
 /**
- * title: 创建按钮
- * description: 通过 `creatorButtonProps` 可以自定义创建按钮，record 为创建的数据
  * compact: true
  */
 import { SortableList } from '@ant-design/pro-editor';

diff --git a/src/SortableList/demos/empty.tsx b/src/SortableList/demos/empty.tsx
@@ -1,6 +1,4 @@
 /**
- * title: 空状态
- * description: 当列表没有值时会展示空状态。
  * compact: true
  */
 import { SortableList } from '@ant-design/pro-editor';

diff --git a/src/SortableList/demos/getItemStyles.tsx b/src/SortableList/demos/getItemStyles.tsx
@@ -1,7 +1,3 @@
-/**
- * title: 自定义样式
- * description: 通过 `getItemStyles` 可以自定义每个 item 的样式。
- */
 import { SortableList } from '@ant-design/pro-editor';
 import { useState } from 'react';
 

diff --git a/src/SortableList/demos/handle.tsx b/src/SortableList/demos/handle.tsx
@@ -1,6 +1,4 @@
 /**
- * title: 隐藏拖拽按钮
- * description: 你可以设置 `handle` 属性来控制拖拽按钮的显隐
  * compact: true
  */
 import { SortableList } from '@ant-design/pro-editor';

diff --git a/src/SortableList/demos/hideRemove.tsx b/src/SortableList/demos/hideRemove.tsx
@@ -1,6 +1,4 @@
 /**
- * title: 隐藏删除按钮
- * description: 你可以设置 `hideRemove` 属性来隐藏默认的删除按钮
  * compact: true
  */
 import { SortableList } from '@ant-design/pro-editor';

diff --git a/src/SortableList/demos/provider.tsx b/src/SortableList/demos/provider.tsx
@@ -1,6 +1,4 @@
 /**
- * title: Provider
- * description: 为了方便用户在更高的上下文中通过 `useSortableList()` hook 获得组件实例，我们提供了 `SortableListProvider` 由用户控制 Provider 的作用范围。
  * compact: true
  */
 import { SortableList, SortableListProvider, useSortableList } from '@ant-design/pro-editor';

diff --git a/src/SortableList/demos/ref.tsx b/src/SortableList/demos/ref.tsx
@@ -1,6 +1,4 @@
 /**
- * title: 使用 ref 获得实例
- * description: 提供传统的 `ref` 方式关联组件实例，可实现自定义功能，如将添加按钮渲染到组件右上方。
  * compact: true
  */
 import { PlusCircleFilled } from '@ant-design/icons';

diff --git a/src/SortableList/demos/renderContent.tsx b/src/SortableList/demos/renderContent.tsx
@@ -1,6 +1,4 @@
 /**
- * title: 自定义列表项内容
- * description: 提供 `renderContent` 由用户自定义除拖拽等操作外的列表项内容。
  * compact: true
  */
 import { SortableList } from '@ant-design/pro-editor';

diff --git a/src/SortableList/demos/renderItem.tsx b/src/SortableList/demos/renderItem.tsx
@@ -1,7 +1,5 @@
 /**
- * title: 自定义排序项
- * description: 通过 `renderItem` 可以自定义每个排序项，相比于 `renderContent` 提供的自由度更大
- * compact: true
+  compact: true
  */
 import { SortableList, SortableListRef } from '@ant-design/pro-editor';
 import { Badge, Button } from 'antd';

diff --git a/src/SortableList/demos/useSortableList.tsx b/src/SortableList/demos/useSortableList.tsx
@@ -1,6 +1,4 @@
 /**
- * title: useSortableList
- * description: 在 Item 子组件中使用 `useSortableList()` hook，可以获得当前组件实例
  * compact: true
  */
 import { SortableList } from '@ant-design/pro-editor';

diff --git a/src/SortableList/index.zh-CN.md b/src/SortableList/index.zh-CN.md
@@ -14,18 +14,29 @@ demo:
 
 ## 代码演示
 
-<code src="./demos/Basic.tsx" ></code>
-<code src="./demos/controlled.tsx" ></code>
-<code src="./demos/hideRemove.tsx" ></code>
-<code src="./demos/handle.tsx" ></code>
-<code src="./demos/getItemStyles.tsx" ></code>
-<code src="./demos/renderItem.tsx" ></code>
-<code src="./demos/renderContent.tsx" ></code>
-<code src="./demos/creatorButtonProps.tsx" ></code>
-<code src="./demos/ref.tsx" ></code>
-<code src="./demos/useSortableList.tsx" ></code>
-<code src="./demos/provider.tsx" ></code>
-<code src="./demos/empty.tsx" ></code>
+<code src="./demos/Basic.tsx" title="基本使用" description="默认支持列表渲染"></code>
+<code src="./demos/controlled.tsx"  title="受控模式"
+ description="onChange 会返回变更数据"></code>
+<code src="./demos/hideRemove.tsx"  title="隐藏删除按钮"
+ description="你可以设置 `hideRemove` 属性来隐藏默认的删除按钮"></code>
+<code src="./demos/handle.tsx" title="隐藏拖拽按钮"
+ description="你可以设置 `handle` 属性来控制拖拽按钮的显隐"></code>
+<code src="./demos/getItemStyles.tsx"  title="自定义样式"
+ description="通过 `getItemStyles` 可以自定义每个 item 的样式。"></code>
+<code src="./demos/renderItem.tsx"  title="自定义排序项"
+ description="通过 `renderItem` 可以自定义每个排序项，相比于 `renderContent` 提供的自由度更大"></code>
+<code src="./demos/renderContent.tsx"  title="自定义列表项内容"
+ description="提供 `renderContent` 由用户自定义除拖拽等操作外的列表项内容。"></code>
+<code src="./demos/creatorButtonProps.tsx"  title="创建按钮"
+ description="通过 `creatorButtonProps` 可以自定义创建按钮，record 为创建的数据"></code>
+<code src="./demos/ref.tsx" title="使用 `ref` 获得实例"
+ description="提供传统的 `ref` 方式关联组件实例，可实现自定义功能，如将添加按钮渲染到组件右上方。"></code>
+<code src="./demos/useSortableList.tsx"  title="useSortableList"
+ description="在 Item 子组件中使用 `useSortableList()` hook，可以获得当前组件实例"></code>
+<code src="./demos/provider.tsx"  title="Provider"
+description="为了方便用户在更高的上下文中通过 `useSortableList()` hook 获得组件实例，我们提供了 `SortableListProvider` 由用户控制 Provider 的作用范围。"></code>
+<code src="./demos/empty.tsx"  title="空状态"
+ description="当列表没有值时会展示空状态。"></code>
 
 ## API
 

diff --git a/src/SortableTree/index.en-US.md b/src/SortableTree/index.en-US.md
@@ -1,6 +1,6 @@
 ---
-title: SortableTree
-group: Sortable
+title: SortableTree Sortable Tree
+group: Sortable Component
 atomId: SortableTree
 demo:
   cols: 2
@@ -10,23 +10,12 @@ demo:
 
 A sortable tree component that conforms to the data structure of Ant Design [Tree](https://ant.design/components/tree).
 
-## When To Use
+## Code Example
 
-It can be used when editing tree-like data structures (adding, deleting, sorting).
-
-## Demo
-
-###
-
-<code src="./demos/default.tsx" ></code><code src="./demos/controlled.tsx" ></code>
-
-<code src="./demos/renderContent.tsx" ></code> <code src="./demos/disableDrag.tsx" ></code> <code src="./demos/sortableRule.tsx" ></code>
-<code src="./demos/virtual.tsx" ></code>
+<code src="./demos/default.tsx" ></code><code src="./demos/controlled.tsx" ></code><code src="./demos/renderContent.tsx" ></code><code src="./demos/disableDrag.tsx" ></code><code src="./demos/sortableRule.tsx" ></code><code src="./demos/virtual.tsx" ></code>
 
 ## API
 
-### Properties
-
 | Name                | Type                                                                                                  | Description                                     |
 | ------------------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------------------- |
 | hideAdd             | `boolean`                                                                                             | Hide the default add button                     |
@@ -41,6 +30,17 @@ It can be used when editing tree-like data structures (adding, deleting, sorting
 | renderExtra         | `(node: FlattenNode<T>) => JSX.Element`                                                               | Render extra items                              |
 | ref                 | `MutableRefObject<SortableTreeInstance<T>>`                                                           | Expose methods externally                       |
 | sortableRule        | `data: { activeNode: FlattenNode<T>; targetNode: FlattenNode<T>; projected: Projected; }) => boolean` | Function to control drag and drop sorting rules |
+| virtual             | `VirtualConfig` \| `false`                                                                            | Virtual scroll configuration, default is false  |
+
+## VirtualConfig
+
+Virtual scroll configuration
+
+| Name       | Type                        | Description                                            |
+| ---------- | --------------------------- | ------------------------------------------------------ |
+| height     | `number`                    | Height of the virtual scroll container, required       |
+| width      | `number`\| `string`         | Width of the virtual scroll container, default is 100% |
+| itemHeight | `(index: number) => number` | Item height, default is 36                             |
 
 ## TreeNode
 
@@ -62,18 +62,18 @@ Flattened node
 | -------- | ---------------------------- | ----------------------------------------- |
 | parentId | `UniqueIdentifier` \| `null` | Parent node ID, null if it is a root node |
 | depth    | `number`                     | Node depth                                |
-| index    | `number`                     | Node position among sibling nodes         |
+| index    | `number`                     | Position of the node among sibling nodes  |
 
 ## Projected
 
 Placement target information
 
-| Name     | Type                         | Description                                     |
-| -------- | ---------------------------- | ----------------------------------------------- |
-| depth    | `number`                     | Placement target depth                          |
-| maxDepth | `number`                     | Maximum depth the target position can be placed |
-| minDepth | `number`                     | Minimum depth the target position can be placed |
-| parentId | `UniqueIdentifier` \| `null` | Parent node ID, null if it is a root node       |
+| Name     | Type                         | Description                               |
+| -------- | ---------------------------- | ----------------------------------------- |
+| depth    | `number`                     | Depth of the placement target             |
+| maxDepth | `number`                     | Maximum depth the target can be placed    |
+| minDepth | `number`                     | Minimum depth the target can be placed    |
+| parentId | `UniqueIdentifier` \| `null` | Parent node ID, null if it is a root node |
 
 ## SortableTreeInstance
 
@@ -97,8 +97,8 @@ export interface SortableTreeInstance<T = any> extends PublicSortableTreeStore {
    */
   getTreeData: () => TreeData<T>;
   /**
-   * Get the current flattened tree data
-   * @returns The current flattened tree data
+   * Get the flattened data of the current tree
+   * @returns The flattened data of the current tree
    */
   getFlattenData: () => FlattenNode<T>[];
 }