use portal for variable modal

langgenius · Jul 20, 2024 · 226f4f4 · 226f4f4
1 parent 28762da
commit 226f4f4
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 26 deletions.
diff --git a/web/app/components/workflow/panel/env-panel/index.tsx b/web/app/components/workflow/panel/env-panel/index.tsx
@@ -7,12 +7,11 @@ import { capitalize } from 'lodash-es'
 import {
   useStoreApi,
 } from 'reactflow'
-import { RiAddLine, RiCloseLine, RiDeleteBinLine, RiEditLine, RiLock2Line } from '@remixicon/react'
+import { RiCloseLine, RiDeleteBinLine, RiEditLine, RiLock2Line } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { useStore } from '@/app/components/workflow/store'
-import Button from '@/app/components/base/button'
 import { Env } from '@/app/components/base/icons/src/vender/line/others'
-import VariableModal from '@/app/components/workflow/panel/env-panel/variable-modal'
+import VariableTrigger from '@/app/components/workflow/panel/env-panel/variable-trigger'
 import type {
   EnvironmentVariable,
 } from '@/app/components/workflow/types'
@@ -162,10 +161,13 @@ const EnvPanel = () => {
       </div>
       <div className='shrink-0 py-1 px-4 system-sm-regular text-text-tertiary'>{t('workflow.env.envDescription')}</div>
       <div className='shrink-0 px-4 pt-2 pb-3'>
-        <Button variant='primary' onClick={() => setShowVariableModal(true)}>
-          <RiAddLine className='mr-1 w-4 h-4' />
-          <span className='system-sm-medium'>{t('workflow.env.envPanelButton')}</span>
-        </Button>
+        <VariableTrigger
+          open={showVariableModal}
+          setOpen={setShowVariableModal}
+          env={currentVar}
+          onSave={handleSave}
+          onClose={() => setCurrentVar(undefined)}
+        />
       </div>
       <div className='grow px-4 rounded-b-2xl overflow-y-auto'>
         {envList.map(env => (
@@ -196,18 +198,6 @@ const EnvPanel = () => {
           </div>
         ))}
       </div>
-      {showVariableModal && (
-        <div className='absolute top-0 left-[-352px] z-50'>
-          <VariableModal
-            env={currentVar}
-            onSave={handleSave}
-            onClose={() => {
-              setShowVariableModal(false)
-              setCurrentVar(undefined)
-            }}
-          />
-        </div>
-      )}
       <RemoveEffectVarConfirm
         isShow={showRemoveVarConfirm}
         onCancel={() => setShowRemoveConfirm(false)}

diff --git a/web/app/components/workflow/panel/env-panel/variable-modal.tsx b/web/app/components/workflow/panel/env-panel/variable-modal.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useClickAway } from 'ahooks'
 import { v4 as uuid4 } from 'uuid'
 import { RiCloseLine, RiQuestionLine } from '@remixicon/react'
 import { useContext } from 'use-context-selector'
@@ -29,11 +28,6 @@ const VariableModal = ({
   const [name, setName] = React.useState('')
   const [value, setValue] = React.useState<any>()
 
-  const ref = React.useRef(null)
-  useClickAway(() => {
-    onClose()
-  }, ref)
-
   const handleNameChange = (v: string) => {
     if (!v)
       return setName('')
@@ -70,7 +64,6 @@ const VariableModal = ({
 
   return (
     <div
-      ref={ref}
       className={cn('flex flex-col w-[360px] bg-components-panel-bg rounded-2xl h-full border-[0.5px] border-components-panel-border shadow-2xl')}
     >
       <div className='shrink-0 flex items-center justify-between mb-3 p-4 pb-0 text-text-primary system-xl-semibold'>

diff --git a/web/app/components/workflow/panel/env-panel/variable-trigger.tsx b/web/app/components/workflow/panel/env-panel/variable-trigger.tsx
@@ -0,0 +1,68 @@
+'use client'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { RiAddLine } from '@remixicon/react'
+import Button from '@/app/components/base/button'
+import VariableModal from '@/app/components/workflow/panel/env-panel/variable-modal'
+// import cn from '@/utils/classnames'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import type { EnvironmentVariable } from '@/app/components/workflow/types'
+
+type Props = {
+  open: boolean
+  setOpen: (value: React.SetStateAction<boolean>) => void
+  env?: EnvironmentVariable
+  onClose: () => void
+  onSave: (env: EnvironmentVariable) => void
+}
+
+const VariableTrigger = ({
+  open,
+  setOpen,
+  env,
+  onClose,
+  onSave,
+}: Props) => {
+  const { t } = useTranslation()
+
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={() => {
+        setOpen(v => !v)
+        open && onClose()
+      }}
+      placement='left-start'
+      offset={{
+        mainAxis: 8,
+        alignmentAxis: -104,
+      }}
+    >
+      <PortalToFollowElemTrigger onClick={() => {
+        setOpen(v => !v)
+        open && onClose()
+      }}>
+        <Button variant='primary'>
+          <RiAddLine className='mr-1 w-4 h-4' />
+          <span className='system-sm-medium'>{t('workflow.env.envPanelButton')}</span>
+        </Button>
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className='z-[11]'>
+        <VariableModal
+          env={env}
+          onSave={onSave}
+          onClose={() => {
+            onClose()
+            setOpen(false)
+          }}
+        />
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default VariableTrigger