From 6f93c18c54f726cc4e0e64c7096d46cd6376a35f Mon Sep 17 00:00:00 2001 From: rdmclin2 Date: Mon, 12 Feb 2024 18:17:52 +0800 Subject: [PATCH] :memo: docs: columnlist and sortablelist demos --- src/ColumnList/demos/actions.tsx | 4 - src/ColumnList/demos/column.tsx | 4 - src/ColumnList/demos/controlled.tsx | 4 - src/ColumnList/demos/creatorButtonProps.tsx | 4 - .../demos/creatorButtonPropsFalse.tsx | 4 - src/ColumnList/demos/customCreate.tsx | 4 - src/ColumnList/demos/empty.tsx | 4 - src/ColumnList/demos/normal.tsx | 4 - src/ColumnList/index.en-US.md | 19 +++-- src/ColumnList/index.zh-CN.md | 24 ++++-- src/SortableList/index.en-US.md | 79 +++++++++++-------- src/SortableTree/index.en-US.md | 38 +++++---- 12 files changed, 95 insertions(+), 97 deletions(-) diff --git a/src/ColumnList/demos/actions.tsx b/src/ColumnList/demos/actions.tsx index 5b911002..2dcfd0a4 100644 --- a/src/ColumnList/demos/actions.tsx +++ b/src/ColumnList/demos/actions.tsx @@ -1,7 +1,3 @@ -/** - * title: 自定义操作 - * description: 可以通过 `actions` 属性自定义操作列 - */ import { EditFilled } from '@ant-design/icons'; import type { ColumnItemList } from '@ant-design/pro-editor'; import { ActionIcon, ColumnList } from '@ant-design/pro-editor'; diff --git a/src/ColumnList/demos/column.tsx b/src/ColumnList/demos/column.tsx index bd2d17d4..07fff451 100644 --- a/src/ColumnList/demos/column.tsx +++ b/src/ColumnList/demos/column.tsx @@ -1,7 +1,3 @@ -/** - * title: 自定义表单 - * description: 目前支持 `input` 和 `select`, `custom` 三种表单类型. - */ import type { ColumnItemList } from '@ant-design/pro-editor'; import { ColorPicker, ColumnList } from '@ant-design/pro-editor'; import { tableColumnValueOptions } from './mock_data/options'; diff --git a/src/ColumnList/demos/controlled.tsx b/src/ColumnList/demos/controlled.tsx index 7ad8c577..94027c69 100644 --- a/src/ColumnList/demos/controlled.tsx +++ b/src/ColumnList/demos/controlled.tsx @@ -1,7 +1,3 @@ -/** - * title: 受控模式 - * description: 表单可通过 `value` 受控 - */ import type { ColumnItemList } from '@ant-design/pro-editor'; import { ColumnList } from '@ant-design/pro-editor'; import { Button } from 'antd'; diff --git a/src/ColumnList/demos/creatorButtonProps.tsx b/src/ColumnList/demos/creatorButtonProps.tsx index 29ef36a1..a8f94fb0 100644 --- a/src/ColumnList/demos/creatorButtonProps.tsx +++ b/src/ColumnList/demos/creatorButtonProps.tsx @@ -1,7 +1,3 @@ -/** - * title: 自定义初始化 - * description: 可通过 `creatorButtonProps` 来自定义初始化逻辑 - */ import type { ColumnItemList } from '@ant-design/pro-editor'; import { ColumnList } from '@ant-design/pro-editor'; import { tableColumnValueOptions } from './mock_data/options'; diff --git a/src/ColumnList/demos/creatorButtonPropsFalse.tsx b/src/ColumnList/demos/creatorButtonPropsFalse.tsx index 92cc1cf7..af0b6928 100644 --- a/src/ColumnList/demos/creatorButtonPropsFalse.tsx +++ b/src/ColumnList/demos/creatorButtonPropsFalse.tsx @@ -1,7 +1,3 @@ -/** - * title: 关闭添加能力 - * description: 可通过 `creatorButtonProps={false}` 来关闭添加功能，包括添加一行按钮，回车添加以及空状态添加 - */ import type { ColumnItemList } from '@ant-design/pro-editor'; import { ColumnList } from '@ant-design/pro-editor'; import { tableColumnValueOptions } from './mock_data/options'; diff --git a/src/ColumnList/demos/customCreate.tsx b/src/ColumnList/demos/customCreate.tsx index f8657651..34a777bd 100644 --- a/src/ColumnList/demos/customCreate.tsx +++ b/src/ColumnList/demos/customCreate.tsx @@ -1,7 +1,3 @@ -/** - * title: 自定义创建逻辑 - * description: 你可以设置 `style` 属性来隐藏默认添加按钮，然后自定义创建按钮 - */ import { PlusCircleTwoTone } from '@ant-design/icons'; import type { ColumnItemList, SortableListRef } from '@ant-design/pro-editor'; import { ActionIcon, ColumnList } from '@ant-design/pro-editor'; diff --git a/src/ColumnList/demos/empty.tsx b/src/ColumnList/demos/empty.tsx index da0d2e87..6f8ee301 100644 --- a/src/ColumnList/demos/empty.tsx +++ b/src/ColumnList/demos/empty.tsx @@ -1,7 +1,3 @@ -/** - * title: 空状态 - * description: 当表单值为空时，会渲染空状态 - */ import { EditFilled } from '@ant-design/icons'; import type { ColumnItemList } from '@ant-design/pro-editor'; import { ActionIcon, ColumnList } from '@ant-design/pro-editor'; diff --git a/src/ColumnList/demos/normal.tsx b/src/ColumnList/demos/normal.tsx index 843906a9..01e2960c 100644 --- a/src/ColumnList/demos/normal.tsx +++ b/src/ColumnList/demos/normal.tsx @@ -1,7 +1,3 @@ -/** - * title: 基础使用 - * description: 通过配置 `columns` 渲染排序表单 - */ import type { ColumnItemList } from '@ant-design/pro-editor'; import { ColumnList } from '@ant-design/pro-editor'; diff --git a/src/ColumnList/index.en-US.md b/src/ColumnList/index.en-US.md index 95a1f109..178a0c82 100644 --- a/src/ColumnList/index.en-US.md +++ b/src/ColumnList/index.en-US.md @@ -2,22 +2,29 @@ title: ColumnList atomId: ColumnList group: Sortable -order: 3 demo: cols: 2 --- # ColumnList Column Editing List -Generate a simple sortable list based on the `schema`. +Generate a simple sorting list based on `schema`. ## Code Demo - + ## API -Provides encapsulated `columns` configuration, other properties refer to `SortableList` +Provides encapsulated `columns` configuration, other attributes refer to `SortableList` | Property | Type | Description | | -------- | -------------- | -------------------------- | @@ -32,13 +39,13 @@ Column configuration items | title | `React.ReactNode` | Column title | | type | `'select' \| 'input' \| 'custom'` | Field type, default is 'input'. Optional values: 'select' dropdown, 'input' input box, 'custom' custom | | options | `ColumnItemOption[]` | Dropdown options | -| placeholder | `string` | Input box prompt text | +| placeholder | `string` | Input box placeholder text | | initialValue | `T` | Initial value | | dataIndex | `string` | Field reference | | key | `string` | Unique key | | render | `FC>` | Custom rendering function | | width | `number` \| `string` | Column width | -| multiple | `boolean` | Whether multiple selection is allowed | +| multiple | `boolean` | Whether to allow multiple selection | ### ColumnItemOption diff --git a/src/ColumnList/index.zh-CN.md b/src/ColumnList/index.zh-CN.md index 048a3895..b4b2c45e 100644 --- a/src/ColumnList/index.zh-CN.md +++ b/src/ColumnList/index.zh-CN.md @@ -13,14 +13,22 @@ demo: ## 代码演示 - - - - - - - - + + + + + + + + ## API diff --git a/src/SortableList/index.en-US.md b/src/SortableList/index.en-US.md index f92390ab..40d694ad 100644 --- a/src/SortableList/index.en-US.md +++ b/src/SortableList/index.en-US.md @@ -13,40 +13,51 @@ Provides basic underlying encapsulation for sortable list scenarios, which can b ## Code Demo - + ## API ### Basic Component Properties -| Property | Type | Description | -| ------------------ | ---------------------------------------------------------------- | --------------------------------------------------------------------- | -| value | `T[]` | Value | -| initialValues | `T[]` | Initial value | -| onChange | `(value: T[], event: ListDataDispatchPayload) => void` | Value change | -| renderContent | `(item: T, index: number) => ReactNode` | Customizable sortable list item content | -| renderItem | `(item: T, options) => ReactNode` | Customizable sortable list item | -| renderHeader | `() => ReactNode` | Custom render header | -| renderEmpty | `() => ReactNode` | Custom render empty state | -| getItemStyle | `(status: GetItemStylesArgs) => ReactNode` | Custom container style | -| ref | `ForwardedRef>` | Expose methods externally | -| hideRemove | `boolean` | Whether to hide the delete button, default is false | -| handle | `boolean` | Whether to show the drag button, default is true | -| creatorButtonProps | `CreatorButtonProps\|false` | New object related properties | -| actions | `(item: T, index: number) => ReactNode[]` \| `React.ReactNode[]` | Other operations for self-rendering besides the list's own operations | - -### CreatorButtonProps Properties - -| Property | Type | Description | -| ----------------- | ---------------------- | --------------------------------------------------------------------------------------------------- | -| position | `'bottom'\|'top'` | Button position, default is at the bottom | -| record | `(index: number) => T` | Logic for generating initial value | -| creatorButtonText | `string` | Button text for adding a new row | -| style | CSSProperties | Button style settings, can set whether the button is displayed, such as `style: { display: 'none'}` | +| Property | Type | Description | +| ------------------ | ---------------------------------------------------------------- | ----------------------------------------------------------------------- | +| value | `T[]` | Value | +| initialValues | `T[]` | Initial value | +| onChange | `(value: T[], event: ListDataDispatchPayload) => void` | Value change | +| renderContent | `(item: T, index: number) => ReactNode` | Custom sortable list item content | +| renderItem | `(item: T, options) => ReactNode` | Custom sortable list item | +| renderHeader | `() => ReactNode` | Custom render header | +| renderEmpty | `() => ReactNode` | Custom render empty state | +| getItemStyle | `(status: GetItemStylesArgs) => ReactNode` | Custom container style | +| ref | `ForwardedRef>` | Expose methods externally | +| hideRemove | `boolean` | Whether to hide the remove button, default is false | +| handle | `boolean` | Whether to show the drag button, default is true | +| creatorButtonProps | `CreatorButtonProps\|false` | Properties related to creating objects | +| actions | `(item: T, index: number) => ReactNode[]` \| `React.ReactNode[]` | Other operations for rendering in addition to the list's own operations | + +### CreatorButtonProps Create Button Properties + +| Property | Type | Description | +| ----------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------- | +| position | `'bottom'\|'top'` | Button position, default is at the bottom | +| record | `(index: number) => T` | Logic for generating initial values | +| creatorButtonText | `string` | Button text for adding a new row | +| style | CSSProperties | Button style settings, can be used to set whether the button is displayed, such as `style: { display: 'none'}` | ### GetItemStylesArgs -`getItemStyle` is used to customize the container style of the sortable item, and its method is defined as follows: +`getItemStyle` is used to customize the container style of sortable items, and its method is defined as follows: ```typescript | pure interface GetItemStylesArgs { @@ -67,7 +78,7 @@ interface GetItemStylesArgs { */ isSorting: boolean; /** - * Index of the dragged-over item + * Index of the item being dragged over */ overIndex: number; /** @@ -81,14 +92,14 @@ type GetItemStyles = (status: GetItemStylesArgs) => React.CSSProperties; ### RenderItem Parameters -The `renderItem` method is used to define the list item with greater freedom, including dragging, deleting, adding, and list item content. Its parameters are exposed as follows: +The `renderItem` method is used to define list items with greater flexibility, including drag and drop, delete, add, list item content, and other parts. Its exposed parameters are as follows: ```tsx | pure export type RenderItem = ( item: T, options: { /** - * Whether it is the dragged-out item + * Whether it is the dragged out item */ dragOverlay: boolean; /** @@ -116,15 +127,15 @@ export type RenderItem = ( */ ref: Ref; /** - * Style for the current item + * Current item's passed-in style */ style: CSSProperties | undefined; /** - * Transform animation for the current item + * Current item's transform animation */ transform: any; /** - * Transition animation for the current item + * Current item's transition animation */ transition: any; }, @@ -140,11 +151,11 @@ The component exposes underlying events through `onChange` and `ForwardRef`, all interface AddItemAction { type: 'addItem'; /** - * Added node + * Newly added node */ item: T; /** - * Position of the added node, default is at the end + * Position of the new node, defaults to the last if not passed */ index?: number; } diff --git a/src/SortableTree/index.en-US.md b/src/SortableTree/index.en-US.md index d0f92ae9..ea07b7b6 100644 --- a/src/SortableTree/index.en-US.md +++ b/src/SortableTree/index.en-US.md @@ -10,27 +10,31 @@ demo: A sortable tree component that conforms to the data structure of Ant Design [Tree](https://ant.design/components/tree). -## Code Example +## Code Demo - + ## API -| Name | Type | Description | -| ------------------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------------------- | -| hideAdd | `boolean` | Hide the default add button | -| hideRemove | `boolean` | Hide the default remove button | -| disableDrag | `boolean` | Disable dragging | -| indentationWidth | `number` | Indentation width | -| onSelectedIdsChange | `(selectedIds: UniqueIdentifier[]) => void` | Callback for selected ID changes | -| treeData | `TreeData` | Tree data | -| defaultTreeData | `TreeData` | Default data | -| onTreeDataChange | `(treeData: TreeData,event: TreeDataDispatchPayload) => void` | Callback for data changes | -| renderContent | `(node: FlattenNode) => JSX.Element` | Render content | -| 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 | +| Name | Type | Description | +| ------------------- | ----------------------------------------------------------------------------------------------------- | ---------------------------------------------- | +| hideAdd | `boolean` | Hide the default add button | +| hideRemove | `boolean` | Hide the default remove button | +| disableDrag | `boolean` | Disable drag | +| indentationWidth | `number` | Indentation width | +| onSelectedIdsChange | `(selectedIds: UniqueIdentifier[]) => void` | Callback for selected ID changes | +| treeData | `TreeData` | Tree data | +| defaultTreeData | `TreeData` | Default data | +| onTreeDataChange | `(treeData: TreeData,event: TreeDataDispatchPayload) => void` | Callback for data changes | +| renderContent | `(node: FlattenNode) => JSX.Element` | Render content | +| renderExtra | `(node: FlattenNode) => JSX.Element` | Render extra item | +| ref | `MutableRefObject>` | Expose methods externally | +| sortableRule | `data: { activeNode: FlattenNode; targetNode: FlattenNode; projected: Projected; }) => boolean` | Function to control drag and drop sorting | +| virtual | `VirtualConfig` \| `false` | Virtual scroll configuration, default is false | ## VirtualConfig