different display (with all tenses listed) for chart mode in VPExplorer

This commit is contained in:
adueck 2022-10-10 14:49:54 +05:00
parent e05d6f1111
commit 3eff2fbac0
9 changed files with 213 additions and 98 deletions

4
package-lock.json generated
View File

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

View File

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

View File

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

View File

@ -21,7 +21,7 @@ const defaultLevel = 4;
const indentAfterLevel = 5;
function Hider(props: {
label: string,
label: string | JSX.Element,
showing: boolean,
aspect?: T.Aspect,
handleChange: () => void,
@ -48,14 +48,16 @@ function Hider(props: {
extraMargin,
),
},
<>
<div className="d-flex flex-row align-items-center">
{props.showing ? caretDown : caretRight}
{` `}
{props.aspect
? <i className={`fas fa-${props.aspect === "imperfective" ? "video" : "camera"} mr-2`} />
? <i className={`fas fa-${props.aspect === "imperfective" ? "video" : "camera"}`} />
: ""}
<div className="ml-2">
{props.label}
</>,
</div>
</div>,
)}
{props.showing && props.children}
</div>

View File

@ -0,0 +1,58 @@
import { abilityTenseOptions, imperativeTenseOptions, perfectTenseOptions, verbTenseOptions } from "./verbTenseOptions";
import ChartDisplay from "./VPChartDisplay";
import Hider from "../Hider";
import * as T from "../../../types";
import useStickyState from "../useStickyState";
import { isModalTense, isPerfectTense, isVerbTense } from "../../../lib/src/type-predicates";
function AllTensesDisplay({ VS, opts }: { VS: T.VerbSelection, opts: T.TextOptions }) {
const [showing, setShowing] = useStickyState<string[]>([], "tensesShowing");
const [showFormulas, setShowFormulas] = useStickyState<boolean>(false, "showFormulasWithCharts");
const adjustShowing = (v: string) => {
if (showing.includes(v)) {
setShowing(os => os.filter(x => x !== v));
} else {
setShowing(os => [v, ...os]);
}
}
const options = VS.tenseCategory === "basic"
? verbTenseOptions
: VS.tenseCategory === "perfect"
? perfectTenseOptions
: VS.tenseCategory === "modal"
? abilityTenseOptions
: imperativeTenseOptions;
return <div>
<div className="clickable mb-2 small text-center" onClick={() => setShowFormulas(x => !x)}>
{!showFormulas ? "Show" : "Hide"} Formulas
</div>
{options.map((tense) => <div key={Math.random()}>
<Hider
label={tense.label}
showing={showing.includes(tense.value)}
handleChange={() => adjustShowing(tense.value)}
hLevel={5}
>
{showFormulas && <div className="mb-1">
<samp>🧪 {tense.formula}</samp>
</div>}
<ChartDisplay
VS={{
...VS,
[isVerbTense(tense.value)
? "verbTense"
: isPerfectTense(tense.value)
? "perfectTense"
: isModalTense(tense.value)
? "modalTense"
: "imperativeTense"
]: tense.value,
}}
opts={opts}
/>
</Hider>
</div>)}
</div>;
}
export default AllTensesDisplay;

View File

