imporve inflection table

src/App.tsx

@@ -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"

src/components/src/InflectionsTable.tsx

@@ -39,43 +39,94 @@ 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
-    // const handleCloseExplanation = () => setShowingExplanation(false);
+  // const handleCloseExplanation = () => setShowingExplanation(false);
-    // const handleShowExplanation = () => setShowingExplanation(true);
+  // const handleShowExplanation = () => setShowingExplanation(true);
-    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 && (
-                {!isPluralInfs && <h5>Inflections</h5>}
+        <div
-                {/* {!isPluralInfs && <div className="clickable mr-2" onClick={handleShowExplanation} data-testid="help-button">
+          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>}
+        </div>
-            <table className="table" style={{ tableLayout: "fixed" }}>
+      )}
-                <thead>
+      <table
-                    <tr>
+        className="table"
-                        <th scope="col" style={{ width: "3.5rem" }}></th>
+        style={{ tableLayout: "fixed", textAlign: "center" }}
-                        {"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>}
+        <thead>
-                    </tr>
+          <tr>
-                </thead>
+            <th scope="col" style={{ width: "3.5rem" }}></th>
-                <tbody>
+            {"masc" in inf && (
-                    {(!isPluralInfs ? ["Plain", "1st", "2nd"] : ["Plural", "2nd Inf."]).map((title, i) => (
+              <th
-                        <tr key={title}>
+                scope="col"
-                            <th scope="row">{title}</th>
+                style={{
-                            {"masc" in inf && <TableCell item={inf.masc[i]} textOptions={textOptions} />}
+                  maxWidth: "10rem",
-                            {"fem" in inf && <TableCell item={inf.fem[i]} textOptions={textOptions} />}
+                  textAlign: "center",
-                        </tr>
+                  borderLeft: "1px solid #dee2e6",
-                    ))}
+                  ...("fem" in inf
-                </tbody>
+                    ? {
-            </table>
+                        borderRight: "1px solid #dee2e6",
-            {/* {(!hideTitle && !isPluralInfs) && <Modal show={showingExplanation} onHide={handleCloseExplanation}>
+                      }
+                    : {}),
+                }}
+              >
+                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) => (
+            <tr key={title}>
+              <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>
+      </table>
+      {/* {(!hideTitle && !isPluralInfs) && <Modal show={showingExplanation} onHide={handleCloseExplanation}>
                 <Modal.Header closeButton>
                 <Modal.Title>About {isPluralInfs ? "Inflections" : "Arabic Plural"}</Modal.Title>
                 </Modal.Header>
@@ -86,8 +137,8 @@ const InflectionTable = ({ inf, textOptions, hideTitle }: {
                     </button>
                 </Modal.Footer>
             </Modal>} */}
-        </div>
+    </div>
-    );
+  );
 };
 
 export default InflectionTable;

src/components/src/TableCell.tsx

@@ -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",