Spaces:
Configuration error
Configuration error
File size: 1,658 Bytes
74aacd5 |
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 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
import React, { FormEvent, useRef, useState } from 'react'
import { useClickAway } from 'react-use'
import { useRecoilState, useRecoilValue } from 'recoil'
import emitter, { EVENT_PROMPT } from '../../event'
import { appState, isInpaintingState, propmtState } from '../../store/Atoms'
import Button from '../shared/Button'
import TextInput from '../shared/Input'
// TODO: show progress in input
const PromptInput = () => {
const [app, setAppState] = useRecoilState(appState)
const [prompt, setPrompt] = useRecoilState(propmtState)
const isInpainting = useRecoilValue(isInpaintingState)
const ref = useRef(null)
const handleOnInput = (evt: FormEvent<HTMLInputElement>) => {
evt.preventDefault()
evt.stopPropagation()
const target = evt.target as HTMLInputElement
setPrompt(target.value)
}
const handleRepaintClick = () => {
if (prompt.length !== 0 && !app.isInpainting) {
emitter.emit(EVENT_PROMPT)
}
}
useClickAway<MouseEvent>(ref, () => {
if (ref?.current) {
const input = ref.current as HTMLInputElement
input.blur()
}
})
const onKeyUp = (e: React.KeyboardEvent) => {
if (e.key === 'Enter' && !isInpainting) {
handleRepaintClick()
}
}
return (
<div className="prompt-wrapper">
<TextInput
ref={ref}
value={prompt}
onInput={handleOnInput}
onKeyUp={onKeyUp}
placeholder="I want to repaint of..."
/>
<Button
border
onClick={handleRepaintClick}
disabled={prompt.length === 0 || app.isInpainting}
>
Dream
</Button>
</div>
)
}
export default PromptInput
|