Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): use dropzone noKeyboard opt instead of manual listener to disable on spacebar

Browse Source
This commit is contained in:
psychedelicious 2024-01-03 12:31:36 +11:00
parent 6320d18846
commit db17ec7a4b
1 changed files with 3 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
invokeai/frontend/web/src/common/components/ImageUploader.tsx
View File

@ -6,7 +6,7 @@ import { useAppSelector } from 'app/store/storeHooks';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors'; import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import type { AnimationProps } from 'framer-motion'; import type { AnimationProps } from 'framer-motion';
import { AnimatePresence, motion } from 'framer-motion'; import { AnimatePresence, motion } from 'framer-motion';
import type { KeyboardEvent, PropsWithChildren } from 'react'; import type { PropsWithChildren } from 'react';
import { memo, useCallback, useEffect, useState } from 'react'; import { memo, useCallback, useEffect, useState } from 'react';
import type { Accept, FileRejection } from 'react-dropzone'; import type { Accept, FileRejection } from 'react-dropzone';
import { useDropzone } from 'react-dropzone'; import { useDropzone } from 'react-dropzone';
@ -118,6 +118,7 @@ const ImageUploader = (props: PropsWithChildren) => {
onDrop, onDrop,
onDragOver, onDragOver,
multiple: false, multiple: false,
noKeyboard: true,
}); });
useEffect(() => { useEffect(() => {
@ -143,15 +144,8 @@ const ImageUploader = (props: PropsWithChildren) => {
}; };
}, [inputRef]); }, [inputRef]);
const handleKeyDown = useCallback((e: KeyboardEvent) => {
// Bail out if user hits spacebar - do not open the uploader
if (e.key === ' ') {
return;
}
}, []);
return ( return (
<Box {...getRootProps(dropzoneRootProps)} onKeyDown={handleKeyDown}> <Box {...getRootProps(dropzoneRootProps)}>
<input {...getInputProps()} /> <input {...getInputProps()} />
{props.children} {props.children}
<AnimatePresence> <AnimatePresence>