150 lines
4.1 KiB
TypeScript
150 lines
4.1 KiB
TypeScript
import ModalFooter from '@/components/modal-footer';
|
|
import ScrollerModal from '@/components/scroller-modal';
|
|
import SealInput from '@/components/seal-form/seal-input';
|
|
import { PageAction, PasswordReg } from '@/config';
|
|
import { PageActionType } from '@/config/types';
|
|
import { useIntl } from '@umijs/max';
|
|
import { Form } from 'antd';
|
|
import React from 'react';
|
|
import { FormData, ListItem } from '../config/types';
|
|
|
|
type AddModalProps = {
|
|
title: string;
|
|
action: PageActionType;
|
|
open: boolean;
|
|
onOk: (values: FormData) => void;
|
|
data?: ListItem;
|
|
onCancel: () => void;
|
|
provider: string; // 'kubernetes' | 'digitalocean';
|
|
};
|
|
const AddModal: React.FC<AddModalProps> = ({
|
|
title,
|
|
action,
|
|
open,
|
|
onOk,
|
|
data,
|
|
provider,
|
|
onCancel
|
|
}) => {
|
|
const [form] = Form.useForm();
|
|
const intl = useIntl();
|
|
|
|
const handleSumit = () => {
|
|
form.submit();
|
|
};
|
|
|
|
return (
|
|
<ScrollerModal
|
|
title={title}
|
|
open={open}
|
|
centered={true}
|
|
onOk={handleSumit}
|
|
onCancel={onCancel}
|
|
destroyOnClose={true}
|
|
closeIcon={false}
|
|
maskClosable={false}
|
|
keyboard={false}
|
|
width={600}
|
|
styles={{}}
|
|
footer={
|
|
<ModalFooter onOk={handleSumit} onCancel={onCancel}></ModalFooter>
|
|
}
|
|
>
|
|
<Form form={form} onFinish={onOk} preserve={false}>
|
|
<Form.Item<FormData>
|
|
name="name"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: intl.formatMessage(
|
|
{ id: 'common.form.rule.input' },
|
|
{
|
|
name: intl.formatMessage({ id: 'common.table.name' })
|
|
}
|
|
)
|
|
}
|
|
]}
|
|
>
|
|
<SealInput.Input
|
|
label={intl.formatMessage({ id: 'common.table.name' })}
|
|
required
|
|
></SealInput.Input>
|
|
</Form.Item>
|
|
{/* <Form.Item<FormData>
|
|
name="provider"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: intl.formatMessage(
|
|
{ id: 'common.form.rule.input' },
|
|
{
|
|
name: 'Provider'
|
|
}
|
|
)
|
|
}
|
|
]}
|
|
>
|
|
<SealSelect
|
|
label="Provider"
|
|
required
|
|
options={['Digital Ocean', 'Kubernetes', 'Custom'].map((item) => ({
|
|
label: item,
|
|
value: item
|
|
}))}
|
|
></SealSelect>
|
|
</Form.Item> */}
|
|
{provider === 'digital_ocean' && (
|
|
<>
|
|
<Form.Item<FormData>
|
|
name="access_key"
|
|
rules={[
|
|
{
|
|
required: action === PageAction.CREATE,
|
|
pattern: PasswordReg,
|
|
message: intl.formatMessage({
|
|
id: 'users.form.rule.password'
|
|
})
|
|
}
|
|
]}
|
|
>
|
|
<SealInput.Password
|
|
label="Access Key"
|
|
required={action === PageAction.CREATE}
|
|
></SealInput.Password>
|
|
</Form.Item>
|
|
<Form.Item<FormData>
|
|
name="secret_key"
|
|
rules={[
|
|
{
|
|
required: action === PageAction.CREATE,
|
|
pattern: PasswordReg,
|
|
message: intl.formatMessage({
|
|
id: 'users.form.rule.password'
|
|
})
|
|
}
|
|
]}
|
|
>
|
|
<SealInput.Password
|
|
label="Secret Key"
|
|
required={action === PageAction.CREATE}
|
|
></SealInput.Password>
|
|
</Form.Item>
|
|
</>
|
|
)}
|
|
{provider === 'kubernetes' && (
|
|
<Form.Item<FormData> name="kubeconfig" rules={[{ required: false }]}>
|
|
<SealInput.TextArea label="Kubeconfig"></SealInput.TextArea>
|
|
</Form.Item>
|
|
)}
|
|
<Form.Item<FormData> name="description" rules={[{ required: false }]}>
|
|
<SealInput.TextArea
|
|
label={intl.formatMessage({ id: 'common.table.description' })}
|
|
></SealInput.TextArea>
|
|
</Form.Item>
|
|
</Form>
|
|
</ScrollerModal>
|
|
);
|
|
};
|
|
|
|
export default AddModal;
|