1
0
Fork 0
mirror of synced 2024-07-13 02:05:54 +12:00

Remove logs, add comments to clickoutside util and fix grid right click menu

This commit is contained in:
Andrew Kingston 2024-05-02 19:09:26 +01:00
parent ff23825241
commit 3c5a18c702
2 changed files with 19 additions and 5 deletions

View file

@ -1,8 +1,14 @@
// These class names will never trigger a callback if clicked, no matter what
const ignoredClasses = [ const ignoredClasses = [
".download-js-link", ".download-js-link",
".spectrum-Menu", ".spectrum-Menu",
".date-time-popover", ".date-time-popover",
] ]
// These class names will only trigger a callback when clicked if the registered
// component is not nested inside them. For example, clicking inside a modal
// will not close the modal, or clicking inside a popover will not close the
// popover.
const conditionallyIgnoredClasses = [ const conditionallyIgnoredClasses = [
".spectrum-Underlay", ".spectrum-Underlay",
".drawer-wrapper", ".drawer-wrapper",
@ -11,11 +17,9 @@ const conditionallyIgnoredClasses = [
let clickHandlers = [] let clickHandlers = []
let candidateTarget let candidateTarget
/** // Processes a "click outside" event and invokes callbacks if our source element
* Handle a body click event // is valid
*/
const handleClick = event => { const handleClick = event => {
console.log("CLOSE")
// Ignore click if this is an ignored class // Ignore click if this is an ignored class
if (event.target.closest('[data-ignore-click-outside="true"]')) { if (event.target.closest('[data-ignore-click-outside="true"]')) {
return return
@ -46,23 +50,32 @@ const handleClick = event => {
}) })
} }
// On mouse up we only trigger a "click outside" callback if we targetted the
// same element that we did on mouse down. This fixes all sorts of issues where
// we get annoying callbacks firing when we drag to select text.
const handleMouseUp = e => { const handleMouseUp = e => {
console.log("up")
if (candidateTarget === e.target) { if (candidateTarget === e.target) {
handleClick(e) handleClick(e)
} }
candidateTarget = null candidateTarget = null
} }
// On mouse down we store which element was targetted for comparison later
const handleMouseDown = e => { const handleMouseDown = e => {
// Only handle the primary mouse button here.
// We handle context menu (right click) events in another handler.
if (e.button !== 0) { if (e.button !== 0) {
return return
} }
candidateTarget = e.target candidateTarget = e.target
// Clear any previous listeners in case of multiple down events, and register
// a single mouse up listener
document.removeEventListener("mouseup", handleMouseUp) document.removeEventListener("mouseup", handleMouseUp)
document.addEventListener("mouseup", handleMouseUp, true) document.addEventListener("mouseup", handleMouseUp, true)
} }
// Global singleton listeners for our events
document.addEventListener("mousedown", handleMouseDown) document.addEventListener("mousedown", handleMouseDown)
document.addEventListener("contextmenu", handleClick) document.addEventListener("contextmenu", handleClick)

View file

@ -17,6 +17,7 @@ export const createActions = context => {
const open = (cellId, e) => { const open = (cellId, e) => {
e.preventDefault() e.preventDefault()
e.stopPropagation()
// Get DOM node for grid data wrapper to compute relative position to // Get DOM node for grid data wrapper to compute relative position to
const gridNode = document.getElementById(gridID) const gridNode = document.getElementById(gridID)