104 lines
2.3 KiB
TypeScript
104 lines
2.3 KiB
TypeScript
import { ModalForm, ProFormText } from '@ant-design/pro-form';
|
|
import { FormattedMessage, useIntl } from '@umijs/max';
|
|
|
|
interface EditModalProps {
|
|
visible: boolean;
|
|
values: {
|
|
name?: string;
|
|
address?: string;
|
|
group_id?: string;
|
|
external_id?: string;
|
|
type?: string;
|
|
};
|
|
onVisibleChange: (visible: boolean) => void;
|
|
onFinish: (
|
|
values: Pick<MasterModel.Thing, 'name'> &
|
|
Pick<MasterModel.ThingMetadata, 'address' | 'external_id'>,
|
|
) => Promise<boolean>;
|
|
}
|
|
|
|
const EditModal: React.FC<EditModalProps> = ({
|
|
visible,
|
|
values,
|
|
onVisibleChange,
|
|
onFinish,
|
|
}) => {
|
|
const intl = useIntl();
|
|
|
|
return (
|
|
<ModalForm
|
|
open={visible}
|
|
initialValues={values}
|
|
title={intl.formatMessage({
|
|
id: 'pages.things.update.title',
|
|
defaultMessage: 'Update thing',
|
|
})}
|
|
width={480}
|
|
onVisibleChange={onVisibleChange}
|
|
onFinish={onFinish}
|
|
modalProps={{
|
|
destroyOnHidden: true,
|
|
}}
|
|
>
|
|
<ProFormText
|
|
name="name"
|
|
label={intl.formatMessage({
|
|
id: 'pages.things.name',
|
|
defaultMessage: 'Name',
|
|
})}
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: (
|
|
<FormattedMessage
|
|
id="pages.things.name.required"
|
|
defaultMessage="The name is required"
|
|
/>
|
|
),
|
|
},
|
|
]}
|
|
/>
|
|
|
|
<ProFormText
|
|
name="external_id"
|
|
label={intl.formatMessage({
|
|
id: 'pages.things.external_id',
|
|
defaultMessage: 'ExternalId',
|
|
})}
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: (
|
|
<FormattedMessage
|
|
id="pages.things.external_id.required"
|
|
defaultMessage="The externalId is required"
|
|
/>
|
|
),
|
|
},
|
|
]}
|
|
/>
|
|
|
|
<ProFormText
|
|
name="address"
|
|
label={intl.formatMessage({
|
|
id: 'pages.things.address',
|
|
defaultMessage: 'Address',
|
|
})}
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: (
|
|
<FormattedMessage
|
|
id="pages.things.address.required"
|
|
defaultMessage="The address is required"
|
|
/>
|
|
),
|
|
},
|
|
]}
|
|
/>
|
|
</ModalForm>
|
|
);
|
|
};
|
|
|
|
export default EditModal;
|