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 VPBuilderDemo from "./demo-components/VPBuilderDemo";
import { entryFeeder } from "./demo-components/entryFeeder";
import { Hider } from "./components/library";
import { Hider, inflectWord } from "./components/library";
import InflectionDemo from "./demo-components/InflectionDemo";
import SpellingDemo from "./demo-components/SpellingDemo";
import ParserDemo from "./demo-components/ParserDemo";
// import InflectionTable from "./components/src/InflectionsTable";
function App() {
const [showingTextOptions, setShowingTextOptions] = useStickyState<boolean>(
@ -39,6 +40,18 @@ function App() {
document.documentElement.setAttribute("data-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 (
<>
<main className="flex-shrink-0 mb-4">
@ -97,6 +110,13 @@ function App() {
on GitHub
</p>
</div>
{/* for testing inflection table */}
{/* {typeof infout === "object" && infout.inflections && (
<InflectionTable
inf={infout.inflections}
textOptions={textOptions}
/>
)} */}
<h2 className="mb-3">Demos:</h2>
<Hider
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 }: {
inf: T.Inflections | T.PluralInflections,
textOptions: T.TextOptions,
hideTitle?: boolean,
const InflectionTable = ({
inf,
textOptions,
hideTitle,
}: {
inf: T.Inflections | T.PluralInflections;
textOptions: T.TextOptions;
hideTitle?: boolean;
}) => {
// const [showingExplanation, setShowingExplanation] = useState(false);
/* 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);
return (
<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 && <div className="clickable mr-2" onClick={handleShowExplanation} data-testid="help-button">
<i className={`fa fa-question-circle`}></i>
</div>} */}
</div>}
<table className="table" style={{ tableLayout: "fixed" }}>
</div>
)}
<table
className="table"
style={{ tableLayout: "fixed", textAlign: "center" }}
>
<thead>
<tr>
<th scope="col" style={{ width: "3.5rem" }}></th>
{"masc" in inf && <th scope="col" style={{ maxWidth: "10rem", textAlign: "left" }}>Masculine</th>}
{"fem" in inf && <th scope="col" style={{ maxWidth: "10rem", textAlign: "left" }}>Feminine</th>}
{"masc" in inf && (
<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>
</thead>
<tbody>
{(!isPluralInfs ? ["Plain", "1st", "2nd"] : ["Plural", "2nd Inf."]).map((title, i) => (
{(!isPluralInfs
? ["Plain", "1st", "2nd"]
: ["Plural", "2nd Inf."]
).map((title, i) => (
<tr key={title}>
<th scope="row">{title}</th>
{"masc" in inf && <TableCell item={inf.masc[i]} textOptions={textOptions} />}
{"fem" in inf && <TableCell item={inf.fem[i]} textOptions={textOptions} />}
<th scope="row" style={{ textAlign: "left" }}>
{title}
</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>
))}
</tbody>

View File

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