From 3250b651f614866d026d6123dc696409744d706d Mon Sep 17 00:00:00 2001
From: Aminejv <elouartinra@hotmail.com>
Date: Thu, 20 Jan 2022 19:05:05 +0100
Subject: [PATCH] feat(Jumpers): move AnimatePresence up in the tree

---
 .../system/components/GlobalCarousel/index.js |  80 ++++++------
 .../GlobalCarousel/jumpers/EditInfo.js        |  58 ++++-----
 .../GlobalCarousel/jumpers/FileDescription.js |  62 +++++----
 .../GlobalCarousel/jumpers/MoreInfo.js        |  96 ++++++--------
 .../GlobalCarousel/jumpers/Share.js           | 122 ++++++++----------
 5 files changed, 194 insertions(+), 224 deletions(-)

diff --git a/components/system/components/GlobalCarousel/index.js b/components/system/components/GlobalCarousel/index.js
index c8b30c4d..ebc77333 100644
--- a/components/system/components/GlobalCarousel/index.js
+++ b/components/system/components/GlobalCarousel/index.js
@@ -250,7 +250,9 @@ function CarouselHeader({
     <>
       <ModalPortal>
         {isOwner && (
-          <Jumpers.EditInfo file={file} isOpen={isEditInfoVisible} onClose={hideEditInfo} />
+          <AnimatePresence>
+            {isEditInfoVisible && <Jumpers.EditInfo file={file} onClose={hideEditInfo} />}
+          </AnimatePresence>
         )}
         {isOwner && (
           <AnimatePresence>
@@ -259,26 +261,27 @@ function CarouselHeader({
             )}
           </AnimatePresence>
         )}
-        <Jumpers.FileDescription
-          file={file}
-          isOpen={isFileDescriptionVisible}
-          onClose={hideFileDescription}
-        />
-        <Jumpers.MoreInfo
-          viewer={viewer}
-          external={external}
-          isOwner={isOwner}
-          file={file}
-          isOpen={isMoreInfoVisible}
-          onClose={hideMoreInfo}
-        />
-        <Jumpers.Share
-          file={file}
-          data={data}
-          viewer={viewer}
-          isOpen={isShareFileVisible}
-          onClose={hideShareFile}
-        />
+        <AnimatePresence>
+          {isFileDescriptionVisible && (
+            <Jumpers.FileDescription file={file} onClose={hideFileDescription} />
+          )}
+        </AnimatePresence>
+        <AnimatePresence>
+          {isMoreInfoVisible && (
+            <Jumpers.MoreInfo
+              viewer={viewer}
+              external={external}
+              isOwner={isOwner}
+              file={file}
+              onClose={hideMoreInfo}
+            />
+          )}
+        </AnimatePresence>
+        <AnimatePresence>
+          {isShareFileVisible && (
+            <Jumpers.Share file={file} data={data} viewer={viewer} onClose={hideShareFile} />
+          )}
+        </AnimatePresence>
       </ModalPortal>
 
       <nav css={STYLES_HEADER_WRAPPER} {...props}>
@@ -575,7 +578,9 @@ function CarouselFooterMobile({ file, onAction, external, isOwner, data, viewer
     <>
       <ModalPortal>
         {isOwner && (
-          <Jumpers.EditInfoMobile file={file} isOpen={isEditInfoVisible} onClose={hideEditInfo} />
+          <AnimatePresence>
+            {isEditInfoVisible && <Jumpers.EditInfoMobile file={file} onClose={hideEditInfo} />}
+          </AnimatePresence>
         )}
         {isOwner && (
           <AnimatePresence>
@@ -584,21 +589,22 @@ function CarouselFooterMobile({ file, onAction, external, isOwner, data, viewer
             )}
           </AnimatePresence>
         )}
-        <Jumpers.ShareMobile
-          file={file}
-          isOpen={isShareFileVisible}
-          data={data}
-          viewer={viewer}
-          onClose={hideShareFile}
-        />
-        <Jumpers.MoreInfoMobile
-          viewer={viewer}
-          external={external}
-          isOwner={isOwner}
-          file={file}
-          isOpen={isMoreInfoVisible}
-          onClose={hideMoreInfo}
-        />
+        <AnimatePresence>
+          {isShareFileVisible && (
+            <Jumpers.ShareMobile file={file} data={data} viewer={viewer} onClose={hideShareFile} />
+          )}
+        </AnimatePresence>
+        <AnimatePresence>
+          {isMoreInfoVisible && (
+            <Jumpers.MoreInfoMobile
+              viewer={viewer}
+              external={external}
+              isOwner={isOwner}
+              file={file}
+              onClose={hideMoreInfo}
+            />
+          )}
+        </AnimatePresence>
       </ModalPortal>
       <AnimateSharedLayout>
         <nav css={STYLES_CAROUSEL_MOBILE_FOOTER}>
diff --git a/components/system/components/GlobalCarousel/jumpers/EditInfo.js b/components/system/components/GlobalCarousel/jumpers/EditInfo.js
index c122e5c9..a4c7318d 100644
--- a/components/system/components/GlobalCarousel/jumpers/EditInfo.js
+++ b/components/system/components/GlobalCarousel/jumpers/EditInfo.js
@@ -161,43 +161,35 @@ function UpdateFileForm({ file, isMobile, onClose }) {
 
 /* -----------------------------------------------------------------------------------------------*/
 
-export function EditInfo({ file, isOpen, onClose }) {
+export function EditInfo({ file, onClose }) {
   return (
-    <Jumper.AnimatePresence>
-      {isOpen ? (
-        <Jumper.Root onClose={onClose}>
-          <Jumper.Header>
-            <System.H5 color="textBlack">Edit info</System.H5>
-            <Jumper.Dismiss />
-          </Jumper.Header>
-          <Jumper.Divider />
-          <Jumper.ObjectInfo file={file} />
-          <Jumper.Divider />
-          <UpdateFileForm key={file.id} file={file} isMobile={false} onClose={onClose} />
-        </Jumper.Root>
-      ) : null}
-    </Jumper.AnimatePresence>
+    <Jumper.Root onClose={onClose}>
+      <Jumper.Header>
+        <System.H5 color="textBlack">Edit info</System.H5>
+        <Jumper.Dismiss />
+      </Jumper.Header>
+      <Jumper.Divider />
+      <Jumper.ObjectInfo file={file} />
+      <Jumper.Divider />
+      <UpdateFileForm key={file.id} file={file} isMobile={false} onClose={onClose} />
+    </Jumper.Root>
   );
 }
 
-export function EditInfoMobile({ file, isOpen, withDismissButton, onClose }) {
+export function EditInfoMobile({ file, withDismissButton, onClose }) {
   return (
-    <MobileJumper.AnimatePresence>
-      {isOpen ? (
-        <MobileJumper.Root onClose={onClose}>
-          <System.Divider height={1} color="borderGrayLight" />
-          <MobileJumper.ObjectInfo file={file} />
-          <System.Divider height={1} color="borderGrayLight" />
-          <MobileJumper.Header>
-            <System.H5 as="p" color="textBlack">
-              Edit Info
-            </System.H5>
-            {withDismissButton ? <MobileJumper.Dismiss /> : null}
-          </MobileJumper.Header>
-          <System.Divider height={1} color="borderGrayLight" />
-          <UpdateFileForm isMobile key={file.id} file={file} onClose={onClose} />
-        </MobileJumper.Root>
-      ) : null}
-    </MobileJumper.AnimatePresence>
+    <MobileJumper.Root onClose={onClose}>
+      <System.Divider height={1} color="borderGrayLight" />
+      <MobileJumper.ObjectInfo file={file} />
+      <System.Divider height={1} color="borderGrayLight" />
+      <MobileJumper.Header>
+        <System.H5 as="p" color="textBlack">
+          Edit Info
+        </System.H5>
+        {withDismissButton ? <MobileJumper.Dismiss /> : null}
+      </MobileJumper.Header>
+      <System.Divider height={1} color="borderGrayLight" />
+      <UpdateFileForm isMobile key={file.id} file={file} onClose={onClose} />
+    </MobileJumper.Root>
   );
 }
diff --git a/components/system/components/GlobalCarousel/jumpers/FileDescription.js b/components/system/components/GlobalCarousel/jumpers/FileDescription.js
index 7e736037..d1387d51 100644
--- a/components/system/components/GlobalCarousel/jumpers/FileDescription.js
+++ b/components/system/components/GlobalCarousel/jumpers/FileDescription.js
@@ -7,40 +7,36 @@ import { Show } from "~/components/utility/Show";
 
 import LinkIcon from "~/components/core/LinkIcon";
 
-export function FileDescription({ file, isOpen, onClose }) {
+export function FileDescription({ file, onClose }) {
   return (
-    <Jumper.AnimatePresence>
-      {isOpen ? (
-        <Jumper.Root onClose={onClose}>
-          <Jumper.Header>
-            <div>
-              <System.H3 as="h1" nbrOflines={1} title={file.name || file.filename}>
-                {file.name || file.filename}
-              </System.H3>
-              <Show when={file.isLink}>
-                <div style={{ marginTop: 5 }} css={Styles.HORIZONTAL_CONTAINER_CENTERED}>
-                  <LinkIcon file={file} width={12} height={12} />
-                  <System.P2
-                    as="a"
-                    nbrOflines={1}
-                    href={file.url}
-                    target="_blank"
-                    css={Styles.LINK}
-                    style={{ marginLeft: 5 }}
-                  >
-                    {file.url}
-                  </System.P2>
-                </div>
-              </Show>
+    <Jumper.Root onClose={onClose}>
+      <Jumper.Header>
+        <div>
+          <System.H3 as="h1" nbrOflines={1} title={file.name || file.filename}>
+            {file.name || file.filename}
+          </System.H3>
+          <Show when={file.isLink}>
+            <div style={{ marginTop: 5 }} css={Styles.HORIZONTAL_CONTAINER_CENTERED}>
+              <LinkIcon file={file} width={12} height={12} />
+              <System.P2
+                as="a"
+                nbrOflines={1}
+                href={file.url}
+                target="_blank"
+                css={Styles.LINK}
+                style={{ marginLeft: 5 }}
+              >
+                {file.url}
+              </System.P2>
             </div>
-            <Jumper.Dismiss autoFocus />
-          </Jumper.Header>
-          <Jumper.Divider />
-          <Jumper.Item>
-            <System.P2>{file.body}</System.P2>
-          </Jumper.Item>
-        </Jumper.Root>
-      ) : null}
-    </Jumper.AnimatePresence>
+          </Show>
+        </div>
+        <Jumper.Dismiss autoFocus />
+      </Jumper.Header>
+      <Jumper.Divider />
+      <Jumper.Item>
+        <System.P2>{file.body}</System.P2>
+      </Jumper.Item>
+    </Jumper.Root>
   );
 }
diff --git a/components/system/components/GlobalCarousel/jumpers/MoreInfo.js b/components/system/components/GlobalCarousel/jumpers/MoreInfo.js
index 36492345..2986e024 100644
--- a/components/system/components/GlobalCarousel/jumpers/MoreInfo.js
+++ b/components/system/components/GlobalCarousel/jumpers/MoreInfo.js
@@ -361,68 +361,56 @@ function FileMetadata({ file, ...props }) {
 
 /* -----------------------------------------------------------------------------------------------*/
 
-export function MoreInfo({ external, viewer, isOwner, file, isOpen, onClose }) {
+export function MoreInfo({ external, viewer, isOwner, file, onClose }) {
   const isFileOwner = !external && isOwner && viewer;
 
   return (
-    <Jumper.AnimatePresence>
-      {isOpen ? (
-        <Jumper.Root onClose={onClose}>
-          <Jumper.Header>
-            <System.H5 color="textBlack">More info</System.H5>
-            <Jumper.Dismiss autoFocus />
-          </Jumper.Header>
-          <Jumper.Divider />
-          <Jumper.Item
-            css={Styles.HORIZONTAL_CONTAINER}
-            style={{ paddingTop: 0, paddingBottom: 0, flexGrow: 1 }}
-          >
-            <CoverImageUpload file={file} viewer={viewer} isFileOwner={isFileOwner} />
-            <System.Divider
-              style={{ marginLeft: 20, marginRight: 20 }}
-              color="borderGrayLight4"
-              width={1}
-              height="unset"
-            />
-            <FileMetadata file={file} style={{ width: "100%", marginTop: 14 }} />
-          </Jumper.Item>
-        </Jumper.Root>
-      ) : null}
-    </Jumper.AnimatePresence>
+    <Jumper.Root onClose={onClose}>
+      <Jumper.Header>
+        <System.H5 color="textBlack">More info</System.H5>
+        <Jumper.Dismiss autoFocus />
+      </Jumper.Header>
+      <Jumper.Divider />
+      <Jumper.Item
+        css={Styles.HORIZONTAL_CONTAINER}
+        style={{ paddingTop: 0, paddingBottom: 0, flexGrow: 1 }}
+      >
+        <CoverImageUpload file={file} viewer={viewer} isFileOwner={isFileOwner} />
+        <System.Divider
+          style={{ marginLeft: 20, marginRight: 20 }}
+          color="borderGrayLight4"
+          width={1}
+          height="unset"
+        />
+        <FileMetadata file={file} style={{ width: "100%", marginTop: 14 }} />
+      </Jumper.Item>
+    </Jumper.Root>
   );
 }
 
-export function MoreInfoMobile({ external, viewer, isOwner, file, isOpen, onClose }) {
+export function MoreInfoMobile({ external, viewer, isOwner, file, onClose }) {
   const isFileOwner = !external && isOwner && viewer;
 
   return (
-    <MobileJumper.AnimatePresence>
-      {isOpen ? (
-        <MobileJumper.Root onClose={onClose}>
-          <System.Divider height={1} color="borderGrayLight" />
-          <MobileJumper.ObjectInfo file={file} />
-          <System.Divider height={1} color="borderGrayLight" />
-          <MobileJumper.Header>
-            <System.H5 as="p" color="textBlack">
-              More Info
-            </System.H5>
-          </MobileJumper.Header>
-          <System.Divider height={1} color="borderGrayLight" />
-          <MobileJumper.Content>
-            <CoverImageUpload isMobile file={file} viewer={viewer} isFileOwner={isFileOwner} />
-            <FileMetadata file={file} style={{ marginTop: 22 }} />
-          </MobileJumper.Content>
-          <MobileJumper.Footer css={Styles.HORIZONTAL_CONTAINER_CENTERED}>
-            <System.ButtonPrimitive
-              type="button"
-              style={{ width: 32, height: 32 }}
-              onClick={onClose}
-            >
-              <SVG.InfoCircle width={16} height={16} style={{ color: Constants.system.blue }} />
-            </System.ButtonPrimitive>
-          </MobileJumper.Footer>
-        </MobileJumper.Root>
-      ) : null}
-    </MobileJumper.AnimatePresence>
+    <MobileJumper.Root onClose={onClose}>
+      <System.Divider height={1} color="borderGrayLight" />
+      <MobileJumper.ObjectInfo file={file} />
+      <System.Divider height={1} color="borderGrayLight" />
+      <MobileJumper.Header>
+        <System.H5 as="p" color="textBlack">
+          More Info
+        </System.H5>
+      </MobileJumper.Header>
+      <System.Divider height={1} color="borderGrayLight" />
+      <MobileJumper.Content>
+        <CoverImageUpload isMobile file={file} viewer={viewer} isFileOwner={isFileOwner} />
+        <FileMetadata file={file} style={{ marginTop: 22 }} />
+      </MobileJumper.Content>
+      <MobileJumper.Footer css={Styles.HORIZONTAL_CONTAINER_CENTERED}>
+        <System.ButtonPrimitive type="button" style={{ width: 32, height: 32 }} onClick={onClose}>
+          <SVG.InfoCircle width={16} height={16} style={{ color: Constants.system.blue }} />
+        </System.ButtonPrimitive>
+      </MobileJumper.Footer>
+    </MobileJumper.Root>
   );
 }
diff --git a/components/system/components/GlobalCarousel/jumpers/Share.js b/components/system/components/GlobalCarousel/jumpers/Share.js
index 979e0111..af921fb5 100644
--- a/components/system/components/GlobalCarousel/jumpers/Share.js
+++ b/components/system/components/GlobalCarousel/jumpers/Share.js
@@ -141,77 +141,65 @@ const STYLES_SHARE_FILE_FOOTER = (theme) => css`
 
 const PROTO_SCHOOL_CID = "https://proto.school/anatomy-of-a-cid/01";
 
-export function Share({ file, data, viewer, isOpen, onClose }) {
+export function Share({ file, data, viewer, onClose }) {
   return (
-    <Jumper.AnimatePresence>
-      {isOpen ? (
-        <Jumper.Root onClose={onClose}>
-          <Jumper.Header>
-            <System.H5 color="textBlack">Share</System.H5>
-            <Jumper.Dismiss />
-          </Jumper.Header>
-          <Jumper.Divider />
-          <Jumper.ObjectInfo file={file} />
-          <Jumper.Divider />
-          <Jumper.Item style={{ padding: 12 }}>
-            <FileSharingButtons file={file} data={data} viewer={viewer} />
-          </Jumper.Item>
-          <Jumper.Item css={STYLES_SHARE_FILE_FOOTER}>
-            <a
-              css={[Styles.LINK, Styles.HORIZONTAL_CONTAINER_CENTERED]}
-              style={{ marginLeft: "auto", color: Constants.semantic.textGrayDark }}
-              href={PROTO_SCHOOL_CID}
-              target="_blank"
-              rel="noreferrer"
-            >
-              <SVG.InfoCircle width={16} />
-              <System.P2 style={{ marginLeft: 4 }}>What is a CID?</System.P2>
-            </a>
-          </Jumper.Item>
-        </Jumper.Root>
-      ) : null}
-    </Jumper.AnimatePresence>
+    <Jumper.Root onClose={onClose}>
+      <Jumper.Header>
+        <System.H5 color="textBlack">Share</System.H5>
+        <Jumper.Dismiss />
+      </Jumper.Header>
+      <Jumper.Divider />
+      <Jumper.ObjectInfo file={file} />
+      <Jumper.Divider />
+      <Jumper.Item style={{ padding: 12 }}>
+        <FileSharingButtons file={file} data={data} viewer={viewer} />
+      </Jumper.Item>
+      <Jumper.Item css={STYLES_SHARE_FILE_FOOTER}>
+        <a
+          css={[Styles.LINK, Styles.HORIZONTAL_CONTAINER_CENTERED]}
+          style={{ marginLeft: "auto", color: Constants.semantic.textGrayDark }}
+          href={PROTO_SCHOOL_CID}
+          target="_blank"
+          rel="noreferrer"
+        >
+          <SVG.InfoCircle width={16} />
+          <System.P2 style={{ marginLeft: 4 }}>What is a CID?</System.P2>
+        </a>
+      </Jumper.Item>
+    </Jumper.Root>
   );
 }
 
-export function ShareMobile({ file, data, viewer, isOpen, onClose }) {
+export function ShareMobile({ file, data, viewer, onClose }) {
   return (
-    <MobileJumper.AnimatePresence>
-      {isOpen ? (
-        <MobileJumper.Root onClose={onClose}>
-          <System.Divider height={1} color="borderGrayLight" />
-          <MobileJumper.ObjectInfo file={file} />
-          <System.Divider height={1} color="borderGrayLight" />
-          <MobileJumper.Header>
-            <System.H5 as="p" color="textBlack">
-              Share
-            </System.H5>
-          </MobileJumper.Header>
-          <System.Divider height={1} color="borderGrayLight" />
-          <MobileJumper.Content>
-            <FileSharingButtons file={file} data={data} viewer={viewer} />
-          </MobileJumper.Content>
-          <MobileJumper.Footer css={Styles.HORIZONTAL_CONTAINER_CENTERED}>
-            <System.ButtonPrimitive
-              type="button"
-              style={{ width: 32, height: 32 }}
-              onClick={onClose}
-            >
-              <SVG.Share width={16} height={16} style={{ color: Constants.system.blue }} />
-            </System.ButtonPrimitive>
-            <a
-              css={[Styles.LINK, Styles.HORIZONTAL_CONTAINER_CENTERED]}
-              style={{ marginLeft: "auto", color: Constants.semantic.textGrayDark }}
-              href={PROTO_SCHOOL_CID}
-              target="_blank"
-              rel="noreferrer"
-            >
-              <SVG.InfoCircle width={16} />
-              <System.P2 style={{ marginLeft: 4 }}>What is CID?</System.P2>
-            </a>
-          </MobileJumper.Footer>
-        </MobileJumper.Root>
-      ) : null}
-    </MobileJumper.AnimatePresence>
+    <MobileJumper.Root onClose={onClose}>
+      <System.Divider height={1} color="borderGrayLight" />
+      <MobileJumper.ObjectInfo file={file} />
+      <System.Divider height={1} color="borderGrayLight" />
+      <MobileJumper.Header>
+        <System.H5 as="p" color="textBlack">
+          Share
+        </System.H5>
+      </MobileJumper.Header>
+      <System.Divider height={1} color="borderGrayLight" />
+      <MobileJumper.Content>
+        <FileSharingButtons file={file} data={data} viewer={viewer} />
+      </MobileJumper.Content>
+      <MobileJumper.Footer css={Styles.HORIZONTAL_CONTAINER_CENTERED}>
+        <System.ButtonPrimitive type="button" style={{ width: 32, height: 32 }} onClick={onClose}>
+          <SVG.Share width={16} height={16} style={{ color: Constants.system.blue }} />
+        </System.ButtonPrimitive>
+        <a
+          css={[Styles.LINK, Styles.HORIZONTAL_CONTAINER_CENTERED]}
+          style={{ marginLeft: "auto", color: Constants.semantic.textGrayDark }}
+          href={PROTO_SCHOOL_CID}
+          target="_blank"
+          rel="noreferrer"
+        >
+          <SVG.InfoCircle width={16} />
+          <System.P2 style={{ marginLeft: 4 }}>What is CID?</System.P2>
+        </a>
+      </MobileJumper.Footer>
+    </MobileJumper.Root>
   );
 }