📝 docs: component en docs

src/SortableList/demos/_ItemRender.tsx

@@ -54,7 +54,7 @@ const ItemRender = memo(({ item, index, compact = false }: ItemRenderProps) => {
           size="small"
           style={{ width: '100%' }}
           options={tableColumnValueOptions}
-          placeholder="请选择列类型"
+          placeholder="Please Select Column Value"
           value={item?.dataIndex}
           onChange={(value) => {
             instance.updateItem({ dataIndex: value }, index);

src/SortableList/demos/controlled.tsx

@@ -28,7 +28,7 @@ const Demo = () => {
         }}
         style={{ marginTop: 8 }}
       >
-        设置数据
+        Set Data
       </Button>
     </Flexbox>
   );

src/SortableList/demos/creatorButtonProps.tsx

@@ -15,7 +15,7 @@ const Demo = () => {
         value={list}
         renderContent={(item) => item.text}
         creatorButtonProps={{
-          creatorButtonText: '自定义添加',
+          creatorButtonText: 'Custom Create',
           record: () => ({
             text: Math.ceil(Math.random() * 100000).toString(16),
           }),

src/SortableList/demos/data.ts

@@ -32,37 +32,37 @@ export const INIT_VALUES = [
  * Column 所有类型
  * */
 export const tableColumnValueOptions = [
-  { label: '序号', value: 'index' },
-  { label: '圆形序号', value: 'indexBorder' },
-  { label: '数字', value: 'digit' },
-  { label: '密码', value: 'password' },
-  { label: '金额', value: 'money' },
-  { label: '文本', value: 'text' },
-  { label: '文本域', value: 'textarea' },
-  { label: '日期', value: 'date' },
-  { label: '操作', value: 'option' },
-  { label: '日期时间', value: 'dateTime' },
-  { label: '周', value: 'dateWeek' },
-  { label: '月', value: 'dateMonth' },
-  { label: '季度', value: 'dateQuarter' },
-  { label: '年份', value: 'dateYear' },
-  { label: '日期区间', value: 'dateRange' },
-  { label: '日期时间区间', value: 'dateTimeRange' },
-  { label: '时间', value: 'time' },
-  { label: '时间区间', value: 'timeRange' },
-  { label: '下拉框', value: 'select' },
-  { label: '多选框', value: 'checkbox' },
-  { label: '星级组件', value: 'rate' },
-  { label: '单选框', value: 'radio' },
-  { label: '按钮单选框', value: 'radioButton' },
-  { label: '进度条', value: 'progress' },
-  { label: '百分比', value: 'percent' },
-  { label: '秒格式化', value: 'second' },
-  { label: '头像', value: 'avatar' },
-  { label: '代码框', value: 'code' },
-  { label: '开关', value: 'switch' },
-  { label: '显示当前时间', value: 'fromNow' },
-  { label: '图片', value: 'image' },
-  { label: 'json 格式化', value: 'jsonCode' },
-  { label: '颜色选择器', value: 'color' },
+  { label: 'index', value: 'index' },
+  { label: 'indexBorder', value: 'indexBorder' },
+  { label: 'digit', value: 'digit' },
+  { label: 'password', value: 'password' },
+  { label: 'money', value: 'money' },
+  { label: 'text', value: 'text' },
+  { label: 'textarea', value: 'textarea' },
+  { label: 'date', value: 'date' },
+  { label: 'option', value: 'option' },
+  { label: 'dateTime', value: 'dateTime' },
+  { label: 'dateWeek', value: 'dateWeek' },
+  { label: 'dateMonth', value: 'dateMonth' },
+  { label: 'dateQuarter', value: 'dateQuarter' },
+  { label: 'dateYear', value: 'dateYear' },
+  { label: 'dateRange', value: 'dateRange' },
+  { label: 'dateTimeRange', value: 'dateTimeRange' },
+  { label: 'time', value: 'time' },
+  { label: 'timeRange', value: 'timeRange' },
+  { label: 'select', value: 'select' },
+  { label: 'checkbox', value: 'checkbox' },
+  { label: 'rate', value: 'rate' },
+  { label: 'radio', value: 'radio' },
+  { label: 'radioButton', value: 'radioButton' },
+  { label: 'progress', value: 'progress' },
+  { label: 'percent', value: 'percent' },
+  { label: 'second', value: 'second' },
+  { label: 'avatar', value: 'avatar' },
+  { label: 'code', value: 'code' },
+  { label: 'switch', value: 'switch' },
+  { label: 'fromNow', value: 'fromNow' },
+  { label: 'image', value: 'image' },
+  { label: 'jsonCode', value: 'jsonCode' },
+  { label: 'color', value: 'color' },
 ];

src/SortableList/demos/provider.tsx

@@ -35,7 +35,7 @@ const Extra = () => {
       style={{ marginBottom: 8 }}
       onClick={() => message.info(JSON.stringify(instance.getValue()))}
     >
-      获取值
+      Get Value
     </Button>
   );
 };

src/SortableList/demos/ref.tsx

@@ -22,7 +22,7 @@ export default () => {
   return (
     <Flexbox padding={24} style={{ background: token.colorBgLayout }}>
       <Flexbox horizontal align={'center'} distribution={'space-between'}>
-        <div>列配置项</div>
+        <div>Column Config</div>
         <ActionIcon
           icon={<PlusCircleFilled />}
           key={'edit'}

src/SortableList/demos/renderItem.tsx

@@ -37,7 +37,7 @@ const Demo = () => {
             );
           }}
         >
-          头部添加一项
+          Add item from top
         </Button>
         <Button
           onClick={() => {
@@ -50,7 +50,7 @@ const Demo = () => {
             );
           }}
         >
-          尾部添加一项
+          Add item from bottom
         </Button>
       </Flexbox>
 
@@ -88,7 +88,7 @@ const Demo = () => {
                     );
                   }}
                 >
-                  上方
+                  Up
                 </Button>
                 <Button
                   size={'small'}
@@ -103,18 +103,18 @@ const Demo = () => {
                     );
                   }}
                 >
-                  下方
+                  Down
                 </Button>
                 <Button
                   size={'small'}
                   danger
                   type={'text'}
                   onClick={() => ref.current.removeItem(index)}
                 >
-                  删除
+                  Delete
                 </Button>
                 <Button size={'small'} type={'text'} {...listeners}>
-                  拖拽
+                  Drag
                 </Button>
               </Flexbox>
             </Flexbox>

src/SortableList/index.en-US.md

@@ -13,7 +13,7 @@ Provides basic underlying encapsulation for sortable list scenarios, which can b
 
 ## Code 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" ></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>
 
 ## API
 

src/SortableTree/demos/controlled.tsx

@@ -1,6 +1,3 @@
-/**
- * title: 受控模式
- */
 import type { TreeData } from '@ant-design/pro-editor';
 import { Input, SortableTree, useSortableTree } from '@ant-design/pro-editor';
 import { useState } from 'react';

src/SortableTree/demos/default.tsx

@@ -1,7 +1,3 @@
-/**
- * title: 基本使用
- * description: 默认支持增加、删除、排序操作。
- */
 import { SortableTree } from '@ant-design/pro-editor';
 
 import { initialData } from './data';

src/SortableTree/demos/disableDrag.tsx

@@ -1,6 +1,3 @@
-/**
- * title: 禁用拖拽
- */
 import { SortableTree } from '@ant-design/pro-editor';
 
 import { initialData } from './data';

src/SortableTree/demos/renderContent.tsx

@@ -1,7 +1,3 @@
-/**
- * title: 自定义内容
- * description: 使用 renderContent 自定义渲染
- */
 import type { TreeData } from '@ant-design/pro-editor';
 import { IconPicker, SortableTree } from '@ant-design/pro-editor';
 import { Input } from 'antd';

src/SortableTree/demos/sortableRule.tsx

@@ -1,7 +1,3 @@
-/**
- * title: 自定义可拖动规则
- * description: 通过函数规则自定义是否可拖动
- */
 import { SortableTree } from '@ant-design/pro-editor';
 
 import { message } from 'antd';

src/SortableTree/demos/virtual.tsx

@@ -1,7 +1,3 @@
-/**
- * title: 虚拟滚动
- * description: 数据量较大时，使用 virtual 配置虚拟滚动
- */
 import { SortableTree } from '@ant-design/pro-editor';
 import { treeData } from './data/virtual';
 

src/SortableTree/index.en-US.md

@@ -1,6 +1,6 @@
 ---
-title: SortableTree Sortable Tree
-group: Sortable Component
+title: SortableTree
+group: Sortable
 atomId: SortableTree
 demo:
   cols: 2

src/SortableTree/index.zh-CN.md

@@ -12,7 +12,16 @@ 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"  title="基本使用"
+ description="默认支持增加、删除、排序操作。"></code>
+<code src="./demos/controlled.tsx"  title="受控模式"></code>
+<code src="./demos/renderContent.tsx"  title="自定义内容"
+ description="使用 `renderContent` 自定义渲染"></code>
+<code src="./demos/disableDrag.tsx" title="禁用拖拽"></code>
+<code src="./demos/sortableRule.tsx"  title="自定义可拖动规则"
+ description="通过函数规则自定义是否可拖动"></code>
+<code src="./demos/virtual.tsx" title="虚拟滚动"
+ description="数据量较大时，使用 `virtual` 配置虚拟滚动" ></code>
 
 ## API