Skip to content

Commit

Permalink
add delay before lexicon popup and add exclude if dragging.
Browse files Browse the repository at this point in the history
  • Loading branch information
blm committed Dec 2, 2023
1 parent 73ee635 commit d41bc3e
Showing 1 changed file with 36 additions and 3 deletions.
39 changes: 36 additions & 3 deletions src/components/verse-objects/AlignedWordsObject.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@
import React, { useState, useContext } from 'react';
import React,
{
useContext,
useEffect,
useState,
} from 'react';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core/styles';
import { Popover } from '@material-ui/core';
Expand All @@ -20,15 +25,37 @@ function AlignedWordsObject({
}) {
const classes = useStyles();
const [anchorEl, setAnchorEl] = useState(null);
const [openPop, setOpenPopup] = useState(false);
const [timedOut, setTimeout] = useState(false);

const handleOpen = (event) => {
setAnchorEl(event.currentTarget);
if (!event.buttons) { // only show popup if buttons not depressed (dragging)
// make sure states are cleared
setTimeout(false);
setOpenPopup(false);

setAnchorEl(event.currentTarget); // save the anchor element for positioning

delay(500).then(() => { // delay 1/2 sec. before showing popup
setTimeout(true);
});
}
};

const handleClose = () => {
setAnchorEl(null);
setOpenPopup(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);

Expand Down Expand Up @@ -86,7 +113,7 @@ function AlignedWordsObject({
}

if (!disableWordPopover) {
const open = Boolean(anchorEl);
const open = openPop && Boolean(anchorEl);
const id = open ? 'popover' : undefined;
const _originalWords = originalWords.map((verseObject, index) => getOriginalWordObject(index, verseObject));

Expand Down Expand Up @@ -151,4 +178,10 @@ function translate_(key) {
return key;
}

function delay(ms) {
return new Promise((resolve) =>
setTimeout(resolve, ms),
)
}

export default AlignedWordsObject;

0 comments on commit d41bc3e

Please sign in to comment.