diff --git a/src/components/np-picker/NPNounPicker.tsx b/src/components/np-picker/NPNounPicker.tsx index 000691a..a02256c 100644 --- a/src/components/np-picker/NPNounPicker.tsx +++ b/src/components/np-picker/NPNounPicker.tsx @@ -9,9 +9,63 @@ import { InlinePs, defaultTextOptions as opts, } from "@lingdocs/pashto-inflector"; +import { useState } from "react"; +import { isFemNounEntry, isPattern1Entry, isPattern2Entry, isPattern3Entry, isPattern4Entry, isPattern5Entry, isPattern6FemEntry } from "../../lib/type-predicates"; -function NPNounPicker({ onChange, noun, nouns }: { nouns: NounEntry[], noun: NounSelection | undefined, onChange: (p: NounSelection) => void }) { - const options = nouns.sort((a, b) => (a.p.localeCompare(b.p, "af-PS"))).map(makeSelectOption) +const filterOptions = [ + { + label: "1", + value: "1", + }, + { + label: "2", + value: "2", + }, + { + label: "3", + value: "3", + }, + { + label: "4", + value: "4", + }, + { + label: "5", + value: "5", + }, + { + label: "6", + value: "6", + }, +]; + +type FilterPattern = "1" | "2" | "3" | "4" | "5" | "6"; + +function nounFilter(p: FilterPattern | undefined) { + return p === undefined + ? () => true + : (p === "1") + ? isPattern1Entry + : (p === "2") + ? isPattern2Entry + : (p === "3") + ? isPattern3Entry + : (p === "4") + ? isPattern4Entry + : (p === "5") + ? isPattern5Entry + : (p === "6") + ? (n: NounEntry) => (isFemNounEntry(n) && isPattern6FemEntry(n)) + : () => true; +} + +function NPNounPicker({ onChange, noun, nouns, clearButton }: { nouns: NounEntry[], noun: NounSelection | undefined, onChange: (p: NounSelection) => void, clearButton?: JSX.Element }) { + const [patternFilter, setPatternFilter] = useState(undefined); + const [showFilter, setShowFilter] = useState(false) + const options = nouns + .filter(nounFilter(patternFilter)) + .sort((a, b) => (a.p.localeCompare(b.p, "af-PS"))) + .map(makeSelectOption); function onEntrySelect({ value }: { label: string, value: string }) { const entry = nouns.find(n => n.ts.toString() === value); if (!entry) { @@ -20,20 +74,46 @@ function NPNounPicker({ onChange, noun, nouns }: { nouns: NounEntry[], noun: Nou } onChange(makeNounSelection(entry)); } + function handleFilterClose() { + setPatternFilter(undefined); + setShowFilter(false); + } return
- {!(noun && noun.dynamicComplement) ? o.value === (noun.entry).ts.toString())?.label : "Select Noun..."} + {...zIndexProps} + /> +
:
{noun &&
Included in Dyn. Compound:
diff --git a/src/components/np-picker/NPParticiplePicker.tsx b/src/components/np-picker/NPParticiplePicker.tsx index 706ea54..154f61f 100644 --- a/src/components/np-picker/NPParticiplePicker.tsx +++ b/src/components/np-picker/NPParticiplePicker.tsx @@ -11,7 +11,12 @@ function makeParticipleSelection(verb: VerbEntry): ParticipleSelection { }; } -function NPParticiplePicker({ onChange, participle, verbs }: { verbs: VerbEntry[], participle: ParticipleSelection | undefined, onChange: (p: ParticipleSelection) => void }) { +function NPParticiplePicker({ onChange, participle, verbs, clearButton }: { + verbs: VerbEntry[], + participle: ParticipleSelection | undefined, + onChange: (p: ParticipleSelection) => void, + clearButton: JSX.Element, +}) { const options = verbs.map(makeSelectOption) function onEntrySelect({ value }: { label: string, value: string }) { const verb = verbs.find(v => v.entry.ts.toString() === value); @@ -22,6 +27,7 @@ function NPParticiplePicker({ onChange, participle, verbs }: { verbs: VerbEntry[ onChange(makeParticipleSelection(verb)); } return
+ {clearButton}