From f6f6aa9e752a8e1b712543782582273bb9cf1805 Mon Sep 17 00:00:00 2001
From: lingdocs <71590811+lingdocs@users.noreply.github.com>
Date: Sun, 10 Jul 2022 23:34:12 -0500
Subject: [PATCH] length select on vp display

---
 package.json                                    |  2 +-
 src/components/DisplayModeSelect.tsx            | 10 ++++++++++
 src/components/vp-explorer/VPDisplay.tsx        |  8 +++++---
 src/components/vp-explorer/VPPicker.tsx         |  4 ++--
 src/lib/phrase-building/english-vp-rendering.ts |  2 +-
 5 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 2f5975a..2a7aa46 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@lingdocs/pashto-inflector",
-  "version": "3.3.6",
+  "version": "3.3.7",
   "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/DisplayModeSelect.tsx b/src/components/DisplayModeSelect.tsx
index 32e9c77..b0bc9a8 100644
--- a/src/components/DisplayModeSelect.tsx
+++ b/src/components/DisplayModeSelect.tsx
@@ -23,4 +23,14 @@ export function ScriptSelect({ value, onChange }: { value: "p" | "f", onChange:
     </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;
\ No newline at end of file
diff --git a/src/components/vp-explorer/VPDisplay.tsx b/src/components/vp-explorer/VPDisplay.tsx
index 0fb8674..884a833 100644
--- a/src/components/vp-explorer/VPDisplay.tsx
+++ b/src/components/vp-explorer/VPDisplay.tsx
@@ -4,13 +4,13 @@ import AbbreviationFormSelector from "./AbbreviationFormSelector";
 import { getObjectSelection, getSubjectSelection } from "../../lib/phrase-building/blocks-utils";
 import { completeVPSelection } from "../../lib/phrase-building/vp-tools";
 import { renderVP } from "../../library";
-import ModeSelect, { Mode, ScriptSelect } from "../DisplayModeSelect";
+import ModeSelect, { LengthSelect, Mode, ScriptSelect } from "../DisplayModeSelect";
 import { useState } from "react";
 import CompiledPTextDisplay from "../CompiledPTextDisplay";
 import RenderedBlocksDisplay from "../RenderedBlocksDisplay";
 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,
     opts: T.TextOptions,
     setForm: "disable" | ((form: T.FormVersion) => void),
@@ -18,7 +18,8 @@ function VPDisplay({ VPS, opts, setForm, justify, onlyOne, length, mode: preferr
     onlyOne?: boolean | "concat",
     length?: "long" | "short",
     mode?: Mode,
-    script?: "p" | "f"
+    script?: "p" | "f",
+    onLengthChange?: (length: "long" | "short") => void,
 }) {
     const [mode, setMode] = useState<Mode>(preferredMode || "text");
     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">
             <ModeSelect value={mode} onChange={setMode} />
             {mode === "blocks" && <ScriptSelect value={script} onChange={setScript} />}
+            {mode === "text" && length && onLengthChange && <LengthSelect value={length} onChange={onLengthChange} />}
         </div>
         {mode === "text"
             ? <CompiledPTextDisplay opts={opts} compiled={result} justify={justify} onlyOne={!!onlyOne} length={length} />
diff --git a/src/components/vp-explorer/VPPicker.tsx b/src/components/vp-explorer/VPPicker.tsx
index 1049f36..75c4fe4 100644
--- a/src/components/vp-explorer/VPPicker.tsx
+++ b/src/components/vp-explorer/VPPicker.tsx
@@ -105,7 +105,7 @@ function VPPicker({ opts, vps, onChange, entryFeeder }: {
                                 Subj. <span onClick={() => setShowingExplanation({ role: "king", item: "subject" })}>{roleIcon.king}</span>
                                 {(rendered && rendered.whatsAdjustable !== "servant") && 
                                     <span onClick={() => adjustVps({ type: "toggle king remove" })} className="mx-2 clickable">
-                                        {!VPS?.form.removeKing ? "🚫" : "🙈"}
+                                        {!VPS?.form.removeKing ? "🙈" : "🚫" }
                                     </span>
                                 }
                             </div>
@@ -148,7 +148,7 @@ function VPPicker({ opts, vps, onChange, entryFeeder }: {
                                         Obj. <span onClick={() => setShowingExplanation({ role: "king", item: "object" })}>{roleIcon.king}</span>
                                             {(rendered && rendered.whatsAdjustable !== "servant") && 
                                                 <span onClick={() => adjustVps({ type: "toggle king remove" })} className="mx-2 clickable">
-                                                    {!VPS?.form.removeKing ? "🚫" : "🙈"}
+                                                    {!VPS?.form.removeKing ? "🙈" : "🚫"}
                                                 </span>
                                             }
                                         </div>
diff --git a/src/lib/phrase-building/english-vp-rendering.ts b/src/lib/phrase-building/english-vp-rendering.ts
index 489bf3e..0ee1863 100644
--- a/src/lib/phrase-building/english-vp-rendering.ts
+++ b/src/lib/phrase-building/english-vp-rendering.ts
@@ -54,7 +54,7 @@ export function renderEnglishVPBase({ subjectPerson, object, vs }: {
             `$SUBJ ${engEquative("present", s)}${n ? " not" : ""} ${ec[2]}`,
         ]),
         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]}`,
         ]),
         imperfectiveFuture: (s: T.Person, ec: T.EnglishVerbConjugationEc, n: boolean) => ([