From f06e3d83410ccfdf5b90cfbb5308d0b734af6d63 Mon Sep 17 00:00:00 2001
From: lingdocs <71590811+lingdocs@users.noreply.github.com>
Date: Sat, 11 Jun 2022 17:08:27 -0400
Subject: [PATCH] better blocks display

---
 package.json                                  |  2 +-
 .../ep-explorer/EPBlocksDisplay.tsx           |  7 ++--
 src/components/ep-explorer/EPDisplay.tsx      | 12 ++++---
 src/components/ep-explorer/EPTextDisplay.tsx  | 32 ++++++++++++-------
 4 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/package.json b/package.json
index d6c0fa1..d691f2d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@lingdocs/pashto-inflector",
-  "version": "2.8.8",
+  "version": "2.8.9",
   "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/ep-explorer/EPBlocksDisplay.tsx b/src/components/ep-explorer/EPBlocksDisplay.tsx
index 5233fe7..88d08ba 100644
--- a/src/components/ep-explorer/EPBlocksDisplay.tsx
+++ b/src/components/ep-explorer/EPBlocksDisplay.tsx
@@ -2,15 +2,16 @@ import * as T from "../../types";
 import Block from "../blocks/Block";
 import KidDisplay from "../blocks/KidDisplay";
 
-function EPBlocksDisplay({ opts, rendered }: {
+function EPBlocksDisplay({ opts, rendered, justify }: {
     opts: T.TextOptions,
     rendered: T.EPRendered,
+    justify?: "left" | "right" | "center",
 }) {
     const blocks = rendered.omitSubject
         ? rendered.blocks.filter(b => b.type !== "subjectSelection")
         : rendered.blocks;
-    return <div>
-        <div className="d-flex flex-row justify-content-center align-items-end mt-3">
+    return <div className={`d-flex flex-row justify-content-${justify ? justify : "center"}`} style={{}}>
+        <div className="d-flex flex-row justify-content-left align-items-end mt-3 pb-2" style={{ overflowX: "auto" }}>
             <div key={Math.random()} className="mr-2">
                 <Block opts={opts} block={blocks[0]} />
             </div>
diff --git a/src/components/ep-explorer/EPDisplay.tsx b/src/components/ep-explorer/EPDisplay.tsx
index ad149dc..b22970f 100644
--- a/src/components/ep-explorer/EPDisplay.tsx
+++ b/src/components/ep-explorer/EPDisplay.tsx
@@ -8,10 +8,12 @@ import EPTextDisplay from "./EPTextDisplay";
 import EPBlocksDisplay from "./EPBlocksDisplay";
 type Mode = "text" | "blocks";
 
-function EPDisplay({ eps, opts, setOmitSubject }: {
+function EPDisplay({ eps, opts, setOmitSubject, justify, onlyOne }: {
     eps: T.EPSelectionState,
     opts: T.TextOptions,
     setOmitSubject: ((value: "true" | "false") => void) | false
+    justify?: "left" | "right" | "center",
+    onlyOne?: boolean,
 }) {
     const [mode, setMode] = useState<Mode>("text");
     const EP = completeEPSelection(eps);
@@ -47,10 +49,10 @@ function EPDisplay({ eps, opts, setOmitSubject }: {
             <div />
         </div>
         {mode === "text"
-            ? <EPTextDisplay opts={opts} compiled={result} />
-            : <EPBlocksDisplay opts={opts} rendered={rendered} />}
-        {result.e && <div className="text-muted mt-3">
-            {result.e.map((e, i) => <div key={i}>{e}</div>)}
+            ? <EPTextDisplay opts={opts} compiled={result} justify={justify} onlyOne={onlyOne} />
+            : <EPBlocksDisplay opts={opts} rendered={rendered} justify={justify} />}
+        {result.e && <div className={`text-muted mt-2 text-${justify === "left" ? "left" : justify === "right" ? "right" : "center"}`}>
+            {(onlyOne ? [result.e[0]] : result.e).map((e, i) => <div key={i}>{e}</div>)}
         </div>}
         {EP.predicate.selection.selection.type === "participle" && <div style={{ maxWidth: "6 00px", margin: "0 auto" }} className="alert alert-warning mt-3 pt-4">
             <p>⚠️ NOTE: This means that the subject {renderedSubject.selection.e ? `(${renderedSubject.selection.e})` : ""} is <strong>the action/idea</strong> of
diff --git a/src/components/ep-explorer/EPTextDisplay.tsx b/src/components/ep-explorer/EPTextDisplay.tsx
index 14ecff8..61cc458 100644
--- a/src/components/ep-explorer/EPTextDisplay.tsx
+++ b/src/components/ep-explorer/EPTextDisplay.tsx
@@ -1,23 +1,31 @@
+import { getShort } from "../../lib/p-text-helpers";
 import * as T from "../../types";
 import Examples from "../Examples";
 
-function EPTextDisplay({ compiled, opts }: { compiled: {
-    ps: T.SingleOrLengthOpts<T.PsString[]>;
-    e?: string[] | undefined;
-}, opts: T.TextOptions }) {
+function EPTextDisplay({ compiled, opts, justify, onlyOne }: {
+    compiled: {
+        ps: T.SingleOrLengthOpts<T.PsString[]>;
+        e?: string[] | undefined;
+    },
+    opts: T.TextOptions,
+    justify?: "left" | "right" | "center",
+    onlyOne?: boolean,
+}) {
     function VariationLayer({ vs }: { vs: T.PsString[] }) {
         return <div className="mb-2">
             <Examples opts={opts} lineHeight={0}>{vs}</Examples>
         </div>;
     }
-    return <div>
-        {"long" in compiled.ps ?
-            <div>
-                <VariationLayer vs={compiled.ps.long} />
-                <VariationLayer vs={compiled.ps.short} />
-                {compiled.ps.mini && <VariationLayer vs={compiled.ps.mini} />}
-            </div>
-            : <VariationLayer vs={compiled.ps} />
+    return <div className={justify === "left" ? "text-left" : justify === "right" ? "text-right" : "text-center"}>
+        {onlyOne
+            ? <VariationLayer vs={[getShort(compiled.ps)[0]]} />
+            : "long" in compiled.ps ?
+                <div>
+                    <VariationLayer vs={compiled.ps.long} />
+                    <VariationLayer vs={compiled.ps.short} />
+                    {compiled.ps.mini && <VariationLayer vs={compiled.ps.mini} />}
+                </div>
+                : <VariationLayer vs={compiled.ps} />
         }
     </div>;
 }