lingdocs
/
pashto-inflector
mirror of https://github.com/lingdocs/pashto-inflector.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

remove rollup and see if it works w/out react-select

This commit is contained in:
adueck 2022-10-06 17:36:01 +05:00
parent 7b02179bf7
commit aa17c342d8
6 changed files with 442 additions and 502 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
package.json
View File

@ -1,14 +1,11 @@
{ {
"name": "@lingdocs/pashto-inflector", "name": "@lingdocs/pashto-inflector",
"version": "4.9.13", "version": "4.9.14",
"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",
"license": "MIT", "license": "MIT",
"exports": { "main": "dist-cjs/library.js",
"./functions": "./dist-cjs/dist/functions.js",
"./components": "./dist-cjs/dist/components.js"
},
"module": "dist/library.js", "module": "dist/library.js",
"types": "dist/library.d.ts", "types": "dist/library.d.ts",
"private": false, "private": false,
@ -30,8 +27,7 @@
"jsurl2": "^2.1.0", "jsurl2": "^2.1.0",
"lz-string": "^1.4.4", "lz-string": "^1.4.4",
"pbf": "^3.2.1", "pbf": "^3.2.1",
"rambda": "^6.7.0", "rambda": "^6.7.0"
"react-select": "^4.3.1"
}, },
"devDependencies": { "devDependencies": {
"@fortawesome/fontawesome-free": "^5.15.2", "@fortawesome/fontawesome-free": "^5.15.2",
@ -73,7 +69,7 @@
"test": "react-scripts test", "test": "react-scripts test",
"eject": "react-scripts eject", "eject": "react-scripts eject",
"build-website": "node get-words.js && npm run build", "build-website": "node get-words.js && npm run build",
"build-library": "node get-words.js && rimraf dist && rimraf dist-cjs && tsc --project library-tsconfig.json && node library-post-build.js && rollup -c", "build-library": "node get-words.js && rimraf dist && tsc --project library-tsconfig.json && node library-post-build.js",
"test-ci": "npm run test -- --watchAll=false", "test-ci": "npm run test -- --watchAll=false",
"get-words": "node get-words.js" "get-words": "node get-words.js"
}, },

36
rollup.config.js
View File

@ -1,36 +0,0 @@
import image from '@rollup/plugin-image';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import pkg from './package.json';
import multiInput from 'rollup-plugin-multi-input';
const banner = `
/**
* Copyright (c) 2021 lingdocs.com
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*/
`;
export default {
input: ['dist/functions.js', 'dist/components.js'],
external: ["react", "react-dom", "react-bootstrap"],
output: [{
dir: "dist-cjs",
format: 'cjs',
sourcemap: true,
banner,
}],
plugins: [
// peerDepsExternal(),
multiInput(),
commonjs(),
nodeResolve({
resolveOnly: Object.keys(pkg.dependencies),
}),
// use base64 image inlining for the cjs version so that the .svg s can get cosumed by node 12 etc.
image(),
]
}

308
src/components/EntrySelect.tsx
View File

