simplified logic

unfoldingWord · Dec 4, 2023 · 59d4a5f · 59d4a5f
1 parent d41bc3e
commit 59d4a5f
Showing 1 changed file with 19 additions and 32 deletions.
diff --git a/src/components/verse-objects/AlignedWordsObject.js b/src/components/verse-objects/AlignedWordsObject.js
@@ -1,9 +1,4 @@
-import React,
-{
-  useContext,
-  useEffect,
-  useState,
-} from 'react';
+import React, { useState, useContext } from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@material-ui/core/styles';
 import { Popover } from '@material-ui/core';
@@ -15,6 +10,8 @@ import { default as WordLexiconDetails } from 'tc-ui-toolkit/lib/WordLexiconDeta
 import { SelectionsContext } from '../selections/Selections.context';
 import { WordObject, OriginalWordObject } from '.';
 
+const intervalBeforePopup = 500;  // delay 1/2 sec. before showing popup
+
 function AlignedWordsObject({
   children,
   verseKey,
@@ -24,38 +21,28 @@ function AlignedWordsObject({
   translate,
 }) {
   const classes = useStyles();
-  const [anchorEl, setAnchorEl] = useState(null);
-  const [openPop, setOpenPopup] = useState(false);
-  const [timedOut, setTimeout] = useState(false);
+  const [popupPosition, setPopupPosition] = useState(null);
+  const [readyToShow, setReadyToShow] = useState(false);
 
   const handleOpen = (event) => {
-    if (!event.buttons) { // only show popup if buttons not depressed (dragging)
-      // make sure states are cleared
-      setTimeout(false);
-      setOpenPopup(false);
+    setReadyToShow(false); // make sure cleared
 
-      setAnchorEl(event.currentTarget); // save the anchor element for positioning
+    if (!event.buttons) { // only show popup if buttons not depressed (i.e. not dragging)
+      setPopupPosition(event.currentTarget); // save the anchor element for positioning
 
-      delay(500).then(() => { // delay 1/2 sec. before showing popup
-        setTimeout(true);
+      delay(intervalBeforePopup).then(() => {
+        setReadyToShow(true);
       });
+    } else { // if dragging make position for popup is cleared
+      setPopupPosition(null);
     }
   };
 
   const handleClose = () => {
-    setAnchorEl(null);
-    setOpenPopup(false);
+    setPopupPosition(null);
+    setReadyToShow(false);
   };
 
-  useEffect(() => {
-    if (timedOut) { // if timer times out
-      if (anchorEl && !openPop) { // show popup if we have a position and not yet open
-        setOpenPopup(true);
-      }
-      setTimeout(false); // clear timout after use
-    }
-  }, [timedOut]);
-
   let selected;
   const _selectionsContext = useContext(SelectionsContext);
 
@@ -113,8 +100,8 @@ function AlignedWordsObject({
   }
 
   if (!disableWordPopover) {
-    const open = openPop && Boolean(anchorEl);
-    const id = open ? 'popover' : undefined;
+    const openPopup = readyToShow && Boolean(popupPosition);
+    const id = openPopup ? 'popover' : undefined;
     const _originalWords = originalWords.map((verseObject, index) => getOriginalWordObject(index, verseObject));
 
     component = (
@@ -124,14 +111,14 @@ function AlignedWordsObject({
           aria-haspopup="true"
           onMouseEnter={handleOpen}
           onMouseLeave={handleClose}
-          className={open ? classes.open : classes.closed}
+          className={openPopup ? classes.open : classes.closed}
         >
           {words}
         </span>
         <Popover
           id={id}
-          open={open}
-          anchorEl={anchorEl}
+          open={openPopup}
+          anchorEl={popupPosition}
           onClose={handleClose}
           className={classes.popover}
           classes={{ paper: classes.paper }}