From 611f5defe51459bdff7985932760eb6a17f95e45 Mon Sep 17 00:00:00 2001 From: lingdocs <71590811+lingdocs@users.noreply.github.com> Date: Wed, 20 Apr 2022 22:24:23 +0500 Subject: [PATCH] better UI and fixed bug being able to close the imperative subject --- package.json | 2 +- src/components/Examples.tsx | 4 +++- src/components/np-picker/NPNounPicker.tsx | 9 -------- .../np-picker/NPParticiplePicker.tsx | 2 -- src/components/np-picker/NPPicker.tsx | 23 +++++++++++++------ src/components/np-picker/NPPronounPicker.tsx | 5 ++-- src/components/vp-explorer/TensePicker.tsx | 4 ++-- src/components/vp-explorer/VPDisplay.tsx | 10 ++++---- src/components/vp-explorer/VPExplorer.tsx | 22 +++++++----------- 9 files changed, 36 insertions(+), 45 deletions(-) diff --git a/package.json b/package.json index a60eab8..d5e9584 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@lingdocs/pashto-inflector", - "version": "2.1.3", + "version": "2.1.4", "author": "lingdocs.com", "description": "A Pashto inflection and verb conjugation engine, inculding React components for displaying Pashto text, inflections, and conjugations", "homepage": "https://verbs.lingdocs.com", diff --git a/src/components/Examples.tsx b/src/components/Examples.tsx index bcacf99..a2c8964 100644 --- a/src/components/Examples.tsx +++ b/src/components/Examples.tsx @@ -27,14 +27,16 @@ function Examples({ children, ex, opts, + lineHeight, }: { ex?: PsStringWSub | PsStringWSub[] | T.PsJSX | T.PsJSX[], children: PsStringWSub | PsStringWSub[], opts: T.TextOptions, + lineHeight?: 0 | 1 | 2 | 3 | 4, }) { const examples = children || ex; const Example = ({ children: text }: { children: PsStringWSub }) => ( -
+
{text}
diff --git a/src/components/np-picker/NPNounPicker.tsx b/src/components/np-picker/NPNounPicker.tsx index b849a8b..bebb154 100644 --- a/src/components/np-picker/NPNounPicker.tsx +++ b/src/components/np-picker/NPNounPicker.tsx @@ -63,7 +63,6 @@ function NPNounPicker(props: ({ }) & { noun: T.NounSelection | undefined, onChange: (p: T.NounSelection | undefined) => void, - clearButton?: JSX.Element, opts: T.TextOptions, }) { // const [patternFilter, setPatternFilter] = useState(undefined); @@ -82,14 +81,6 @@ function NPNounPicker(props: ({ // setShowFilter(false); // } return
-
- {props.clearButton} - {/* {(!showFilter && !(noun?.dynamicComplement)) &&
- -
} */} -
{/* {showFilter &&
Filter by inflection pattern
diff --git a/src/components/np-picker/NPParticiplePicker.tsx b/src/components/np-picker/NPParticiplePicker.tsx index d367b18..2c4112d 100644 --- a/src/components/np-picker/NPParticiplePicker.tsx +++ b/src/components/np-picker/NPParticiplePicker.tsx @@ -16,7 +16,6 @@ function NPParticiplePicker(props: ({ }) & { participle: T.ParticipleSelection | undefined, onChange: (p: T.ParticipleSelection | undefined) => void, - clearButton: JSX.Element, opts: T.TextOptions, }) { function onEntrySelect(entry: T.VerbEntry | undefined) { @@ -27,7 +26,6 @@ function NPParticiplePicker(props: ({ props.onChange(makeParticipleSelection(entry)); } return
- {props.clearButton}
Participle
void, np: T.NPSelection | undefined, counterPart: T.NPSelection | T.VerbObject | undefined, @@ -58,11 +59,21 @@ function NPPicker(props: { } } const isDynamicComplement = props.np && props.np.type === "noun" && props.np.dynamicComplement; - const clearButton = !props.cantClear + const clearButton = (!props.cantClear && !props.is2ndPersonPicker && !isDynamicComplement) ? :
; - return
- {!npType &&
+ return <> +
+
+
+ {props.heading} +
+
+ {npType && clearButton} +
+
+
+ {!npType &&
Choose NP
@@ -82,7 +93,6 @@ function NPPicker(props: { asObject={props.asObject} pronoun={props.np} onChange={props.onChange} - clearButton={clearButton} is2ndPersonPicker={props.is2ndPersonPicker} opts={props.opts} /> @@ -96,7 +106,6 @@ function NPPicker(props: { }} noun={(props.np && props.np.type === "noun") ? props.np : undefined} onChange={props.onChange} - clearButton={!isDynamicComplement ? clearButton : undefined} opts={props.opts} /> : npType === "participle" @@ -109,12 +118,12 @@ function NPPicker(props: { }} participle={(props.np && props.np.type === "participle") ? props.np : undefined} onChange={props.onChange} - clearButton={clearButton} opts={props.opts} /> : null } -
; +
+ ; } // {(npType && !isDynamicComplement) && } diff --git a/src/components/np-picker/NPPronounPicker.tsx b/src/components/np-picker/NPPronounPicker.tsx index bffd930..9a8629b 100644 --- a/src/components/np-picker/NPPronounPicker.tsx +++ b/src/components/np-picker/NPPronounPicker.tsx @@ -103,8 +103,7 @@ function NPPronounPicker({ onChange, pronoun, asObject, clearButton, opts, is2nd ? [pSpecA[1]] : pSpecA; return
- {clearButton} -
+
{isThirdPerson(pronoun.person) ?
diff --git a/src/components/vp-explorer/TensePicker.tsx b/src/components/vp-explorer/TensePicker.tsx index af133cd..b8808a3 100644 --- a/src/components/vp-explorer/TensePicker.tsx +++ b/src/components/vp-explorer/TensePicker.tsx @@ -57,10 +57,10 @@ const perfectTenseOptions: { label: string | JSX.Element, value: T.PerfectTense }]; const imperativeTenseOptions: { label: string | JSX.Element, value: T.ImperativeTense }[] = [{ - label:
imperfective imp.
, + label:
imperfective imperative
, value: "imperfectiveImperative", }, { - label:
perfective imp.
, + label:
perfective imperative
, value: "perfectiveImperative", }]; diff --git a/src/components/vp-explorer/VPDisplay.tsx b/src/components/vp-explorer/VPDisplay.tsx index b30df21..3ba5a5e 100644 --- a/src/components/vp-explorer/VPDisplay.tsx +++ b/src/components/vp-explorer/VPDisplay.tsx @@ -1,12 +1,12 @@ import { renderVP, compileVP } from "../../lib/phrase-building/index"; import * as T from "../../types"; -import InlinePs from "../InlinePs"; import AbbreviationFormSelector from "./AbbreviationFormSelector"; import { isPastTense, completeVPSelection, } from "../../lib/phrase-building/vp-tools"; import { useStickyState } from "../../library"; +import Examples from "../Examples"; function VPDisplay({ VP, opts }: { VP: T.VPSelection, opts: T.TextOptions }) { const [form, setForm] = useStickyState({ removeKing: false, shrinkServant: false }, "abbreviationForm"); @@ -21,7 +21,7 @@ function VPDisplay({ VP, opts }: { VP: T.VPSelection, opts: T.TextOptions }) {
; } const result = compileVP(renderVP(VPComplete), { ...form, OSV }); - return
+ return
{VP.verb.transitivity === "transitive" &&
: } - {result.e &&
+ {result.e &&
{result.e.map((e, i) =>
{e}
)}
}
@@ -74,9 +74,7 @@ function whatsAdjustable(VP: T.VPSelectionComplete): "both" | "king" | "servant" function VariationLayer({ vs, opts }: { vs: T.PsString[], opts: T.TextOptions }) { return
- {vs.map((r, i) =>
- {r} -
)} + {vs}
; } diff --git a/src/components/vp-explorer/VPExplorer.tsx b/src/components/vp-explorer/VPExplorer.tsx index 3716b1b..7e6b369 100644 --- a/src/components/vp-explorer/VPExplorer.tsx +++ b/src/components/vp-explorer/VPExplorer.tsx @@ -133,17 +133,11 @@ export function VPExplorer(props: { { label: "Phrases", value: "phrases" }, { label: "Quiz", value: "quiz" }, ]} - handleChange={(x) => { - // TODO: remove this and implement the imperative in quiz - // if (x === "quiz") { - - // } - setMode(x); - }} + handleChange={setMode} />
{(vps.verb && (typeof vps.verb.object === "object") && (vps.verb.isCompound !== "dynamic") && (vps.verb.tenseCategory !== "imperative") &&(mode === "phrases")) && -
+
@@ -151,10 +145,10 @@ export function VPExplorer(props: { {mode !== "quiz" &&
{mode === "phrases" && <>
- {roles.king === "subject" - ?
setShowingExplanation({ role: "king", item: "subject" })}>Subject {roleIcon.king}
- :
setShowingExplanation({ role: "servant", item: "subject" })}>Subject {roleIcon.servant}
} setShowingExplanation({ role: "king", item: "subject" })}>Subject {roleIcon.king}
+ :
setShowingExplanation({ role: "servant", item: "subject" })}>Subject {roleIcon.servant}
} {..."getNounByTs" in props ? { getNounByTs: props.getNounByTs, getVerbByTs: props.getVerbByTs, @@ -172,12 +166,12 @@ export function VPExplorer(props: { />
{vps.verb && (vps.verb.object !== "none") &&
- {roles.king === "object" - ?
setShowingExplanation({ role: "king", item: "object" })}>Object {roleIcon.king}
- :
setShowingExplanation({ role: "servant", item: "object" })}>Object {roleIcon.servant}
} {(typeof vps.verb.object === "number") ?
Unspoken 3rd Pers. Masc. Plur.
: setShowingExplanation({ role: "king", item: "object" })}>Object {roleIcon.king}
+ :
setShowingExplanation({ role: "servant", item: "object" })}>Object {roleIcon.servant}
} {..."getNounByTs" in props ? { getNounByTs: props.getNounByTs, getVerbByTs: props.getVerbByTs,