37 lines
1.2 KiB
TypeScript
37 lines
1.2 KiB
TypeScript
import React, {ChangeEvent} from 'react';
|
|
import {FormControl, InputLabel, MenuItem, Select} from "@material-ui/core";
|
|
import {BasicCategoryResponse} from "../backend/queries/category";
|
|
|
|
|
|
interface CategorySelectionMenuProps {
|
|
selectedCategoryId: number | null
|
|
categories?: Array<BasicCategoryResponse>,
|
|
|
|
handleCategoryChange(categoryId: number | null): void
|
|
}
|
|
|
|
export default function CategorySelectionMenu(props: CategorySelectionMenuProps) {
|
|
const onCategoryIdChange = (e: ChangeEvent<{ name?: string, value: unknown }>) => {
|
|
const newValue = e.target.value === -1 ? null : e.target.value as number;
|
|
props.handleCategoryChange(newValue);
|
|
}
|
|
|
|
return (
|
|
<FormControl fullWidth variant="outlined">
|
|
<InputLabel>Kategorie</InputLabel>
|
|
<Select
|
|
value={props.selectedCategoryId ? props.selectedCategoryId : -1}
|
|
label="Kategorie"
|
|
onChange={onCategoryIdChange}
|
|
>
|
|
<MenuItem value={-1}>
|
|
<em>None</em>
|
|
</MenuItem>
|
|
{props.categories?.map(category => <MenuItem key={category.id} value={category.rowId}>
|
|
{category.title}
|
|
</MenuItem>)}
|
|
</Select>
|
|
</FormControl>
|
|
);
|
|
}
|