Cutlery/moodist
1
0
Fork 0
mirror of https://github.com/remvze/moodist.git synced 2025-09-29 15:30:49 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat: add autofocus for note

Browse Source
This commit is contained in:
MAZE 2024-04-23 23:20:58 +03:30
parent ab9d47befb
commit 24a53c81df
1 changed files with 12 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/toolbox/notepad/notepad.tsx
View File

@ -1,3 +1,4 @@
import { useRef, useEffect } from 'react';
import { BiTrash } from 'react-icons/bi/index'; import { BiTrash } from 'react-icons/bi/index';
import { LuCopy, LuDownload } from 'react-icons/lu/index'; import { LuCopy, LuDownload } from 'react-icons/lu/index';
import { FaCheck } from 'react-icons/fa6/index'; import { FaCheck } from 'react-icons/fa6/index';
@ -18,6 +19,8 @@ interface NotepadProps {
} }
export function Notepad({ onClose, show }: NotepadProps) { export function Notepad({ onClose, show }: NotepadProps) {
const textareaRef = useRef<HTMLTextAreaElement>(null);
const note = useNoteStore(state => state.note); const note = useNoteStore(state => state.note);
const history = useNoteStore(state => state.history); const history = useNoteStore(state => state.history);
const write = useNoteStore(state => state.write); const write = useNoteStore(state => state.write);
@ -28,6 +31,14 @@ export function Notepad({ onClose, show }: NotepadProps) {
const { copy, copying } = useCopy(); const { copy, copying } = useCopy();
useEffect(() => {
if (show && textareaRef.current) {
setTimeout(() => {
textareaRef.current?.focus();
}, 10);
}
}, [show]);
return ( return (
<Modal show={show} wide onClose={onClose}> <Modal show={show} wide onClose={onClose}>
<header className={styles.header}> <header className={styles.header}>
@ -57,6 +68,7 @@ export function Notepad({ onClose, show }: NotepadProps) {
className={styles.textarea} className={styles.textarea}
dir="auto" dir="auto"
placeholder="What is on your mind?" placeholder="What is on your mind?"
ref={textareaRef}
value={note} value={note}
onChange={e => write(e.target.value)} onChange={e => write(e.target.value)}
/> />