48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
import React from 'react'
|
|
import keycode from 'keycode'
|
|
import './Input.scss'
|
|
|
|
import { useObservable } from 'rxjs-hooks'
|
|
import { InputStore } from '../stores/InputStore'
|
|
|
|
const Input = () => {
|
|
const open = useObservable(() => InputStore.data.open, false)
|
|
const question = useObservable(() => InputStore.data.question, '')
|
|
const output = useObservable(() => InputStore.data.output, '')
|
|
|
|
const handleQuit = () => {
|
|
InputStore.actions.next('quit')
|
|
}
|
|
|
|
return (
|
|
<div
|
|
id="input-container"
|
|
onClick={handleQuit}
|
|
className={open ? 'visible' : ''}
|
|
>
|
|
<div id="input-title">{question}</div>
|
|
<input
|
|
autoFocus={true}
|
|
value={output}
|
|
onClick={e => {
|
|
e.stopPropagation()
|
|
}}
|
|
type="text"
|
|
id="actual-input"
|
|
onChange={e => {
|
|
const element = e.target as HTMLInputElement
|
|
|
|
InputStore.data.output.next(element.value)
|
|
}}
|
|
onKeyDown={e => {
|
|
if (keycode('enter') === e.keyCode) {
|
|
e.preventDefault()
|
|
return InputStore.actions.next('submit')
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Input
|