Fix text story creation input

This commit is contained in:
Josh Perez 2022-11-01 14:56:19 -04:00 committed by GitHub
parent 97b7f3dbc1
commit 50c48315e3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -3,7 +3,6 @@
import type { KeyboardEvent, ReactNode } from 'react'; import type { KeyboardEvent, ReactNode } from 'react';
import type { Options, VirtualElement } from '@popperjs/core'; import type { Options, VirtualElement } from '@popperjs/core';
import FocusTrap from 'focus-trap-react';
import React, { useEffect, useRef, useState } from 'react'; import React, { useEffect, useRef, useState } from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import { usePopper } from 'react-popper'; import { usePopper } from 'react-popper';
@ -174,6 +173,13 @@ export function ContextMenu<T>({
ev.stopPropagation(); ev.stopPropagation();
ev.preventDefault(); ev.preventDefault();
} }
if (ev.key === 'Escape') {
setIsMenuShowing(false);
closeCurrentOpenContextMenu = undefined;
ev.stopPropagation();
ev.preventDefault();
}
}; };
const handleClick = (ev: React.MouseEvent) => { const handleClick = (ev: React.MouseEvent) => {
@ -282,37 +288,31 @@ export function ContextMenu<T>({
} }
return ( return (
<FocusTrap <div
focusTrapOptions={{ className={classNames(
allowOutsideClick: true, getClassName('__container'),
}} theme ? themeClassName(theme) : undefined
)}
> >
<div {buttonNode}
className={classNames( {isMenuShowing && (
getClassName('__container'), <div className={theme ? themeClassName(theme) : undefined}>
theme ? themeClassName(theme) : undefined <div
)} className={classNames(
> getClassName('__popper'),
{buttonNode} menuOptions.length === 1
{isMenuShowing && ( ? getClassName('__popper--single-item')
<div className={theme ? themeClassName(theme) : undefined}> : undefined
<div )}
className={classNames( ref={setPopperElement}
getClassName('__popper'), style={styles.popper}
menuOptions.length === 1 {...attributes.popper}
? getClassName('__popper--single-item') >
: undefined {title && <div className={getClassName('__title')}>{title}</div>}
)} {optionElements}
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}
>
{title && <div className={getClassName('__title')}>{title}</div>}
{optionElements}
</div>
</div> </div>
)} </div>
</div> )}
</FocusTrap> </div>
); );
} }