created NPDisplay component and improved block/text selection buttons

This commit is contained in:
adueck 2023-02-18 14:22:09 +05:00
parent ba44f4704e
commit 6282f30577
10 changed files with 113 additions and 18 deletions

4
package-lock.json generated
View File

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

View File

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

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

View File

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

View File

@ -1,22 +1,49 @@
import ButtonSelect from "./ButtonSelect";
export type Mode = "text" | "blocks"; export type Mode = "text" | "blocks";
function ModeSelect({ value, onChange }: { function ModeSelect({ value, onChange }: {
value: Mode, value: Mode,
onChange: (m: Mode) => void, 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 }) { 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 }) { export function LengthSelect({ value, onChange }: { value: "long" | "short", onChange: (l: "long" | "short") => void }) {

View File

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

View File

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

View File

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

View File

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

View File

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