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

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

@ -9,7 +9,7 @@ export default function InputComponent({
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("");
@ -17,13 +17,19 @@ export default function InputComponent({
} }
}, [disabled, onChange]); }, [disabled, onChange]);
return ( return (
<div className={disabled ? "relative pointer-events-none cursor-not-allowed" : "relative"}> <div
className={
disabled
? "relative pointer-events-none cursor-not-allowed"
: "relative"
}
>
<input <input
type={password && !pwdVisable ? "password" : "text"} type={password && !pwdVisible ? "password" : "text"}
value={myValue} value={myValue}
className={classNames( className={classNames(
"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", "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" : "", disabled ? " bg-gray-200 dark:bg-gray-700" : ""
)} )}
placeholder="Type a text" placeholder="Type a text"
onChange={(e) => { onChange={(e) => {
@ -33,9 +39,12 @@ export default function InputComponent({
/> />
<button <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 &&
(pwdVisible ? (
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"