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

feat(Upload): remove open-upload-jumper custom event

Browse Source
This commit is contained in:
Aminejv 2021-10-27 09:48:56 +01:00
parent f91f8de959
commit 9a58c92d40
3 changed files with 46 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
components/core/Upload/Popup.js
View File

@ -169,41 +169,49 @@ export function Popup() {
{ hideUploadPopup, expandUploadSummary, collapseUploadSummary, cancelAutoCollapseOnMouseEnter }, { hideUploadPopup, expandUploadSummary, collapseUploadSummary, cancelAutoCollapseOnMouseEnter },
] = useUploadPopup({ totalFilesSummary }); ] = useUploadPopup({ totalFilesSummary });
if (!popupState.isVisible) return null;
return ( return (
<div <AnimatePresence>
css={STYLES_POPUP_WRAPPER} {popupState.isVisible ? (
onMouseEnter={handleOnMouseEnter} <motion.div
onMouseLeave={handleOnMouseLeave} css={STYLES_POPUP_WRAPPER}
> initial={{ opacity: 0, y: 0 }}
<div css={[STYLES_POPUP_CONTENT]}> animate={{ opacity: 1, y: 0 }}
<AnimatePresence> exit={{ opacity: 0, y: 10 }}
{popupState.isSummaryExpanded ? ( onMouseEnter={handleOnMouseEnter}
<motion.div onMouseLeave={handleOnMouseLeave}
initial={{ y: 400 }} >
animate={{ y: 0 }} <div css={[STYLES_POPUP_CONTENT]}>
exit={{ y: 400 }} <AnimatePresence>
transition={{ type: "spring", stiffness: 170, damping: 26 }} {popupState.isSummaryExpanded ? (
onMouseEnter={cancelAutoCollapseOnMouseEnter} <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} /> <SVG.Dismiss width={16} />
</motion.div> </button>
) : null} </Show>
</AnimatePresence> </motion.div>
<Header ) : null}
totalFilesSummary={totalFilesSummary} </AnimatePresence>
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>
); );
} }

2
components/core/Upload/Provider.js
View File

@ -23,8 +23,6 @@ export const Provider = ({ children, page, data, viewer }) => {
viewer, viewer,
}); });
useEventListener({ type: "open-upload-jumper", handler: showUploadModal });
const providerValue = React.useMemo( const providerValue = React.useMemo(
() => [ () => [
{ ...uploadState, isUploadJumperVisible }, { ...uploadState, isUploadJumperVisible },

7
components/core/Upload/index.js
View File

@ -6,6 +6,7 @@ import { ModalPortal } from "../ModalPortal";
import { Provider } from "~/components/core/Upload/Provider"; import { Provider } from "~/components/core/Upload/Provider";
import { Popup } from "~/components/core/Upload/Popup"; import { Popup } from "~/components/core/Upload/Popup";
import { UploadJumper as Jumper } from "~/components/core/Upload/Jumper"; import { UploadJumper as Jumper } from "~/components/core/Upload/Jumper";
import { useUploadContext } from "~/components/core/Upload/Provider";
import DropIndicator from "~/components/core/Upload/DropIndicator"; import DropIndicator from "~/components/core/Upload/DropIndicator";
@ -13,11 +14,12 @@ import DropIndicator from "~/components/core/Upload/DropIndicator";
* Root * Root
* -----------------------------------------------------------------------------------------------*/ * -----------------------------------------------------------------------------------------------*/
const Root = ({ children, data }) => { const Root = ({ children, data }) => {
const [{ isUploadJumperVisible }] = useUploadContext();
return ( return (
<> <>
{children} {children}
{isUploadJumperVisible && <Jumper data={data} />}
<ModalPortal> <ModalPortal>
<Jumper data={data} />
<Popup /> <Popup />
<DropIndicator data={data} /> <DropIndicator data={data} />
</ModalPortal> </ModalPortal>
@ -30,12 +32,13 @@ const Root = ({ children, data }) => {
* -----------------------------------------------------------------------------------------------*/ * -----------------------------------------------------------------------------------------------*/
const Trigger = ({ viewer, css, children, ...props }) => { const Trigger = ({ viewer, css, children, ...props }) => {
const [, { showUploadJumper }] = useUploadContext();
const showUploadModal = () => { const showUploadModal = () => {
if (!viewer) { if (!viewer) {
Events.dispatchCustomEvent({ name: "slate-global-open-cta", detail: {} }); Events.dispatchCustomEvent({ name: "slate-global-open-cta", detail: {} });
return; return;
} }
Events.dispatchCustomEvent({ name: "open-upload-jumper" }); showUploadJumper();
}; };
return ( return (