40 lines
905 B
JavaScript
40 lines
905 B
JavaScript
|
module.exports = {
|
||
|
|
dispatch,
|
||
|
|
dispatcher,
|
||
|
|
setDispatch
|
||
|
|
}
|
||
|
|
|
||
|
|
const dispatchers = {}
|
||
|
|
let _dispatch = () => {}
|
||
|
|
|
||
|
|
function setDispatch (dispatch) {
|
||
|
|
_dispatch = dispatch
|
||
|
|
}
|
||
|
|
|
||
|
|
function dispatch (...args) {
|
||
|
|
_dispatch(...args)
|
||
|
|
}
|
||
|
|
|
||
|
|
// Most DOM event handlers are trivial functions like `() => dispatch(<args>)`.
|
||
|
|
// For these, `dispatcher(<args>)` is preferred because it memoizes the handler
|
||
|
|
// function. This prevents React from updating the listener functions on
|
||
|
|
// each update().
|
||
|
|
function dispatcher (...args) {
|
||
|
|
const str = JSON.stringify(args)
|
||
|
|
let handler = dispatchers[str]
|
||
|
|
if (!handler) {
|
||
|
|
handler = dispatchers[str] = e => {
|
||
|
|
// Do not propagate click to elements below the button
|
||
|
|
e.stopPropagation()
|
||
|
|
|
||
|
|
if (e.currentTarget.classList.contains('disabled')) {
|
||
|
|
// Ignore clicks on disabled elements
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
dispatch(...args)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return handler
|
||
|
|
}
|