144 lines
5.1 KiB
JavaScript
144 lines
5.1 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
||
import { Affix, Alert, Button, Form, Input, Popconfirm, Space, Table, Typography } from 'antd';
|
||
const EditableCell = ({ editing, dataIndex, title, record, index, children, ...restProps }) => {
|
||
return (<td {...restProps}>
|
||
{editing ? (<Form.Item name={dataIndex} style={{ margin: 0 }}>
|
||
<Input />
|
||
</Form.Item>) : (children)}
|
||
</td>);
|
||
};
|
||
export default function Render(props) {
|
||
const { methods, data } = props;
|
||
const { t, myUpdate, arraysAreEqual } = methods;
|
||
const { i18n, dataArray, oakFullpath, oakEntity } = data;
|
||
const { position, module, namespace, } = i18n || {};
|
||
const [form] = Form.useForm();
|
||
const [rowData, setRowData] = useState(dataArray);
|
||
const [editingKey, setEditingKey] = useState('');
|
||
const [dirty, setDirty] = useState(false);
|
||
useEffect(() => {
|
||
setRowData(dataArray);
|
||
}, [dataArray]);
|
||
useEffect(() => {
|
||
if (arraysAreEqual(rowData, dataArray)) {
|
||
setDirty(false);
|
||
}
|
||
else {
|
||
setDirty(true);
|
||
}
|
||
}, [dataArray, rowData]);
|
||
const isEditing = (record) => record.key === editingKey;
|
||
const edit = (record) => {
|
||
form.setFieldsValue({ ...record });
|
||
setEditingKey(record.key);
|
||
};
|
||
const cancel = () => {
|
||
setEditingKey('');
|
||
};
|
||
const save = async (key) => {
|
||
try {
|
||
const row = (await form.validateFields());
|
||
const newData = [...rowData];
|
||
const index = newData.findIndex((item) => key === item.key);
|
||
if (index > -1) {
|
||
const item = newData[index];
|
||
newData.splice(index, 1, {
|
||
...item,
|
||
...row,
|
||
});
|
||
setRowData(newData);
|
||
setEditingKey('');
|
||
}
|
||
else {
|
||
newData.push(row);
|
||
setRowData(newData);
|
||
setEditingKey('');
|
||
}
|
||
}
|
||
catch (errInfo) {
|
||
console.log('Validate Failed:', errInfo);
|
||
}
|
||
};
|
||
const columns = [
|
||
{
|
||
title: 'key',
|
||
dataIndex: 'key',
|
||
width: '25%',
|
||
editable: false,
|
||
},
|
||
{
|
||
title: 'value',
|
||
dataIndex: 'value',
|
||
width: '65%',
|
||
editable: true,
|
||
},
|
||
{
|
||
title: t('operation'),
|
||
dataIndex: 'operation',
|
||
render: (_, record) => {
|
||
const editable = isEditing(record);
|
||
return editable ? (<span>
|
||
<Typography.Link onClick={() => save(record.key)} style={{ marginInlineEnd: 8 }}>
|
||
{t('save')}
|
||
</Typography.Link>
|
||
<Popconfirm title={t("Sure to cancel")} onConfirm={cancel}>
|
||
<a>{t('common::action.cancel')}</a>
|
||
</Popconfirm>
|
||
</span>) : (<Typography.Link disabled={editingKey !== ''} onClick={() => edit(record)}>
|
||
{t('common::action.editor')}
|
||
</Typography.Link>);
|
||
},
|
||
},
|
||
];
|
||
const mergedColumns = columns.map((col) => {
|
||
if (!col.editable) {
|
||
return col;
|
||
}
|
||
return {
|
||
...col,
|
||
onCell: (record) => ({
|
||
record,
|
||
dataIndex: col.dataIndex,
|
||
title: col.title,
|
||
editing: isEditing(record),
|
||
}),
|
||
};
|
||
});
|
||
return (<>
|
||
<Affix offsetTop={64}>
|
||
<Alert message={<div>
|
||
<text>
|
||
您正在更新文件位置为：
|
||
<Typography.Text keyboard>
|
||
{position}
|
||
</Typography.Text>
|
||
的国际化
|
||
</text>
|
||
</div>} type="info" showIcon action={<Space>
|
||
<Button disabled={!dirty} type="primary" danger onClick={() => {
|
||
setRowData(dataArray);
|
||
}} style={{
|
||
marginRight: 10,
|
||
}}>
|
||
{t('common::reset')}
|
||
</Button>
|
||
<Button disabled={!dirty} type="primary" onClick={() => myUpdate(rowData)}>
|
||
{t('common::action.confirm')}
|
||
</Button>
|
||
</Space>}/>
|
||
</Affix>
|
||
<div style={{
|
||
marginTop: 12, padding: 12, width: '50%', color: 'var(--oak-text-color-placeholder)',
|
||
borderRadius: 8, border: '1px solid var(--oak-border-color)'
|
||
}}>
|
||
{t('tip')}
|
||
</div>
|
||
<Form form={form} component={false}>
|
||
<Table components={{
|
||
body: { cell: EditableCell },
|
||
}} bordered dataSource={rowData} columns={mergedColumns} pagination={{ onChange: cancel }} style={{ padding: '24px 0px' }}/>
|
||
</Form>
|
||
</>);
|
||
}
|
||
;
|