alisaza
e1eaf5eff5
Extract admin dashboard from ghabilee-frontend2 into a dedicated Next.js app for backoffice.ghabilee.ir (no SEO indexing / Clarity).
49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
'use client'
|
|
|
|
import { useMemo } from 'react'
|
|
|
|
import { texts } from '@/texts'
|
|
import type { EventCategory } from '@/services/events'
|
|
import Input from '@/components/formElements/Input'
|
|
import { buildCategoryTree } from '@/helpers/categoryPath'
|
|
|
|
interface CategoryTreeSelectProps {
|
|
name: string
|
|
label: string
|
|
categories: EventCategory[]
|
|
required?: boolean
|
|
disabled?: boolean
|
|
}
|
|
|
|
/**
|
|
* Thin wrapper around formElements/Input that flattens categories into an
|
|
* indented tree via `depth` on each option (rendered by ChoiceFieldControl).
|
|
*/
|
|
const CategoryTreeSelect = ({ name, label, categories, required, disabled }: CategoryTreeSelectProps) => {
|
|
const selectOptions = useMemo(
|
|
() =>
|
|
buildCategoryTree(categories).map((option) => ({
|
|
depth: option.depth,
|
|
id: String(option.id),
|
|
name: option.name,
|
|
})),
|
|
[categories]
|
|
)
|
|
|
|
return (
|
|
<Input
|
|
disabled={disabled}
|
|
generalType="select"
|
|
label={label}
|
|
name={name}
|
|
placeholder={texts.events.categoryPlaceholder}
|
|
required={required}
|
|
selectKey="id"
|
|
selectOptions={selectOptions}
|
|
selectValue="name"
|
|
/>
|
|
)
|
|
}
|
|
|
|
export default CategoryTreeSelect
|