Files
gpustack-ui/src/pages/model-routes/components/add-route-modal.tsx
T

91 lines
2.1 KiB
TypeScript

import { PageActionType } from '@/config/types';
import { AlertBlockInfo, FormDrawer, ModalFooter } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import React, { useRef } from 'react';
import { FormData, RouteItem as ListItem } from '../config/types';
import ModelRouteForm from '../forms';
type AddModalProps = {
title: string;
action: PageActionType;
realAction?: string;
open: boolean;
currentData?: ListItem; // Used when action is EDIT
onOk: (values: FormData) => void;
onCancel: () => void;
};
const AddProvider: React.FC<AddModalProps> = ({
title,
action,
realAction,
open,
currentData,
onOk,
onCancel
}) => {
const intl = useIntl();
const [isChanged, setIsChanged] = React.useState(false);
const form = useRef<any>(null);
const handleSubmit = () => {
form.current?.submit();
};
const onFinish = async (data: FormData) => {
onOk({
...data
});
};
const handleCancel = () => {
form.current?.resetFields();
onCancel();
};
return (
<FormDrawer
title={title}
open={open}
onCancel={handleCancel}
onSubmit={handleSubmit}
width={600}
footer={
<div style={{ paddingInline: 24, paddingBottom: 8 }}>
{isChanged && (
<AlertBlockInfo
type="warning"
contentStyle={{ paddingInline: 0 }}
message={intl.formatMessage({
id: 'routes.form.fallback.warning'
})}
></AlertBlockInfo>
)}
<ModalFooter
onOk={handleSubmit}
onCancel={onCancel}
styles={{
wrapper: {
paddingTop: 16
}
}}
></ModalFooter>
</div>
}
>
<ModelRouteForm
ref={form}
action={action}
realAction={realAction}
currentData={currentData}
onFinish={onFinish}
open={open}
onFallbackChange={(changed: boolean) => {
setIsChanged(changed);
}}
/>
</FormDrawer>
);
};
export default AddProvider;