mirror of
https://github.com/filecoin-project/slate.git
synced 2024-12-26 02:24:44 +03:00
feat(Jumpers): move AnimatePresence up in the tree
This commit is contained in:
Aminejv
Martina
parent
77a2d32542
commit
3250b651f6
@ -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}>
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user