76 lines
2.0 KiB
TypeScript
76 lines
2.0 KiB
TypeScript
import { Button, Card, Group, Text } from "@mantine/core";
|
|
import SecureImage from "../display/secure-img";
|
|
import { randomId } from "@mantine/hooks";
|
|
import { IconTrash } from "@tabler/icons-react";
|
|
import { UseFormReturnType } from "@mantine/form";
|
|
import { FlightFormSchema } from "@/util/types";
|
|
|
|
export default function ImageListInput({
|
|
label,
|
|
form,
|
|
field,
|
|
mt = "sm",
|
|
h = "100px",
|
|
}: {
|
|
label: string;
|
|
form: UseFormReturnType<
|
|
FlightFormSchema,
|
|
(values: FlightFormSchema) => FlightFormSchema
|
|
>;
|
|
field: string;
|
|
mt?: string;
|
|
w?: string;
|
|
h?: string;
|
|
}) {
|
|
const field_key = field as keyof typeof form.getTransformedValues;
|
|
|
|
return (
|
|
<>
|
|
{/* <Grid> */}
|
|
<Text size="sm" fw={700} mt={mt} mb="xs">
|
|
{label}
|
|
</Text>
|
|
<Group display="flex" gap="xs" style={{ flexWrap: "wrap" }}>
|
|
{(form.getTransformedValues()[field_key] as string[]).map((id) => (
|
|
// <Grid.Col key={randomId()}>
|
|
<Card key={randomId()} padding="md" shadow="md" withBorder>
|
|
{/* <Card.Section> */}
|
|
<SecureImage id={id} h={h} />
|
|
{/* </Card.Section> */}
|
|
<Button
|
|
mt="md"
|
|
leftSection={<IconTrash />}
|
|
onClick={() =>
|
|
form.setFieldValue(
|
|
field,
|
|
(form.getTransformedValues()[field_key] as string[]).filter(
|
|
(i) => i !== id
|
|
)
|
|
)
|
|
}
|
|
>
|
|
Remove
|
|
</Button>
|
|
</Card>
|
|
// </Grid.Col>
|
|
))}
|
|
</Group>
|
|
</>
|
|
// </Grid>
|
|
// <PillsInput label={label}>
|
|
// <Pill.Group>
|
|
// {imageIds.map((id: string) => (
|
|
// <Pill
|
|
// radius="sm"
|
|
// key={id}
|
|
// withRemoveButton
|
|
// onRemove={() => setImageIds(imageIds.filter((i) => i !== id))}
|
|
// >
|
|
// <SecureImage id={id} h="20px" />
|
|
// </Pill>
|
|
// ))}
|
|
// </Pill.Group>
|
|
// </PillsInput>
|
|
);
|
|
}
|