better blocks display

This commit is contained in:
lingdocs 2022-06-11 17:08:27 -04:00
parent e39f77c8b3
commit f06e3d8341
4 changed files with 32 additions and 21 deletions

View File

@ -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",

View File

@ -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>

View File

@ -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

View File

@ -1,17 +1,25 @@
import { getShort } from "../../lib/p-text-helpers";
import * as T from "../../types";
import Examples from "../Examples";
function EPTextDisplay({ compiled, opts }: { compiled: {
function EPTextDisplay({ compiled, opts, justify, onlyOne }: {
compiled: {
ps: T.SingleOrLengthOpts<T.PsString[]>;
e?: string[] | undefined;
}, opts: T.TextOptions }) {
},
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 ?
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} />