imporve inflection table

This commit is contained in:
adueck 2024-06-13 14:25:09 -04:00
parent 34dade4a2c
commit 89b13ff8ae
3 changed files with 117 additions and 39 deletions

View File

@ -16,10 +16,11 @@ import useStickyState from "./components/src/useStickyState";
import EPExplorer from "./components/src/ep-explorer/EPExplorer"; import EPExplorer from "./components/src/ep-explorer/EPExplorer";
import VPBuilderDemo from "./demo-components/VPBuilderDemo"; import VPBuilderDemo from "./demo-components/VPBuilderDemo";
import { entryFeeder } from "./demo-components/entryFeeder"; import { entryFeeder } from "./demo-components/entryFeeder";
import { Hider } from "./components/library"; import { Hider, inflectWord } from "./components/library";
import InflectionDemo from "./demo-components/InflectionDemo"; import InflectionDemo from "./demo-components/InflectionDemo";
import SpellingDemo from "./demo-components/SpellingDemo"; import SpellingDemo from "./demo-components/SpellingDemo";
import ParserDemo from "./demo-components/ParserDemo"; import ParserDemo from "./demo-components/ParserDemo";
// import InflectionTable from "./components/src/InflectionsTable";
function App() { function App() {
const [showingTextOptions, setShowingTextOptions] = useStickyState<boolean>( const [showingTextOptions, setShowingTextOptions] = useStickyState<boolean>(
@ -39,6 +40,18 @@ function App() {
document.documentElement.setAttribute("data-theme", theme); document.documentElement.setAttribute("data-theme", theme);
}, [theme]); }, [theme]);
const infout = inflectWord({
ts: 1527815306,
i: 9623,
p: "ستړی",
f: "stúRay",
g: "stuRay",
e: "tired",
r: 4,
c: "adj. / adv.",
a: 1,
});
return ( return (
<> <>
<main className="flex-shrink-0 mb-4"> <main className="flex-shrink-0 mb-4">
@ -97,6 +110,13 @@ function App() {
on GitHub on GitHub
</p> </p>
</div> </div>
{/* for testing inflection table */}
{/* {typeof infout === "object" && infout.inflections && (
<InflectionTable
inf={infout.inflections}
textOptions={textOptions}
/>
)} */}
<h2 className="mb-3">Demos:</h2> <h2 className="mb-3">Demos:</h2>
<Hider <Hider
label="Verb Conjugation / Verb Phrase Engine" label="Verb Conjugation / Verb Phrase Engine"

View File

@ -39,10 +39,14 @@ import { isPluralInflections } from "../../lib/src/p-text-helpers";
// </>; // </>;
// } // }
const InflectionTable = ({ inf, textOptions, hideTitle }: { const InflectionTable = ({
inf: T.Inflections | T.PluralInflections, inf,
textOptions: T.TextOptions, textOptions,
hideTitle?: boolean, hideTitle,
}: {
inf: T.Inflections | T.PluralInflections;
textOptions: T.TextOptions;
hideTitle?: boolean;
}) => { }) => {
// const [showingExplanation, setShowingExplanation] = useState(false); // const [showingExplanation, setShowingExplanation] = useState(false);
/* istanbul ignore next */ // Insanely can't see the modal to close it /* istanbul ignore next */ // Insanely can't see the modal to close it
@ -51,26 +55,73 @@ const InflectionTable = ({ inf, textOptions, hideTitle }: {
const isPluralInfs = isPluralInflections(inf); const isPluralInfs = isPluralInflections(inf);
return ( return (
<div className={!hideTitle ? "" : "mt-4"}> <div className={!hideTitle ? "" : "mt-4"}>
{!hideTitle && <div style={{ display: "flex", justifyContent: !isPluralInfs ? "space-between" : "left" }}> {!hideTitle && (
<div
style={{
display: "flex",
justifyContent: !isPluralInfs ? "space-between" : "left",
}}
>
{!isPluralInfs && <h5>Inflections</h5>} {!isPluralInfs && <h5>Inflections</h5>}
{/* {!isPluralInfs && <div className="clickable mr-2" onClick={handleShowExplanation} data-testid="help-button"> {/* {!isPluralInfs && <div className="clickable mr-2" onClick={handleShowExplanation} data-testid="help-button">
<i className={`fa fa-question-circle`}></i> <i className={`fa fa-question-circle`}></i>
</div>} */} </div>} */}
</div>} </div>
<table className="table" style={{ tableLayout: "fixed" }}> )}
<table
className="table"
style={{ tableLayout: "fixed", textAlign: "center" }}
>
<thead> <thead>
<tr> <tr>
<th scope="col" style={{ width: "3.5rem" }}></th> <th scope="col" style={{ width: "3.5rem" }}></th>
{"masc" in inf && <th scope="col" style={{ maxWidth: "10rem", textAlign: "left" }}>Masculine</th>} {"masc" in inf && (
{"fem" in inf && <th scope="col" style={{ maxWidth: "10rem", textAlign: "left" }}>Feminine</th>} <th
scope="col"
style={{
maxWidth: "10rem",
textAlign: "center",
borderLeft: "1px solid #dee2e6",
...("fem" in inf
? {
borderRight: "1px solid #dee2e6",
}
: {}),
}}
>
Masculine
</th>
)}
{"fem" in inf && (
<th
scope="col"
style={{ maxWidth: "10rem", textAlign: "center" }}
>
Feminine
</th>
)}
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{(!isPluralInfs ? ["Plain", "1st", "2nd"] : ["Plural", "2nd Inf."]).map((title, i) => ( {(!isPluralInfs
? ["Plain", "1st", "2nd"]
: ["Plural", "2nd Inf."]
).map((title, i) => (
<tr key={title}> <tr key={title}>
<th scope="row">{title}</th> <th scope="row" style={{ textAlign: "left" }}>
{"masc" in inf && <TableCell item={inf.masc[i]} textOptions={textOptions} />} {title}
{"fem" in inf && <TableCell item={inf.fem[i]} textOptions={textOptions} />} </th>
{"masc" in inf && (
<TableCell
item={inf.masc[i]}
textOptions={textOptions}
colSpan={"fem" in inf && i === 2 ? 2 : 1}
center
/>
)}
{"fem" in inf && i < 2 && (
<TableCell item={inf.fem[i]} textOptions={textOptions} center />
)}
</tr> </tr>
))} ))}
</tbody> </tbody>

View File

@ -24,11 +24,13 @@ function TableCell({
textOptions, textOptions,
center, center,
noBorder, noBorder,
colSpan,
}: { }: {
item: T.PsString[]; item: T.PsString[];
textOptions: T.TextOptions; textOptions: T.TextOptions;
center?: boolean; center?: boolean;
noBorder?: boolean; noBorder?: boolean;
colSpan?: 1 | 2;
}) { }) {
const [version, setVersion] = useState(0); const [version, setVersion] = useState(0);
useEffect(() => setVersion(0), [item]); useEffect(() => setVersion(0), [item]);
@ -37,7 +39,12 @@ function TableCell({
} }
const w = item[version] || item[0]; const w = item[version] || item[0];
return ( return (
<td style={{ ...(noBorder ? { border: "none" } : {}) }}> <td
colSpan={colSpan || 1}
style={{
...(noBorder ? { border: "none" } : { border: "2px solid #dee2e6" }),
}}
>
<div <div
style={{ style={{
display: "flex", display: "flex",