You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
33 lines
843 B
33 lines
843 B
import React, { CSSProperties, useRef, useState } from "react"
|
|
import "../style/title_input.css"
|
|
|
|
export interface TitleInputOptions {
|
|
style: CSSProperties
|
|
default_value: string
|
|
on_validated: (a: string) => void
|
|
}
|
|
|
|
export default function TitleInput({
|
|
style,
|
|
default_value,
|
|
on_validated,
|
|
}: TitleInputOptions) {
|
|
const [value, setValue] = useState(default_value)
|
|
const ref = useRef<HTMLInputElement>(null)
|
|
|
|
return (
|
|
<input
|
|
className="title_input"
|
|
ref={ref}
|
|
style={style}
|
|
type="text"
|
|
value={value}
|
|
onChange={(event) => setValue(event.target.value)}
|
|
onBlur={(_) => on_validated(value)}
|
|
onKeyDown={(event) => {
|
|
if (event.key == "Enter") ref.current?.blur()
|
|
}}
|
|
/>
|
|
)
|
|
}
|