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", "name": "@lingdocs/pashto-inflector",
"version": "2.8.8", "version": "2.8.9",
"author": "lingdocs.com", "author": "lingdocs.com",
"description": "A Pashto inflection and verb conjugation engine, inculding React components for displaying Pashto text, inflections, and conjugations", "description": "A Pashto inflection and verb conjugation engine, inculding React components for displaying Pashto text, inflections, and conjugations",
"homepage": "https://verbs.lingdocs.com", "homepage": "https://verbs.lingdocs.com",

View File

@ -2,15 +2,16 @@ import * as T from "../../types";
import Block from "../blocks/Block"; import Block from "../blocks/Block";
import KidDisplay from "../blocks/KidDisplay"; import KidDisplay from "../blocks/KidDisplay";
function EPBlocksDisplay({ opts, rendered }: { function EPBlocksDisplay({ opts, rendered, justify }: {
opts: T.TextOptions, opts: T.TextOptions,
rendered: T.EPRendered, rendered: T.EPRendered,
justify?: "left" | "right" | "center",
}) { }) {
const blocks = rendered.omitSubject const blocks = rendered.omitSubject
? rendered.blocks.filter(b => b.type !== "subjectSelection") ? rendered.blocks.filter(b => b.type !== "subjectSelection")
: rendered.blocks; : rendered.blocks;
return <div> return <div className={`d-flex flex-row justify-content-${justify ? justify : "center"}`} style={{}}>
<div className="d-flex flex-row justify-content-center align-items-end mt-3"> <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"> <div key={Math.random()} className="mr-2">
<Block opts={opts} block={blocks[0]} /> <Block opts={opts} block={blocks[0]} />
</div> </div>

View File

@ -8,10 +8,12 @@ import EPTextDisplay from "./EPTextDisplay";
import EPBlocksDisplay from "./EPBlocksDisplay"; import EPBlocksDisplay from "./EPBlocksDisplay";
type Mode = "text" | "blocks"; type Mode = "text" | "blocks";
function EPDisplay({ eps, opts, setOmitSubject }: { function EPDisplay({ eps, opts, setOmitSubject, justify, onlyOne }: {
eps: T.EPSelectionState, eps: T.EPSelectionState,
opts: T.TextOptions, opts: T.TextOptions,
setOmitSubject: ((value: "true" | "false") => void) | false setOmitSubject: ((value: "true" | "false") => void) | false
justify?: "left" | "right" | "center",
onlyOne?: boolean,
}) { }) {
const [mode, setMode] = useState<Mode>("text"); const [mode, setMode] = useState<Mode>("text");
const EP = completeEPSelection(eps); const EP = completeEPSelection(eps);
@ -47,10 +49,10 @@ function EPDisplay({ eps, opts, setOmitSubject }: {
<div /> <div />
</div> </div>
{mode === "text" {mode === "text"
? <EPTextDisplay opts={opts} compiled={result} /> ? <EPTextDisplay opts={opts} compiled={result} justify={justify} onlyOne={onlyOne} />
: <EPBlocksDisplay opts={opts} rendered={rendered} />} : <EPBlocksDisplay opts={opts} rendered={rendered} justify={justify} />}
{result.e && <div className="text-muted mt-3"> {result.e && <div className={`text-muted mt-2 text-${justify === "left" ? "left" : justify === "right" ? "right" : "center"}`}>
{result.e.map((e, i) => <div key={i}>{e}</div>)} {(onlyOne ? [result.e[0]] : result.e).map((e, i) => <div key={i}>{e}</div>)}
</div>} </div>}
{EP.predicate.selection.selection.type === "participle" && <div style={{ maxWidth: "6 00px", margin: "0 auto" }} className="alert alert-warning mt-3 pt-4"> {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 <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 * as T from "../../types";
import Examples from "../Examples"; import Examples from "../Examples";
function EPTextDisplay({ compiled, opts }: { compiled: { function EPTextDisplay({ compiled, opts, justify, onlyOne }: {
compiled: {
ps: T.SingleOrLengthOpts<T.PsString[]>; ps: T.SingleOrLengthOpts<T.PsString[]>;
e?: string[] | undefined; e?: string[] | undefined;
}, opts: T.TextOptions }) { },
opts: T.TextOptions,
justify?: "left" | "right" | "center",
onlyOne?: boolean,
}) {
function VariationLayer({ vs }: { vs: T.PsString[] }) { function VariationLayer({ vs }: { vs: T.PsString[] }) {
return <div className="mb-2"> return <div className="mb-2">
<Examples opts={opts} lineHeight={0}>{vs}</Examples> <Examples opts={opts} lineHeight={0}>{vs}</Examples>
</div>; </div>;
} }
return <div> return <div className={justify === "left" ? "text-left" : justify === "right" ? "text-right" : "text-center"}>
{"long" in compiled.ps ? {onlyOne
? <VariationLayer vs={[getShort(compiled.ps)[0]]} />
: "long" in compiled.ps ?
<div> <div>
<VariationLayer vs={compiled.ps.long} /> <VariationLayer vs={compiled.ps.long} />
<VariationLayer vs={compiled.ps.short} /> <VariationLayer vs={compiled.ps.short} />