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

Added multiple inputs possibility to InputComponent

Browse source
This commit is contained in:
Lucas Oliveira 2024-04-30 16:46:19 +02:00
commit a556f686e2
3 changed files with 43 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
View file

@ -18,6 +18,7 @@ export default function AddNewVariableButton({ children }): JSX.Element {
const [key, setKey] = useState("");
const [value, setValue] = useState("");
const [type, setType] = useState("");
const [fields, setFields] = useState<string[]>([]);
const [open, setOpen] = useState(false);
const setErrorData = useAlertStore((state) => state.setErrorData);
const componentFields = useTypesStore((state) => state.ComponentFields);
@ -91,6 +92,14 @@ export default function AddNewVariableButton({ children }): JSX.Element {
placeholder="Insert a value for the variable..."
className="w-full resize-none custom-scroll"
/>
<Label>Apply To Fields (optional)</Label>
<InputComponent
setSelectedOptions={(value) => setFields(value)}
selectedOptions={fields}
password={false}
options={Array.from(componentFields)}
placeholder="Choose a type for the variable..."
></InputComponent>
</div>
</BaseModal.Content>
<BaseModal.Footer>

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

@ -33,6 +33,8 @@ export default function InputComponent({
optionsIcon = "ChevronsUpDown",
selectedOption,
setSelectedOption,
selectedOptions = [],
setSelectedOptions,
options = [],
optionsPlaceholder = "Search options...",
optionsButton,
@ -101,13 +103,18 @@ export default function InputComponent({
value={
(selectedOption !== "" || !onChange) && setSelectedOption
? selectedOption
: (selectedOptions?.length !== 0 || !onChange) &&
setSelectedOptions
? selectedOptions?.join(", ")
: value
}
autoFocus={autoFocus}
disabled={disabled}
onClick={() => {
(selectedOption !== "" || !onChange) &&
setSelectedOption &&
(((selectedOption !== "" || !onChange) &&
setSelectedOption) ||
((selectedOptions?.length !== 0 || !onChange) &&
setSelectedOptions)) &&
setShowOptions(true);
}}
required={required}
@ -119,9 +126,11 @@ export default function InputComponent({
? " text-clip password "
: "",
editNode ? " input-edit-node " : "",
password && setSelectedOption ? "pr-[62.9px]" : "",
(!password && setSelectedOption) ||
(password && !setSelectedOption)
password && (setSelectedOption || setSelectedOptions)
? "pr-[62.9px]"
: "",
(!password && (setSelectedOption || setSelectedOptions)) ||
(password && !(setSelectedOption || setSelectedOptions))
? "pr-8"
: "",
@ -184,7 +193,15 @@ export default function InputComponent({
? ""
: currentValue
);
setShowOptions(false);
setSelectedOptions &&
setSelectedOptions(
selectedOptions?.includes(currentValue)
? selectedOptions.filter(
(item) => item !== currentValue
)
: [...selectedOptions, currentValue]
);
!setSelectedOptions && setShowOptions(false);
}}
>
<div className="group flex w-full items-center justify-between">
@ -192,7 +209,8 @@ export default function InputComponent({
<div
className={cn(
"relative mr-2 h-4 w-4",
selectedOption === option
selectedOption === option ||
selectedOptions?.includes(option)
? "opacity-100"
: "opacity-0"
)}
@ -228,12 +246,16 @@ export default function InputComponent({
<div
className={cn(
"pointer-events-auto absolute inset-y-0 h-full w-full cursor-pointer",
(selectedOption !== "" || !onChange) && setSelectedOption
((selectedOption !== "" || !onChange) && setSelectedOption) ||
((selectedOptions?.length !== 0 || !onChange) &&
setSelectedOptions)
? ""
: "hidden"
)}
onClick={
(selectedOption !== "" || !onChange) && setSelectedOption
((selectedOption !== "" || !onChange) && setSelectedOption) ||
((selectedOptions?.length !== 0 || !onChange) &&
setSelectedOptions)
? (e) => {
setShowOptions((old) => !old);
e.preventDefault();
@ -245,7 +267,7 @@ export default function InputComponent({
</>
)}
{setSelectedOption && (
{(setSelectedOption || setSelectedOptions) && (
<span
className={cn(
password && selectedOption === "" ? "right-8" : "right-0",

2
src/frontend/src/types/components/index.ts
View file

@ -28,6 +28,8 @@ export type InputComponentType = {
optionButton?: (option: string) => ReactElement;
selectedOption?: string;
setSelectedOption?: (value: string) => void;
selectedOptions?: string[];
setSelectedOptions?: (value: string[]) => void;
};
export type ToggleComponentType = {
enabled: boolean;