113 lines
3.5 KiB
TypeScript
113 lines
3.5 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
||
import { Row, Col, Input, Button } from 'antd';
|
||
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons';
|
||
import './KeyValueList.css';
|
||
|
||
export type DictValue = Record<string, string>;
|
||
|
||
type KeyValuePair = { id: string; k: string; v: string };
|
||
|
||
type Props = {
|
||
value?: DictValue;
|
||
onChange?: (value: DictValue) => void;
|
||
};
|
||
|
||
const KeyValueList: React.FC<Props> = ({ value, onChange }) => {
|
||
const [rows, setRows] = useState<KeyValuePair[]>([]);
|
||
|
||
useEffect(() => {
|
||
// 初始化时提供一行空输入；之后只合并父值，不再自动新增空行
|
||
const initializedRef = (KeyValueList as any)._initializedRef || { current: false };
|
||
(KeyValueList as any)._initializedRef = initializedRef;
|
||
|
||
setRows((prev) => {
|
||
const existingIdByKey = new Map(prev.filter((r) => r.k).map((r) => [r.k, r.id]));
|
||
const valuePairs: KeyValuePair[] = value
|
||
? Object.keys(value).map((key) => ({
|
||
id: existingIdByKey.get(key) || `${key}-${Date.now()}-${Math.random().toString(36).slice(2)}`,
|
||
k: key,
|
||
v: value[key] ?? '',
|
||
}))
|
||
: [];
|
||
const blankRows = prev.filter((r) => !r.k);
|
||
let merged = [...valuePairs, ...blankRows];
|
||
if (!initializedRef.current && merged.length === 0) {
|
||
merged = [{ id: `row-${Date.now()}-${Math.random().toString(36).slice(2)}`, k: '', v: '' }];
|
||
}
|
||
initializedRef.current = true;
|
||
return merged;
|
||
});
|
||
}, [value]);
|
||
|
||
const emitChange = (nextRows: KeyValuePair[]) => {
|
||
const dict: DictValue = {};
|
||
nextRows.forEach((r) => {
|
||
if (r.k && r.k.trim() !== '') {
|
||
dict[r.k] = r.v ?? '';
|
||
}
|
||
});
|
||
onChange?.(dict);
|
||
};
|
||
|
||
const updateRow = (id: string, field: 'k' | 'v', val: string) => {
|
||
const next = rows.map((r) => (r.id === id ? { ...r, [field]: val } : r));
|
||
setRows(next);
|
||
emitChange(next);
|
||
};
|
||
|
||
const addRow = () => {
|
||
const next = [...rows, { id: `row-${Date.now()}-${Math.random().toString(36).slice(2)}`, k: '', v: '' }];
|
||
setRows(next);
|
||
// 不触发 onChange，因为字典未变化（空行不入字典）
|
||
};
|
||
|
||
const removeRow = (id: string) => {
|
||
const removed = rows.find((r) => r.id === id);
|
||
const next = rows.filter((r) => r.id !== id);
|
||
setRows(next);
|
||
if (removed?.k && removed.k.trim() !== '') {
|
||
emitChange(next);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="kv-list">
|
||
{rows.map((r) => (
|
||
<div className="kv-row" key={r.id}>
|
||
<Row gutter={[12, 12]} align="middle">
|
||
<Col xs={24} md={10}>
|
||
<Input
|
||
size="large"
|
||
placeholder="键（例如：籍贯、职业）"
|
||
value={r.k}
|
||
onChange={(e) => updateRow(r.id, 'k', e.target.value)}
|
||
/>
|
||
</Col>
|
||
<Col xs={24} md={12}>
|
||
<Input
|
||
size="large"
|
||
placeholder="值（例如：北京、产品经理）"
|
||
value={r.v}
|
||
onChange={(e) => updateRow(r.id, 'v', e.target.value)}
|
||
/>
|
||
</Col>
|
||
<Col xs={24} md={2}>
|
||
<Button
|
||
className="kv-remove"
|
||
aria-label="删除"
|
||
icon={<DeleteOutlined />}
|
||
onClick={() => removeRow(r.id)}
|
||
/>
|
||
</Col>
|
||
</Row>
|
||
</div>
|
||
))}
|
||
|
||
<Button type="dashed" block icon={<PlusOutlined />} onClick={addRow}>
|
||
添加一项
|
||
</Button>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default KeyValueList; |