39 wiersze
838 B
TypeScript
39 wiersze
838 B
TypeScript
![]() |
import React from "react";
|
||
|
import { slugify } from "./util";
|
||
|
import { Vocabulary, VocabularyType } from "./vocabulary";
|
||
|
|
||
|
export type VocabularyWidgetProps<T extends VocabularyType> = {
|
||
|
id?: string;
|
||
|
label: string;
|
||
|
value: T;
|
||
|
onChange: (value: T) => void;
|
||
|
choices: Vocabulary<T>;
|
||
|
};
|
||
|
|
||
|
export function VocabularyWidget<T extends VocabularyType>({
|
||
|
id,
|
||
|
label,
|
||
|
value,
|
||
|
onChange,
|
||
|
choices,
|
||
|
}: VocabularyWidgetProps<T>) {
|
||
|
id = id || slugify(label);
|
||
|
|
||
|
return (
|
||
|
<>
|
||
|
<label htmlFor={id}>{label}: </label>
|
||
|
<select
|
||
|
id={id}
|
||
|
onChange={(e) => onChange(choices.get(e.target.value))}
|
||
|
value={value.name}
|
||
|
>
|
||
|
{choices.items.map((choice) => (
|
||
|
<option key={choice.name} value={choice.name}>
|
||
|
{choice.name}
|
||
|
</option>
|
||
|
))}
|
||
|
</select>
|
||
|
</>
|
||
|
);
|
||
|
}
|