@ -1,33 +1,31 @@
import * as T from "../types"; import * as T from "../types";
import { StyleHTMLAttributes } from "react"; import { StyleHTMLAttributes } from "react";
// @ts-ignore // import Select, { StylesConfig } from "react-select";
import Select, { StylesConfig } from "react-select"; // import AsyncSelect from "react-select/async";
// @ts-ignore // import {
import AsyncSelect from "react-select/async"; // makeSelectOption,
import { // makeVerbSelectOption,
makeSelectOption, // } from "./np-picker/picker-tools";
makeVerbSelectOption,
} from "./np-picker/picker-tools";
export const customStyles: StylesConfig = { // export const customStyles: StylesConfig = {
menuPortal: (base: any) => ({ // menuPortal: (base: any) => ({
...base, // ...base,
zIndex: 99999, // zIndex: 99999,
}), // }),
menu: (base: any) => ({ // menu: (base: any) => ({
...base, // ...base,
zIndex: 999999, // zIndex: 999999,
}), // }),
option: (provided: any, state: any) => ({ // option: (provided: any, state: any) => ({
...provided, // ...provided,
padding: "10px 5px", // padding: "10px 5px",
color: "#121418", // color: "#121418",
}), // }),
input: (base: any) => ({ // input: (base: any) => ({
...base, // ...base,
padding: 0, // padding: 0,
}), // }),
} // }
function EntrySelect<E extends T.DictionaryEntry | T.VerbEntry>(props: { function EntrySelect<E extends T.DictionaryEntry | T.VerbEntry>(props: {
entryFeeder: T.EntryFeederSingleType<E>, entryFeeder: T.EntryFeederSingleType<E>,
@ -38,79 +36,80 @@ function EntrySelect<E extends T.DictionaryEntry | T.VerbEntry>(props: {
opts: T.TextOptions, opts: T.TextOptions,
style?: StyleHTMLAttributes<HTMLDivElement>, style?: StyleHTMLAttributes<HTMLDivElement>,
}) { }) {
const divStyle = props.style || { width: "13rem" }; return <div>not here</div>;
const placeholder = "entries" in props ? "Select…" : "Search Pashto"; // const divStyle = props.style || { width: "13rem" };
function makeOption(e: E | T.DictionaryEntry) { // const placeholder = "entries" in props ? "Select…" : "Search Pashto";
if ("entry" in e) { // function makeOption(e: E | T.DictionaryEntry) {
return (props.isVerbSelect ? makeVerbSelectOption : makeSelectOption)(e, props.opts); // if ("entry" in e) {
} // return (props.isVerbSelect ? makeVerbSelectOption : makeSelectOption)(e, props.opts);
return makeSelectOption(e, props.opts); // }
} // return makeSelectOption(e, props.opts);
const value = props.value ? makeOption(props.value) : undefined; // }
if ("search" in props.entryFeeder) { // const value = props.value ? makeOption(props.value) : undefined;
const search = props.entryFeeder.search; // if ("search" in props.entryFeeder) {
const getByTs = props.entryFeeder.getByTs; // const search = props.entryFeeder.search;
const options = (searchString: string) => // const getByTs = props.entryFeeder.getByTs;
new Promise<{ value: string, label: string | JSX.Element }[]>(resolve => { // const options = (searchString: string) =>
resolve(search(searchString).map(makeOption)); // new Promise<{ value: string, label: string | JSX.Element }[]>(resolve => {
}); // resolve(search(searchString).map(makeOption));
const onChange = (v: { label: string | JSX.Element, value: string } | null) => { // });
if (!v) { // const onChange = (v: { label: string | JSX.Element, value: string } | null) => {
props.onChange(undefined); // if (!v) {
return; // props.onChange(undefined);
} // return;
const s = getByTs(parseInt(v.value)); // }
if (!s) return; // const s = getByTs(parseInt(v.value));
props.onChange(s); // if (!s) return;
} // props.onChange(s);
return <div style={divStyle}> // }
<AsyncSelect // return <div style={divStyle}>
styles={customStyles} // <AsyncSelect
isSearchable={true} // styles={customStyles}
className="mb-2" // isSearchable={true}
value={value} // className="mb-2"
// @ts-ignore // value={value}
onChange={onChange} // // @ts-ignore
defaultOptions={[]} // onChange={onChange}
loadOptions={options} // defaultOptions={[]}
placeholder={placeholder} // loadOptions={options}
/> // placeholder={placeholder}
</div>; // />
} // </div>;
const entries = props.entryFeeder; // }
const options = entries // const entries = props.entryFeeder;
.sort((a, b) => { // const options = entries
if ("entry" in a) { // .sort((a, b) => {
return a.entry.p.localeCompare("p" in b ? b.p : b.entry.p, "af-PS") // if ("entry" in a) {
} // return a.entry.p.localeCompare("p" in b ? b.p : b.entry.p, "af-PS")
return a.p.localeCompare("p" in b ? b.p : b.entry.p, "af-PS"); // }
}) // return a.p.localeCompare("p" in b ? b.p : b.entry.p, "af-PS");
.map(makeOption); // })
const onChange = (v: { label: string | JSX.Element, value: string } | null) => { // .map(makeOption);
if (!v) { // const onChange = (v: { label: string | JSX.Element, value: string } | null) => {
props.onChange(undefined); // if (!v) {
return; // props.onChange(undefined);
} // return;
const s = entries.find(e => ( // }
("entry" in e) // const s = entries.find(e => (
? e.entry.ts.toString() === v.value // ("entry" in e)
: e.ts.toString() === v.value // ? e.entry.ts.toString() === v.value
)); // : e.ts.toString() === v.value
if (!s) return; // ));
props.onChange(s); // if (!s) return;
} // props.onChange(s);
return <div style={divStyle}> // }
<Select // return <div style={divStyle}>
styles={customStyles} // <Select
isSearchable={true} // styles={customStyles}
value={value} // isSearchable={true}
// @ts-ignore - gets messed up when using customStyles // value={value}
onChange={onChange} // // @ts-ignore - gets messed up when using customStyles
className="mb-2" // onChange={onChange}
options={options} // className="mb-2"
placeholder={placeholder} // options={options}
/> // placeholder={placeholder}
</div> // />
// </div>
} }
export function SandwichSelect<E extends T.Sandwich>(props: { export function SandwichSelect<E extends T.Sandwich>(props: {
@ -121,62 +120,63 @@ export function SandwichSelect<E extends T.Sandwich>(props: {
opts: T.TextOptions, opts: T.TextOptions,
style?: StyleHTMLAttributes<HTMLDivElement>, style?: StyleHTMLAttributes<HTMLDivElement>,
}) { }) {
const divStyle = props.style || { width: "13rem" }; return <div>not here</div>;
const placeholder = "Select Sandwich…"; // const divStyle = props.style || { width: "13rem" };
const value = props.value ? makeSandwichOption(props.value) : undefined; // const placeholder = "Select Sandwich…";
const options = props.sandwiches // const value = props.value ? makeSandwichOption(props.value) : undefined;
// .sort((a, b) => { // const options = props.sandwiches
// if ("entry" in a) { // // .sort((a, b) => {
// return a.before.p.localeCompare("p" in b ? b.p : b.entry.p, "af-PS") // // if ("entry" in a) {
// } // // return a.before.p.localeCompare("p" in b ? b.p : b.entry.p, "af-PS")
// return a.p.localeCompare("p" in b ? b.p : b.entry.p, "af-PS"); // // }
// }) // // return a.p.localeCompare("p" in b ? b.p : b.entry.p, "af-PS");
.map(makeSandwichOption); // // })
const onChange = (v: { label: string | JSX.Element, value: string } | null) => { // .map(makeSandwichOption);
if (!v) { // const onChange = (v: { label: string | JSX.Element, value: string } | null) => {
props.onChange(undefined); // if (!v) {
return; // props.onChange(undefined);
} // return;
const s = props.sandwiches.find(e => { // }
const sValue = JSON.parse(v.value) as T.Sandwich; // const s = props.sandwiches.find(e => {
if (sValue.type !== "sandwich") throw new Error("error converting selected sandwich value to a sandwich"); // const sValue = JSON.parse(v.value) as T.Sandwich;
return sandwichSideEq(e.before, sValue.before) // if (sValue.type !== "sandwich") throw new Error("error converting selected sandwich value to a sandwich");
&& sandwichSideEq(e.after, sValue.after) // return sandwichSideEq(e.before, sValue.before)
&& (e.e === sValue.e); // && sandwichSideEq(e.after, sValue.after)
}); // && (e.e === sValue.e);
if (!s) return; // });
props.onChange(s); // if (!s) return;
} // props.onChange(s);
return <div style={divStyle}> // }
<div>Sandwich Base</div> // return <div style={divStyle}>
<Select // <div>Sandwich Base</div>
styles={customStyles} // <Select
isSearchable={true} // styles={customStyles}
value={value} // isSearchable={true}
// @ts-ignore - gets messed up when using customStyles // value={value}
onChange={onChange} // // @ts-ignore - gets messed up when using customStyles
className="mb-2" // onChange={onChange}
options={options} // className="mb-2"
placeholder={placeholder} // options={options}
/> // placeholder={placeholder}
</div> // />
// </div>
} }
function sandwichSideEq(s1: T.PsString | undefined, s2: T.PsString | undefined): boolean { // function sandwichSideEq(s1: T.PsString | undefined, s2: T.PsString | undefined): boolean {
if (s1 === undefined && s2 === undefined) { // if (s1 === undefined && s2 === undefined) {
return true // return true
} // }
if (typeof s1 === "object" && typeof s2 === "object" && s1.p === s2.p) { // if (typeof s1 === "object" && typeof s2 === "object" && s1.p === s2.p) {
return true; // return true;
} // }
return false; // return false;
} // }
function makeSandwichOption(s: T.Sandwich): { label: string, value: string } { // function makeSandwichOption(s: T.Sandwich): { label: string, value: string } {
return { // return {
label: `${s.before ? s.before.p : ""} ... ${s.after ? s.after.p : ""} (${s.e})`, // label: `${s.before ? s.before.p : ""} ... ${s.after ? s.after.p : ""} (${s.e})`,
value: JSON.stringify(s), // value: JSON.stringify(s),
}; // };
} // }
export default EntrySelect; export default EntrySelect;

198
src/components/ep-explorer/EquativePicker.tsx
View File

@ -1,111 +1,111 @@
import * as T from "../../types" import * as T from "../../types"
// @ts-ignore // // import Select from "react-select";
import Select from "react-select"; // import ButtonSelect from "../ButtonSelect";
import ButtonSelect from "../ButtonSelect";
const zIndexProps = { // const zIndexProps = {
menuPortalTarget: document.body, // menuPortalTarget: document.body,
styles: { menuPortal: (base: any) => ({ ...base, zIndex: 9999 }) }, // styles: { menuPortal: (base: any) => ({ ...base, zIndex: 9999 }) },
}; // };
const options: { label: string | JSX.Element, value: T.EquativeTense }[] = [{ // const options: { label: string | JSX.Element, value: T.EquativeTense }[] = [{
label: "Present", // label: "Present",
value: "present", // value: "present",
}, { // }, {
label: "Habitual", // label: "Habitual",
value: "habitual", // value: "habitual",
}, { // }, {
label: "Subjunctive", // label: "Subjunctive",
value: "subjunctive", // value: "subjunctive",
}, { // }, {
label: "Future", // label: "Future",
value: "future", // value: "future",
}, { // }, {
label: "Past", // label: "Past",
value: "past", // value: "past",
}, { // }, {
label: `"Would Be"`, // label: `"Would Be"`,
value: "wouldBe", // value: "wouldBe",
}, { // }, {
label: "Past Subjunctive", // label: "Past Subjunctive",
value: "pastSubjunctive", // value: "pastSubjunctive",
}, { // }, {
label: `"Would Have Been"`, // label: `"Would Have Been"`,
value: "wouldHaveBeen", // value: "wouldHaveBeen",
}]; // }];
function EquativePicker({ equative, onChange, hideNegative }: { function EquativePicker({ equative, onChange, hideNegative }: {
equative: { tense: T.EquativeTense, negative: boolean }, equative: { tense: T.EquativeTense, negative: boolean },
onChange: (e: { tense: T.EquativeTense, negative: boolean }) => void, onChange: (e: { tense: T.EquativeTense, negative: boolean }) => void,
hideNegative?: boolean, hideNegative?: boolean,
}) { }) {
function onTenseSelect(o: { value: T.EquativeTense } | null) { return <div>not here</div>;
const value = o?.value ? o.value : undefined; // function onTenseSelect(o: { value: T.EquativeTense } | null) {
if (!value) { // const value = o?.value ? o.value : undefined;
return; // if (!value) {
} // return;
onChange({ // }
...equative, // onChange({
tense: value, // ...equative,
}); // tense: value,
} // });
function moveTense(dir: "forward" | "back") { // }
return () => { // function moveTense(dir: "forward" | "back") {
const currIndex = options.findIndex(tn => tn.value === equative.tense) // return () => {
if (currIndex === -1) { // const currIndex = options.findIndex(tn => tn.value === equative.tense)
console.error("error moving tense", dir); // if (currIndex === -1) {
return; // console.error("error moving tense", dir);
} // return;
const newIndex = dir === "forward" // }
? ((currIndex + 1) % options.length) // const newIndex = dir === "forward"
: (currIndex === 0 ? (options.length - 1) : (currIndex - 1)) // ? ((currIndex + 1) % options.length)
const newTense = options[newIndex]; // : (currIndex === 0 ? (options.length - 1) : (currIndex - 1))
onChange({ // const newTense = options[newIndex];
...equative, // onChange({
tense: newTense.value, // ...equative,
}); // tense: newTense.value,
}; // });
} // };
function onPosNegSelect(value: "true" | "false") { // }
onChange({ // function onPosNegSelect(value: "true" | "false") {
...equative, // onChange({
negative: value === "true", // ...equative,
}); // negative: value === "true",
} // });
return <div> // }
<div style={{ maxWidth: "300px", minWidth: "250px", margin: "0 auto" }}> // return <div>
<div className="h5">Tense:</div> // <div style={{ maxWidth: "300px", minWidth: "250px", margin: "0 auto" }}>
<Select // <div className="h5">Tense:</div>
isSearchable={false} // <Select
// for some reason can't use tOptions with find here; // isSearchable={false}
value={options.find(o => o.value === equative.tense)} // // for some reason can't use tOptions with find here;
onChange={onTenseSelect} // value={options.find(o => o.value === equative.tense)}
className="mb-2" // onChange={onTenseSelect}
options={options} // className="mb-2"
{...zIndexProps} // options={options}
/> // {...zIndexProps}
{<div className="d-flex flex-row justify-content-between align-items-center mt-3 mb-1" style={{ width: "100%" }}> // />
<div className="btn btn-light clickable" onClick={moveTense("back")}> // {<div className="d-flex flex-row justify-content-between align-items-center mt-3 mb-1" style={{ width: "100%" }}>
<i className="fas fa-chevron-left" /> // <div className="btn btn-light clickable" onClick={moveTense("back")}>
</div> // <i className="fas fa-chevron-left" />
{!hideNegative && <ButtonSelect // </div>
small // {!hideNegative && <ButtonSelect
value={equative.negative.toString() as "true" | "false"} // small
options={[{ // value={equative.negative.toString() as "true" | "false"}
label: "Pos.", // options={[{
value: "false", // label: "Pos.",
}, { // value: "false",
label: "Neg.", // }, {
value: "true", // label: "Neg.",
}]} // value: "true",
handleChange={onPosNegSelect} // }]}
/>} // handleChange={onPosNegSelect}
<div onClick={moveTense("forward")} className="btn btn-light clickable"> // />}
<i className="fas fa-chevron-right" /> // <div onClick={moveTense("forward")} className="btn btn-light clickable">
</div> // <i className="fas fa-chevron-right" />
</div>} // </div>
</div> // </div>}
</div>; // </div>
// </div>;
} }
export default EquativePicker; export default EquativePicker;

366
src/components/vp-explorer/TensePicker.tsx
View File

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

24
yarn.lock
View File

@ -1303,7 +1303,7 @@
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.0.tgz#f580f9beb67176fa57aae70b08ed510e1b18980f" resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.0.tgz#f580f9beb67176fa57aae70b08ed510e1b18980f"
integrity sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA== integrity sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==
"@emotion/react@^11.1.1", "@emotion/react@^11.8.1": "@emotion/react@^11.8.1":
version "11.10.4" version "11.10.4"
resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.10.4.tgz#9dc6bccbda5d70ff68fdb204746c0e8b13a79199" resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.10.4.tgz#9dc6bccbda5d70ff68fdb204746c0e8b13a79199"
integrity sha512-j0AkMpr6BL8gldJZ6XQsQ8DnS9TxEQu1R+OGmDZiWjBAJtCcbt0tS3I/YffoqHXxH6MjgI7KdMbYKw3MEiU9eA== integrity sha512-j0AkMpr6BL8gldJZ6XQsQ8DnS9TxEQu1R+OGmDZiWjBAJtCcbt0tS3I/YffoqHXxH6MjgI7KdMbYKw3MEiU9eA==
@ -9320,7 +9320,7 @@ prop-types-extra@^1.1.0:
react-is "^16.3.2" react-is "^16.3.2"
warning "^4.0.0" warning "^4.0.0"
prop-types@^15.5.8, prop-types@^15.6.0: prop-types@^15.6.0:
version "15.8.1" version "15.8.1"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@ -9577,13 +9577,6 @@ react-error-overlay@^6.0.9:
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a" resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew== integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
react-input-autosize@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-3.0.0.tgz#6b5898c790d4478d69420b55441fcc31d5c50a85"
integrity sha512-nL9uS7jEs/zu8sqwFE5MAPx6pPkNAriACQ2rGLlqmKr2sPGtN7TXTyDdQt4lbNXVx7Uzadb40x8qotIuru6Rhg==
dependencies:
prop-types "^15.5.8"
react-is@^16.13.1, react-is@^16.3.2, react-is@^16.7.0, react-is@^16.8.1: react-is@^16.13.1, react-is@^16.3.2, react-is@^16.7.0, react-is@^16.8.1:
version "16.13.1" version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@ -9697,19 +9690,6 @@ react-select@*:
prop-types "^15.6.0" prop-types "^15.6.0"
react-transition-group "^4.3.0" react-transition-group "^4.3.0"
react-select@^4.3.1:
version "4.3.1"
resolved "https://registry.yarnpkg.com/react-select/-/react-select-4.3.1.tgz#389fc07c9bc7cf7d3c377b7a05ea18cd7399cb81"
integrity sha512-HBBd0dYwkF5aZk1zP81Wx5UsLIIT2lSvAY2JiJo199LjoLHoivjn9//KsmvQMEFGNhe58xyuOITjfxKCcGc62Q==
dependencies:
"@babel/runtime" "^7.12.0"
"@emotion/cache" "^11.4.0"
"@emotion/react" "^11.1.1"
memoize-one "^5.0.0"
prop-types "^15.6.0"
react-input-autosize "^3.0.0"
react-transition-group "^4.3.0"
react-transition-group@^4.3.0: react-transition-group@^4.3.0:
version "4.4.5" version "4.4.5"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1" resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"