pashto-inflector/src/components/PersInfsPicker.tsx

60 lines
1.6 KiB
TypeScript

/**
* Copyright (c) 2021 lingdocs.com
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*/
import * as T from "../types";
const persInfs: {
label: string;
value: T.PersonInflectionsField;
}[] = [
{
label: "masc. sing.",
value: "mascSing",
},
{
label: "fem. sing.",
value: "femSing",
},
{
label: "masc. plur.",
value: "mascPlur",
},
{
label: "fem. plur",
value: "femPlur",
}
];
function PersInfsPicker(props: {
transitivity: T.Transitivity,
persInf: T.PersonInflectionsField,
handleChange: (persInf: T.PersonInflectionsField) => void,
}) {
function hChange(e: any) {
const newValue = e.target.value as T.PersonInflectionsField;
props.handleChange(newValue);
}
return (
<div className="my-2" style={{ display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "center" }}>
<div className="mr-2">
When the <strong>{props.transitivity === "intransitive" ? "subject" : "object"}</strong> is
</div>
<div>
<select className="form-control form-control-sm d-inline-block" value={props.persInf} id="verb_info_pers_select" onChange={hChange}>
{persInfs.map((pers) => (
<option key={pers.value} value={pers.value}>
{pers.label}
</option>
))}
</select>
</div>
</div>
);
}
export default PersInfsPicker;