From 9a58c92d402f6436fa339ff7b58beead0a9ebbf8 Mon Sep 17 00:00:00 2001
From: Aminejv <elouartinra@hotmail.com>
Date: Wed, 27 Oct 2021 09:48:56 +0100
Subject: [PATCH] feat(Upload): remove open-upload-jumper custom event

---
 components/core/Upload/Popup.js    | 74 +++++++++++++++++-------------
 components/core/Upload/Provider.js |  2 -
 components/core/Upload/index.js    |  7 ++-
 3 files changed, 46 insertions(+), 37 deletions(-)

diff --git a/components/core/Upload/Popup.js b/components/core/Upload/Popup.js
index 382115df..2f6d9352 100644
--- a/components/core/Upload/Popup.js
+++ b/components/core/Upload/Popup.js
@@ -169,41 +169,49 @@ export function Popup() {
     { hideUploadPopup, expandUploadSummary, collapseUploadSummary, cancelAutoCollapseOnMouseEnter },
   ] = useUploadPopup({ totalFilesSummary });
 
-  if (!popupState.isVisible) return null;
-
   return (
-    <div
-      css={STYLES_POPUP_WRAPPER}
-      onMouseEnter={handleOnMouseEnter}
-      onMouseLeave={handleOnMouseLeave}
-    >
-      <div css={[STYLES_POPUP_CONTENT]}>
-        <AnimatePresence>
-          {popupState.isSummaryExpanded ? (
-            <motion.div
-              initial={{ y: 400 }}
-              animate={{ y: 0 }}
-              exit={{ y: 400 }}
-              transition={{ type: "spring", stiffness: 170, damping: 26 }}
-              onMouseEnter={cancelAutoCollapseOnMouseEnter}
+    <AnimatePresence>
+      {popupState.isVisible ? (
+        <motion.div
+          css={STYLES_POPUP_WRAPPER}
+          initial={{ opacity: 0, y: 0 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: 10 }}
+          onMouseEnter={handleOnMouseEnter}
+          onMouseLeave={handleOnMouseLeave}
+        >
+          <div css={[STYLES_POPUP_CONTENT]}>
+            <AnimatePresence>
+              {popupState.isSummaryExpanded ? (
+                <motion.div
+                  initial={{ y: 400 }}
+                  animate={{ y: 0 }}
+                  exit={{ y: 400 }}
+                  transition={{ type: "spring", stiffness: 170, damping: 26 }}
+                  onMouseEnter={cancelAutoCollapseOnMouseEnter}
+                >
+                  <Summary uploadSummary={uploadSummary} />
+                </motion.div>
+              ) : null}
+            </AnimatePresence>
+            <Header
+              totalFilesSummary={totalFilesSummary}
+              popupState={popupState}
+              expandUploadSummary={expandUploadSummary}
+              collapseUploadSummary={collapseUploadSummary}
+            />
+          </div>
+          <Show when={isHovered && isFinished}>
+            <button
+              css={STYLES_DISMISS_BUTTON}
+              onClick={() => (hideUploadPopup(), resetUploadState())}
             >
-              <Summary uploadSummary={uploadSummary} />
-            </motion.div>
-          ) : null}
-        </AnimatePresence>
-        <Header
-          totalFilesSummary={totalFilesSummary}
-          popupState={popupState}
-          expandUploadSummary={expandUploadSummary}
-          collapseUploadSummary={collapseUploadSummary}
-        />
-      </div>
-      <Show when={isHovered && isFinished}>
-        <button css={STYLES_DISMISS_BUTTON} onClick={() => (hideUploadPopup(), resetUploadState())}>
-          <SVG.Dismiss width={16} />
-        </button>
-      </Show>
-    </div>
+              <SVG.Dismiss width={16} />
+            </button>
+          </Show>
+        </motion.div>
+      ) : null}
+    </AnimatePresence>
   );
 }
 
diff --git a/components/core/Upload/Provider.js b/components/core/Upload/Provider.js
index b21ec810..71fb2e76 100644
--- a/components/core/Upload/Provider.js
+++ b/components/core/Upload/Provider.js
@@ -23,8 +23,6 @@ export const Provider = ({ children, page, data, viewer }) => {
     viewer,
   });
 
-  useEventListener({ type: "open-upload-jumper", handler: showUploadModal });
-
   const providerValue = React.useMemo(
     () => [
       { ...uploadState, isUploadJumperVisible },
diff --git a/components/core/Upload/index.js b/components/core/Upload/index.js
index 8e10b6e6..3adb2b75 100644
--- a/components/core/Upload/index.js
+++ b/components/core/Upload/index.js
@@ -6,6 +6,7 @@ import { ModalPortal } from "../ModalPortal";
 import { Provider } from "~/components/core/Upload/Provider";
 import { Popup } from "~/components/core/Upload/Popup";
 import { UploadJumper as Jumper } from "~/components/core/Upload/Jumper";
+import { useUploadContext } from "~/components/core/Upload/Provider";
 
 import DropIndicator from "~/components/core/Upload/DropIndicator";
 
@@ -13,11 +14,12 @@ import DropIndicator from "~/components/core/Upload/DropIndicator";
  * Root
  * -----------------------------------------------------------------------------------------------*/
 const Root = ({ children, data }) => {
+  const [{ isUploadJumperVisible }] = useUploadContext();
   return (
     <>
       {children}
+      {isUploadJumperVisible && <Jumper data={data} />}
       <ModalPortal>
-        <Jumper data={data} />
         <Popup />
         <DropIndicator data={data} />
       </ModalPortal>
@@ -30,12 +32,13 @@ const Root = ({ children, data }) => {
  * -----------------------------------------------------------------------------------------------*/
 
 const Trigger = ({ viewer, css, children, ...props }) => {
+  const [, { showUploadJumper }] = useUploadContext();
   const showUploadModal = () => {
     if (!viewer) {
       Events.dispatchCustomEvent({ name: "slate-global-open-cta", detail: {} });
       return;
     }
-    Events.dispatchCustomEvent({ name: "open-upload-jumper" });
+    showUploadJumper();
   };
 
   return (