updating tooltip to not show if errors are present, adding a updateVa…

…lidationHelper to the datatable for external validation needs
TeselaGen · Dec 14, 2023 · 6fe19f8 · 6fe19f8
1 parent 839633a
commit 6fe19f8
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 21 deletions.
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ui",
-  "version": "0.3.60",
+  "version": "0.3.62",
   "main": "./src/index.js",
   "exports": {
     ".": {

diff --git a/packages/ui/src/DataTable/index.js b/packages/ui/src/DataTable/index.js
@@ -99,6 +99,8 @@ class DataTable extends React.Component {
   constructor(props) {
     super(props);
     if (this.props.helperProp) {
+      this.props.helperProp.updateValidationHelper =
+        this.updateValidationHelper;
       this.props.helperProp.addEditableTableEntities =
         this.addEditableTableEntities;
       this.props.helperProp.getEditableTableInfoAndThrowFormError =
@@ -797,18 +799,21 @@ class DataTable extends React.Component {
       });
     }
   };
+  updateValidationHelper = () => {
+    const { entities, reduxFormCellValidation } = computePresets(this.props);
+    this.updateValidation(entities, reduxFormCellValidation);
+  };
 
   updateValidation = (entities, newCellValidate) => {
     const { change, schema } = computePresets(this.props);
-    change(
-      "reduxFormCellValidation",
-      validateTableWideErrors({
-        entities,
-        schema,
-        newCellValidate,
-        props: this.props
-      })
-    );
+    const tableWideErr = validateTableWideErrors({
+      entities,
+      schema,
+      newCellValidate,
+      props: this.props
+    });
+    change("reduxFormCellValidation", tableWideErr);
+    this.forceUpdate();
   };
   handleDeleteCell = () => {
     const {
@@ -1246,8 +1251,8 @@ class DataTable extends React.Component {
     compactClassName += extraCompact
       ? " tg-extra-compact-table"
       : compact
-      ? " tg-compact-table"
-      : "";
+        ? " tg-compact-table"
+        : "";
 
     const hasFilters =
       filters.length ||
@@ -1536,10 +1541,10 @@ class DataTable extends React.Component {
                   const nextCellId = up
                     ? cellIdAbove
                     : down
-                    ? cellIdBelow
-                    : left
-                    ? cellIdToLeft
-                    : cellIdToRight;
+                      ? cellIdBelow
+                      : left
+                        ? cellIdToLeft
+                        : cellIdToRight;
 
                   e.stopPropagation();
                   e.preventDefault();
@@ -1747,8 +1752,8 @@ class DataTable extends React.Component {
                 extraCompact
                   ? itemSizeEstimators.compact
                   : compact
-                  ? itemSizeEstimators.normal
-                  : itemSizeEstimators.comfortable
+                    ? itemSizeEstimators.normal
+                    : itemSizeEstimators.comfortable
               }
               TfootComponent={() => {
                 return <button>hasdfasdf</button>;
@@ -2029,7 +2034,8 @@ class DataTable extends React.Component {
         this.startCellEdit(cellId);
       },
       ...(err && {
-        "data-tip": err?.message || err
+        "data-tip": err?.message || err,
+        "data-no-child-data-tip": true
       }),
       onContextMenu: e => {
         if (!isPrimarySelected) {

diff --git a/packages/ui/src/autoTooltip.js b/packages/ui/src/autoTooltip.js
@@ -60,8 +60,8 @@ let clearMe;
             dataTitle && !recentlyHidden
               ? [1300, 1300]
               : dataTitle
-              ? [150, 150]
-              : [0, 0],
+                ? [150, 150]
+                : [0, 0],
           allowHTML: true,
           ...(dataTitle && {
             followCursor: dataTitle ? "initial" : false
@@ -171,6 +171,7 @@ let clearMe;
           isEllipsized &&
           el.offsetWidth < el.scrollWidth - 4 && //the -4 is adding a teeny bit of tolerance to fix issues with the column headers getting tooltips even when fully visible
           !el.classList.contains("no-data-tip") &&
+          !parentIncludesNoChildDataTip(el, 0) &&
           !document.body.classList.contains("drag-active") &&
           el.textContent &&
           el.textContent?.trim?.().length !== 0
@@ -189,3 +190,11 @@ let clearMe;
     }
   });
 })();
+
+function parentIncludesNoChildDataTip(el, count) {
+  if (count > 4) return false;
+  if (!el) return false;
+  // if attr data-no-child-data-tip is preset on the element, then we don't want to show a tooltip on any of its children
+  if (el.getAttribute("data-no-child-data-tip")) return true;
+  return parentIncludesNoChildDataTip(el.parentElement, count + 1);
+}