mirror of https://github.com/ctk-hq/ctk
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
75 lines
2.2 KiB
TypeScript
75 lines
2.2 KiB
TypeScript
import { useCallback, useMemo, useState } from "react";
|
|
import { Formik } from "formik";
|
|
|
|
import {
|
|
getFinalValues,
|
|
getInitialValues,
|
|
tabs,
|
|
validationSchema
|
|
} from "./form-utils";
|
|
import General from "./General";
|
|
import { CallbackFunction, IEditVolumeForm } from "../../../../types";
|
|
import { toaster } from "../../../../utils";
|
|
import { reportErrorsAndSubmit } from "../../../../utils/forms";
|
|
import { ScrollView } from "../../../ScrollView";
|
|
import Modal from "../../../Modal";
|
|
import Tabs from "../../../Tabs";
|
|
import Tab from "../../../Tab";
|
|
|
|
interface ICreateVolumeModalProps {
|
|
onHide: CallbackFunction;
|
|
onAddEndpoint: CallbackFunction;
|
|
}
|
|
|
|
const CreateVolumeModal = (props: ICreateVolumeModalProps) => {
|
|
const { onHide, onAddEndpoint } = props;
|
|
const [openTab, setOpenTab] = useState("General");
|
|
|
|
const handleCreate = useCallback((values: IEditVolumeForm, formik: any) => {
|
|
onAddEndpoint(getFinalValues(values));
|
|
formik.resetForm();
|
|
onHide();
|
|
|
|
toaster(`Created "${values.entryName}" volume successfully`, "success");
|
|
}, []);
|
|
|
|
const initialValues = useMemo(() => getInitialValues(), []);
|
|
|
|
return (
|
|
<Modal onHide={onHide} title="Add volume">
|
|
<Formik
|
|
initialValues={initialValues}
|
|
enableReinitialize={true}
|
|
onSubmit={handleCreate}
|
|
validationSchema={validationSchema}
|
|
>
|
|
{(formik) => (
|
|
<>
|
|
<Tabs value={openTab} onChange={setOpenTab}>
|
|
{tabs.map((tab) => (
|
|
<Tab key={tab.name} value={tab.name} title={tab.name} />
|
|
))}
|
|
</Tabs>
|
|
|
|
<ScrollView height="500px" className="relative px-4 py-3 flex-auto">
|
|
{openTab === "General" && <General />}
|
|
</ScrollView>
|
|
|
|
<div className="flex items-center justify-end px-4 py-3 border-t border-solid border-blueGray-200 rounded-b">
|
|
<button
|
|
className="btn-util"
|
|
type="button"
|
|
onClick={reportErrorsAndSubmit(formik)}
|
|
>
|
|
Add
|
|
</button>
|
|
</div>
|
|
</>
|
|
)}
|
|
</Formik>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default CreateVolumeModal;
|