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

🔧 fix(floatComponent): replace input element with custom Input component for consistency and reusability

Browse source 
🔧 fix(inputComponent): replace input element with custom Input component for consistency and reusability
🔧 fix(inputListComponent): replace input element with custom Input component for consistency and reusability
🔧 fix(intComponent): replace input element with custom Input component for consistency and reusability
🔧 fix(textAreaComponent): replace input element with custom Input component for consistency and reusability
🔧 fix(ui/input): update Input component styles to match the design requirements
🔧 fix(index.css): update styles for Input component to match the design requirements
🔧 fix(extraSidebarComponent): replace input element with custom Input component for consistency and reusability
This commit is contained in:
Cristhian Zanforlin Lousa 2023-07-20 18:09:46 -03:00
commit 3e99fa431b
8 changed files with 37 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/frontend/src/components/floatComponent/index.tsx
View file

@ -1,5 +1,6 @@
import { useEffect } from "react";
import { FloatComponentType } from "../../types/components";
import { Input } from "../ui/input";
export default function FloatComponent({
value,
@ -19,8 +20,8 @@ export default function FloatComponent({
}, [disabled, onChange]);
return (
<div className={"w-full " + (disabled ? "float-component-pointer" : "")}>
<input
<div className="w-full">
<Input
type="number"
step={step}
min={min}
@ -34,11 +35,9 @@ export default function FloatComponent({
}}
max={max}
value={value ?? ""}
disabled={disabled}
className={
"nopan nodrag noundo nocopy " +
(editNode
? "input-edit-node"
: "input-primary" + (disabled ? " input-disable " : ""))
(editNode ? "input-edit-node" : "")
}
placeholder={
editNode ? "Number 0 to 1" : "Type a number from zero to one"

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

@ -1,6 +1,7 @@
import { useEffect, useState } from "react";
import { InputComponentType } from "../../types/components";
import { classNames } from "../../utils/utils";
import { Input } from "../ui/input";
export default function InputComponent({
value,
@ -19,16 +20,15 @@ export default function InputComponent({
}, [disabled, onChange]);
return (
<div className={disabled ? "input-component-div" : "relative"}>
<input
<div className="relative w-full">
<Input
value={value}
disabled={disabled}
className={classNames(
disabled ? " input-disable " : "",
password && !pwdVisible && value !== "" ? " text-clip password " : "",
editNode ? " input-edit-node " : " input-primary ",
editNode ? " input-edit-node " : "",
password && editNode ? "pr-8" : "",
password && !editNode ? "pr-10" : "",
"nopan nodrag noundo nocopy"
password && !editNode ? "pr-10" : ""
)}
placeholder={password && editNode ? "Key" : "Type something..."}
onChange={(e) => {

17
src/frontend/src/components/inputListComponent/index.tsx
View file

@ -3,6 +3,7 @@ import { InputListComponentType } from "../../types/components";
import _ from "lodash";
import IconComponent from "../genericIconComponent";
import { Input } from "../ui/input";
export default function InputListComponent({
value,
@ -27,23 +28,19 @@ export default function InputListComponent({
}, [disabled, onChange]);
return (
<div
className={
(disabled ? "pointer-events-none cursor-not-allowed" : "") +
"flex flex-col gap-3"
}
<div className="flex flex-col gap-3"
>
{inputList.map((i, idx) => {
return (
<div key={idx} className="flex w-full gap-3">
<input
<Input
disabled={disabled}
type="text"
value={i}
className={
"nopan nodrag noundo nocopy " +
(editNode
? "input-edit-node "
: "input-primary " + (disabled ? "input-disable" : ""))
editNode
? "input-edit-node"
: ""
}
placeholder="Type something..."
onChange={(e) => {

17
src/frontend/src/components/intComponent/index.tsx
View file

@ -1,5 +1,6 @@
import { useEffect } from "react";
import { FloatComponentType } from "../../types/components";
import { Input } from "../ui/input";
export default function IntComponent({
value,
@ -17,13 +18,9 @@ export default function IntComponent({
}, [disabled, onChange]);
return (
<div
className={
"w-full " +
(disabled ? "pointer-events-none w-full cursor-not-allowed" : "")
}
<div className="w-full"
>
<input
<Input
onKeyDown={(event) => {
if (
event.key !== "Backspace" &&
@ -52,11 +49,11 @@ export default function IntComponent({
}}
value={value ?? ""}
className={
"nopan nodrag noundo nocopy " +
(editNode
? " input-edit-node "
: " input-primary " + (disabled ? " input-disable" : ""))
editNode
? "input-edit-node"
: ""
}
disabled={disabled}
placeholder={editNode ? "Integer number" : "Type an integer number"}
onChange={(e) => {
onChange(e.target.value);

11
src/frontend/src/components/textAreaComponent/index.tsx
View file

@ -3,6 +3,7 @@ import { TypeModal } from "../../constants/enums";
import GenericModal from "../../modals/genericModal";
import { TextAreaComponentType } from "../../types/components";
import IconComponent from "../genericIconComponent";
import { Input } from "../ui/input";
export default function TextAreaComponent({
value,
@ -18,15 +19,14 @@ export default function TextAreaComponent({
}, [disabled]);
return (
<div className={disabled ? "pointer-events-none w-full " : " w-full"}>
<div className="flex w-full items-center">
<input
<Input
value={value}
disabled={disabled}
className={
(editNode
? " input-edit-node "
: " input-primary " + (disabled ? " input-disable" : "")) +
" nopan nodrag noundo nocopy w-full"
? "input-edit-node"
: "")
}
placeholder={"Type something..."}
onChange={(e) => {
@ -55,6 +55,5 @@ export default function TextAreaComponent({
</GenericModal>
</div>
</div>
</div>
);
}

2
src/frontend/src/components/ui/input.tsx
View file

@ -10,7 +10,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
<input
type={type}
className={cn(
"nopan nodrag noundo nocopy flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
"input-primary nopan nodrag noundo nocopy",
className
)}
ref={ref}

10
src/frontend/src/index.css
View file

@ -239,11 +239,9 @@ The cursor: default; property value restores the browser's default cursor style
.button-div-style {
@apply gap-2 flex
}
.input-primary:focus{
@apply focus:placeholder-transparent focus:ring-ring focus:border-ring
}
.input-primary {
@apply bg-background block text-left border-border form-input px-3 placeholder:text-muted-foreground rounded-md shadow-sm sm:text-sm truncate w-full;
.input-primary{
@apply placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 focus:placeholder-transparent focus:ring-ring focus:border-ring bg-background block text-left border-border form-input px-3 placeholder:text-muted-foreground rounded-md shadow-sm sm:text-sm truncate w-full
}
.input-edit-node{
@ -550,7 +548,7 @@ The cursor: default; property value restores the browser's default cursor style
@apply z-10 mt-1 max-h-60 overflow-auto rounded-md bg-background py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm
}
.dropdown-component-true-options {
@apply dropdown-component-options lg:w-[31.5%]
@apply dropdown-component-options lg:w-[32%]
}
.dropdown-component-false-options {
@apply dropdown-component-options w-full

3
src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
View file

@ -15,6 +15,7 @@ import {
} from "../../../../utils/styleUtils";
import { classNames } from "../../../../utils/utils";
import DisclosureComponent from "../DisclosureComponent";
import { Input } from "../../../../components/ui/input";
export default function ExtraSidebar() {
const { data } = useContext(typesContext);
@ -109,7 +110,7 @@ export default function ExtraSidebar() {
</div>
<Separator />
<div className="side-bar-search-div-placement">
<input
<Input
type="text"
name="search"
id="search"