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.
97 lines
2.4 KiB
TypeScript
97 lines
2.4 KiB
TypeScript
import { useCallback } from "react";
|
|
import { PlusIcon } from "@heroicons/react/outline";
|
|
import { Button, styled } from "@mui/joy";
|
|
import { useFormikContext } from "formik";
|
|
import Record from "../../Record";
|
|
import { IEditServiceForm } from "../../../types";
|
|
|
|
const Root = styled("div")`
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
`;
|
|
|
|
const Records = styled("div")`
|
|
display: flex;
|
|
flex-direction: column;
|
|
row-gap: ${({ theme }) => theme.spacing(1)};
|
|
`;
|
|
|
|
const AddButton = styled(Button)`
|
|
margin-top: ${({ theme }) => theme.spacing(1)};
|
|
`;
|
|
|
|
const Description = styled("p")`
|
|
margin-top: ${({ theme }) => theme.spacing(1)};
|
|
text-align: center;
|
|
color: #7a7a7a;
|
|
font-size: 14px;
|
|
`;
|
|
|
|
const Volumes = () => {
|
|
const formik = useFormikContext<IEditServiceForm>();
|
|
const { volumes } = formik.values;
|
|
|
|
const handleNewVolume = useCallback(() => {
|
|
formik.setFieldValue(`volumes[${volumes.length}]`, {
|
|
name: "",
|
|
containerPath: "",
|
|
accessMode: ""
|
|
});
|
|
}, [formik]);
|
|
|
|
const handleRemoveVolume = useCallback(
|
|
(index: number) => {
|
|
const newVolumes = volumes.filter(
|
|
(_: unknown, currentIndex: number) => currentIndex != index
|
|
);
|
|
formik.setFieldValue(`volumes`, newVolumes);
|
|
},
|
|
[formik]
|
|
);
|
|
|
|
const emptyVolumes = volumes && volumes.length === 0 ? true : false;
|
|
|
|
return (
|
|
<Root>
|
|
{!emptyVolumes && (
|
|
<Records>
|
|
{volumes.map((_: unknown, index: number) => (
|
|
<Record
|
|
key={index}
|
|
index={index}
|
|
fields={[
|
|
{
|
|
name: `volumes[${index}].name`,
|
|
placeholder: "Name",
|
|
required: true,
|
|
type: "text"
|
|
},
|
|
{
|
|
name: `volumes[${index}].containerPath`,
|
|
placeholder: "Container path",
|
|
type: "text"
|
|
},
|
|
{
|
|
name: `volumes[${index}].accessMode`,
|
|
placeholder: "Access mode",
|
|
type: "text"
|
|
}
|
|
]}
|
|
onRemove={handleRemoveVolume}
|
|
/>
|
|
))}
|
|
</Records>
|
|
)}
|
|
{emptyVolumes && <Description>No volumes.</Description>}
|
|
|
|
<AddButton size="sm" variant="plain" onClick={handleNewVolume}>
|
|
<PlusIcon className="h-4 w-4 mr-2" />
|
|
New volume
|
|
</AddButton>
|
|
</Root>
|
|
);
|
|
};
|
|
|
|
export default Volumes;
|