textInputOption.tsx

TLDR

This file defines a React component called TextInputOption that renders an input textbox. Users can enter text into the textbox, and when they confirm the entered value, a callback function onConfirmValue is invoked with the entered value as an argument. There is also a callback function onValueChanged that is invoked whenever the value in the textbox changes.

Methods

There are no methods in this file.

Classes

There are no additional classes in this file.

// 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)