length select on vp display

This commit is contained in:
lingdocs 2022-07-10 23:34:12 -05:00
parent 89b4170cd6
commit f6f6aa9e75
5 changed files with 19 additions and 7 deletions

View File

@ -1,6 +1,6 @@
{ {
"name": "@lingdocs/pashto-inflector", "name": "@lingdocs/pashto-inflector",
"version": "3.3.6", "version": "3.3.7",
"author": "lingdocs.com", "author": "lingdocs.com",
"description": "A Pashto inflection and verb conjugation engine, inculding React components for displaying Pashto text, inflections, and conjugations", "description": "A Pashto inflection and verb conjugation engine, inculding React components for displaying Pashto text, inflections, and conjugations",
"homepage": "https://verbs.lingdocs.com", "homepage": "https://verbs.lingdocs.com",

View File

@ -23,4 +23,14 @@ export function ScriptSelect({ value, onChange }: { value: "p" | "f", onChange:
</button>; </button>;
} }
export function LengthSelect({ value, onChange }: { value: "long" | "short", onChange: (l: "long" | "short") => void }) {
return <button style={{ marginLeft: "1.5rem" }} className="btn btn-sm btn-light">
{value === "long" ? <div className="clickable" onClick={() => onChange("short")}>
long
</div> : <div className="clickable" onClick={() => onChange("long")}>
short
</div>}
</button>;
}
export default ModeSelect; export default ModeSelect;

View File

@ -4,13 +4,13 @@ import AbbreviationFormSelector from "./AbbreviationFormSelector";
import { getObjectSelection, getSubjectSelection } from "../../lib/phrase-building/blocks-utils"; import { getObjectSelection, getSubjectSelection } from "../../lib/phrase-building/blocks-utils";
import { completeVPSelection } from "../../lib/phrase-building/vp-tools"; import { completeVPSelection } from "../../lib/phrase-building/vp-tools";
import { renderVP } from "../../library"; import { renderVP } from "../../library";
import ModeSelect, { Mode, ScriptSelect } from "../DisplayModeSelect"; import ModeSelect, { LengthSelect, Mode, ScriptSelect } from "../DisplayModeSelect";
import { useState } from "react"; import { useState } from "react";
import CompiledPTextDisplay from "../CompiledPTextDisplay"; import CompiledPTextDisplay from "../CompiledPTextDisplay";
import RenderedBlocksDisplay from "../RenderedBlocksDisplay"; import RenderedBlocksDisplay from "../RenderedBlocksDisplay";
import useStickyState from "../../lib/useStickyState"; import useStickyState from "../../lib/useStickyState";
function VPDisplay({ VPS, opts, setForm, justify, onlyOne, length, mode: preferredMode, script: preferredScript }: { function VPDisplay({ VPS, opts, setForm, justify, onlyOne, length, mode: preferredMode, script: preferredScript, onLengthChange }: {
VPS: T.VPSelectionState, VPS: T.VPSelectionState,
opts: T.TextOptions, opts: T.TextOptions,
setForm: "disable" | ((form: T.FormVersion) => void), setForm: "disable" | ((form: T.FormVersion) => void),
@ -18,7 +18,8 @@ function VPDisplay({ VPS, opts, setForm, justify, onlyOne, length, mode: preferr
onlyOne?: boolean | "concat", onlyOne?: boolean | "concat",
length?: "long" | "short", length?: "long" | "short",
mode?: Mode, mode?: Mode,
script?: "p" | "f" script?: "p" | "f",
onLengthChange?: (length: "long" | "short") => void,
}) { }) {
const [mode, setMode] = useState<Mode>(preferredMode || "text"); const [mode, setMode] = useState<Mode>(preferredMode || "text");
const [script, setScript] = useStickyState<"p" | "f">(preferredScript || "f", "blockScriptChoice"); const [script, setScript] = useStickyState<"p" | "f">(preferredScript || "f", "blockScriptChoice");
@ -46,6 +47,7 @@ function VPDisplay({ VPS, opts, setForm, justify, onlyOne, length, mode: preferr
<div className="d-flex flex-row"> <div className="d-flex flex-row">
<ModeSelect value={mode} onChange={setMode} /> <ModeSelect value={mode} onChange={setMode} />
{mode === "blocks" && <ScriptSelect value={script} onChange={setScript} />} {mode === "blocks" && <ScriptSelect value={script} onChange={setScript} />}
{mode === "text" && length && onLengthChange && <LengthSelect value={length} onChange={onLengthChange} />}
</div> </div>
{mode === "text" {mode === "text"
? <CompiledPTextDisplay opts={opts} compiled={result} justify={justify} onlyOne={!!onlyOne} length={length} /> ? <CompiledPTextDisplay opts={opts} compiled={result} justify={justify} onlyOne={!!onlyOne} length={length} />

View File

@ -105,7 +105,7 @@ function VPPicker({ opts, vps, onChange, entryFeeder }: {
Subj. <span onClick={() => setShowingExplanation({ role: "king", item: "subject" })}>{roleIcon.king}</span> Subj. <span onClick={() => setShowingExplanation({ role: "king", item: "subject" })}>{roleIcon.king}</span>
{(rendered && rendered.whatsAdjustable !== "servant") && {(rendered && rendered.whatsAdjustable !== "servant") &&
<span onClick={() => adjustVps({ type: "toggle king remove" })} className="mx-2 clickable"> <span onClick={() => adjustVps({ type: "toggle king remove" })} className="mx-2 clickable">
{!VPS?.form.removeKing ? "🚫" : "🙈"} {!VPS?.form.removeKing ? "🙈" : "🚫" }
</span> </span>
} }
</div> </div>
@ -148,7 +148,7 @@ function VPPicker({ opts, vps, onChange, entryFeeder }: {
Obj. <span onClick={() => setShowingExplanation({ role: "king", item: "object" })}>{roleIcon.king}</span> Obj. <span onClick={() => setShowingExplanation({ role: "king", item: "object" })}>{roleIcon.king}</span>
{(rendered && rendered.whatsAdjustable !== "servant") && {(rendered && rendered.whatsAdjustable !== "servant") &&
<span onClick={() => adjustVps({ type: "toggle king remove" })} className="mx-2 clickable"> <span onClick={() => adjustVps({ type: "toggle king remove" })} className="mx-2 clickable">
{!VPS?.form.removeKing ? "🚫" : "🙈"} {!VPS?.form.removeKing ? "🙈" : "🚫"}
</span> </span>
} }
</div> </div>

View File

@ -54,7 +54,7 @@ export function renderEnglishVPBase({ subjectPerson, object, vs }: {
`$SUBJ ${engEquative("present", s)}${n ? " not" : ""} ${ec[2]}`, `$SUBJ ${engEquative("present", s)}${n ? " not" : ""} ${ec[2]}`,
]), ]),
subjunctiveVerb: (s: T.Person, ec: T.EnglishVerbConjugationEc, n: boolean) => ([ subjunctiveVerb: (s: T.Person, ec: T.EnglishVerbConjugationEc, n: boolean) => ([
`$SUBJ ${n ? " not" : ""} should ${isToBe(ec) ? "be" : ec[0]}`, `$SUBJ should${n ? " not" : ""} ${isToBe(ec) ? "be" : ec[0]}`,
`that $SUBJ ${n ? " won't" : " will"} ${isToBe(ec) ? "be" : ec[0]}`, `that $SUBJ ${n ? " won't" : " will"} ${isToBe(ec) ? "be" : ec[0]}`,
]), ]),
imperfectiveFuture: (s: T.Person, ec: T.EnglishVerbConjugationEc, n: boolean) => ([ imperfectiveFuture: (s: T.Person, ec: T.EnglishVerbConjugationEc, n: boolean) => ([