138 lines
4.4 KiB
TypeScript
138 lines
4.4 KiB
TypeScript
import * as Form from "@radix-ui/react-form";
|
|
import { useEffect, useState } from "react";
|
|
import { InputComponentType } from "../../types/components";
|
|
import { handleKeyDown } from "../../utils/reactflowUtils";
|
|
import { classNames } from "../../utils/utils";
|
|
import { Input } from "../ui/input";
|
|
|
|
export default function InputComponent({
|
|
value,
|
|
onChange,
|
|
disabled,
|
|
required = false,
|
|
isForm = false,
|
|
password,
|
|
editNode = false,
|
|
placeholder = "Type something...",
|
|
className,
|
|
}: InputComponentType): JSX.Element {
|
|
const [pwdVisible, setPwdVisible] = useState(false);
|
|
|
|
// Clear component state
|
|
useEffect(() => {
|
|
if (disabled) {
|
|
onChange("");
|
|
}
|
|
}, [disabled, onChange]);
|
|
|
|
return (
|
|
<div className="relative w-full">
|
|
{isForm ? (
|
|
<Form.Control asChild>
|
|
<Input
|
|
value={value}
|
|
disabled={disabled}
|
|
required={required}
|
|
className={classNames(
|
|
password && !pwdVisible && value !== ""
|
|
? " text-clip password "
|
|
: "",
|
|
editNode ? " input-edit-node " : "",
|
|
password && editNode ? "pr-8" : "",
|
|
password && !editNode ? "pr-10" : "",
|
|
className!
|
|
)}
|
|
placeholder={password && editNode ? "Key" : placeholder}
|
|
onChange={(e) => {
|
|
onChange(e.target.value);
|
|
}}
|
|
onKeyDown={(e) => {
|
|
handleKeyDown(e, value, "");
|
|
}}
|
|
/>
|
|
</Form.Control>
|
|
) : (
|
|
<Input
|
|
value={value}
|
|
disabled={disabled}
|
|
required={required}
|
|
className={classNames(
|
|
password && !pwdVisible && value !== ""
|
|
? " text-clip password "
|
|
: "",
|
|
editNode ? " input-edit-node " : "",
|
|
password && editNode ? "pr-8" : "",
|
|
password && !editNode ? "pr-10" : "",
|
|
className!
|
|
)}
|
|
placeholder={password && editNode ? "Key" : placeholder}
|
|
onChange={(e) => {
|
|
onChange(e.target.value);
|
|
}}
|
|
onKeyDown={(e) => {
|
|
handleKeyDown(e, value, "");
|
|
}}
|
|
/>
|
|
)}
|
|
{password && (
|
|
<button
|
|
className={classNames(
|
|
editNode
|
|
? "input-component-true-button"
|
|
: "input-component-false-button"
|
|
)}
|
|
onClick={(event) => {
|
|
event.preventDefault();
|
|
setPwdVisible(!pwdVisible);
|
|
}}
|
|
>
|
|
{password &&
|
|
(pwdVisible ? (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
strokeWidth={1.5}
|
|
stroke="currentColor"
|
|
className={classNames(
|
|
editNode
|
|
? "input-component-true-svg"
|
|
: "input-component-false-svg"
|
|
)}
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
|
|
/>
|
|
</svg>
|
|
) : (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
strokeWidth={1.5}
|
|
stroke="currentColor"
|
|
className={classNames(
|
|
editNode
|
|
? "input-component-true-svg"
|
|
: "input-component-false-svg"
|
|
)}
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
|
|
/>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
|
|
/>
|
|
</svg>
|
|
))}
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|