created NPDisplay component and improved block/text selection buttons

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "pashto-inflector",
-  "version": "5.7.18",
+  "version": "5.8.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "pashto-inflector",
-      "version": "5.7.18",
+      "version": "5.8.0",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pashto-inflector",
-  "version": "5.7.18",
+  "version": "5.8.0",
   "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",

src/components/library.ts

@@ -33,6 +33,7 @@ import EPExplorer from "./src/ep-explorer/EPExplorer";
 import APPicker from "./src/ap-picker/APPicker";
 import VPDisplay from "./src/vp-explorer/VPDisplay";
 import VPPicker from "./src/vp-explorer/VPPicker";
+import NPDisplay from "./src/vp-explorer/NPDisplay";
 import HumanReadableInflectionPattern from "./src/HumanReadableInflectionPattern";
 import { psJSXMap } from "./src/jsx-map";
 import genderColors from "./src/gender-colors";
@@ -66,6 +67,7 @@ export {
     Block,
     EPDisplay,
     VPDisplay,
+    NPDisplay,
     EPPicker,
     VPPicker,
     CompiledPTextDisplay,

src/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lingdocs/ps-react",
-  "version": "5.7.18",
+  "version": "5.8.0",
   "description": "Pashto inflector library module with React components",
   "main": "dist/components/library.js",
   "module": "dist/components/library.js",

src/components/src/DisplayModeSelect.tsx

@@ -1,22 +1,49 @@
+import ButtonSelect from "./ButtonSelect";
+
 export type Mode = "text" | "blocks";
 
 function ModeSelect({ value, onChange }: {
     value: Mode,
     onChange: (m: Mode) => void,
 }) {
-    return <div style={{ fontSize: "larger", maxWidth: "1.75rem" }}>
+    return <div>
-        {value === "text" ? <div className="clickable" onClick={() => onChange("blocks")}>
+        <ButtonSelect
-            <i className="fas fa-cubes" />
+            faded
-        </div> : <div className="clickable" onClick={() => onChange("text")}>
+            options={[
-            <i className="fas fa-align-left" />
+                { value: "text", label: <i className="fas fa-align-left p-1" /> },
-        </div>}
+                { value: "blocks", label: <i className="fas fa-cubes p-1" /> },
-    </div>;
+            ]}
+            handleChange={onChange}
+            value={value}
+            small
+        />
+    </div>
+
+    // return <div style={{ fontSize: "larger", maxWidth: "1.75rem" }}>
+    //     {value === "text" ? <div className="clickable" onClick={() => onChange("blocks")}>
+    //         <i className="fas fa-cubes" />
+    //     </div> : <div className="clickable" onClick={() => onChange("text")}>
+    //         <i className="fas fa-align-left" />
+    //     </div>}
+    // </div>;
 }
 
 export function ScriptSelect({ value, onChange }: { value: "p" | "f", onChange: (m: "p" | "f") => void }) {
-    return <button style={{ marginLeft: "1.5rem" }} className="btn btn-sm btn-light" onClick={() => onChange(value === "p" ? "f" : "p")}>
+    return <div className="ml-3">
-        {value === "p" ? "Ps" : "Phon."}
+        <ButtonSelect
-    </button>;
+            faded
+            options={[
+                { value: "p", label: "Ps" },
+                { value: "f", label: "Phon." },
+            ]}
+            handleChange={onChange}
+            value={value}
+            small
+        />
+    </div>
+    // return <button style={{ marginLeft: "1.5rem" }} className="btn btn-sm btn-light" onClick={() => onChange(value === "p" ? "f" : "p")}>
+    //     {value === "p" ? "Ps" : "Phon."}
+    // </button>;
 }
 
 export function LengthSelect({ value, onChange }: { value: "long" | "short", onChange: (l: "long" | "short") => void }) {

src/components/src/RenderedBlocksDisplay.tsx

@@ -16,7 +16,9 @@ function RenderedBlocksDisplay({ opts, rendered, justify, script }: {
     // useEffect(() => {
     //     parent.current && autoAnimate(parent.current)
     // }, [parent]);
-    const blocksWVars = ("omitSubject" in rendered)
+    const blocksWVars: T.Block[][] = Array.isArray(rendered)
+        ? rendered
+        : ("omitSubject" in rendered)
         ? filterForVisibleBlocksEP(rendered.blocks, rendered.omitSubject)
         : filterForVisibleBlocksVP(rendered.blocks, rendered.form, rendered.king);
     const king = "king" in rendered ? rendered.king : undefined;

src/components/src/vp-explorer/NPDisplay.tsx

@@ -0,0 +1,64 @@
+import * as T from "../../../types";
+import ModeSelect, { Mode, ScriptSelect } from "../DisplayModeSelect";
+import { useState } from "react";
+import CompiledPTextDisplay from "../CompiledPTextDisplay";
+import useStickyState from "../useStickyState";
+import {
+    getEnglishFromRendered,
+    getPashtoFromRendered,
+} from "../../../lib/src/phrase-building/np-tools";
+import {
+    renderNPSelection,
+} from "../../../lib/src/phrase-building/render-np";
+import { NPBlock } from "../blocks/Block";
+
+function NPDisplay({ NP, inflected, opts, justify, onlyOne, mode: preferredMode, script: preferredScript }: {
+    NP: T.NPSelection,
+    opts: T.TextOptions,
+    justify?: "left" | "right" | "center",
+    onlyOne?: boolean | "concat",
+    mode?: Mode,
+    script?: "p" | "f",
+    inflected: boolean,
+}) {
+    const [mode, setMode] = useState<Mode>(preferredMode || "text");
+    const [script, setScript] = useStickyState<"p" | "f">(preferredScript || "f", "blockScriptChoice");
+    const rendered = renderNPSelection(NP, inflected, false, "subject", "none", false);
+    const english = getEnglishFromRendered(rendered);
+    const pashto = getPashtoFromRendered(rendered, false);
+    const result = {
+        ps: pashto,
+        e: [english || ""],
+    };
+    return <div className={`text-${justify ? justify : "center"} mt-1`}>
+        <div className="d-flex flex-row mb-2 align-items-center">
+            <ModeSelect value={mode} onChange={setMode} />
+            {mode === "blocks" && <ScriptSelect value={script} onChange={setScript} />}
+        </div>
+        {mode === "text"
+            ? <CompiledPTextDisplay opts={opts} compiled={result} justify={justify} onlyOne={!!onlyOne} />
+            : <NPBlockDisplay opts={opts} np={rendered} justify={justify} script={script} />}
+        {result.e && <div className={`text-muted mt-2 text-${justify === "left" ? "left" : justify === "right" ? "right" : "center"}`}>
+            {onlyOne === "concat"
+                ? result.e.join(" • ")
+                : onlyOne
+                ? [result.e[0]]
+                : result.e.map((e, i) => <div key={i}>{e}</div>)}
+        </div>}
+    </div>
+}
+
+function NPBlockDisplay({ opts, np, justify, script }: {
+    script: "p" | "f",
+    opts: T.TextOptions,
+    np: T.Rendered<T.NPSelection>,
+    justify?: "left" | "right" | "center",
+}) {
+    return <div className={`d-flex flex-row justify-content-${justify ? justify : "center"}`}>
+        <div className={`d-flex flex-row${script === "p" ? "-reverse" : ""} justify-content-left align-items-end mt-3 pb-2`} style={{ overflowX: "auto" }}>
+            <NPBlock opts={opts} script={script}>{np}</NPBlock>
+        </div>
+    </div>
+}
+
+export default NPDisplay;

src/lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lingdocs/inflect",
-  "version": "5.7.18",
+  "version": "5.8.0",
   "description": "Pashto inflector library",
   "main": "dist/index.js",
   "types": "dist/lib/library.d.ts",

src/lib/src/misc-helpers.ts

@@ -46,6 +46,7 @@ export function ensureNonComboVerbInfo(i: T.VerbInfo): T.NonComboVerbInfo {
 }
 
 export function pickPersInf<T>(s: T.OptionalPersonInflections<T>, persInf: T.PersonInflectionsField): T {
+    // @ts-ignore
     if ("mascSing" in s) {
         return s[persInf];
     }
@@ -295,6 +296,7 @@ export function parseEc(ec: string): T.EnglishVerbConjugationEc {
 }
 
 export function chooseLength<N>(x: T.SingleOrLengthOpts<N>, length: "long" | "short"): N {
+    // @ts-ignore
     if ("long" in x) {
         return x[length]; 
     }

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

@@ -35,8 +35,6 @@ import { renderAPSelection } from "./render-ap";
 import { findPossesivesToShrink, orderKids, getMiniPronounPs } from "./render-common";
 import { renderComplementSelection } from "./render-complement";
 import { makeNounSelection } from "./make-selections";
-// import { getVerbInfo } from "../verb-info";
-// import { grammarUnits } from "../../library";
 
 export function renderVP(VP: T.VPSelectionComplete): T.VPRendered {
     const subject = getSubjectSelection(VP.blocks).selection;