better UI and fixed bug being able to close the imperative subject
This commit is contained in:
parent
10532cb3bb
commit
611f5defe5
|
@ -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",
|
||||
|
|
|
@ -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 }) => (
|
||||
<div className="mt-1 mb-3">
|
||||
<div className={lineHeight !== undefined ? `mb-${lineHeight}` : `mt-1 mb-3`}>
|
||||
<div>
|
||||
<Pashto opts={opts}>{text}</Pashto>
|
||||
</div>
|
||||
|
|
|
@ -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<FilterPattern | undefined>(undefined);
|
||||
|
@ -82,14 +81,6 @@ function NPNounPicker(props: ({
|
|||
// setShowFilter(false);
|
||||
// }
|
||||
return <div style={{ maxWidth: "225px", minWidth: "125px" }}>
|
||||
<div className="d-flex flex-row justify-content-left">
|
||||
{props.clearButton}
|
||||
{/* {(!showFilter && !(noun?.dynamicComplement)) && <div className="text-right">
|
||||
<button className="btn btn-sm btn-light mb-2 text-small" onClick={() => setShowFilter(true)}>
|
||||
<i className="fas fa-filter fa-xs" />
|
||||
</button>
|
||||
</div>} */}
|
||||
</div>
|
||||
{/* {showFilter && <div className="mb-2 text-center">
|
||||
<div className="d-flex flex-row justify-content-between">
|
||||
<div className="text-small mb-1">Filter by inflection pattern</div>
|
||||
|
|
|
@ -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 <div style={{ maxWidth: "225px" }}>
|
||||
{props.clearButton}
|
||||
<h6>Participle</h6>
|
||||
<EntrySelect
|
||||
value={props.participle?.verb}
|
||||
|
|
|
@ -14,6 +14,7 @@ import { isSecondPerson } from "../../lib/phrase-building/vp-tools";
|
|||
const npTypes: T.NPType[] = ["pronoun", "noun", "participle"];
|
||||
|
||||
function NPPicker(props: {
|
||||
heading?: JSX.Element,
|
||||
onChange: (nps: T.NPSelection | undefined) => 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)
|
||||
? <button className="btn btn-sm btn-light mb-2" onClick={handleClear}>X</button>
|
||||
: <div></div>;
|
||||
return <div style={{ minWidth: "9rem" }}>
|
||||
{!npType && <div className="text-center mt-3">
|
||||
return <>
|
||||
<div className="d-flex flex-row justify-content-between">
|
||||
<div></div>
|
||||
<div>
|
||||
{props.heading}
|
||||
</div>
|
||||
<div>
|
||||
{npType && clearButton}
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ minWidth: "9rem" }}>
|
||||
{!npType && <div className="text-center">
|
||||
<div className="h6 mr-3">
|
||||
Choose NP
|
||||
</div>
|
||||
|
@ -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
|
||||
}
|
||||
</div>;
|
||||
</div>
|
||||
</>;
|
||||
}
|
||||
|
||||
// {(npType && !isDynamicComplement) && }
|
||||
|
|
|
@ -103,8 +103,7 @@ function NPPronounPicker({ onChange, pronoun, asObject, clearButton, opts, is2nd
|
|||
? [pSpecA[1]]
|
||||
: pSpecA;
|
||||
return <div style={{ maxWidth: "145px", padding: 0 }}>
|
||||
{clearButton}
|
||||
<div className="d-flex flex-row justify-content-between mb-3">
|
||||
<div className="d-flex flex-row justify-content-between mb-2">
|
||||
{isThirdPerson(pronoun.person) ? <ButtonSelect
|
||||
xSmall
|
||||
options={[
|
||||
|
@ -133,7 +132,7 @@ function NPPronounPicker({ onChange, pronoun, asObject, clearButton, opts, is2nd
|
|||
className={classNames({ "table-active": active, "text-on-gender-color": active })}
|
||||
style={{
|
||||
backgroundColor: active ? gColors[p.gender] : "inherit",
|
||||
padding: "0.25rem 0",
|
||||
padding: "0.15rem 0",
|
||||
}}
|
||||
>
|
||||
<div className="my-1">
|
||||
|
|
|
@ -57,10 +57,10 @@ const perfectTenseOptions: { label: string | JSX.Element, value: T.PerfectTense
|
|||
}];
|
||||
|
||||
const imperativeTenseOptions: { label: string | JSX.Element, value: T.ImperativeTense }[] = [{
|
||||
label: <div><i className="fas fa-video mr-2" />imperfective imp.</div>,
|
||||
label: <div><i className="fas fa-video mr-2" />imperfective imperative</div>,
|
||||
value: "imperfectiveImperative",
|
||||
}, {
|
||||
label: <div><i className="fas fa-camera mr-2" />perfective imp.</div>,
|
||||
label: <div><i className="fas fa-camera mr-2" />perfective imperative</div>,
|
||||
value: "perfectiveImperative",
|
||||
}];
|
||||
|
||||
|
|
|
@ -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<T.FormVersion>({ removeKing: false, shrinkServant: false }, "abbreviationForm");
|
||||
|
@ -21,7 +21,7 @@ function VPDisplay({ VP, opts }: { VP: T.VPSelection, opts: T.TextOptions }) {
|
|||
</div>;
|
||||
}
|
||||
const result = compileVP(renderVP(VPComplete), { ...form, OSV });
|
||||
return <div className="text-center mt-2">
|
||||
return <div className="text-center">
|
||||
{VP.verb.transitivity === "transitive" && <div className="form-check mb-2">
|
||||
<input
|
||||
className="form-check-input"
|
||||
|
@ -52,7 +52,7 @@ function VPDisplay({ VP, opts }: { VP: T.VPSelection, opts: T.TextOptions }) {
|
|||
</div>
|
||||
: <VariationLayer vs={result.ps} opts={opts} />
|
||||
}
|
||||
{result.e && <div className="text-muted">
|
||||
{result.e && <div className="text-muted mt-3">
|
||||
{result.e.map((e, i) => <div key={i}>{e}</div>)}
|
||||
</div>}
|
||||
</div>
|
||||
|
@ -74,9 +74,7 @@ function whatsAdjustable(VP: T.VPSelectionComplete): "both" | "king" | "servant"
|
|||
|
||||
function VariationLayer({ vs, opts }: { vs: T.PsString[], opts: T.TextOptions }) {
|
||||
return <div className="mb-2">
|
||||
{vs.map((r, i) => <div key={i}>
|
||||
<InlinePs opts={opts}>{r}</InlinePs>
|
||||
</div>)}
|
||||
<Examples opts={opts} lineHeight={0}>{vs}</Examples>
|
||||
</div>;
|
||||
}
|
||||
|
||||
|
|
|
@ -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}
|
||||
/>
|
||||
</div>
|
||||
{(vps.verb && (typeof vps.verb.object === "object") && (vps.verb.isCompound !== "dynamic") && (vps.verb.tenseCategory !== "imperative") &&(mode === "phrases")) &&
|
||||
<div className="text-center mt-4">
|
||||
<div className="text-center my-2">
|
||||
<button onClick={handleSubjObjSwap} className="btn btn-sm btn-light">
|
||||
<i className="fas fa-exchange-alt mr-2" /> subj/obj
|
||||
</button>
|
||||
|
@ -151,10 +145,10 @@ export function VPExplorer(props: {
|
|||
{mode !== "quiz" && <div className="d-flex flex-row justify-content-around flex-wrap" style={{ marginLeft: "-0.5rem", marginRight: "-0.5rem" }}>
|
||||
{mode === "phrases" && <>
|
||||
<div className="my-2">
|
||||
{roles.king === "subject"
|
||||
<NPPicker
|
||||
heading={roles.king === "subject"
|
||||
? <div className="h5 text-center clickable" onClick={() => setShowingExplanation({ role: "king", item: "subject" })}>Subject {roleIcon.king}</div>
|
||||
: <div className="h5 text-center clickable" onClick={() => setShowingExplanation({ role: "servant", item: "subject" })}>Subject {roleIcon.servant}</div>}
|
||||
<NPPicker
|
||||
{..."getNounByTs" in props ? {
|
||||
getNounByTs: props.getNounByTs,
|
||||
getVerbByTs: props.getVerbByTs,
|
||||
|
@ -172,12 +166,12 @@ export function VPExplorer(props: {
|
|||
/>
|
||||
</div>
|
||||
{vps.verb && (vps.verb.object !== "none") && <div className="my-2">
|
||||
{roles.king === "object"
|
||||
? <div className="h5 text-center clickable" onClick={() => setShowingExplanation({ role: "king", item: "object" })}>Object {roleIcon.king}</div>
|
||||
: <div className="h5 text-center clickable" onClick={() => setShowingExplanation({ role: "servant", item: "object" })}>Object {roleIcon.servant}</div>}
|
||||
{(typeof vps.verb.object === "number")
|
||||
? <div className="text-muted">Unspoken 3rd Pers. Masc. Plur.</div>
|
||||
: <NPPicker
|
||||
heading={roles.king === "object"
|
||||
? <div className="h5 text-center clickable" onClick={() => setShowingExplanation({ role: "king", item: "object" })}>Object {roleIcon.king}</div>
|
||||
: <div className="h5 text-center clickable" onClick={() => setShowingExplanation({ role: "servant", item: "object" })}>Object {roleIcon.servant}</div>}
|
||||
{..."getNounByTs" in props ? {
|
||||
getNounByTs: props.getNounByTs,
|
||||
getVerbByTs: props.getVerbByTs,
|
||||
|
|
Loading…
Reference in New Issue