113 lines
2.7 KiB
TypeScript
113 lines
2.7 KiB
TypeScript
import LabelSelector from '@/components/label-selector';
|
|
import ModalFooter from '@/components/modal-footer';
|
|
import SealInput from '@/components/seal-form/seal-input';
|
|
import { useIntl } from '@umijs/max';
|
|
import { Form, Modal } from 'antd';
|
|
import React from 'react';
|
|
import SimpleBar from 'simplebar-react';
|
|
import 'simplebar-react/dist/simplebar.min.css';
|
|
|
|
type ViewModalProps = {
|
|
open: boolean;
|
|
onCancel: () => void;
|
|
onOk: (values: FormData) => Promise<void>;
|
|
data: {
|
|
name: string;
|
|
labels: object;
|
|
};
|
|
};
|
|
interface FormData {
|
|
labels: object;
|
|
name: string;
|
|
}
|
|
|
|
const UpdateLabels: React.FC<ViewModalProps> = (props) => {
|
|
const { open, onCancel, data, onOk } = props || {};
|
|
const intl = useIntl();
|
|
const [form] = Form.useForm();
|
|
const labels = Form.useWatch('labels', form);
|
|
|
|
const handleLabelsChange = (labels: object) => {
|
|
form.setFieldValue('labels', labels);
|
|
};
|
|
|
|
const handleSumit = () => {
|
|
form.submit();
|
|
};
|
|
|
|
return (
|
|
<Modal
|
|
title={intl.formatMessage({ id: 'resources.button.edit' })}
|
|
open={open}
|
|
centered={true}
|
|
onCancel={onCancel}
|
|
destroyOnClose={true}
|
|
closeIcon={true}
|
|
maskClosable={false}
|
|
keyboard={false}
|
|
width={600}
|
|
styles={{
|
|
content: {
|
|
padding: '0px'
|
|
},
|
|
header: {
|
|
padding: 'var(--ant-modal-content-padding)',
|
|
paddingBottom: '0'
|
|
},
|
|
body: {
|
|
padding: '0'
|
|
},
|
|
footer: {
|
|
padding: '0 var(--ant-modal-content-padding)'
|
|
}
|
|
}}
|
|
footer={
|
|
<ModalFooter onOk={handleSumit} onCancel={onCancel}></ModalFooter>
|
|
}
|
|
>
|
|
<SimpleBar
|
|
style={{
|
|
maxHeight: '550px'
|
|
}}
|
|
>
|
|
<Form
|
|
name="deployModel"
|
|
form={form}
|
|
onFinish={onOk}
|
|
preserve={false}
|
|
clearOnDestroy={true}
|
|
initialValues={{
|
|
name: data.name,
|
|
labels: data.labels
|
|
}}
|
|
style={{
|
|
padding: 'var(--ant-modal-content-padding)',
|
|
paddingBlock: 0
|
|
}}
|
|
>
|
|
<Form.Item<FormData> name="name">
|
|
<SealInput.Input
|
|
label={intl.formatMessage({
|
|
id: 'common.table.name'
|
|
})}
|
|
disabled
|
|
/>
|
|
</Form.Item>
|
|
<Form.Item<FormData> name="labels">
|
|
<LabelSelector
|
|
label={intl.formatMessage({
|
|
id: 'resources.table.labels'
|
|
})}
|
|
labels={labels}
|
|
btnText="common.button.addLabel"
|
|
onChange={handleLabelsChange}
|
|
></LabelSelector>
|
|
</Form.Item>
|
|
</Form>
|
|
</SimpleBar>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default React.memo(UpdateLabels);
|