49 lines
1.0 KiB
TypeScript
49 lines
1.0 KiB
TypeScript
"use client"
|
|
|
|
import CustomModal from "./CustomModal"
|
|
import { TextInput } from "@mantine/core"
|
|
import { useForm } from "@mantine/form"
|
|
|
|
interface ComponentProps {
|
|
open: boolean
|
|
handleCancel: () => void
|
|
handleOk: (name: string) => void
|
|
}
|
|
|
|
const BackupModal = ({ open, handleCancel, handleOk }: ComponentProps) => {
|
|
const form = useForm({
|
|
initialValues: {
|
|
backup_name: "",
|
|
},
|
|
validate: {
|
|
backup_name: (value) => (value.length < 1 ? "请输入备份名称" : null),
|
|
},
|
|
})
|
|
|
|
const handleSubmit = () => {
|
|
const { hasErrors } = form.validate()
|
|
if (!hasErrors) {
|
|
handleOk(form.values.backup_name)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<CustomModal
|
|
title="备份标注结果"
|
|
open={open}
|
|
onCancel={handleCancel}
|
|
onOk={handleSubmit}
|
|
centered
|
|
closeOnClickOutside={false}>
|
|
<TextInput
|
|
label="备份名称"
|
|
placeholder="请输入备份名称"
|
|
key="backup_name"
|
|
{...form.getInputProps("backup_name")}
|
|
/>
|
|
</CustomModal>
|
|
)
|
|
}
|
|
|
|
export default BackupModal
|