Spaces:
Sleeping
Sleeping
File size: 1,519 Bytes
13555f3 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React, {useState, useRef, useEffect} from 'react'
type TextInputOptionProps = {
initialValue: string
onConfirmValue: (value: string) => void
onValueChanged: (value: string) => void
}
function TextInputOption(props: TextInputOptionProps): JSX.Element {
const nameTextbox = useRef<HTMLInputElement>(null)
const [value, setValue] = useState(props.initialValue)
useEffect(() => {
nameTextbox.current?.focus()
nameTextbox.current?.setSelectionRange(0, value.length)
}, [])
return (
<input
ref={nameTextbox}
type='text'
className='PropertyMenu menu-textbox menu-option'
onClick={(e) => e.stopPropagation()}
onChange={(e) => {
setValue(e.target.value)
props.onValueChanged(value)
}}
value={value}
title={value}
onBlur={() => props.onConfirmValue(value)}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === 'Escape') {
props.onConfirmValue(value)
e.stopPropagation()
if (e.key === 'Enter') {
e.target.dispatchEvent(new Event('menuItemClicked'))
}
}
}}
spellCheck={true}
/>
)
}
export default React.memo(TextInputOption)
|