@ -7,40 +7,7 @@ import { customStyles } from "../EntrySelect";
import {
VpsReducerAction
} from "../../../lib/src/phrase-building/vps-reducer";
const verbTenseOptions: { label: string | JSX.Element, value: T.VerbTense, formula: string }[] = [{
label: <div><i className="fas fa-video mr-2" />present</div>,
value: "presentVerb",
formula: "imperfective stem + present verb ending",
}, {
label: <div><i className="fas fa-camera mr-2" />subjunctive</div>,
value: "subjunctiveVerb",
formula: "perfective stem + present verb ending",
}, {
label: <div><i className="fas fa-video mr-2" />imperfective future</div>,
value: "imperfectiveFuture",
formula: "ba + present",
}, {
label: <div><i className="fas fa-camera mr-2" />perfective future</div>,
value: "perfectiveFuture",
formula: "ba + subjunctive",
}, {
label: <div><i className="fas fa-video mr-2" />continuous past</div>,
value: "imperfectivePast",
formula: "imperfective root + past verb ending",
}, {
label: <div><i className="fas fa-camera mr-2" />simple past</div>,
value: "perfectivePast",
formula: "perfective root + past verb ending",
}, {
label: <div><i className="fas fa-video mr-2" />habitual continual past</div>,
value: "habitualImperfectivePast",
formula: "ba + continuous past",
}, {
label: <div><i className="fas fa-camera mr-2" />habitual simple past</div>,
value: "habitualPerfectivePast",
formula: "ba + simple past",
}];
import { imperativeTenseOptions, perfectTenseOptions, verbTenseOptions } from "./verbTenseOptions";
function composeFormula(formula: string, prefix: "passive" | "ability"): string {
return formula.replace(/^perfective/, `${prefix} perfective`)
@ -52,50 +19,6 @@ function composeFormula(formula: string, prefix: "passive" | "ability"): string
.replace("past participle", `${prefix} past participle`);
}
const perfectTenseOptions: { label: string | JSX.Element, value: T.PerfectTense, formula: string }[] = [{
label: "Present Perfect",
value: "presentPerfect",
formula: "past participle + present equative",
}, {
label: "Habitual Perfect",
value: "habitualPerfect",
formula: "past participle + habitual equative",
}, {
label: "Subjunctive Perfect",
value: "subjunctivePerfect",
formula: "past participle + subjunctive equative",
}, {
label: "Future Perfect",
value: "futurePerfect",
formula: "past participle + future equative",
}, {
label: "Past Perfect",
value: "pastPerfect",
formula: "past participle + past equative",
}, {
label: `"Would Be" Perfect`,
value: "wouldBePerfect",
formula: `past participle + "would be" equative`,
}, {
label: "Past Subjunctive Perfect",
value: "pastSubjunctivePerfect",
formula: "past participle + past subjunctive equative",
}, {
label: `"Would Have Been" Perfect`,
value: "wouldHaveBeenPerfect",
formula: `past participle + "would have been" equative`,
}];
const imperativeTenseOptions: { label: string | JSX.Element, value: T.ImperativeTense, formula: string }[] = [{
label: <div><i className="fas fa-video mr-2" />imperfective imperative</div>,
value: "imperfectiveImperative",
formula: "imperfective stem + imperative ending",
}, {
label: <div><i className="fas fa-camera mr-2" />perfective imperative</div>,
value: "perfectiveImperative",
formula: "perfective stem + imperative ending",
}];
export function getRandomTense(o?: T.PerfectTense | T.VerbTense | T.ModalTense | T.ImperativeTense): T.PerfectTense | T.VerbTense | T.ModalTense | T.ImperativeTense {
let tns: T.PerfectTense | T.VerbTense | T.ModalTense | T.ImperativeTense;
const oldTenseCategory = !o
@ -184,11 +107,18 @@ function TensePicker(props: ({
const showImperativeOption = ("vps" in props && props.vps.verb.voice === "active")
|| ("vpsComplete" in props && props.vpsComplete.verb.voice !== "active");
const inPassiveVoice = ("vps" in props && props.vps.verb.voice === "passive") || ("vpsComplete" in props && props.vpsComplete.verb.voice === "passive");;
const canHaveFormula = "vps" in props && props.mode !== "quiz";
const inAllTensesMode = props.mode === "charts";
const canHaveFormula = "vps" in props
&& props.mode !== "quiz"
&& !inAllTensesMode;
return <div>
<div style={{ maxWidth: "300px", minWidth: "250px", margin: "0 auto" }}>
<div className="d-flex flex-row justify-content-between align-items-center">
<div className="h5">Verb Tense:</div>
<div className="h5">
{props.mode === "charts"
? "Tense Category:"
: "Verb Tense:"}
</div>
{canHaveFormula && <div className="clickable mb-2 small" onClick={() => setShowFormula(x => !x)}>
🧪 {!showFormula ? "Show" : "Hide"} Formula
</div>}
@ -230,7 +160,7 @@ function TensePicker(props: ({
{[...verbTenseOptions, ...perfectTenseOptions, ...imperativeTenseOptions].find(o => o.value === props.vpsComplete.verb.tense)?.label}
</div>
: <>
<Select
{!inAllTensesMode && <Select
isSearchable={false}
// for some reason can't use tOptions with find here;
value={props.vps.verb && ([...verbTenseOptions, ...perfectTenseOptions, ...imperativeTenseOptions].find(o => o.value === props.vps.verb[
@ -245,12 +175,24 @@ function TensePicker(props: ({
className="mb-2"
options={tOptions}
styles={customStyles}
/>
/>}
</>}
{"vps" in props && props.vps.verb && (props.mode !== "quiz") && <div className="d-flex flex-row justify-content-between align-items-center mt-2 mb-1" style={{ width: "100%" }}>
<div className="btn btn-light clickable" onClick={moveTense("back")}>
{!inAllTensesMode ? <div className="btn btn-light clickable" onClick={moveTense("back")}>
<i className="fas fa-chevron-left" />
</div>
</div> : <div />}
{/* {props.mode === "charts" && <ButtonSelect
small
value={props.chartMode}
options={[{
label: "all",
value: "allTenses",
}, {
label: "one",
value: "oneTense",
}]}
handleChange={props.onChartModeChange}
/>} */}
{props.mode === "phrases" && <ButtonSelect
small
value={props.vps.verb.negative.toString() as "true" | "false"}
@ -263,9 +205,9 @@ function TensePicker(props: ({
}]}
handleChange={onPosNegSelect}
/>}
<div onClick={moveTense("forward")} className="btn btn-light clickable">
{!inAllTensesMode ? <div onClick={moveTense("forward")} className="btn btn-light clickable">
<i className="fas fa-chevron-right" />
</div>
</div> : <div />}
</div>}
{(canHaveFormula && showFormula) && (() => {
// TODO: Be able to show modal formulas too

View File

@ -3,7 +3,6 @@ import TensePicker from "./TensePicker";
import VPDisplay from "./VPDisplay";
import ButtonSelect from "../ButtonSelect";
import * as T from "../../../types";
import ChartDisplay from "./VPChartDisplay";
import useStickyState, { useStickyReducer } from "../useStickyState";
import { makeVPSelectionState } from "../../../lib/src/phrase-building/verb-selection";
import { useEffect, useState } from "react";
@ -14,6 +13,7 @@ import LZString from "lz-string";
import { vpsReducer } from "../../../lib/src/phrase-building/vps-reducer";
import { getObjectSelection } from "../../../lib/src/phrase-building/blocks-utils";
import VPPicker from "./VPPicker";
import AllTensesDisplay from "./AllTensesDisplay";
export const vpPhraseURLParam = "vp";
@ -180,7 +180,7 @@ function VPExplorer(props: {
opts={props.opts}
setForm={handleSetForm}
/>}
{mode === "charts" && <ChartDisplay VS={vps.verb} opts={props.opts} />}
{mode === "charts" && <AllTensesDisplay VS={vps.verb} opts={props.opts} />}
{mode === "quiz" && <VPExplorerQuiz opts={props.opts} vps={vps} />}
{showClipped && <div className="alert alert-primary text-center" role="alert" style={{
position: "fixed",

View File

@ -0,0 +1,113 @@
import * as T from "../../../types";
export const verbTenseOptions: { label: string | JSX.Element, value: T.VerbTense, formula: string }[] = [{
label: <div><i className="fas fa-video mr-2" />present</div>,
value: "presentVerb",
formula: "imperfective stem + present verb ending",
}, {
label: <div><i className="fas fa-camera mr-2" />subjunctive</div>,
value: "subjunctiveVerb",
formula: "perfective stem + present verb ending",
}, {
label: <div><i className="fas fa-video mr-2" />imperfective future</div>,
value: "imperfectiveFuture",
formula: "ba + present",
}, {
label: <div><i className="fas fa-camera mr-2" />perfective future</div>,
value: "perfectiveFuture",
formula: "ba + subjunctive",
}, {
label: <div><i className="fas fa-video mr-2" />continuous past</div>,
value: "imperfectivePast",
formula: "imperfective root + past verb ending",
}, {
label: <div><i className="fas fa-camera mr-2" />simple past</div>,
value: "perfectivePast",
formula: "perfective root + past verb ending",
}, {
label: <div><i className="fas fa-video mr-2" />habitual continual past</div>,
value: "habitualImperfectivePast",
formula: "ba + continuous past",
}, {
label: <div><i className="fas fa-camera mr-2" />habitual simple past</div>,
value: "habitualPerfectivePast",
formula: "ba + simple past",
}];
export const abilityTenseOptions: { label: string | JSX.Element, value: T.VerbTense, formula: string }[] = [{
label: <div><i className="fas fa-video mr-2" />present ability</div>,
value: "presentVerb",
formula: "ability imperfective stem + present verb ending",
}, {
label: <div><i className="fas fa-camera mr-2" />subjunctive ability</div>,
value: "subjunctiveVerb",
formula: "ability perfective stem + present verb ending",
}, {
label: <div><i className="fas fa-video mr-2" />imperfective future ability</div>,
value: "imperfectiveFuture",
formula: "ba + present ability",
}, {
label: <div><i className="fas fa-camera mr-2" />perfective future ability</div>,
value: "perfectiveFuture",
formula: "ba + subjunctive ability",
}, {
label: <div><i className="fas fa-video mr-2" />continuous past ability</div>,
value: "imperfectivePast",
formula: "ability imperfective root + past verb ending",
}, {
label: <div><i className="fas fa-camera mr-2" />simple past ability</div>,
value: "perfectivePast",
formula: "ability perfective root + past verb ending",
}, {
label: <div><i className="fas fa-video mr-2" />habitual continual past ability</div>,
value: "habitualImperfectivePast",
formula: "ba + continuous past ability",
}, {
label: <div><i className="fas fa-camera mr-2" />habitual simple past ability</div>,
value: "habitualPerfectivePast",
formula: "ba + simple past ability",
}];
export const perfectTenseOptions: { label: string | JSX.Element, value: T.PerfectTense, formula: string }[] = [{
label: "Present Perfect",
value: "presentPerfect",
formula: "past participle + present equative",
}, {
label: "Habitual Perfect",
value: "habitualPerfect",
formula: "past participle + habitual equative",
}, {
label: "Subjunctive Perfect",
value: "subjunctivePerfect",
formula: "past participle + subjunctive equative",
}, {
label: "Future Perfect",
value: "futurePerfect",
formula: "past participle + future equative",
}, {
label: "Past Perfect",
value: "pastPerfect",
formula: "past participle + past equative",
}, {
label: `"Would Be" Perfect`,
value: "wouldBePerfect",
formula: `past participle + "would be" equative`,
}, {
label: "Past Subjunctive Perfect",
value: "pastSubjunctivePerfect",
formula: "past participle + past subjunctive equative",
}, {
label: `"Would Have Been" Perfect`,
value: "wouldHaveBeenPerfect",
formula: `past participle + "would have been" equative`,
}];
export const imperativeTenseOptions: { label: string | JSX.Element, value: T.ImperativeTense, formula: string }[] = [{
label: <div><i className="fas fa-video mr-2" />imperfective imperative</div>,
value: "imperfectiveImperative",
formula: "imperfective stem + imperative ending",
}, {
label: <div><i className="fas fa-camera mr-2" />perfective imperative</div>,
value: "perfectiveImperative",
formula: "perfective stem + imperative ending",
}];

View File

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