From 192af8df9f8519dbb2b307a26d3747acb8bfa222 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Thu, 9 Jan 2025 11:16:33 +0800
Subject: [PATCH] feat: local and bundle support hide anim

---
 .../install-plugin/install-bundle/index.tsx     | 15 +++++++++++++--
 .../install-bundle/ready-to-install.tsx         |  8 +++++++-
 .../install-bundle/steps/install.tsx            |  3 +++
 .../install-from-local-package/index.tsx        | 17 +++++++++++++++--
 .../ready-to-install.tsx                        | 11 +++++++++--
 .../install-from-marketplace/index.tsx          |  2 ++
 6 files changed, 49 insertions(+), 7 deletions(-)

diff --git a/web/app/components/plugins/install-plugin/install-bundle/index.tsx b/web/app/components/plugins/install-plugin/install-bundle/index.tsx
index 035de8b781..84750d65ad 100644
--- a/web/app/components/plugins/install-plugin/install-bundle/index.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/index.tsx
@@ -6,6 +6,8 @@ import { InstallStep } from '../../types'
 import type { Dependency } from '../../types'
 import ReadyToInstall from './ready-to-install'
 import { useTranslation } from 'react-i18next'
+import useHideLogic from '../hooks/use-hide-logic'
+import cn from '@/utils/classnames'
 
 const i18nPrefix = 'plugin.installModal'
 
