From 67ce7b18226d1ff135d094ab7ba998a48683393b Mon Sep 17 00:00:00 2001 From: rdmclin2 Date: Mon, 12 Feb 2024 17:41:08 +0800 Subject: [PATCH] :memo: docs: demo doc to en --- src/ContextMenu/demos/index.tsx | 4 -- src/ContextMenu/index.en-US.md | 13 ++--- src/ContextMenu/index.zh-CN.md | 2 +- src/SortableList/demos/Basic.tsx | 2 - src/SortableList/demos/controlled.tsx | 2 - src/SortableList/demos/creatorButtonProps.tsx | 2 - src/SortableList/demos/empty.tsx | 2 - src/SortableList/demos/getItemStyles.tsx | 4 -- src/SortableList/demos/handle.tsx | 2 - src/SortableList/demos/hideRemove.tsx | 2 - src/SortableList/demos/provider.tsx | 2 - src/SortableList/demos/ref.tsx | 2 - src/SortableList/demos/renderContent.tsx | 2 - src/SortableList/demos/renderItem.tsx | 4 +- src/SortableList/demos/useSortableList.tsx | 2 - src/SortableList/index.zh-CN.md | 35 +++++++++----- src/SortableTree/index.en-US.md | 48 +++++++++---------- 17 files changed, 54 insertions(+), 76 deletions(-) diff --git a/src/ContextMenu/demos/index.tsx b/src/ContextMenu/demos/index.tsx index 5261942d..11fd3a11 100644 --- 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 index aa5020a3..010610d1 100644 --- 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 - - + ## API diff --git a/src/ContextMenu/index.zh-CN.md b/src/ContextMenu/index.zh-CN.md index 1e33552b..d0836215 100644 --- a/src/ContextMenu/index.zh-CN.md +++ b/src/ContextMenu/index.zh-CN.md @@ -10,7 +10,7 @@ title: ContextMenu 情景菜单 ## 代码演示 - + ## API diff --git a/src/SortableList/demos/Basic.tsx b/src/SortableList/demos/Basic.tsx index 3cc9b8de..552967f2 100644 --- 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 index 2374483d..d440db50 100644 --- 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 index ac310424..562d2d2b 100644 --- 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 index 579ea1b9..d533ad79 100644 --- 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 index 56a373e6..b390df19 100644 --- 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 index 90f5c604..f85547e1 100644 --- 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 index 84ef1657..f187d8ea 100644 --- 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 index 240b6a05..bf2121b9 100644 --- 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 index 8c5e388e..24beaf09 100644 --- 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 index 54080280..1b47cb37 100644 --- 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 index 144ca0bd..75523a85 100644 --- 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 index 6ba55a21..6aa994b2 100644 --- 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 index 177fcbdc..55c35296 100644 --- a/src/SortableList/index.zh-CN.md +++ b/src/SortableList/index.zh-CN.md @@ -14,18 +14,29 @@ demo: ## 代码演示 - - - - - - - - - - - - + + + + + + + + + + + + ## API diff --git a/src/SortableTree/index.en-US.md b/src/SortableTree/index.en-US.md index 80c6e0ad..9bf5260a 100644 --- 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 - -### - - - - - + ## 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) => JSX.Element` | Render extra items | | ref | `MutableRefObject>` | Expose methods externally | | sortableRule | `data: { activeNode: FlattenNode; targetNode: FlattenNode; 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 extends PublicSortableTreeStore { */ getTreeData: () => TreeData; /** - * 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[]; }