filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-11-23 05:54:49 +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 },
] = 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>
);
}

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

@ -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 },

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

@ -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 (