refactor(validation-tooltip): rename invalid prop to enabled

dhis2 · Sep 26, 2023 · bfec304 · bfec304
1 parent cadf606
commit bfec304
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 14 deletions.
diff --git a/src/data-workspace/data-entry-cell/inner-wrapper.js b/src/data-workspace/data-entry-cell/inner-wrapper.js
@@ -143,7 +143,7 @@ export function InnerWrapper({
         <ValidationTooltip
             fieldname={fieldname}
             active={active}
-            invalid={warning || invalid || !!syncError}
+            enabled={!!warning || invalid || !!syncError}
             content={errorMessage}
         >
             <div

diff --git a/src/data-workspace/data-entry-cell/validation-tooltip.js b/src/data-workspace/data-entry-cell/validation-tooltip.js
@@ -6,18 +6,17 @@ import styles from './data-entry-cell.module.css'
 /**
  * These components adapt the UI Tooltip component to be used for the
  * validation feedback tooltip in DE cells, which has a few needs:
- * 1. Should only open when the cell state is invalid
- * 2. Should gracefully close when the cell becomes valid again
- * 3. Should not cause cell to lose focus when it becomes invalid
+ * 1. Should only open when enabled prop is true
+ * 2. Should gracefully close when the enabled props becomes false
+ * 3. Should not cause cell to lose focus when tooltip is opened
  * 4. Should open when focused and close when defocused
  */
-
 const TooltipManager = React.forwardRef(function TooltipManager(
-    { active, children, invalid, onMouseOut: close, onMouseOver: open },
+    { active, children, enabled, onMouseOut: close, onMouseOver: open },
     ref
 ) {
     React.useEffect(() => {
-        if (invalid && active) {
+        if (enabled && active) {
             open()
         }
         // When this cell becomes valid or defocused, close the tooltip
@@ -28,17 +27,17 @@ const TooltipManager = React.forwardRef(function TooltipManager(
         // when included, useEffect refires and causes tooltip to flicker
         // TODO add onMouseOut, onMouseOver once https://dhis2.atlassian.net/browse/LIBS-359 is fixed
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [invalid, active])
+    }, [enabled, active])
 
     // Only open the tooltip if the cell is invalid
     const handleMouseOver = () => {
-        if (invalid) {
+        if (enabled) {
             open()
         }
     }
     // Close on mouseout if invalid cell is not active
     const handleMouseOut = () => {
-        if (invalid && !active) {
+        if (enabled && !active) {
             close()
         }
     }
@@ -57,16 +56,16 @@ const TooltipManager = React.forwardRef(function TooltipManager(
 TooltipManager.propTypes = {
     active: PropTypes.bool,
     children: PropTypes.node,
-    invalid: PropTypes.bool,
+    enabled: PropTypes.bool,
     onMouseOut: PropTypes.func,
     onMouseOver: PropTypes.func,
 }
 
-export const ValidationTooltip = ({ children, content, invalid, active }) => {
+export const ValidationTooltip = ({ children, content, enabled, active }) => {
     return (
         <Tooltip content={content}>
             {(props) => (
-                <TooltipManager {...props} invalid={invalid} active={active}>
+                <TooltipManager {...props} enabled={enabled} active={active}>
                     {children}
                 </TooltipManager>
             )}
@@ -77,6 +76,6 @@ ValidationTooltip.propTypes = {
     active: PropTypes.bool,
     children: PropTypes.node,
     content: PropTypes.string,
+    enabled: PropTypes.bool,
     fieldname: PropTypes.string,
-    invalid: PropTypes.bool,
 }