This is an automated email from the ASF dual-hosted git repository.
dockerzhang pushed a commit to branch branch-1.4
in repository https://gitbox.apache.org/repos/asf/inlong.git
commit 8c8145974548568a68bb81720cabdafbefe545be
Author: Daniel <lee...@apache.org>
AuthorDate: Fri Nov 11 17:08:55 2022 +0800
[INLONG-6511][Dashboard] The Select/AutoComplete component in EditableTable
will mistakenly change the value and cause re-rendering (#6512)
---
.../src/components/EditableTable/index.tsx | 22 ++++++++++------------
1 file changed, 10 insertions(+), 12 deletions(-)
diff --git a/inlong-dashboard/src/components/EditableTable/index.tsx
b/inlong-dashboard/src/components/EditableTable/index.tsx
index cadfa05ed..f5961d6b8 100644
--- a/inlong-dashboard/src/components/EditableTable/index.tsx
+++ b/inlong-dashboard/src/components/EditableTable/index.tsx
@@ -20,6 +20,7 @@
import React, { useEffect, useState } from 'react';
import { AutoComplete, Button, Table, Input, InputNumber, Form } from 'antd';
import { FormItemProps } from 'antd/lib/form';
+import { TableProps } from 'antd/lib/table';
import { useTranslation } from 'react-i18next';
import HighSelect from '@/components/HighSelect';
import { useUpdateEffect } from '@/hooks';
@@ -51,12 +52,12 @@ export interface ColumnsItemProps {
visible?: (val: unknown, rowVal: RowValueType) => boolean | boolean;
}
-export interface EditableTableProps {
+export interface EditableTableProps
+ extends Omit<TableProps<any>, 'value' | 'onChange' | 'columns'> {
// id comes from FormItem, like name
id?: string;
value?: RowValueType[];
onChange?: (value: RowValueType[]) => void;
- size?: string;
columns: ColumnsItemProps[];
// Can Edit(Can be changed to read-only)? Default: true.
editing?: boolean;
@@ -102,7 +103,7 @@ const Comp = ({
required = true,
canDelete = true,
canAdd = true,
- size,
+ ...rest
}: EditableTableProps) => {
if (!id) {
console.error(
@@ -243,15 +244,12 @@ const Comp = ({
// Use div to wrap input, select, etc. so that the value and onChange
events are not taken over by FormItem
// So the actual value change must be changed by onChange itself and
then exposed to the outer component
<Form.Item
- rules={
- id
- ? item.rules
- : item.rules?.map(rule =>
- typeof rule === 'function' ? rule : { ...rule, transform: ()
=> text ?? '' },
- )
- }
+ rules={item.rules?.map(rule =>
+ typeof rule === 'function' ? rule : { ...rule, transform: () =>
text ?? '' },
+ )}
messageVariables={{ label: item.title }}
- name={id ? [id, idx, item.dataIndex] : ['__proto__', 'editableRow',
idx, item.dataIndex]}
+ // If the `name=[id, idx, item.dataIndex]` is used, the array value
error will occur when the select/autocomplete input is entered, and the
setValue will be automatically reset.
+ name={['__proto__', 'editableRow', idx, item.dataIndex]}
className={styles.formItem}
>
<div>{formCompObj[item.type || 'input']}</div>
@@ -279,10 +277,10 @@ const Comp = ({
return (
<Table
+ {...rest}
dataSource={data}
columns={tableColumns}
rowKey="_etid"
- size={size as any}
footer={
editing && canAdd
? () => (
