forgot to get the tense-picker going again

This commit is contained in:
adueck 2022-10-10 12:39:51 +05:00
parent 345a03edb9
commit e05d6f1111
5 changed files with 187 additions and 188 deletions

4
package-lock.json generated
View File

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

View File

@ -1,6 +1,6 @@
{
"name": "pashto-inflector",
"version": "5.0.11",
"version": "5.0.12",
"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.11",
"version": "5.0.12",
"description": "Pashto inflector library module with React components",
"main": "dist/components/library.js",
"module": "dist/components/library.js",

View File

@ -1,9 +1,9 @@
// import Select from "react-select";
import Select from "react-select";
import * as T from "../../../types";
// import ButtonSelect from "../ButtonSelect";
import ButtonSelect from "../ButtonSelect";
import { isImperativeTense, isModalTense, isPerfectTense, isVerbTense } from "../../../lib/src/type-predicates";
// import useStickyState from "../../lib/useStickyState";
// import { customStyles } from "../EntrySelect";
import useStickyState from "../useStickyState";
import { customStyles } from "../EntrySelect";
import {
VpsReducerAction
} from "../../../lib/src/phrase-building/vps-reducer";
@ -42,15 +42,15 @@ const verbTenseOptions: { label: string | JSX.Element, value: T.VerbTense, formu
formula: "ba + simple past",
}];
// function composeFormula(formula: string, prefix: "passive" | "ability"): string {
// return formula.replace(/^perfective/, `${prefix} perfective`)
// .replace(/^imperfective/, `${prefix} imperfective`)
// .replace("continuous", `${prefix} continuous`)
// .replace("simple", `${prefix} simple`)
// .replace(/present$/, `${prefix} present`)
// .replace(/subjunctive$/, `${prefix} subjunctive`)
// .replace("past participle", `${prefix} past participle`);
// }
function composeFormula(formula: string, prefix: "passive" | "ability"): string {
return formula.replace(/^perfective/, `${prefix} perfective`)
.replace(/^imperfective/, `${prefix} imperfective`)
.replace("continuous", `${prefix} continuous`)
.replace("simple", `${prefix} simple`)
.replace(/present$/, `${prefix} present`)
.replace(/subjunctive$/, `${prefix} subjunctive`)
.replace("past participle", `${prefix} past participle`);
}
const perfectTenseOptions: { label: string | JSX.Element, value: T.PerfectTense, formula: string }[] = [{
label: "Present Perfect",
@ -124,176 +124,175 @@ function TensePicker(props: ({
onChange: (p: VpsReducerAction) => void,
mode: "charts" | "phrases" | "quiz",
}) {
return <div>not here</div>
// const [showFormula, setShowFormula] = useStickyState<boolean>(false, "showFormula");
// function onTenseSelect(o: { value: T.VerbTense | T.PerfectTense | T.ImperativeTense } | null) {
// if ("vpsComplete" in props) return;
// const tense = o?.value ? o.value : undefined;
// props.onChange({
// type: "set tense",
// payload: tense,
// });
// }
// function moveTense(dir: "forward" | "back") {
// if ("vpsComplete" in props) return;
// if (!props.vps.verb) return;
// return () => {
// // TODO: ABSTRACT THIS - SAFER
// const tenses = props.vps.verb.tenseCategory === "perfect"
// ? perfectTenseOptions
// : props.vps.verb.tenseCategory === "imperative"
// ? imperativeTenseOptions
// : verbTenseOptions;
// const currIndex = tenses.findIndex(tn => tn.value === props.vps.verb[
// // TODO: ABSTRACT THIS? - SAFER
// props.vps.verb.tenseCategory === "perfect"
// ? "perfectTense"
// : props.vps.verb.tenseCategory === "imperative"
// ? "imperativeTense"
// : "verbTense"
// ]);
// if (currIndex === -1) {
// console.error("error moving tense", dir);
// return;
// }
// const newIndex = dir === "forward"
// ? ((currIndex + 1) % tenses.length)
// : (currIndex === 0 ? (tenses.length - 1) : (currIndex - 1))
// const newTense = tenses[newIndex];
// onTenseSelect(newTense);
// };
// }
// function onPosNegSelect(payload: "true" | "false") {
// if ("vpsComplete" in props) return;
// props.onChange({
// type: "set negativity",
// payload,
// });
// }
// function onTenseCategorySelect(payload: "basic" | "modal" | "perfect" | "imperative") {
// if ("vpsComplete" in props) return;
// props.onChange({
// type: "set tense category",
// payload,
// });
// }
// const tOptions = ("vps" in props && (props.vps.verb?.tenseCategory === "perfect"))
// ? perfectTenseOptions
// : ("vps" in props && (props.vps.verb?.tenseCategory === "imperative"))
// ? imperativeTenseOptions
// : verbTenseOptions;
// 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";
// 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>
// {canHaveFormula && <div className="clickable mb-2 small" onClick={() => setShowFormula(x => !x)}>
// 🧪 {!showFormula ? "Show" : "Hide"} Formula
// </div>}
// </div>
// {("vpsComplete" in props || props.vps.verb) && <div className="mb-2">
// <ButtonSelect
// small
// value={"vpsComplete" in props
// ? getTenseCategory(props.vpsComplete.verb.tense)
// : props.vps.verb.tenseCategory}
// // @ts-ignore
// options={showImperativeOption ? [{
// label: "Basic",
// value: "basic",
// }, {
// label: "Perfect",
// value: "perfect",
// }, {
// label: "Ability",
// value: "modal",
// }, {
// label: "Imperative",
// value: "imperative",
// }] : [{
// label: "Basic",
// value: "basic",
// }, {
// label: "Perfect",
// value: "perfect",
// }, {
// label: "Ability",
// value: "modal",
// }].filter(x => !(inPassiveVoice && x.value === "modal"))}
// handleChange={props.mode !== "quiz" ? onTenseCategorySelect : () => null}
// />
// </div>}
// {"vpsComplete" in props
// ? <div style={{ fontSize: "larger" }} className="mb-3">
// {[...verbTenseOptions, ...perfectTenseOptions, ...imperativeTenseOptions].find(o => o.value === props.vpsComplete.verb.tense)?.label}
// </div>
// : <>
// <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[
// props.vps.verb.tenseCategory === "perfect"
// ? "perfectTense"
// : props.vps.verb.tenseCategory === "imperative"
// ? "imperativeTense"
// : "verbTense"
// ]))}
// // @ts-ignore - gets messed up when using customStyles
// onChange={onTenseSelect}
// 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")}>
// <i className="fas fa-chevron-left" />
// </div>
// {props.mode === "phrases" && <ButtonSelect
// small
// value={props.vps.verb.negative.toString() as "true" | "false"}
// options={[{
// label: "Pos.",
// value: "false",
// }, {
// label: "Neg.",
// value: "true",
// }]}
// handleChange={onPosNegSelect}
// />}
// <div onClick={moveTense("forward")} className="btn btn-light clickable">
// <i className="fas fa-chevron-right" />
// </div>
// </div>}
// {(canHaveFormula && showFormula) && (() => {
// // TODO: Be able to show modal formulas too
// const curr = (props.vps.verb.tenseCategory === "imperative" && props.vps.verb.negative)
// ? imperativeTenseOptions.find(x => x.value === "imperfectiveImperative")
// : [...verbTenseOptions, ...perfectTenseOptions, ...imperativeTenseOptions].find(o => o.value === props.vps.verb[
// props.vps.verb.tenseCategory === "perfect"
// ? "perfectTense"
// : props.vps.verb.tenseCategory === "imperative"
// ? "imperativeTense"
// : "verbTense"
// ]);
// const formula = !curr
// ? ""
// : (props.vps.verb.tenseCategory === "modal")
// ? composeFormula(curr.formula, "ability")
// : (props.vps.verb.voice === "passive")
// ? composeFormula(curr.formula, "passive")
// : curr.formula;
// if (curr && "formula" in curr) {
// return <div className="mb-2" style={{ width: "250px", overflowY: "auto" }}>
// <samp>{formula}</samp>
// </div>
// }
// })()}
// </div>
// </div>;
const [showFormula, setShowFormula] = useStickyState<boolean>(false, "showFormula");
function onTenseSelect(o: { value: T.VerbTense | T.PerfectTense | T.ImperativeTense } | null) {
if ("vpsComplete" in props) return;
const tense = o?.value ? o.value : undefined;
props.onChange({
type: "set tense",
payload: tense,
});
}
function moveTense(dir: "forward" | "back") {
if ("vpsComplete" in props) return;
if (!props.vps.verb) return;
return () => {
// TODO: ABSTRACT THIS - SAFER
const tenses = props.vps.verb.tenseCategory === "perfect"
? perfectTenseOptions
: props.vps.verb.tenseCategory === "imperative"
? imperativeTenseOptions
: verbTenseOptions;
const currIndex = tenses.findIndex(tn => tn.value === props.vps.verb[
// TODO: ABSTRACT THIS? - SAFER
props.vps.verb.tenseCategory === "perfect"
? "perfectTense"
: props.vps.verb.tenseCategory === "imperative"
? "imperativeTense"
: "verbTense"
]);
if (currIndex === -1) {
console.error("error moving tense", dir);
return;
}
const newIndex = dir === "forward"
? ((currIndex + 1) % tenses.length)
: (currIndex === 0 ? (tenses.length - 1) : (currIndex - 1))
const newTense = tenses[newIndex];
onTenseSelect(newTense);
};
}
function onPosNegSelect(payload: "true" | "false") {
if ("vpsComplete" in props) return;
props.onChange({
type: "set negativity",
payload,
});
}
function onTenseCategorySelect(payload: "basic" | "modal" | "perfect" | "imperative") {
if ("vpsComplete" in props) return;
props.onChange({
type: "set tense category",
payload,
});
}
const tOptions = ("vps" in props && (props.vps.verb?.tenseCategory === "perfect"))
? perfectTenseOptions
: ("vps" in props && (props.vps.verb?.tenseCategory === "imperative"))
? imperativeTenseOptions
: verbTenseOptions;
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";
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>
{canHaveFormula && <div className="clickable mb-2 small" onClick={() => setShowFormula(x => !x)}>
🧪 {!showFormula ? "Show" : "Hide"} Formula
</div>}
</div>
{("vpsComplete" in props || props.vps.verb) && <div className="mb-2">
<ButtonSelect
small
value={"vpsComplete" in props
? getTenseCategory(props.vpsComplete.verb.tense)
: props.vps.verb.tenseCategory}
// @ts-ignore
options={showImperativeOption ? [{
label: "Basic",
value: "basic",
}, {
label: "Perfect",
value: "perfect",
}, {
label: "Ability",
value: "modal",
}, {
label: "Imperative",
value: "imperative",
}] : [{
label: "Basic",
value: "basic",
}, {
label: "Perfect",
value: "perfect",
}, {
label: "Ability",
value: "modal",
}].filter(x => !(inPassiveVoice && x.value === "modal"))}
handleChange={props.mode !== "quiz" ? onTenseCategorySelect : () => null}
/>
</div>}
{"vpsComplete" in props
? <div style={{ fontSize: "larger" }} className="mb-3">
{[...verbTenseOptions, ...perfectTenseOptions, ...imperativeTenseOptions].find(o => o.value === props.vpsComplete.verb.tense)?.label}
</div>
: <>
<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[
props.vps.verb.tenseCategory === "perfect"
? "perfectTense"
: props.vps.verb.tenseCategory === "imperative"
? "imperativeTense"
: "verbTense"
]))}
// @ts-ignore - gets messed up when using customStyles
onChange={onTenseSelect}
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")}>
<i className="fas fa-chevron-left" />
</div>
{props.mode === "phrases" && <ButtonSelect
small
value={props.vps.verb.negative.toString() as "true" | "false"}
options={[{
label: "Pos.",
value: "false",
}, {
label: "Neg.",
value: "true",
}]}
handleChange={onPosNegSelect}
/>}
<div onClick={moveTense("forward")} className="btn btn-light clickable">
<i className="fas fa-chevron-right" />
</div>
</div>}
{(canHaveFormula && showFormula) && (() => {
// TODO: Be able to show modal formulas too
const curr = (props.vps.verb.tenseCategory === "imperative" && props.vps.verb.negative)
? imperativeTenseOptions.find(x => x.value === "imperfectiveImperative")
: [...verbTenseOptions, ...perfectTenseOptions, ...imperativeTenseOptions].find(o => o.value === props.vps.verb[
props.vps.verb.tenseCategory === "perfect"
? "perfectTense"
: props.vps.verb.tenseCategory === "imperative"
? "imperativeTense"
: "verbTense"
]);
const formula = !curr
? ""
: (props.vps.verb.tenseCategory === "modal")
? composeFormula(curr.formula, "ability")
: (props.vps.verb.voice === "passive")
? composeFormula(curr.formula, "passive")
: curr.formula;
if (curr && "formula" in curr) {
return <div className="mb-2" style={{ width: "250px", overflowY: "auto" }}>
<samp>{formula}</samp>
</div>
}
})()}
</div>
</div>;
}
export default TensePicker;

View File

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