filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-11-23 14:07:20 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat(Jumper): add

Browse Source
This commit is contained in:
Aminejv 2021-10-26 19:22:08 +01:00
parent 42e1f05e26
commit b176a5a797
1 changed files with 89 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
components/core/Jumper/index.js
View File

@ -1,10 +1,16 @@
import * as React from "react"; import * as React from "react";
import * as System from "~/components/system"; import * as System from "~/components/system";
import * as Styles from "~/common/styles";
import * as SVG from "~/common/svg";
import * as Constants from "~/common/constants";
import { ModalPortal } from "~/components/core/ModalPortal"; import { ModalPortal } from "~/components/core/ModalPortal";
import { css } from "@emotion/react"; import { css } from "@emotion/react";
import { AnimatePresence, motion } from "framer-motion"; import { motion } from "framer-motion";
import { useEscapeKey } from "~/common/hooks"; import { useEscapeKey } from "~/common/hooks";
import { Show } from "~/components/utility/Show";
import ObjectBoxPreview from "~/components/core/ObjectBoxPreview";
/* ------------------------------------------------------------------------------------------------- /* -------------------------------------------------------------------------------------------------
* Root * Root
@ -30,27 +36,39 @@ const STYLES_JUMPER_ROOT = (theme) => css`
} }
`; `;
function Root({ children, isOpen, onClose, ...props }) { function Root({ children, onClose, ...props }) {
useEscapeKey(onClose); useEscapeKey(onClose);
return ( return (
<AnimatePresence> <ModalPortal>
{isOpen ? ( <System.Boundary enabled={true} onOutsideRectEvent={onClose}>
<ModalPortal> <motion.div
<System.Boundary enabled={true} onOutsideRectEvent={onClose}> initial={{ y: 10, opacity: 0 }}
<motion.div animate={{ y: 0, opacity: 1 }}
initial={{ y: 10, opacity: 0 }} exit={{ y: 10, opacity: 0 }}
animate={{ y: 0, opacity: 1 }} transition={{ duration: 0.4, ease: "easeInOut" }}
exit={{ y: 10, opacity: 0 }} css={STYLES_JUMPER_ROOT}
transition={{ duration: 0.4, ease: "easeInOut" }} {...props}
css={STYLES_JUMPER_ROOT} >
{...props} {children}
> </motion.div>
{children} </System.Boundary>
</motion.div> </ModalPortal>
</System.Boundary> );
</ModalPortal> }
) : null}
</AnimatePresence> /* -------------------------------------------------------------------------------------------------
* Header
* -----------------------------------------------------------------------------------------------*/
const STYLES_JUMPER_HEADER = css`
padding: 17px 20px 15px;
`;
function Header({ children, css, ...props }) {
return (
<div css={[STYLES_JUMPER_HEADER, css]} {...props}>
{children}
</div>
); );
} }
@ -58,8 +76,16 @@ function Root({ children, isOpen, onClose, ...props }) {
* Item * Item
* -----------------------------------------------------------------------------------------------*/ * -----------------------------------------------------------------------------------------------*/
const STYLES_JUMPER_ITEM = css`
padding: 13px 20px 12px;
`;
function Item({ children, ...props }) { function Item({ children, ...props }) {
return <div {...props}>{children}</div>; return (
<div css={[STYLES_JUMPER_ITEM, css]} {...props}>
{children}
</div>
);
} }
/* ------------------------------------------------------------------------------------------------- /* -------------------------------------------------------------------------------------------------
@ -73,4 +99,45 @@ function Divider({ children, ...props }) {
); );
} }
export { Root, Item, Divider }; /* -------------------------------------------------------------------------------------------------
* ObjectPreview
* -----------------------------------------------------------------------------------------------*/
function ObjectPreview({ file }) {
return (
<div css={Styles.HORIZONTAL_CONTAINER_CENTERED}>
<div
css={Styles.HORIZONTAL_CONTAINER_CENTERED}
style={{ color: Constants.system.green, width: "100%" }}
>
<SVG.CheckCircle />
<div style={{ marginLeft: 12, marginRight: 12 }}>
<AnimateSharedLayout>
<motion.div layoutId={`${file.id}-title`} key={`${file.id}-title`}>
<System.H5
nbrOflines={1}
as="h1"
style={{ wordBreak: "break-all" }}
color="textBlack"
>
{file?.name || file?.filename}
</System.H5>
</motion.div>
</AnimateSharedLayout>
<Show when={file?.source}>
<System.P3 nbrOflines={1} color="textBlack" style={{ marginTop: 3 }}>
{file?.source}
</System.P3>
</Show>
</div>
<ObjectBoxPreview
file={file}
placeholderRatio={2}
style={{ width: 28, height: 39, marginLeft: "auto" }}
/>
</div>
</div>
);
}
export { Root, Header, Item, Divider, ObjectPreview };