list almost working

space_flow/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx

@@ -8,6 +8,7 @@ import {
 import { useEffect, useRef, useState } from "react";
 import InputComponent from "../../../../components/inputComponent";
 import ToggleComponent from "../../../../components/toggleComponent";
+import InputListComponent from "../../../../components/inputListComponent";
 
 export default function ParameterComponent({
   left,
@@ -23,6 +24,12 @@ export default function ParameterComponent({
   const ref = useRef(null);
   const updateNodeInternals = useUpdateNodeInternals();
   const [position, setPosition] = useState(0);
+  function updatePos(){
+    if (ref.current && ref.current.offsetTop && ref.current.clientHeight) {
+      setPosition(ref.current.offsetTop + ref.current.clientHeight / 2);
+      updateNodeInternals(data.id);
+    }
+  }
   useEffect(() => {
     if (ref.current && ref.current.offsetTop && ref.current.clientHeight) {
       setPosition(ref.current.offsetTop + ref.current.clientHeight / 2);
@@ -60,12 +67,23 @@ export default function ParameterComponent({
         </Tooltip>
         {left === true && type === "str" ? (
           <div className="mt-2 w-full">
+            {/* data.node.template[name].list */false ? 
+            <InputListComponent
+            value={!data.node.template[name].value || data.node.template[name].value === "" ? [""] : data.node.template[name].value}
+              onChange={(t) => {
+                data.node.template[name].value = t;
+                updatePos();
+              }}
+            />
+            :
             <InputComponent
             value={data.node.template[name].value ?? ""}
               onChange={(t) => {
                 data.node.template[name].value = t;
               }}
             />
+            }
+            
           </div>
         ) : left === true && type === "bool" ? (
           <div className="mt-2">

space_flow/src/CustomNodes/GenericNode/index.tsx

@@ -72,7 +72,7 @@ export default function GenericNode({ data }) {
           <ParameterComponent
             data={data}
             color={nodeColors[data.type]}
-            title={data.name +" |" + data.node.base_classes.map((b) => (" " + b))}
+            title={data.name}
             tooltipTitle={"Type: str"}
             id={data.name + "|" + data.id + data.node.base_classes.map((b) => ("|" + b))}
             type={'str'}

space_flow/src/components/inputListComponent/index.tsx

@@ -1,29 +1,49 @@
+import { PlusIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import { useState } from "react";
 
-var _ = require('lodash');
+var _ = require("lodash");
 
-export default function InputListComponent({value, onChange}){
-    const [inputList, setInputList] = useState(value ?? []);
+export default function InputListComponent({ value, onChange }) {
+  const [inputList, setInputList] = useState(value ?? [""]);
 
-    return (
-        <>
-            {inputList.map((i, idx) =>(
-                <input
-                type="text"
-                value={i}
-                className="block w-full form-input rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
-                placeholder="Type a text"
-                onChange={(e) => {
-                    setInputList((old) => {
-                        let newInputList = _.cloneDeep(old);
-                        newInputList[idx] = e.target.value;
-                        return newInputList;
-                    });
-                    onChange(inputList);
-                }}
-                />
-            ))}
-            
-        </>
-    );
-}
+  return (
+    <div className="flex flex-col gap-3">
+      {inputList.map((i, idx) => (
+        <div key={idx} className="w-full flex gap-3">
+          <input
+            type="text"
+            value={i}
+            className="block w-full form-input rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+            placeholder="Type a text"
+            onChange={(e) => {
+              setInputList((old) => {
+                let newInputList = _.cloneDeep(old);
+                newInputList[idx] = e.target.value;
+                return newInputList;
+              });
+              onChange(inputList);
+            }}
+          />
+          {idx === inputList.length - 1 ? 
+          <button onClick={() => {setInputList((old) => {
+            let newInputList = _.cloneDeep(old);
+            newInputList.push('');
+            return newInputList;
+          });
+          onChange(inputList);}}>
+            <PlusIcon className="w-4 h-4 hover:text-blue-600" />
+          </button> 
+          : <button onClick={() => {setInputList((old) => {
+            let newInputList = _.cloneDeep(old);
+            newInputList.splice(idx, 1);
+            console.log(newInputList);
+            return newInputList;
+          });
+          onChange(inputList);}}>
+            <XMarkIcon className="w-4 h-4 hover:text-red-600" />
+            </button>}
+        </div>
+      ))}
+    </div>
+  );
+}