kamp/IOPaint
1
0
Fork 0
Code Issues Pull Requests Releases 1 Activity

frontend: add prompt auto expand

Browse Source
This commit is contained in:
Qing 2024-02-16 10:06:35 +08:00
parent b3d334e26e
commit ed1f7c9e28
2 changed files with 38 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
web_app/src/components/PromptInput.tsx
View File

@ -1,8 +1,9 @@
import React, { FormEvent, useRef } from "react" import React, { FormEvent, useRef } from "react"
import { Button } from "./ui/button" import { Button } from "./ui/button"
import { Input } from "./ui/input"
import { useStore } from "@/lib/states" import { useStore } from "@/lib/states"
import { useClickAway } from "react-use" import { useClickAway, useToggle } from "react-use"
import { Textarea } from "./ui/textarea"
import { cn } from "@/lib/utils"
const PromptInput = () => { const PromptInput = () => {
const [ const [
@ -20,18 +21,21 @@ const PromptInput = () => {
state.showPrevMask, state.showPrevMask,
state.hidePrevMask, state.hidePrevMask,
]) ])
const [showScroll, toggleShowScroll] = useToggle(false)
const ref = useRef(null) const ref = useRef(null)
useClickAway<MouseEvent>(ref, () => { useClickAway<MouseEvent>(ref, () => {
if (ref?.current) { if (ref?.current) {
const input = ref.current as HTMLInputElement const input = ref.current as HTMLTextAreaElement
input.blur() input.blur()
} }
}) })
const handleOnInput = (evt: FormEvent<HTMLInputElement>) => { const handleOnInput = (evt: FormEvent<HTMLTextAreaElement>) => {
evt.preventDefault() evt.preventDefault()
evt.stopPropagation() evt.stopPropagation()
const target = evt.target as HTMLInputElement const target = evt.target as HTMLTextAreaElement
updateSettings({ prompt: target.value }) updateSettings({ prompt: target.value })
} }
@ -56,14 +60,22 @@ const PromptInput = () => {
} }
return ( return (
<div className="flex gap-4 items-center"> <div className="flex gap-4 relative w-full justify-center h-full">
<Input <div className="absolute flex gap-4">
<Textarea
ref={ref} ref={ref}
className="min-w-[500px]" placeholder="I want to repaint of..."
className={cn(
showScroll ? "focus:overflow-y-auto" : "overflow-y-hidden",
"min-h-[32px] h-[32px] overflow-x-hidden focus:h-[120px] overflow-y-hidden transition-[height] w-[500px] py-1 px-3 bg-background resize-none"
)}
style={{
scrollbarGutter: "stable",
}}
value={prompt} value={prompt}
onInput={handleOnInput} onInput={handleOnInput}
onKeyUp={onKeyUp} onKeyUp={onKeyUp}
placeholder="I want to repaint of..." onTransitionEnd={toggleShowScroll}
/> />
<Button <Button
size="sm" size="sm"
@ -75,6 +87,7 @@ const PromptInput = () => {
Paint Paint
</Button> </Button>
</div> </div>
</div>
) )
} }

4
web_app/src/components/ui/textarea.tsx
View File

@ -11,8 +11,8 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
<textarea <textarea
className={cn( className={cn(
"flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
className, "overflow-auto",
"overflow-auto" className
)} )}
tabIndex={-1} tabIndex={-1}
ref={ref} ref={ref}