ability to watch for change on sticky reducer

This commit is contained in:
lingdocs 2022-06-11 13:19:53 -04:00
parent b1728000d3
commit 8d33931aa8
3 changed files with 29 additions and 18 deletions

View File

@ -1,6 +1,6 @@
{ {
"name": "@lingdocs/pashto-inflector", "name": "@lingdocs/pashto-inflector",
"version": "2.8.6", "version": "2.8.7",
"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

@ -5,12 +5,11 @@ import EquativePicker from "./EquativePicker";
import EPDisplay from "./EPDisplay"; import EPDisplay from "./EPDisplay";
import ButtonSelect from "../ButtonSelect"; import ButtonSelect from "../ButtonSelect";
import EqCompPicker from "./eq-comp-picker/EqCompPicker"; import EqCompPicker from "./eq-comp-picker/EqCompPicker";
import { roleIcon } from "../vp-explorer/VPExplorerExplanationModal";
import EqChartsDisplay from "./EqChartsDisplay"; import EqChartsDisplay from "./EqChartsDisplay";
import epsReducer from "./eps-reducer"; import epsReducer from "./eps-reducer";
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import { completeEPSelection } from "../../lib/phrase-building/render-ep"; import { completeEPSelection } from "../../lib/phrase-building/render-ep";
import { makeEPSBlocks, getSubjectSelection } from "../../lib/phrase-building/blocks-utils"; import { makeEPSBlocks } from "../../lib/phrase-building/blocks-utils";
import APPicker from "../ap-picker/APPicker"; import APPicker from "../ap-picker/APPicker";
import autoAnimate from "@formkit/auto-animate"; import autoAnimate from "@formkit/auto-animate";
// @ts-ignore // @ts-ignore
@ -36,9 +35,17 @@ const blankEps: T.EPSelectionState = {
function EPExplorer(props: { function EPExplorer(props: {
opts: T.TextOptions, opts: T.TextOptions,
entryFeeder: T.EntryFeeder, entryFeeder: T.EntryFeeder,
}) { } & ({
eps: T.EPSelectionState,
onChange: (eps: T.EPSelectionState) => void,
} | {})) {
const [mode, setMode] = useStickyState<"charts" | "phrases">("charts", "EPExplorerMode"); const [mode, setMode] = useStickyState<"charts" | "phrases">("charts", "EPExplorerMode");
const [eps, adjustEps] = useStickyReducer(epsReducer, blankEps, "EPState7", flashMessage); const [eps, adjustEps] = useStickyReducer(
epsReducer,
"eps" in props ? props.eps : blankEps,
"EPState7",
flashMessage,
);
const [alert, setAlert] = useState<string | undefined>(undefined); const [alert, setAlert] = useState<string | undefined>(undefined);
const [showClipped, setShowClipped] = useState<string>(""); const [showClipped, setShowClipped] = useState<string>("");
const parent = useRef<HTMLDivElement>(null); const parent = useRef<HTMLDivElement>(null);
@ -56,12 +63,6 @@ function EPExplorer(props: {
} }
// eslint-disable-next-line // eslint-disable-next-line
}, []); }, []);
const subject = getSubjectSelection(eps.blocks).selection;
const king = subject?.selection.type === "pronoun"
? "subject"
: eps.predicate.type === "Complement"
? "subject"
: "predicate";
function flashMessage(msg: string) { function flashMessage(msg: string) {
setAlert(msg); setAlert(msg);
setTimeout(() => { setTimeout(() => {
@ -96,7 +97,7 @@ function EPExplorer(props: {
]} ]}
handleChange={setMode} handleChange={setMode}
/> />
<div className="d-flex flex-row"> {!("eps" in props) && <div className="d-flex flex-row">
<div <div
className="clickable mr-4" className="clickable mr-4"
onClick={mode === "phrases" ? handleCopyCode : undefined} onClick={mode === "phrases" ? handleCopyCode : undefined}
@ -111,7 +112,7 @@ function EPExplorer(props: {
> >
{mode === "phrases" ? <i className="fas fa-share-alt" /> : ""} {mode === "phrases" ? <i className="fas fa-share-alt" /> : ""}
</div> </div>
</div> </div>}
</div> </div>
{mode === "phrases" && <div className="clickable h5" onClick={() => adjustEps({ type: "insert new AP" })}>+ AP</div>} {mode === "phrases" && <div className="clickable h5" onClick={() => adjustEps({ type: "insert new AP" })}>+ AP</div>}
<div ref={parent} className="d-flex flex-row justify-content-around flex-wrap" style={{ marginLeft: "-0.5rem", marginRight: "-0.5rem" }}> <div ref={parent} className="d-flex flex-row justify-content-around flex-wrap" style={{ marginLeft: "-0.5rem", marginRight: "-0.5rem" }}>
@ -135,7 +136,7 @@ function EPExplorer(props: {
{block && block.type === "subjectSelection" {block && block.type === "subjectSelection"
? <NPPicker ? <NPPicker
phraseIsComplete={phraseIsComplete} phraseIsComplete={phraseIsComplete}
heading={<div className="h5 text-center">Subject {king === "subject" ? roleIcon.king : ""}</div>} heading={<div className="h5 text-center">Subject</div>}
entryFeeder={props.entryFeeder} entryFeeder={props.entryFeeder}
np={block.selection} np={block.selection}
counterPart={undefined} counterPart={undefined}
@ -155,7 +156,7 @@ function EPExplorer(props: {
</div> </div>
))} ))}
<div className="my-2 card block-card p-1"> <div className="my-2 card block-card p-1">
<div className="h5 text-center">Predicate {king === "predicate" ? roleIcon.king : ""}</div> <div className="h5 text-center">Predicate</div>
<div className="mb-2 text-center"> <div className="mb-2 text-center">
<ButtonSelect <ButtonSelect
small small
@ -197,7 +198,7 @@ function EPExplorer(props: {
{mode === "phrases" && <EPDisplay {mode === "phrases" && <EPDisplay
opts={props.opts} opts={props.opts}
eps={eps} eps={eps}
setOmitSubject={payload => adjustEps({ type: "set omitSubject", payload })} setOmitSubject={"eps" in props ? false : payload => adjustEps({ type: "set omitSubject", payload })}
/>} />}
{alert && <div className="alert alert-warning text-center" role="alert" style={{ {alert && <div className="alert alert-warning text-center" role="alert" style={{
position: "fixed", position: "fixed",

View File

@ -50,12 +50,22 @@ export function useStickyReducer<T extends SaveableData, A>(
defaultValue: T | ((old: T | undefined) => T), defaultValue: T | ((old: T | undefined) => T),
key: string, key: string,
sendAlert?: (msg: string) => void, sendAlert?: (msg: string) => void,
): [T, (action: A) => void, ((msg: string) => void) | undefined] { onChange?: (state: T) => void,
): [
T,
(action: A) => void,
((msg: string) => void) | undefined,
] {
const [state, unsafeSetState] = useStickyState<T>(defaultValue, key); const [state, unsafeSetState] = useStickyState<T>(defaultValue, key);
function adjustState(action: A) { function adjustState(action: A) {
unsafeSetState(oldState => { unsafeSetState(oldState => {
return reducer(oldState, action, sendAlert); const newState = reducer(oldState, action, sendAlert);
if (onChange) {
onChange(newState);
}
return newState;
}); });
} }
// TODO: should this really return the sendAlert here?
return [state, adjustState, sendAlert]; return [state, adjustState, sendAlert];
} }