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

2022-10-10 14:49:54 +05:00 · 2022-10-10 14:49:54 +05:00 · 3eff2fbac0
parent e05d6f1111
commit 3eff2fbac0
9 changed files with 213 additions and 98 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -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": {
--- a/package.json
+++ b/package.json
@ -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",
--- a/src/components/package.json
+++ b/src/components/package.json
@ -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",
--- a/src/components/src/Hider.tsx
+++ b/src/components/src/Hider.tsx
@ -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"}`} />
                    : ""}
-                {props.label}
-            </>,
+                <div className="ml-2">
+                    {props.label}
+                </div>
+            </div>,
        )}
        {props.showing && props.children}
    </div>
--- a/src/components/src/vp-explorer/AllTensesDisplay.tsx
+++ b/src/components/src/vp-explorer/AllTensesDisplay.tsx
@ -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;
--- a/src/components/src/vp-explorer/TensePicker.tsx
+++ b/src/components/src/vp-explorer/TensePicker.tsx
@ -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
--- a/src/components/src/vp-explorer/VPExplorer.tsx
+++ b/src/components/src/vp-explorer/VPExplorer.tsx
@ -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",
--- a/src/components/src/vp-explorer/verbTenseOptions.tsx
+++ b/src/components/src/vp-explorer/verbTenseOptions.tsx
@ -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",
+}];
--- a/src/lib/package.json
+++ b/src/lib/package.json
@ -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",