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 [key, setKey] = useState("");
const [value, setValue] = useState(""); const [value, setValue] = useState("");
const [type, setType] = useState(""); const [type, setType] = useState("");
const [fields, setFields] = useState<string[]>([]);
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const setErrorData = useAlertStore((state) => state.setErrorData); const setErrorData = useAlertStore((state) => state.setErrorData);
const componentFields = useTypesStore((state) => state.ComponentFields); const componentFields = useTypesStore((state) => state.ComponentFields);
@ -91,6 +92,14 @@ export default function AddNewVariableButton({ children }): JSX.Element {
placeholder="Insert a value for the variable..." placeholder="Insert a value for the variable..."
className="w-full resize-none custom-scroll" 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> </div>
</BaseModal.Content> </BaseModal.Content>
<BaseModal.Footer> <BaseModal.Footer>

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

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