change httpinput dropdown menu (#28)

labring · Feb 27, 2024 · 351a3c4 · 351a3c4
1 parent fe9dd36
commit 351a3c4
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 11 deletions.
diff --git a/packages/web/components/common/Input/HttpInput/Editor.tsx b/packages/web/components/common/Input/HttpInput/Editor.tsx
@@ -1,4 +1,4 @@
-import { useState, useRef, useTransition, useEffect } from 'react';
+import { useState, useRef, useTransition, useEffect, useMemo } from 'react';
 import { LexicalComposer } from '@lexical/react/LexicalComposer';
 import { PlainTextPlugin } from '@lexical/react/LexicalPlainTextPlugin';
 import { ContentEditable } from '@lexical/react/LexicalContentEditable';
@@ -60,7 +60,19 @@ export default function Editor({
   useEffect(() => {
     if (focus) return;
     setKey(getNanoid(6));
-  }, [value, variables.length, updateTrigger]);
+  }, [value, variables.length]);
+
+  useEffect(() => {
+    setKey(getNanoid(6));
+  }, [updateTrigger]);
+
+  const dropdownVariables = useMemo(
+    () =>
+      variables.filter((item) => {
+        return item.key.includes(currentValue || '') && item.key !== currentValue;
+      }),
+    [currentValue]
+  );
 
   return (
     <Box position={'relative'} width={'full'} h={`${h}px`} cursor={'text'}>
@@ -107,8 +119,8 @@ export default function Editor({
         <OnBlurPlugin onBlur={onBlur} />
         <SingleLinePlugin />
       </LexicalComposer>
-      {focus && !currentValue && hasDropDownPlugin && (
-        <DropDownMenu variables={variables} setDropdownValue={setDropdownValue} />
+      {focus && hasDropDownPlugin && (
+        <DropDownMenu variables={dropdownVariables} setDropdownValue={setDropdownValue} />
       )}
     </Box>
   );

diff --git a/packages/web/components/common/Input/HttpInput/index.tsx b/packages/web/components/common/Input/HttpInput/index.tsx
@@ -15,7 +15,7 @@ const HttpInput = ({
   h,
   placeholder,
   setDropdownValue,
-  updateTriger
+  updateTrigger
 }: {
   hasVariablePlugin?: boolean;
   hasDropDownPlugin?: boolean;
@@ -26,7 +26,7 @@ const HttpInput = ({
   h?: number;
   placeholder?: string;
   setDropdownValue?: (value: string) => void;
-  updateTriger?: boolean;
+  updateTrigger?: boolean;
 }) => {
   const [currentValue, setCurrentValue] = React.useState(value);
 
@@ -61,7 +61,7 @@ const HttpInput = ({
         onBlur={onBlurInput}
         placeholder={placeholder}
         setDropdownValue={setDropdownValue}
-        updateTrigger={updateTriger}
+        updateTrigger={updateTrigger}
       />
     </>
   );

diff --git a/packages/web/components/common/Textarea/PromptEditor/modules/DropDownMenu/index.tsx b/packages/web/components/common/Textarea/PromptEditor/modules/DropDownMenu/index.tsx
@@ -18,7 +18,7 @@ export default function DropDownMenu({
         setHighlightedIndex((prevIndex) => Math.max(prevIndex - 1, 0));
       } else if (event.keyCode === 40) {
         setHighlightedIndex((prevIndex) => Math.min(prevIndex + 1, variables.length - 1));
-      } else if (event.keyCode === 13) {
+      } else if (event.keyCode === 13 && variables[highlightedIndex]?.key) {
         setDropdownValue?.(variables[highlightedIndex].key);
       }
     },

diff --git a/projects/app/src/components/core/module/Flow/components/nodes/NodeHttp/index.tsx b/projects/app/src/components/core/module/Flow/components/nodes/NodeHttp/index.tsx
@@ -326,6 +326,13 @@ const RenderForm = ({
   const [updateTrigger, setUpdateTrigger] = useState(false);
   const [shouldUpdateNode, setShouldUpdateNode] = useState(false);
 
+  const leftVariables = useMemo(() => {
+    return variables.filter((variable) => {
+      const existVariables = list.map((item) => item.key);
+      return !existVariables.includes(variable.key);
+    });
+  }, [list, variables]);
+
   useEffect(() => {
     setList(input.value || []);
   }, [input.value]);
@@ -402,14 +409,15 @@ const RenderForm = ({
                   hasDropDownPlugin={true}
                   setDropdownValue={(value) => {
                     handleKeyChange(index, value);
+                    setUpdateTrigger((prev) => !prev);
                   }}
                   placeholder={t('core.module.http.Props name')}
                   value={item.key}
-                  variables={variables}
+                  variables={leftVariables}
                   onBlur={(val) => {
                     handleKeyChange(index, val);
                   }}
-                  updateTriger={updateTrigger}
+                  updateTrigger={updateTrigger}
                 />
               </Td>
               <Td p={0}>
@@ -449,7 +457,7 @@ const RenderForm = ({
                 placeholder={t('core.module.http.Add props')}
                 value={''}
                 h={40}
-                variables={variables}
+                variables={leftVariables}
                 onBlur={(val) => {
                   handleAddNewProps(val);
                 }}