import { TextField, useUpdate, useNotify, useRefresh, useRecordContext, useTranslate, useGetResourceLabel } from 'react-admin';
|
import { TextField as MuiTextField } from '@mui/material';
|
import { useState } from 'react';
|
|
const EditableTextField = ({ source, label, resource, isBlur }) => {
|
const record = useRecordContext();
|
const translate = useTranslate();
|
const [value, setValue] = useState(record[source]);
|
const [update] = useUpdate();
|
const notify = useNotify();
|
const refresh = useRefresh();
|
label = label ? label : ""
|
isBlur = isBlur == undefined ? false : isBlur
|
|
const handleBlur = () => {
|
isBlur ?
|
update(
|
resource,
|
{ id: record.id, data: { [source]: value } },
|
{
|
onSuccess: () => {
|
const succ = translate('common.action.updateSucc')
|
notify(succ, { type: 'success' });
|
refresh();
|
},
|
onError: () => {
|
const failed = translate('common.action.updateSucc')
|
notify(failed, { type: 'error' });
|
setValue(record[source]);
|
}
|
}
|
) :
|
{}
|
};
|
|
return (
|
<MuiTextField
|
value={value}
|
onChange={(e) => setValue(e.target.value)}
|
label={translate(label)}
|
onBlur={handleBlur}
|
fullWidth
|
/>
|
);
|
};
|
|
|
export default EditableTextField;
|
