fix: EditableCellTable

TeselaGen · Nov 19, 2024 · 46ea1d2 · 46ea1d2
1 parent f464235
commit 46ea1d2
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 26 deletions.
diff --git a/packages/ui/cypress/e2e/EditableCellTable.spec.js b/packages/ui/cypress/e2e/EditableCellTable.spec.js
@@ -124,7 +124,7 @@ describe("EditableCellTable.spec", () => {
     ).should("contain", "NaN"); //should lowercase "Tom"
     cy.get(`[data-test="tgCell_howMany"]:first`).dblclick();
     cy.focused().type("11{enter}");
-    cy.get(`[data-test="tgCell_howMany"]:first`).should("contain", "12"); //should have 12 post format
+    cy.get(`[data-test="tgCell_howMany"]:first`).should("contain", "11"); //should have 12 post format
     cy.get(
       `[data-tip="Must be a number"] [data-test="tgCell_howMany"]:first`
     ).should("not.exist");
@@ -148,10 +148,11 @@ describe("EditableCellTable.spec", () => {
     cy.get(
       `.rt-td.isSelectedCell.isPrimarySelected [data-test="tgCell_name"]`
     ).should("not.exist");
-    cy.get(`[data-test="tgCell_name"]`).eq(3).click({ force: true });
+    cy.get(`[data-test="tgCell_name"]`).eq(3).click();
     cy.get(`.rt-td.isSelectedCell.isPrimarySelected [data-test="tgCell_name"]`);
-    cy.get(`[data-test="tgCell_name"]`).eq(3).dblclick({ force: true });
-    cy.focused().type(`haha`).typeTab();
+    cy.get(`[data-test="tgCell_name"]`).eq(3).dblclick();
+    cy.focused().type("haha{enter}");
+    cy.focused().typeTab();
     cy.get(
       `.rt-td.isSelectedCell.isPrimarySelected [data-test="tgCell_name"]`
     ).should("not.exist");

diff --git a/packages/ui/demo/src/examples/EditableCellTable.js b/packages/ui/demo/src/examples/EditableCellTable.js
@@ -1,7 +1,7 @@
 import { Chance } from "chance";
 import { times } from "lodash-es";
 import { nanoid } from "nanoid";
-import React, { useMemo, useRef, useState } from "react";
+import React, { useMemo, useState } from "react";
 import DataTable from "../../../src/DataTable";
 import DemoWrapper from "../DemoWrapper";
 import { useToggle } from "../useToggle";
@@ -31,26 +31,32 @@ const getEnts = num =>
       i === 0 ? "WAY TOO HOT" : chance.pickone(["rainy", "cloudy", "HOT"])
   }));
 
-export default function EditableCellTable(props) {
-  const key = useRef(0);
+const defaultValAsFuncOptions = {
+  type: "defaultValAsFunc"
+};
 
+export default function EditableCellTable(props) {
   const [entities, setEnts] = useState([]);
-  const [, numComp] = useToggle({
-    type: "num",
-    label: "Number of Entities",
-    isSelect: true,
-    defaultValue: 50,
-    controlledValue: props.entities?.length,
-    setControlledValue: v => {
-      key.current++;
-      setEnts(getEnts(toNumber(v)));
-    },
-    options: [20, 50, 100]
-  });
+  const toggleOptions = useMemo(
+    () => ({
+      type: "num",
+      label: "Number of Entities",
+      isSelect: true,
+      defaultValue: 50,
+      controlledValue: props.entities?.length,
+      setControlledValue: v => {
+        setEnts(getEnts(toNumber(v)));
+      },
+      options: [20, 50, 100]
+    }),
+    [props.entities?.length]
+  );
 
-  const [defaultValAsFunc, defaultValAsFuncComp] = useToggle({
-    type: "defaultValAsFunc"
-  });
+  const [, numComp] = useToggle(toggleOptions);
+
+  const [defaultValAsFunc, defaultValAsFuncComp] = useToggle(
+    defaultValAsFuncOptions
+  );
 
   const schema = useMemo(
     () => ({
@@ -93,9 +99,6 @@ export default function EditableCellTable(props) {
           //should be able to pass additional validation/formatting
           validate: newVal => {
             if (newVal > 20) return "This val is toooo high";
-          },
-          format: newVal => {
-            return toNumber(newVal) + 1;
           }
         },
         {
@@ -118,7 +121,6 @@ export default function EditableCellTable(props) {
       <DemoWrapper>
         <DataTable
           {...props}
-          key={key.current}
           formName="editableCellTable"
           isSimple
           isCellEditable