Change note text input to allow for multiline editing
This commit is contained in:
parent
61b4c8abc3
commit
7281e9b9ba
@ -22,32 +22,28 @@ function MapMenu({
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// Close modal if interacting with any other element
|
// Close modal if interacting with any other element
|
||||||
function handlePointerDown(event) {
|
function handleInteraction(event) {
|
||||||
const path = event.composedPath();
|
const path = event.composedPath();
|
||||||
if (
|
if (
|
||||||
!path.includes(modalContentNode) &&
|
!path.includes(modalContentNode) &&
|
||||||
!(excludeNode && path.includes(excludeNode))
|
!(excludeNode && path.includes(excludeNode)) &&
|
||||||
|
!(event.target instanceof HTMLTextAreaElement)
|
||||||
) {
|
) {
|
||||||
onRequestClose();
|
onRequestClose();
|
||||||
document.body.removeEventListener("pointerdown", handlePointerDown);
|
document.body.removeEventListener("pointerdown", handleInteraction);
|
||||||
|
document.body.removeEventListener("wheel", handleInteraction);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (modalContentNode) {
|
if (modalContentNode) {
|
||||||
document.body.addEventListener("pointerdown", handlePointerDown);
|
document.body.addEventListener("pointerdown", handleInteraction);
|
||||||
// Check for wheel event to close modal as well
|
// Check for wheel event to close modal as well
|
||||||
document.body.addEventListener(
|
document.body.addEventListener("wheel", handleInteraction);
|
||||||
"wheel",
|
|
||||||
() => {
|
|
||||||
onRequestClose();
|
|
||||||
},
|
|
||||||
{ once: true }
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
if (modalContentNode) {
|
if (modalContentNode) {
|
||||||
document.body.removeEventListener("pointerdown", handlePointerDown);
|
document.body.removeEventListener("pointerdown", handleInteraction);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}, [modalContentNode, excludeNode, onRequestClose]);
|
}, [modalContentNode, excludeNode, onRequestClose]);
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import React, { useEffect, useState, useContext } from "react";
|
import React, { useEffect, useState, useContext } from "react";
|
||||||
import { Box, Input, Flex, Text, IconButton } from "theme-ui";
|
import { Box, Flex, Text, IconButton, Textarea } from "theme-ui";
|
||||||
|
|
||||||
import Slider from "../Slider";
|
import Slider from "../Slider";
|
||||||
|
|
||||||
@ -98,6 +98,13 @@ function NoteMenu({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function handleTextKeyPress(e) {
|
||||||
|
if (e.key === "Enter" && !e.shiftKey) {
|
||||||
|
e.preventDefault();
|
||||||
|
onRequestClose();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<MapMenu
|
<MapMenu
|
||||||
isOpen={isOpen}
|
isOpen={isOpen}
|
||||||
@ -115,7 +122,7 @@ function NoteMenu({
|
|||||||
}}
|
}}
|
||||||
sx={{ alignItems: "center" }}
|
sx={{ alignItems: "center" }}
|
||||||
>
|
>
|
||||||
<Input
|
<Textarea
|
||||||
id="changeNoteText"
|
id="changeNoteText"
|
||||||
onChange={handleTextChange}
|
onChange={handleTextChange}
|
||||||
value={(note && note.text) || ""}
|
value={(note && note.text) || ""}
|
||||||
@ -125,8 +132,10 @@ function NoteMenu({
|
|||||||
":focus": {
|
":focus": {
|
||||||
outline: "none",
|
outline: "none",
|
||||||
},
|
},
|
||||||
|
resize: "none",
|
||||||
}}
|
}}
|
||||||
autoComplete="off"
|
rows={3}
|
||||||
|
onKeyPress={handleTextKeyPress}
|
||||||
/>
|
/>
|
||||||
</Flex>
|
</Flex>
|
||||||
<Box
|
<Box
|
||||||
|
@ -8,7 +8,10 @@ export function KeyboardProvider({ children }) {
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
function handleKeyDown(event) {
|
function handleKeyDown(event) {
|
||||||
// Ignore text input
|
// Ignore text input
|
||||||
if (event.target instanceof HTMLInputElement) {
|
if (
|
||||||
|
event.target instanceof HTMLInputElement ||
|
||||||
|
event.target instanceof HTMLTextAreaElement
|
||||||
|
) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
keyEmitter.emit("keyDown", event);
|
keyEmitter.emit("keyDown", event);
|
||||||
@ -16,7 +19,10 @@ export function KeyboardProvider({ children }) {
|
|||||||
|
|
||||||
function handleKeyUp(event) {
|
function handleKeyUp(event) {
|
||||||
// Ignore text input
|
// Ignore text input
|
||||||
if (event.target instanceof HTMLInputElement) {
|
if (
|
||||||
|
event.target instanceof HTMLInputElement ||
|
||||||
|
event.target instanceof HTMLTextAreaElement
|
||||||
|
) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
keyEmitter.emit("keyUp", event);
|
keyEmitter.emit("keyUp", event);
|
||||||
|
@ -187,6 +187,9 @@ const theme = {
|
|||||||
opacity: 0.5,
|
opacity: 0.5,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
textarea: {
|
||||||
|
fontFamily: "body2",
|
||||||
|
},
|
||||||
},
|
},
|
||||||
buttons: {
|
buttons: {
|
||||||
primary: {
|
primary: {
|
||||||
|
Loading…
Reference in New Issue
Block a user