fix inflection pattern

This commit is contained in:
adueck 2023-08-18 21:28:14 +04:00
parent 16757d1e49
commit 1da82dc4da
1 changed files with 221 additions and 173 deletions

View File

@ -16,17 +16,18 @@ const chevStyle = {
color: "#ccc",
};
const nounsAdjs = nounsAdjsUnsafe
.filter(x => tp.isNounEntry(x) || tp.isAdjectiveEntry(x)) as (T.NounEntry | T.AdjectiveEntry)[];
const nounsAdjs = nounsAdjsUnsafe.filter(
(x) => tp.isNounEntry(x) || tp.isAdjectiveEntry(x)
) as (T.NounEntry | T.AdjectiveEntry)[];
function InflectionDemo({ opts }: {
opts: T.TextOptions,
}) {
function InflectionDemo({ opts }: { opts: T.TextOptions }) {
const [pattern, setPattern] = useState<T.InflectionPattern | "all">("all");
const [word, setWord] = useState<T.NounEntry | T.AdjectiveEntry | undefined>(undefined)
const [word, setWord] = useState<T.NounEntry | T.AdjectiveEntry | undefined>(
undefined
);
const patterns: {
value: T.InflectionPattern | "all",
label: JSX.Element | string,
value: T.InflectionPattern | "all";
label: JSX.Element | string;
}[] = [
{
value: "all",
@ -35,27 +36,47 @@ function InflectionDemo({ opts }: {
{
value: 0,
label: "no inflection",
}, {
},
{
value: 1,
label: "basic",
}, {
},
{
value: 2,
label: <>unstressed <InlinePs opts={opts}>{{ p: "ی", f: "ey" }}</InlinePs></>,
}, {
label: (
<>
unstressed <InlinePs opts={opts}>{{ p: "ی", f: "ay" }}</InlinePs>
</>
),
},
{
value: 3,
label: <>stressed <InlinePs opts={opts}>{{ p: "ی", f: "éy" }}</InlinePs></>,
}, {
label: (
<>
stressed <InlinePs opts={opts}>{{ p: "ی", f: "áy" }}</InlinePs>
</>
),
},
{
value: 4,
label: '"Pashtoon" pattern',
}, {
},
{
value: 5,
label: "short squish",
}, {
},
{
value: 6,
label: <>fem. inan. <InlinePs opts={opts}>{{ p: "ي", f: "ee" }}</InlinePs></>,
label: (
<>
fem. inan. <InlinePs opts={opts}>{{ p: "ي", f: "ee" }}</InlinePs>
</>
),
},
];
const entries = (nounsAdjs as (T.NounEntry | T.AdjectiveEntry)[]).filter(tp.isPattern(pattern))
const entries = (nounsAdjs as (T.NounEntry | T.AdjectiveEntry)[]).filter(
tp.isPattern(pattern)
);
function handlePatternChange(e: React.ChangeEvent<HTMLInputElement>) {
const v = e.target.value;
const value = v === "all" ? v : (Number(v) as T.InflectionPattern);
@ -70,9 +91,8 @@ function InflectionDemo({ opts }: {
setWord(entries[0]);
return;
}
const oldIndex = entries.findIndex(e => e.ts === word.ts);
const newIndex = entries.length === (oldIndex + 1)
? 0 : (oldIndex + 1);
const oldIndex = entries.findIndex((e) => e.ts === word.ts);
const newIndex = entries.length === oldIndex + 1 ? 0 : oldIndex + 1;
setWord(entries[newIndex]);
}
function wordBack() {
@ -80,9 +100,8 @@ function InflectionDemo({ opts }: {
setWord(entries[entries.length - 1]);
return;
}
const oldIndex = entries.findIndex(e => e.ts === word.ts);
const newIndex = oldIndex === 0
? (entries.length - 1) : (oldIndex + 1);
const oldIndex = entries.findIndex((e) => e.ts === word.ts);
const newIndex = oldIndex === 0 ? entries.length - 1 : oldIndex + 1;
setWord(entries[newIndex]);
}
const inf = ((): T.InflectorOutput | false => {
@ -94,16 +113,27 @@ function InflectionDemo({ opts }: {
return false;
}
})();
return <div style={{ paddingBottom: "20px" }}>
return (
<div style={{ paddingBottom: "20px" }}>
<p>
Produces the inflections and plural forms (Pashto and Arabic plurals where applicable) for words
Produces the inflections and plural forms (Pashto and Arabic plurals
where applicable) for words
</p>
<div className="d-block mx-auto card" style={{ maxWidth: "700px", background: "var(--closer)"}}>
<div
className="d-block mx-auto card"
style={{ maxWidth: "700px", background: "var(--closer)" }}
>
<div className="card-body">
<div className="row">
<div className="col-sm-6">
<div>
<h6 className="my-2">Filter words by <a href="https://grammar.lingdocs.com/inflection/inflection-patterns/">inflection pattern</a>:</h6>
<h6 className="my-2">
Filter words by{" "}
<a href="https://grammar.lingdocs.com/inflection/inflection-patterns/">
inflection pattern
</a>
:
</h6>
<div>
{patterns.map(({ value, label }) => (
<div key={value} className="form-check">
@ -115,9 +145,7 @@ function InflectionDemo({ opts }: {
value={value}
onChange={handlePatternChange}
/>
<label className="form-check-label">
{label}
</label>
<label className="form-check-label">{label}</label>
</div>
))}
</div>
@ -157,28 +185,48 @@ function InflectionDemo({ opts }: {
</div>
</div>
</div>
{inf ? <div className="mt-3">
{inf.inflections && word && (() => {
{inf ? (
<div className="mt-3">
{inf.inflections &&
word &&
(() => {
const pattern = getInflectionPattern(word);
return <div>
<a href={`https://grammar.lingdocs.com/inflection/inflection-patterns/${inflectionSubUrl(pattern)}`} rel="noreferrer" target="_blank">
<div className="badge bg-light mb-2">Inflection pattern {HumanReadableInflectionPattern(pattern, opts)}
return (
<div>
<a
href={`https://grammar.lingdocs.com/inflection/inflection-patterns/${inflectionSubUrl(
pattern
)}`}
rel="noreferrer"
target="_blank"
>
<div className="badge bg-light mb-2">
Inflection pattern{" "}
{HumanReadableInflectionPattern(pattern, opts)}
</div>
</a>
<InflectionsTable inf={inf.inflections} textOptions={opts} />
</div>;
</div>
);
})()}
{"plural" in inf && inf.plural !== undefined && <div>
{"plural" in inf && inf.plural !== undefined && (
<div>
<h5>Plural</h5>
<InflectionsTable inf={inf.plural} textOptions={opts} />
</div>}
{"arabicPlural" in inf && inf.arabicPlural !== undefined && <div>
</div>
)}
{"arabicPlural" in inf && inf.arabicPlural !== undefined && (
<div>
<h5>Arabic Plural</h5>
<InflectionsTable inf={inf.arabicPlural} textOptions={opts} />
</div>}
</div> : <div>
</div>}
</div>;
</div>
)}
</div>
) : (
<div></div>
)}
</div>
);
}
function inflectionSubUrl(pattern: T.InflectionPattern): string {
@ -194,8 +242,8 @@ function inflectionSubUrl(pattern: T.InflectionPattern): string {
? "#4-words-with-the-pashtoon-pattern"
: pattern === 5
? "#5-shorter-words-that-squish"
// : pattern === 6
: "#6-inanimate-feminine-nouns-ending-in-ي---ee"
: // : pattern === 6
"#6-inanimate-feminine-nouns-ending-in-ي---ee";
}
export default InflectionDemo;