filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-12-26 02:24:44 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat(GlobalCarousel/Share): move download buttom to share jumper

Browse Source
This commit is contained in:
Aminejv 2021-11-21 17:17:40 +01:00
parent 93be2f3e15
commit 0e2de0e9c6
1 changed files with 45 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
components/system/components/GlobalCarousel/jumpers/Share.js
View File

@ -6,9 +6,13 @@ import * as SVG from "~/common/svg";
import * as Utilities from "~/common/utilities";
import * as Constants from "~/common/constants";
import * as MobileJumper from "~/components/core/MobileJumper";
import * as Strings from "~/common/strings";
import * as Events from "~/common/custom-events";
import * as UserBehaviors from "~/common/user-behaviors";
import { css } from "@emotion/react";
import { LoaderSpinner } from "~/components/system/components/Loaders";
/* -----------------------------------------------------------------------------------------------*/
const STYLES_SHARING_BUTTON = (theme) => css`
${Styles.BUTTON_RESET};
@ -24,30 +28,12 @@ const STYLES_SHARING_BUTTON = (theme) => css`
color: ${theme.semantic.textBlack};
}
`;
const getSlateURLFromViewer = ({ viewer, file }) => {
const username = viewer?.username;
const rootUrl = window?.location?.origin;
const collection = viewer.slates.find(
(item) => item.isPublic && item.objects.some((object) => object.id === file.id)
);
return `${rootUrl}/${username}/${collection.slatename}?cid=${file.cid}`;
};
const getFileURL = ({ file }) => {
const rootUrl = window?.location?.origin;
return `${rootUrl}/_/object/${file.id}`;
};
const getSlateURLFromData = ({ data, file }) => {
const username = data?.user?.username;
const rootUrl = window?.location?.origin;
return `${rootUrl}/${username}/${data.slatename}?cid=${file.cid}`;
};
function FileSharingButtons({ file, data, viewer }) {
const fileName = file?.name || file?.filename;
const username = data?.user?.username || viewer?.username;
@ -93,12 +79,52 @@ function FileSharingButtons({ file, data, viewer }) {
{copyState.isCidCopied ? "Copied" : "Copy CID "}
</System.P2>
</button>
<DownloadButton file={file} viewer={viewer} />
</>
);
}
/* -----------------------------------------------------------------------------------------------*/
const useFileDownload = ({ file, viewer, downloadRef }) => {
const [isDownloading, setDownloadingState] = React.useState(false);
const handleDownload = async () => {
if (!viewer) {
Events.dispatchCustomEvent({ name: "slate-global-open-cta", detail: {} });
return;
}
setDownloadingState(true);
const response = await UserBehaviors.download(file, downloadRef);
setDownloadingState(false);
Events.hasError(response);
};
return [isDownloading, handleDownload];
};
function DownloadButton({ file, viewer, ...props }) {
/**NOTE(amine): UserBehaviors.download creates a link and clicks it to trigger a download,
which triggers the Boundary component and closes the jumper.
To fix this we create the link inside the downloadRef element */
const downloadRef = React.useRef();
const [isDownloading, handleDownload] = useFileDownload({ file, viewer, downloadRef });
return !file.isLink ? (
<div ref={downloadRef}>
<button css={STYLES_SHARING_BUTTON} onClick={handleDownload} {...props}>
{isDownloading ? (
<LoaderSpinner style={{ height: 16, width: 16 }} />
) : (
<SVG.Download width={16} />
)}
<System.P2 style={{ marginLeft: 12 }}>Download File</System.P2>
</button>
</div>
) : null;
}
/* -----------------------------------------------------------------------------------------------*/
const STYLES_SHARE_FILE_FOOTER = (theme) => css`
${Styles.HORIZONTAL_CONTAINER_CENTERED};
position: absolute;