45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
|
import * as React from "react"
|
||
|
|
import { SelectProps } from "@mui/base/Select"
|
||
|
|
|
||
|
|
import { Select, Option } from "./Select"
|
||
|
|
import { useFetchLanguages } from "../utils/queries"
|
||
|
|
|
||
|
|
export type SelectLanguageProps = SelectProps<{}, boolean>
|
||
|
|
|
||
|
|
export const SelectLanguage = React.forwardRef(function SelectLanguage(
|
||
|
|
props: SelectLanguageProps,
|
||
|
|
ref: React.ForwardedRef<HTMLButtonElement>
|
||
|
|
) {
|
||
|
|
const id = React.useId()
|
||
|
|
const [options, setOptions] = React.useState([
|
||
|
|
{ value: "", label: "Loading..." },
|
||
|
|
])
|
||
|
|
const { defaultValue, ...other } = props
|
||
|
|
const { isLoading, data } = useFetchLanguages()
|
||
|
|
|
||
|
|
React.useEffect(() => {
|
||
|
|
if (!data) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
setOptions(data.map((row) => ({ value: row.code, label: row.name })))
|
||
|
|
}, [data])
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Select
|
||
|
|
ref={ref}
|
||
|
|
key={isLoading ? `${id}-loading` : `${id}-loaded`}
|
||
|
|
className={isLoading ? "text-slate-900/60" : ""}
|
||
|
|
defaultValue={defaultValue}
|
||
|
|
{...other}
|
||
|
|
>
|
||
|
|
{options.map((entry, index) => {
|
||
|
|
return (
|
||
|
|
<Option key={index} value={entry.value}>
|
||
|
|
{entry.label}
|
||
|
|
</Option>
|
||
|
|
)
|
||
|
|
})}
|
||
|
|
</Select>
|
||
|
|
)
|
||
|
|
})
|