From c97e0ca91088ba56b720415d07d2914eb8b100fc Mon Sep 17 00:00:00 2001 From: HFO4 <912394456@qq.com> Date: Sun, 27 Feb 2022 14:39:04 +0800 Subject: [PATCH] Feat: hidden file name if overflows --- src/component/Uploader/Popup/TaskList.js | 8 +-- src/component/Uploader/Popup/UploadTask.js | 63 +++++++++++++++----- src/component/Uploader/UseUpload.js | 9 ++- src/component/Uploader/core/api/index.ts | 4 +- src/component/Uploader/core/uploader/base.ts | 44 +++++++++----- 5 files changed, 90 insertions(+), 38 deletions(-) diff --git a/src/component/Uploader/Popup/TaskList.js b/src/component/Uploader/Popup/TaskList.js index a5b962d..1d1ffc7 100644 --- a/src/component/Uploader/Popup/TaskList.js +++ b/src/component/Uploader/Popup/TaskList.js @@ -47,18 +47,12 @@ const useStyles = makeStyles((theme) => ({ position: "fixed", inset: "-1!important", }, - minWidth: { - [theme.breakpoints.up("sm")]: { - minWidth: 500, - }, - padding: 0, - }, paddingZero: { padding: 0, }, dialogContent: { [theme.breakpoints.up("sm")]: { - minWidth: 500, + width: 500, maxHeight: "calc(100vh - 140px)", }, padding: 0, diff --git a/src/component/Uploader/Popup/UploadTask.js b/src/component/Uploader/Popup/UploadTask.js index 1bc1190..86d1505 100644 --- a/src/component/Uploader/Popup/UploadTask.js +++ b/src/component/Uploader/Popup/UploadTask.js @@ -6,6 +6,7 @@ import { ListItemSecondaryAction, ListItemText, makeStyles, + Tooltip, } from "@material-ui/core"; import TypeIcon from "../../FileManager/TypeIcon"; import { useUpload } from "../UseUpload"; @@ -16,6 +17,8 @@ import { darken, lighten } from "@material-ui/core/styles/colorManipulator"; import { useTheme } from "@material-ui/core/styles"; import Chip from "@material-ui/core/Chip"; import DeleteIcon from "@material-ui/icons/Delete"; +import RefreshIcon from "@material-ui/icons/Refresh"; +import useMediaQuery from "@material-ui/core/useMediaQuery"; const useStyles = makeStyles((theme) => ({ progressContent: { @@ -39,6 +42,11 @@ const useStyles = makeStyles((theme) => ({ }, fileName: { wordBreak: "break-all", + [theme.breakpoints.up("sm")]: { + whiteSpace: "nowrap", + overflow: "hidden", + textOverflow: "ellipsis", + }, }, successStatus: { color: theme.palette.success.main, @@ -54,6 +62,10 @@ const useStyles = makeStyles((theme) => ({ delete: { zIndex: 9, }, + fileNameContainer: { + display: "flex", + alignItems: "center", + }, })); const getSpeedText = (speed, speedAvg, useSpeedAvg) => { @@ -68,7 +80,10 @@ const getSpeedText = (speed, speedAvg, useSpeedAvg) => { export default function UploadTask({ uploader, useAvgSpeed, onCancel }) { const classes = useStyles(); const theme = useTheme(); - const { status, error, progress, speed, speedAvg } = useUpload(uploader); + const { status, error, progress, speed, speedAvg, retry } = useUpload( + uploader + ); + const fullScreen = useMediaQuery(theme.breakpoints.down("sm")); const [loading, setLoading] = useState(false); const statusText = useMemo(() => { @@ -112,14 +127,14 @@ export default function UploadTask({ uploader, useAvgSpeed, onCancel }) { const resumeLabel = useMemo( () => - uploader.task.resumed ? ( + uploader.task.resumed && !fullScreen ? ( ) : null, - [status] + [status, fullScreen] ); const progressBar = useMemo( @@ -147,6 +162,30 @@ export default function UploadTask({ uploader, useAvgSpeed, onCancel }) { }); }; + const secondaryAction = useMemo(() => { + if (status === Status.error) { + return ( + + retry()}> + + + + ); + } + + return ( + + cancel()} + > + + + + ); + }, [status, loading]); + return ( <>
@@ -156,21 +195,17 @@ export default function UploadTask({ uploader, useAvgSpeed, onCancel }) { - {uploader.task.name} - {resumeLabel} - +
+
+ {uploader.task.name} +
+
{resumeLabel}
+
} secondary={statusText} /> - cancel()} - > - - + {secondaryAction}
diff --git a/src/component/Uploader/UseUpload.js b/src/component/Uploader/UseUpload.js index 7011c6a..e144d6a 100644 --- a/src/component/Uploader/UseUpload.js +++ b/src/component/Uploader/UseUpload.js @@ -70,5 +70,12 @@ export function useUpload(uploader) { return [res, resAvg]; }, [progress, lastTimeRef, startTimeRef]); - return { status, error, progress, speed, speedAvg }; + const retry = () => { + uploader.reset(); + lastTimeRef.current = Date.now(); + startTimeRef.current = Date.now(); + uploader.start(); + }; + + return { status, error, progress, speed, speedAvg, retry }; } diff --git a/src/component/Uploader/core/api/index.ts b/src/component/Uploader/core/api/index.ts index cf68509..e07bd53 100644 --- a/src/component/Uploader/core/api/index.ts +++ b/src/component/Uploader/core/api/index.ts @@ -10,11 +10,13 @@ import { Progress } from "../uploader/base"; import { CancelToken } from "axios"; export async function createUploadSession( - req: UploadSessionRequest + req: UploadSessionRequest, + cancel: CancelToken ): Promise { const res = await requestAPI("file/upload", { method: "put", data: req, + cancelToken: cancel, }); if (res.data.code !== 0) { diff --git a/src/component/Uploader/core/uploader/base.ts b/src/component/Uploader/core/uploader/base.ts index d357383..571758f 100644 --- a/src/component/Uploader/core/uploader/base.ts +++ b/src/component/Uploader/core/uploader/base.ts @@ -4,7 +4,7 @@ import UploadManager from "../index"; import Logger from "../logger"; import { validate } from "../utils/validator"; import { CancelToken } from "../utils/request"; -import { CancelTokenSource } from "axios"; +import axios, { CancelTokenSource } from "axios"; import { createUploadSession, deleteUploadSession } from "../api"; import * as utils from "../utils"; import { RequestCanceledError, UploaderError } from "../errors"; @@ -109,13 +109,16 @@ export default abstract class Base { this.transit(Status.preparing); const cachedInfo = utils.getResumeCtx(this.task, this.logger); if (cachedInfo == null) { - this.task.session = await createUploadSession({ - path: this.task.dst, - size: this.task.file.size, - name: this.task.file.name, - policy_id: this.task.policy.id, - last_modified: this.task.file.lastModified, - }); + this.task.session = await createUploadSession( + { + path: this.task.dst, + size: this.task.file.size, + name: this.task.file.name, + policy_id: this.task.policy.id, + last_modified: this.task.file.lastModified, + }, + this.cancelToken.token + ); this.logger.info("Upload session created:", this.task.session); } else { this.task.session = cachedInfo.session; @@ -136,6 +139,17 @@ export default abstract class Base { this.transit(Status.canceled); }; + public reset = () => { + this.cancelToken = axios.CancelToken.source(); + this.progress = { + total: { + size: 0, + loaded: 0, + percent: 0, + }, + }; + }; + protected setError(e: Error) { if ( !(e instanceof UploaderError && e.Retryable()) || @@ -155,9 +169,9 @@ export default abstract class Base { protected cancelUploadSession = (): Promise => { return new Promise((resolve) => { utils.removeResumeCtx(this.task, this.logger); - setTimeout(() => { - if (this.task.session) { - deleteUploadSession(this.task.session?.sessionID) + if (this.task.session) { + setTimeout(() => { + deleteUploadSession(this.task.session!?.sessionID) .catch((e) => { this.logger.warn( "Failed to cancel upload session: ", @@ -167,10 +181,10 @@ export default abstract class Base { .finally(() => { resolve(); }); - } else { - resolve(); - } - }, deleteUploadSessionDelay); + }, deleteUploadSessionDelay); + } else { + resolve(); + } }); };