jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

style(inputComponent): fix indentation and spacing in InputComponent component

Browse source
This commit is contained in:
Gabriel Almeida 2023-05-02 18:46:41 -03:00
commit 1b6e61d3cb
1 changed files with 76 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

143
src/frontend/src/components/inputComponent/index.tsx
View file

@ -3,75 +3,84 @@ import { InputComponentType } from "../../types/components";
import { classNames } from "../../utils"; import { classNames } from "../../utils";
export default function InputComponent({ export default function InputComponent({
value, value,
onChange, onChange,
disabled, disabled,
password, password,
}: InputComponentType) { }: InputComponentType) {
const [myValue, setMyValue] = useState(value ?? ""); const [myValue, setMyValue] = useState(value ?? "");
const [pwdVisable, setPwdVisable] = useState(false) const [pwdVisible, setPwdVisible] = useState(false);
useEffect(() => { useEffect(() => {
if (disabled) { if (disabled) {
setMyValue(""); setMyValue("");
onChange(""); onChange("");
} }
}, [disabled, onChange]); }, [disabled, onChange]);
return ( return (
<div className={disabled ? "relative pointer-events-none cursor-not-allowed" : "relative"}> <div
<input className={
type={password && !pwdVisable ? "password" : "text"} disabled
value={myValue} ? "relative pointer-events-none cursor-not-allowed"
className={classNames( : "relative"
"block w-full form-input dark:bg-gray-900 dark:border-gray-600 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm", }
disabled ? " bg-gray-200 dark:bg-gray-700" : "", >
)} <input
placeholder="Type a text" type={password && !pwdVisible ? "password" : "text"}
onChange={(e) => { value={myValue}
setMyValue(e.target.value); className={classNames(
onChange(e.target.value); "block w-full form-input dark:bg-gray-900 dark:border-gray-600 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm",
}} disabled ? " bg-gray-200 dark:bg-gray-700" : ""
/> )}
<button placeholder="Type a text"
onChange={(e) => {
setMyValue(e.target.value);
onChange(e.target.value);
}}
/>
<button
className="absolute inset-y-0 right-0 items-center px-4 text-gray-600" className="absolute inset-y-0 right-0 items-center px-4 text-gray-600"
onClick={() => {setPwdVisable(!pwdVisable)}} onClick={() => {
setPwdVisible(!pwdVisible);
}}
> >
{password && (pwdVisable ? ( {password &&
<svg (pwdVisible ? (
xmlns="http://www.w3.org/2000/svg" <svg
fill="none" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" fill="none"
strokeWidth={1.5} viewBox="0 0 24 24"
stroke="currentColor" strokeWidth={1.5}
className="w-5 h-5" stroke="currentColor"
> className="w-5 h-5"
<path >
strokeLinecap="round" <path
strokeLinejoin="round" strokeLinecap="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" 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>
<svg ) : (
xmlns="http://www.w3.org/2000/svg" <svg
fill="none" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" fill="none"
strokeWidth={1.5} viewBox="0 0 24 24"
stroke="currentColor" strokeWidth={1.5}
className="w-5 h-5" stroke="currentColor"
> className="w-5 h-5"
<path >
strokeLinecap="round" <path
strokeLinejoin="round" strokeLinecap="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" 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" <path
strokeLinejoin="round" strokeLinecap="round"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" strokeLinejoin="round"
/> d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
</svg> />
))} </svg>
))}
</button> </button>
</div> </div>
); );
} }