File size: 1,944 Bytes
d092f57 |
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 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
import { FC, ReactNode, useEffect, useRef, useState } from "react"
import classNames from "classnames"
import IconClose from "../icon/IconClose"
import { isUrl } from "../../lib/utils"
interface Props {
url: string
placeholder: string
tooltip: string
onSubmit?: () => void
onChange: (url: string) => void
className?: string
children?: ReactNode
}
const InputUrl: FC<Props> = ({
url,
placeholder,
tooltip,
onSubmit,
onChange,
className,
children,
}) => {
const [valid, setValid] = useState(url === "" || isUrl(url))
const inputRef = useRef<HTMLInputElement>(null)
useEffect(() => {
setValid(url === "" || isUrl(url))
}, [url])
return (
<form
onSubmit={(e) => {
e.preventDefault()
if (onSubmit) {
onSubmit()
}
}}
className={classNames("flex flex-col", className)}
>
<div
className={"rounded grow flex flex-row items-center bg-dark-800 action"}
>
<input
ref={inputRef}
size={1}
className={classNames("grow rounded bg-dark-800 p-2")}
placeholder={placeholder}
value={url}
onChange={(event) => {
onChange(event.target.value)
}}
type={"text"}
onFocus={() => inputRef.current?.select()}
/>
<div className={"p-1 cursor-pointer"} onClick={() => onChange("")}>
<IconClose />
</div>
<div>
<button
type={"submit"}
data-tooltip-content={tooltip}
className={classNames(
"p-2 rounded-r",
valid
? "bg-primary-900 hover:bg-primary-800"
: "bg-red-600 hover:bg-red-500"
)}
>
{children}
</button>
</div>
</div>
{!valid && <div className={"text-red-600"}>Invalid url</div>}
</form>
)
}
export default InputUrl
|