75 lines
1.7 KiB
TypeScript
75 lines
1.7 KiB
TypeScript
import { filesize } from "filesize";
|
|
import { IsoFile } from "../../api/IsoFilesApi";
|
|
import { SelectInput } from "./SelectInput";
|
|
import {
|
|
Avatar,
|
|
IconButton,
|
|
ListItem,
|
|
ListItemAvatar,
|
|
ListItemText,
|
|
Tooltip,
|
|
} from "@mui/material";
|
|
import DeleteIcon from "@mui/icons-material/Delete";
|
|
import { mdiDisc } from "@mdi/js";
|
|
import Icon from "@mdi/react";
|
|
|
|
export function VMSelectIsoInput(p: {
|
|
editable: boolean;
|
|
isoList: IsoFile[];
|
|
value?: string;
|
|
onChange: (newVal?: string) => void;
|
|
}): React.ReactElement {
|
|
if (!p.value && !p.editable) return <></>;
|
|
|
|
if (p.value) {
|
|
const iso = p.isoList.find((d) => d.filename === p.value);
|
|
return (
|
|
<ListItem
|
|
secondaryAction={
|
|
p.editable && (
|
|
<IconButton
|
|
edge="end"
|
|
aria-label="detach iso file"
|
|
onClick={() => {
|
|
p.onChange(undefined);
|
|
}}
|
|
>
|
|
<Tooltip title="Detach ISO file">
|
|
<DeleteIcon />
|
|
</Tooltip>
|
|
</IconButton>
|
|
)
|
|
}
|
|
>
|
|
<ListItemAvatar>
|
|
<Avatar>
|
|
<Icon path={mdiDisc} />
|
|
</Avatar>
|
|
</ListItemAvatar>
|
|
<ListItemText
|
|
primary={iso?.filename}
|
|
secondary={filesize(iso?.size ?? 0)}
|
|
/>
|
|
</ListItem>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<SelectInput
|
|
label="ISO file"
|
|
editable={p.editable}
|
|
value={p.value}
|
|
onValueChange={p.onChange}
|
|
options={[
|
|
{ label: "None", value: undefined },
|
|
...p.isoList.map((i) => {
|
|
return {
|
|
label: `${i.filename} ${filesize(i.size)}`,
|
|
value: i.filename,
|
|
};
|
|
}),
|
|
]}
|
|
/>
|
|
);
|
|
}
|