@@ -30,6 +32,13 @@ const InstallBundle: FC<Props> = ({
   const { t } = useTranslation()
   const [step, setStep] = useState<InstallStep>(installType === InstallType.fromMarketplace ? InstallStep.readyToInstall : InstallStep.uploading)
 
+  const {
+    modalClassName,
+    foldAnimInto,
+    setIsInstalling,
+    handleStartToInstall,
+  } = useHideLogic(onClose)
+
   const getTitle = useCallback(() => {
     if (step === InstallStep.uploadFailed)
       return t(`${i18nPrefix}.uploadFailed`)
@@ -42,8 +51,8 @@ const InstallBundle: FC<Props> = ({
   return (
     <Modal
       isShow={true}
-      onClose={onClose}
-      className='flex min-w-[560px] p-0 flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadows-shadow-xl'
+      onClose={foldAnimInto}
+      className={cn(modalClassName, 'flex min-w-[560px] p-0 flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadows-shadow-xl')}
       closable
     >
       <div className='flex pt-6 pl-6 pb-3 pr-14 items-start gap-2 self-stretch'>
@@ -54,6 +63,8 @@ const InstallBundle: FC<Props> = ({
       <ReadyToInstall
         step={step}
         onStepChange={setStep}
+        onStartToInstall={handleStartToInstall}
+        setIsInstalling={setIsInstalling}
         allPlugins={fromDSLPayload}
         onClose={onClose}
       />
diff --git a/web/app/components/plugins/install-plugin/install-bundle/ready-to-install.tsx b/web/app/components/plugins/install-plugin/install-bundle/ready-to-install.tsx
index b534f0c6b9..63c0b5b07e 100644
--- a/web/app/components/plugins/install-plugin/install-bundle/ready-to-install.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/ready-to-install.tsx
@@ -9,6 +9,8 @@ import type { Dependency, InstallStatusResponse, Plugin } from '../../types'
 type Props = {
   step: InstallStep
   onStepChange: (step: InstallStep) => void,
+  onStartToInstall: () => void
+  setIsInstalling: (isInstalling: boolean) => void
   allPlugins: Dependency[]
   onClose: () => void
   isFromMarketPlace?: boolean
@@ -17,6 +19,8 @@ type Props = {
 const ReadyToInstall: FC<Props> = ({
   step,
   onStepChange,
+  onStartToInstall,
+  setIsInstalling,
   allPlugins,
   onClose,
   isFromMarketPlace,
@@ -27,13 +31,15 @@ const ReadyToInstall: FC<Props> = ({
     setInstallStatus(installStatus)
     setInstalledPlugins(plugins)
     onStepChange(InstallStep.installed)
-  }, [onStepChange])
+    setIsInstalling(false)
+  }, [onStepChange, setIsInstalling])
   return (
     <>
       {step === InstallStep.readyToInstall && (
         <Install
           allPlugins={allPlugins}
           onCancel={onClose}
+          onStartToInstall={onStartToInstall}
           onInstalled={handleInstalled}
           isFromMarketPlace={isFromMarketPlace}
         />
diff --git a/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx b/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx
index a1a17f2df1..c70e2759d0 100644
--- a/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx
@@ -12,6 +12,7 @@ const i18nPrefix = 'plugin.installModal'
 
 type Props = {
   allPlugins: Dependency[]
+  onStartToInstall?: () => void
   onInstalled: (plugins: Plugin[], installStatus: InstallStatusResponse[]) => void
   onCancel: () => void
   isFromMarketPlace?: boolean
@@ -20,6 +21,7 @@ type Props = {
 
 const Install: FC<Props> = ({
   allPlugins,
+  onStartToInstall,
   onInstalled,
   onCancel,
   isFromMarketPlace,
@@ -65,6 +67,7 @@ const Install: FC<Props> = ({
     },
   })
   const handleInstall = () => {
+    onStartToInstall?.()
     installOrUpdate({
       payload: allPlugins.filter((_d, index) => selectedIndexes.includes(index)),
       plugin: selectedPlugins,
diff --git a/web/app/components/plugins/install-plugin/install-from-local-package/index.tsx b/web/app/components/plugins/install-plugin/install-from-local-package/index.tsx
index c126a38a1d..b37ab60079 100644
--- a/web/app/components/plugins/install-plugin/install-from-local-package/index.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-local-package/index.tsx
@@ -9,6 +9,8 @@ import { useTranslation } from 'react-i18next'
 import useGetIcon from '@/app/components/plugins/install-plugin/base/use-get-icon'
 import ReadyToInstallPackage from './ready-to-install'
 import ReadyToInstallBundle from '../install-bundle/ready-to-install'
+import useHideLogic from '../hooks/use-hide-logic'
+import cn from '@/utils/classnames'
 
 const i18nPrefix = 'plugin.installModal'
 
@@ -31,6 +33,13 @@ const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({
   const isBundle = file.name.endsWith('.difybndl')
   const [dependencies, setDependencies] = useState<Dependency[]>([])
 
+  const {
+    modalClassName,
+    foldAnimInto,
+    setIsInstalling,
+    handleStartToInstall,
+  } = useHideLogic(onClose)
+
   const getTitle = useCallback(() => {
     if (step === InstallStep.uploadFailed)
       return t(`${i18nPrefix}.uploadFailed`)
@@ -76,8 +85,8 @@ const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({
   return (
     <Modal
       isShow={true}
-      onClose={onClose}
-      className='flex min-w-[560px] p-0 flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadows-shadow-xl'
+      onClose={foldAnimInto}
+      className={cn(modalClassName, 'flex min-w-[560px] p-0 flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadows-shadow-xl')}
       closable
     >
       <div className='flex pt-6 pl-6 pb-3 pr-14 items-start gap-2 self-stretch'>
@@ -99,6 +108,8 @@ const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({
         <ReadyToInstallBundle
           step={step}
           onStepChange={setStep}
+          onStartToInstall={handleStartToInstall}
+          setIsInstalling={setIsInstalling}
           onClose={onClose}
           allPlugins={dependencies}
         />
@@ -106,6 +117,8 @@ const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({
         <ReadyToInstallPackage
           step={step}
           onStepChange={setStep}
+          onStartToInstall={handleStartToInstall}
+          setIsInstalling={setIsInstalling}
           onClose={onClose}
           uniqueIdentifier={uniqueIdentifier}
           manifest={manifest}
diff --git a/web/app/components/plugins/install-plugin/install-from-local-package/ready-to-install.tsx b/web/app/components/plugins/install-plugin/install-from-local-package/ready-to-install.tsx
index 78907f4494..cee7e4767f 100644
--- a/web/app/components/plugins/install-plugin/install-from-local-package/ready-to-install.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-local-package/ready-to-install.tsx
@@ -10,6 +10,8 @@ import useRefreshPluginList from '../hooks/use-refresh-plugin-list'
 type Props = {
   step: InstallStep
   onStepChange: (step: InstallStep) => void,
+  onStartToInstall: () => void
+  setIsInstalling: (isInstalling: boolean) => void
   onClose: () => void
   uniqueIdentifier: string | null,
   manifest: PluginDeclaration | null,
@@ -20,6 +22,8 @@ type Props = {
 const ReadyToInstall: FC<Props> = ({
   step,
   onStepChange,
+  onStartToInstall,
+  setIsInstalling,
   onClose,
   uniqueIdentifier,
   manifest,
@@ -31,13 +35,15 @@ const ReadyToInstall: FC<Props> = ({
   const handleInstalled = useCallback(() => {
     onStepChange(InstallStep.installed)
     refreshPluginList(manifest)
-  }, [manifest, onStepChange, refreshPluginList])
+    setIsInstalling(false)
+  }, [manifest, onStepChange, refreshPluginList, setIsInstalling])
 
   const handleFailed = useCallback((errorMsg?: string) => {
     onStepChange(InstallStep.installFailed)
+    setIsInstalling(false)
     if (errorMsg)
       onError(errorMsg)
-  }, [onError, onStepChange])
+  }, [onError, onStepChange, setIsInstalling])
 
   return (
     <>
@@ -49,6 +55,7 @@ const ReadyToInstall: FC<Props> = ({
             onCancel={onClose}
             onInstalled={handleInstalled}
             onFailed={handleFailed}
+            onStartToInstall={onStartToInstall}
           />
         )
       }
diff --git a/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx b/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx
index 6ce0bb14ed..a5ce01d041 100644
--- a/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx
@@ -85,6 +85,8 @@ const InstallFromMarketplace: React.FC<InstallFromMarketplaceProps> = ({
           <ReadyToInstallBundle
             step={step}
             onStepChange={setStep}
+            onStartToInstall={handleStartToInstall}
+            setIsInstalling={setIsInstalling}
             onClose={onClose}
             allPlugins={dependencies!}
             isFromMarketPlace