From e546713b4235d8a66406b13426834669069a415c Mon Sep 17 00:00:00 2001 From: Connor Turland <1409121+Connoropolous@users.noreply.github.com> Date: Wed, 8 Nov 2023 20:41:16 -0800 Subject: [PATCH] hook up keyboard listeners for MapViewCreateOutcome --- .../ButtonCheckbox/ButtonCheckbox.scss | 2 +- .../ButtonCheckbox/ButtonCheckbox.tsx | 18 ++++- .../ExpandedViewMode.component.tsx | 4 +- .../ExpandedViewMode.connector.tsx | 8 +- .../MapViewCreateOutcome.component.tsx | 73 +++++++++---------- web/src/hooks/useVersionChecker.ts | 4 +- web/tsconfig.json | 1 + 7 files changed, 61 insertions(+), 49 deletions(-) diff --git a/web/src/components/ButtonCheckbox/ButtonCheckbox.scss b/web/src/components/ButtonCheckbox/ButtonCheckbox.scss index 80ea00cf..63ee2f48 100644 --- a/web/src/components/ButtonCheckbox/ButtonCheckbox.scss +++ b/web/src/components/ButtonCheckbox/ButtonCheckbox.scss @@ -17,7 +17,7 @@ border: 0.15rem solid var(--border-color-button-checkbox); &:hover, - &.focused { + &:focus { box-shadow: 0rem 0rem 1.25rem var(--shadow-color-hover); } diff --git a/web/src/components/ButtonCheckbox/ButtonCheckbox.tsx b/web/src/components/ButtonCheckbox/ButtonCheckbox.tsx index 69054016..858f98ce 100644 --- a/web/src/components/ButtonCheckbox/ButtonCheckbox.tsx +++ b/web/src/components/ButtonCheckbox/ButtonCheckbox.tsx @@ -1,6 +1,5 @@ -import React from 'react' +import React, { useEffect } from 'react' import Checkbox from '../Checkbox/Checkbox' -import Icon from '../Icon/Icon' import './ButtonCheckbox.scss' @@ -19,8 +18,23 @@ const ButtonCheckbox: React.FC = ({ icon, text, }) => { + useEffect(() => { + // listen for Enter key to be pressed, but + // ignore if Command/Ctrl is also pressed + const handleKeyDown = (e: KeyboardEvent) => { + if (e.key === 'Enter' && !e.metaKey) { + onChange(!isChecked) + } + } + document.addEventListener('keydown', handleKeyDown) + return () => { + document.removeEventListener('keydown', handleKeyDown) + } + }, [isChecked, onChange]) return (
= ({ onClose() } } - document.body.addEventListener('keyup', onKeyDown) + if (outcome) { + document.body.addEventListener('keyup', onKeyDown) + } // for teardown, unbind event listeners return () => { - document.body.removeEventListener('keyup', onKeyDown) + if (outcome) { + document.body.removeEventListener('keyup', onKeyDown) + } } }, [outcome, content, description, githubInputLinkText, activeAgentPubKey]) diff --git a/web/src/components/MapViewCreateOutcome/MapViewCreateOutcome.component.tsx b/web/src/components/MapViewCreateOutcome/MapViewCreateOutcome.component.tsx index db311497..61b508c8 100644 --- a/web/src/components/MapViewCreateOutcome/MapViewCreateOutcome.component.tsx +++ b/web/src/components/MapViewCreateOutcome/MapViewCreateOutcome.component.tsx @@ -1,4 +1,4 @@ -import React, { useRef, useState } from 'react' +import React, { useEffect, useRef, useState } from 'react' import useOnClickOutside from 'use-onclickoutside' import TextareaAutosize from 'react-textarea-autosize' import moment from 'moment' @@ -76,42 +76,52 @@ const MapViewCreateOutcome: React.FC = ({ closeOutcomeForm, }) => { const [isSmallScopeChecked, setIsSmallScopeChecked] = useState(false) + const [textIsFocused, setTextIsFocused] = useState(false) /* EVENT HANDLERS */ // when the text value changes const handleChange = (event) => { updateContent(event.target.value) } - // when a key is pressed - const handleKeyDown = (event) => { - if (event.key === 'Enter') { - event.preventDefault() - handleSubmit() + + // keyboard listener + useEffect(() => { + // since Enter will be used to toggle the checkbox + // when that is focused, we can submit on pure Enter for the textbox + // but they must use Command/Ctrl-Enter to submit when the button/checkbox + // is focused + const handleKeyDown = (e: KeyboardEvent) => { + if (textIsFocused && e.key === 'Enter') { + handleSubmit() + } else if (!textIsFocused && e.key === 'Enter' && e.metaKey) { + handleSubmit() + } } - } + document.addEventListener('keydown', handleKeyDown) + return () => { + document.removeEventListener('keydown', handleKeyDown) + } + }, [ + textIsFocused, + content, + activeAgentPubKey, + isSmallScopeChecked, + existingParentConnectionAddress, + ]) + // when the input comes into focus const handleFocus = (event) => { // select the text event.target.select() + setTextIsFocused(true) } - // when the input leaves focus (not focused on editing title) - const handleBlur = (event) => { - // if creating an Outcome - event.preventDefault() - // handleSubmit() + const handleBlur = () => { + setTextIsFocused(false) } // this can get called via keyboard events // or via 'onClickOutside' of the MapViewCreateOutcome component - const handleSubmit = async (event?) => { - console.log('here') - if (event) { - // this is to prevent the page from refreshing - // when the form is submitted, which is the - // default behaviour - event.preventDefault() - } - + const handleSubmit = async () => { // do not allow submit with no content if (!content || content === '') { closeOutcomeForm() @@ -169,18 +179,6 @@ const MapViewCreateOutcome: React.FC = ({ ) } - // the default - let fontSizeToUse = fontSize - if (scale < secondZoomThreshold) { - fontSizeToUse = fontSizeExtraLarge - } else if (scale < firstZoomThreshold) { - fontSizeToUse = fontSizeLarge - } - // const textStyle = { - // fontSize: fontSize, - // lineHeight: `${parseInt(fontSizeToUse) * lineHeightMultiplier}px`, - // } - const ref = useRef() useOnClickOutside(ref, handleSubmit) @@ -203,21 +201,16 @@ const MapViewCreateOutcome: React.FC = ({ // ref for the sake of onClickOutside ref={ref} > -
+
- - {/* - This Outcome is Small Scope */} - +
{/* small scope option checkbox */}