feat(EditableProTable): 可编辑表格支持自定义渲染新建按钮

ant-design · Oct 18, 2024 · cd33ba1 · cd33ba1
1 parent 9c19bcc
commit cd33ba1
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 42 deletions.
diff --git a/packages/table/src/components/EditableTable/index.en-US.md b/packages/table/src/components/EditableTable/index.en-US.md
@@ -34,6 +34,7 @@ EditableProTable is essentially the same as ProTable, with a few presets added t
 | `value` | Same as dataSource, pass in an array of metadata for table rendering | `T[]` | `undefined` |
 | `onChange` | The dataSource is triggered when the table is modified, both deletion and modification. | `(value:T[])=>void` | `undefined` |
 | `recordCreatorProps` | Configuration related to creating a new row of data | [RecordCreatorProps](#recordcreator) & [ButtonProps](https://ant.design/components/button/#API) | - |
+| `renderCreatorButton` | Custom render new button | `(originNode: React.ReactNode) => originNode` | `undefined` |
 | `maxLength` | The maximum number of rows, the New button will disappear when the maximum number of rows is reached | number | - |
 | `editable` | Related configuration of editable table | [TableRowEditable](#editable-edit-line-configuration) | - |
 | `controlled` | Whether controlled, if controlled every edit modifies the dataSource | `boolean` | false |
@@ -135,6 +136,10 @@ recordCreatorProps = {
   newRecordType: 'dataSource',
   // If not specified, it will use the index as the row ID
   record: {},
+  // Set button text
+  creatorButtonText: 'New line ',
+  // Custom render new button
+  renderCreatorButton: (originNode: React.ReactNode) => originNode,
   // Button style settings, you can control whether the button is displayed
   // This can be used to implement features like maximum and minimum row limits
   style: {
@@ -145,25 +150,6 @@ recordCreatorProps = {
 };
 ```
 
-```typescript
-recordCreatorProps = {
-  // Add at the top or at the end
-  position: 'bottom',
-  // the way to add a new line, default is cached, will disappear when cancelled
-  // if set to dataSource it will trigger onchange, it won't disappear if cancelled, only deleted
-  newRecordType: 'dataSource',
-  // If you don't write key, index will be used as row id
-  record: {},
-  // the style of the button, you can set whether the button is displayed or not
-  // so that you can do things like max row limit and min row limit
-  style: {
-    display: 'none',
-  },
-  // https://ant.design/components/button/#API
-  ... .antButtonProps,
-};
-```
-
 ### renderFormItem Custom Edit Component
 
 As much as we would like the default valueType to meet all our needs, the reality is often not as good as it could be. So we also provide `renderFormItem` to customize the edit input component.

diff --git a/packages/table/src/components/EditableTable/index.md b/packages/table/src/components/EditableTable/index.md
@@ -48,6 +48,7 @@ atomId: EditableProTable
 | `value` | 同 dataSource，传入一个数组，是 table 渲染的元数据 | `T[]` | `undefined` |
 | `onChange` | dataSource 修改时触发，删除和修改都会触发，如果设置了 value，Table 会成为一个受控组件。 | `(value:T[])=>void` | `undefined` |
 | `recordCreatorProps` | 新建一行数据的相关配置 | [RecordCreatorProps](#recordcreator) & [ButtonProps](https://ant.design/components/button-cn/#API) | - |
+| `renderCreatorButton` | 自定义渲染新建按钮 | `(originNode: React.ReactNode) => originNode` | `undefined` |
 | `maxLength` | 最大的行数，到达最大行数新建按钮会自动消失 | number | - |
 | `editable` | 可编辑表格的相关配置 | [TableRowEditable](#editable-编辑行配置) | - |
 | `controlled` | 是否受控，如果受控每次编辑都会触发 onChange，并且会修改 dataSource | `boolean` | false |
@@ -153,6 +154,8 @@ recordCreatorProps = {
   record: {},
   // 设置按钮文案
   creatorButtonText: '新增一行',
+  // 自定义渲染按钮
+  renderCreatorButton: (originNode: React.ReactNode) => originNode,
   // 按钮的样式设置，可以设置按钮是否显示
   // 这样可以做最大行限制和最小行限制之类的功能
   style: {

diff --git a/packages/table/src/components/EditableTable/index.tsx b/packages/table/src/components/EditableTable/index.tsx
@@ -68,7 +68,7 @@ export type EditableFormInstance<T = any> = ProFormInstance<T> & {
   setRowData?: (rowIndex: string | number, data: Partial<T>) => void;
 };
 
-export type RecordCreatorProps<DataSourceType> = {
+export interface RecordCreatorProps<DataSourceType> extends ButtonProps {
   record:
     | DataSourceType
     | ((index: number, dataSource: DataSourceType[]) => DataSourceType);
@@ -84,7 +84,9 @@ export type RecordCreatorProps<DataSourceType> = {
   parentKey?:
     | React.Key
     | ((index: number, dataSource: DataSourceType[]) => React.Key);
-};
+  /** 设置按钮文案 */
+  creatorButtonText?: React.ReactNode;
+}
 
 export type EditableProTableProps<
   T,
@@ -103,12 +105,9 @@ export type EditableProTableProps<
   editableFormRef?: React.Ref<EditableFormInstance<T> | undefined>;
 
   /** @name 新建按钮的设置 */
-  recordCreatorProps?:
-    | (RecordCreatorProps<T> &
-        ButtonProps & {
-          creatorButtonText?: React.ReactNode;
-        })
-    | false;
+  recordCreatorProps?: RecordCreatorProps<T> | false;
+  /** 自定义渲染按钮 */
+  renderCreatorButton?: (originNode: React.ReactNode) => React.ReactNode;
   /** 最大行数 */
   maxLength?: number;
   /** Table 的值发生改变，为了适应 Form 调整了顺序 */
@@ -160,6 +159,7 @@ function EditableTable<
     maxLength,
     formItemProps,
     recordCreatorProps,
+    renderCreatorButton,
     rowKey,
     controlled,
     defaultValue,
@@ -328,11 +328,28 @@ function EditableTable<
     ...restButtonProps
   } = recordCreatorProps || {};
   const isTop = position === 'top';
-
   const creatorButtonDom = useMemo(() => {
     if (typeof maxLength === 'number' && maxLength <= value?.length) {
       return false;
     }
+
+    const originNode = (
+      <Button
+        type="dashed"
+        style={{
+          display: 'block',
+          margin: '10px 0',
+          width: '100%',
+          ...style,
+        }}
+        icon={<PlusOutlined />}
+        {...restButtonProps}
+      >
+        {creatorButtonText ||
+          intl.getMessage('editableTable.action.add', '添加一行数据')}
+      </Button>
+    );
+
     return (
       recordCreatorProps !== false && (
         <RecordCreator
@@ -341,20 +358,7 @@ function EditableTable<
           parentKey={runFunction(parentKey, value?.length, value)}
           newRecordType={newRecordType}
         >
-          <Button
-            type="dashed"
-            style={{
-              display: 'block',
-              margin: '10px 0',
-              width: '100%',
-              ...style,
-            }}
-            icon={<PlusOutlined />}
-            {...restButtonProps}
-          >
-            {creatorButtonText ||
-              intl.getMessage('editableTable.action.add', '添加一行数据')}
-          </Button>
+          <>{renderCreatorButton?.(originNode) ?? originNode}</>
         </RecordCreator>
       )
     );