Atlas48/grungnet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Moved to useBlur helper

Browse Source
This commit is contained in:
Mitchell McCaffrey 2021-03-19 13:29:07 +11:00
parent 0bc572cec2
commit cfdff1e549
3 changed files with 31 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/contexts/KeyboardContext.js
View File

@ -74,4 +74,21 @@ export function useKeyboard(onKeyDown, onKeyUp) {
});
}
/**
* Handler to handle a blur event. Useful when using a shortcut that uses the Alt or Cmd
* @param {FocusEvent} onBlur
*/
export function useBlur(onBlur) {
useEffect(() => {
if (onBlur) {
window.addEventListener("blur", onBlur);
}
return () => {
if (onBlur) {
window.removeEventListener("blur", onBlur);
}
};
});
}
export default KeyboardContext;

19
src/modals/SelectMapModal.js
View File

@ -1,4 +1,4 @@
import React, { useRef, useState, useEffect } from "react";
import React, { useRef, useState } from "react";
import { Button, Flex, Label } from "theme-ui";
import shortid from "shortid";
import Case from "case";
@ -26,7 +26,7 @@ import useResponsiveLayout from "../hooks/useResponsiveLayout";
import { useMapData } from "../contexts/MapDataContext";
import { useAuth } from "../contexts/AuthContext";
import { useKeyboard } from "../contexts/KeyboardContext";
import { useKeyboard, useBlur } from "../contexts/KeyboardContext";
const defaultMapProps = {
showGrid: false,
@ -382,17 +382,12 @@ function SelectMapModal({
useKeyboard(handleKeyDown, handleKeyUp);
// Set select mode to single when alt+tabing
useEffect(() => {
function handleBlur() {
setSelectMode("single");
}
// Set select mode to single when cmd+tabing
function handleBlur() {
setSelectMode("single");
}
window.addEventListener("blur", handleBlur);
return () => {
window.removeEventListener("blur", handleBlur);
};
}, []);
useBlur(handleBlur);
const layout = useResponsiveLayout();

19
src/modals/SelectTokensModal.js
View File

@ -1,4 +1,4 @@
import React, { useRef, useState, useEffect } from "react";
import React, { useRef, useState } from "react";
import { Flex, Label, Button } from "theme-ui";
import shortid from "shortid";
import Case from "case";
@ -20,7 +20,7 @@ import useResponsiveLayout from "../hooks/useResponsiveLayout";
import { useTokenData } from "../contexts/TokenDataContext";
import { useAuth } from "../contexts/AuthContext";
import { useKeyboard } from "../contexts/KeyboardContext";
import { useKeyboard, useBlur } from "../contexts/KeyboardContext";
function SelectTokensModal({ isOpen, onRequestClose }) {
const { userId } = useAuth();
@ -224,17 +224,12 @@ function SelectTokensModal({ isOpen, onRequestClose }) {
useKeyboard(handleKeyDown, handleKeyUp);
// Set select mode to single when alt+tabing
useEffect(() => {
function handleBlur() {
setSelectMode("single");
}
// Set select mode to single when cmd+tabing
function handleBlur() {
setSelectMode("single");
}
window.addEventListener("blur", handleBlur);
return () => {
window.removeEventListener("blur", handleBlur);
};
}, []);
useBlur(handleBlur);
const layout = useResponsiveLayout();