import * as React from 'react' ; import { TreeItemIndex } from '../types' ; import { useTree } from '../tree/Tree' ; import { useTreeEnvironment } from '../controlledEnvironment/ControlledTreeEnvironment' ; import { FormHTMLAttributes , HTMLProps , InputHTMLAttributes , useEffect , useRef , useState } from 'react' ; import { useHotkey } from '../hotkeys/useHotkey' ; export const TreeItemRenamingInput = props => { const { renderers , treeInformation , setRenamingItem , treeId } = useTree ( ) ; const environment = useTreeEnvironment ( ) ; const inputRef = useRef < HTMLInputElement > ( null ) ; const submitButtonRef = useRef < any > ( null ) ; const item = environment . items [ props . itemIndex ] ; const [ title , setTitle ] = useState ( environment . getItemTitle ( item ) ) ; const abort = ( ) => { environment . onAbortRenamingItem ?. ( item , treeInformation . treeId ) ; setRenamingItem ( null ) ; requestAnimationFrame ( ( ) => { environment . setActiveTree ( treeId ) ; } ) ; } ; const confirm = ( ) => { environment . onRenameItem ?. ( item , title , treeInformation . treeId ) ; setRenamingItem ( null ) ; requestAnimationFrame ( ( ) => { environment . setActiveTree ( treeId ) ; } ) ; } ; useEffect ( ( ) => { environment . setActiveTree ( treeId ) ; if ( environment . autoFocus ?? true ) { inputRef . current ?. select ( ) ; inputRef . current ?. focus ( ) ; } } , [ inputRef . current ] ) ; useHotkey ( 'abortRenameItem' , ( ) => { abort ( ) ; } , true , true ) ; const inputProps = { value : title , onChange : e => { setTitle ( e . target . value ) ; } , onBlur : e => { if ( e . relatedTarget !== submitButtonRef . current ) { abort ( ) ; } } , 'aria-label' : 'New item name' , tabIndex : 0 } ; const submitButtonProps = { onClick : e => { e . stopPropagation ( ) ; confirm ( ) ; } } ; const formProps = { onSubmit : e => { e . preventDefault ( ) ; confirm ( ) ; } } ; return renderers . renderRenameInput ( { item , inputRef , submitButtonProps , submitButtonRef , formProps , inputProps } ) as JSX . Element ; } ;