changed abbreviation version picker - kind of an ugly implementation of the component but its all the ugliness is packed in one component

src/components/VerbPicker.tsx

@@ -113,6 +113,7 @@ function VerbPicker({ onChange, verb, verbs }: { verbs: VerbEntry[], verb: VerbS
         />
         <div>Tense:</div>
         <Select
+            isSearchable={false}
             value={verb && verb.tense}
             // @ts-ignore
             onChange={onTenseSelect}

src/components/phrase-builder/AbbreviationFormSelector.tsx

@@ -0,0 +1,101 @@
+import {
+    ButtonSelect,
+} from "@lingdocs/pashto-inflector";
+
+const options = [
+    {
+        label: "Full",
+        value: "full",
+    },
+    {
+        label: "🚫 King",
+        value: "noKing",
+    },
+    {
+        label: "👶 Servant",
+        value: "shrinkServant",
+    },
+    {
+        label: "👶 🚫 Both",
+        value: "shortest",
+    },
+];
+
+function formToValue(f: FormVersion) {
+    if (f.removeKing === false && f.shrinkServant === false) {
+        return "full";
+    }
+    if (f.removeKing === true && f.shrinkServant === false) {
+        return "noKing";
+    }
+    if (f.removeKing === false && f.shrinkServant === true) {
+        return "shrinkServant";
+    }
+    if (f.removeKing === true && f.shrinkServant === true) {
+        return "shortest";
+    }
+    throw new Error("unrecognized abbreviation form");
+}
+
+function limitOptions(adjustable: "both" | "king" | "servant") {
+    if (adjustable === "both") {
+        return options;
+    }
+    if (adjustable === "king") {
+        return options.filter(o => !["shrinkServant", "shortest"].includes(o.value));
+    }
+    if (adjustable === "servant") {
+        return options.filter(o => !["noKing", "shortest"].includes(o.value));
+    }
+}
+
+function limitValue(value: string, adjustable: "both" | "king" | "servant") {
+    if (adjustable === "both") return value;
+    if (adjustable === "king") {
+        return (value === "shortest")
+            ? "noKing"
+            : (value === "shrinkServant")
+            ? "full"
+            : value;
+    }
+    if (adjustable === "servant") {
+        return (value === "shortest")
+            ? "shrinkServant"
+            : (value === "noKing")
+            ? "full"
+            : value;
+    }
+    throw new Error("unrecognized adjustable value");
+}
+
+function AbbreviationFormSelector({ form, onChange, adjustable }: {
+    form: FormVersion,
+    onChange: (f: FormVersion) => void,
+    adjustable: "both" | "king" | "servant",
+}) {
+    function handleChange(f: "full" | "noKing" | "shrinkServant" | "shortest") {
+        if (f === "full") {
+            onChange({ removeKing: false, shrinkServant: false });
+        } else if (f === "noKing") {
+            onChange({ removeKing: true, shrinkServant: false });
+        } else if (f === "shrinkServant") {
+            onChange({ removeKing: false, shrinkServant: true });
+        } else if (f === "shortest") {
+            onChange({ removeKing: true, shrinkServant: true });
+        }
+    }
+    // TODO: limit display of shrinking options based on the verb type
+    return <div className="my-3">
+        {/* <div className="text-center text-small mb-2">Abbreviation Options</div> */}
+        <ButtonSelect
+            // @ts-ignore
+            value={limitValue(formToValue(form), adjustable)}
+            // @ts-ignore
+            options={limitOptions(adjustable)}
+            // @ts-ignore
+            handleChange={handleChange}
+        />
+    </div>
+}
+
+export default AbbreviationFormSelector;

src/components/phrase-builder/VPDisplay.tsx

@@ -5,31 +5,40 @@ import {
     defaultTextOptions as opts,
     Types as T,
 } from "@lingdocs/pashto-inflector";
-import classNames from "classnames";
+import AbbreviationFormSelector from "./AbbreviationFormSelector";
+import { isPastTense } from "../../lib/phrase-building/vp-tools";
 
-function buttonClass(active: boolean, side: "l" | "r") {
+// function buttonClass(active: boolean, side: "l" | "r") {
-    return classNames(
+//     return classNames(
-        "btn btn-sm btn-outline-secondary",
+//         "btn btn-sm btn-outline-secondary",
-        { active },
+//         { active },
-        { "mr-1": side === "l" },
+//         { "mr-1": side === "l" },
-        { "ml-1": side === "r" },
+//         { "ml-1": side === "r" },
-    );
+//     );
-}
+// }
 
 function VPDisplay({ VP }: { VP: VPSelection }) {
     const [form, setForm] = useState<FormVersion>({ removeKing: false, shrinkServant: false });
     // TODO: Possibly put the servant shrinking in here after the render
     const result = compileVP(renderVP(VP), form);
-    const servantShrinkable = VP.object && VP.object !== "none";
+    // const servantShrinkable = VP.object && VP.object !== "none";
-    const toggleForm = (f: "removeKing" | "shrinkServant") => () => {
+    // const toggleForm = (f: "removeKing" | "shrinkServant") => () => {
-        setForm(oForm => ({
+    //     setForm(oForm => ({
-            ...oForm,
+    //         ...oForm,
-            [f]: !oForm[f],
+    //         [f]: !oForm[f],
-        }));
+    //     }));
-    }
+    // }
+    const adjustable = VP.verb.transitivity === "transitive"
+        ? "both"
+        : VP.verb.transitivity === "intransitive"
+        ? "king"
+        // grammTrans
+        : isPastTense(VP.verb.tense)
+        ? "servant"
+        : "king";
     return <div className="text-center mt-2">
-        <div className="my-3">
+        <AbbreviationFormSelector adjustable={adjustable} form={form} onChange={setForm} />
-            <button
+            {/* <button
                 onClick={toggleForm("removeKing")}
                 className={buttonClass(form.removeKing, "l")}
             >
@@ -40,8 +49,7 @@ function VPDisplay({ VP }: { VP: VPSelection }) {
                 className={buttonClass(form.shrinkServant, "r")}
             >
                 👶 Servant
-            </button>}
+            </button>} */}
-        </div>
         {"long" in result.ps ?
             <div>
                 {/* <div className="h6">Long Verb:</div> */}

src/lib/phrase-building/render-vp.ts

@@ -15,7 +15,9 @@ import {
     getLong,
 } from "../text-tools";
 import {
-    getPersonFromNP, removeBa,
+    getPersonFromNP,
+    removeBa,
+    isPastTense,
 } from "./vp-tools";
 import { isPattern4Entry } from "../type-predicates";
 import { hasBaParticle } from "@lingdocs/pashto-inflector/dist/lib/p-text-helpers";
@@ -368,10 +370,6 @@ function getInf(infs: T.InflectorOutput, t: "plural" | "arabicPlural" | "inflect
     return [];
 }
 
-function isPastTense(tense: VerbTense): boolean {
-    return tense.toLowerCase().includes("past");
-}
-
 function getKingAndServant(isPast: boolean, isTransitive: boolean): 
     { king: "subject", servant: "object" } |
     { king: "object", servant: "subject" } |

src/lib/phrase-building/vp-tools.ts

@@ -26,3 +26,7 @@ export function getPersonFromNP(np: NPSelection | ObjectNP): T.Person | undefine
 export function removeBa(ps: T.PsString): T.PsString {
     return psRemove(ps, concatPsString(grammarUnits.baParticle, " "));
 }
+
+export function isPastTense(tense: VerbTense): boolean {
+    return tense.toLowerCase().includes("past");
+}