Files
commafeed/commafeed-client/src/components/content/add/CategorySelect.tsx

32 lines
1.2 KiB
TypeScript

import { t } from "@lingui/macro"
import { Select, SelectItem, SelectProps } from "@mantine/core"
import { Constants } from "app/constants"
import { useAppSelector } from "app/store"
import { flattenCategoryTree } from "app/utils"
type CategorySelectProps = Partial<SelectProps> & {
withAll?: boolean
withoutCategoryIds?: string[]
}
export function CategorySelect(props: CategorySelectProps) {
const rootCategory = useAppSelector(state => state.tree.rootCategory)
const categories = rootCategory && flattenCategoryTree(rootCategory)
const selectData: SelectItem[] | undefined = categories
?.filter(c => c.id !== Constants.categories.all.id)
.filter(c => !props.withoutCategoryIds || !props.withoutCategoryIds.includes(c.id))
.sort((c1, c2) => c1.name.localeCompare(c2.name))
.map(c => ({
label: c.parentName ? t`${c.name} (in ${c.parentName})` : c.name,
value: c.id,
}))
if (props.withAll) {
selectData?.unshift({
label: t`All`,
value: Constants.categories.all.id,
})
}
return <Select {...props} data={selectData ?? []} disabled={!selectData} />
}