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.
28 lines
864 B
28 lines
864 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();
|
|
}}
|
|
/>
|
|
)
|
|
} |