From d3010cfa403975ff44b592b2be1ccede263ede81 Mon Sep 17 00:00:00 2001
From: HFO4 <912394456@qq.com>
Date: Fri, 29 Apr 2022 19:51:25 +0800
Subject: [PATCH] fix: Zero-sized element error in react-virtuoso

---
 src/component/Uploader/Popup/TaskList.js   | 12 ++-
 src/component/Uploader/Popup/UploadTask.js | 95 ++++++++++------------
 2 files changed, 54 insertions(+), 53 deletions(-)

diff --git a/src/component/Uploader/Popup/TaskList.js b/src/component/Uploader/Popup/TaskList.js
index 7e16ee6..617da2e 100644
--- a/src/component/Uploader/Popup/TaskList.js
+++ b/src/component/Uploader/Popup/TaskList.js
@@ -134,6 +134,7 @@ export default function TaskList({
     const [sorter, setSorter] = useState(
         Auth.GetPreferenceWithDefault("task_sorter", "default")
     );
+    const [refreshList, setRefreshList] = useState(false);
 
     const handleActionClick = (event) => {
         setAnchorEl(event.currentTarget);
@@ -216,11 +217,20 @@ export default function TaskList({
                         useAvgSpeed={useAvgSpeed}
                         uploader={uploader}
                         filter={filters[filter]}
+                        onRefresh={() => setRefreshList((r) => !r)}
                     />
                 )}
             />
         );
-    }, [classes, taskList, useAvgSpeed, fullScreen, filter, sorter]);
+    }, [
+        classes,
+        taskList,
+        useAvgSpeed,
+        fullScreen,
+        filter,
+        sorter,
+        refreshList,
+    ]);
 
     return (
         <>
diff --git a/src/component/Uploader/Popup/UploadTask.js b/src/component/Uploader/Popup/UploadTask.js
index f877c57..683b27c 100644
--- a/src/component/Uploader/Popup/UploadTask.js
+++ b/src/component/Uploader/Popup/UploadTask.js
@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import {
     Divider,
     Grow,
@@ -154,7 +154,7 @@ export default function UploadTask({
     onCancel,
     onClose,
     selectFile,
-    filter,
+    onRefresh,
 }) {
     const classes = useStyles();
     const theme = useTheme();
@@ -176,6 +176,12 @@ export default function UploadTask({
         setExpanded(!!newExpanded);
     };
 
+    useEffect(() => {
+        if (status >= Status.finished) {
+            onRefresh();
+        }
+    }, [status]);
+
     const statusText = useMemo(() => {
         const parent = filename(uploader.task.dst);
         switch (status) {
@@ -309,8 +315,6 @@ export default function UploadTask({
         e.stopPropagation();
     };
 
-    const show = useMemo(() => filter(uploader), [filter, status, uploader]);
-
     const secondaryAction = useMemo(() => {
         if (!taskHover && !fullScreen) {
             return <></>;
@@ -376,57 +380,44 @@ export default function UploadTask({
     }, [uploader, fullScreen]);
 
     return (
-        show && (
-            <>
-                <ExpansionPanel
-                    square
-                    expanded={expanded}
-                    onChange={toggleDetail}
+        <>
+            <ExpansionPanel square expanded={expanded} onChange={toggleDetail}>
+                <ExpansionPanelSummary
+                    aria-controls="panel1d-content"
+                    id="panel1d-header"
                 >
-                    <ExpansionPanelSummary
-                        aria-controls="panel1d-content"
-                        id="panel1d-header"
+                    <div
+                        className={classes.progressContainer}
+                        onMouseLeave={() => setTaskHover(false)}
+                        onMouseOver={() => setTaskHover(true)}
                     >
-                        <div
-                            className={classes.progressContainer}
-                            onMouseLeave={() => setTaskHover(false)}
-                            onMouseOver={() => setTaskHover(true)}
-                        >
-                            {progressBar}
-                            <ListItem
-                                className={classes.progressContent}
-                                button
-                            >
-                                {fileIcon}
-                                <ListItemText
-                                    className={classes.listAction}
-                                    primary={
-                                        <div
-                                            className={
-                                                classes.fileNameContainer
-                                            }
-                                        >
-                                            <div className={classes.wordBreak}>
-                                                {uploader.task.name}
-                                            </div>
-                                            <div>{resumeLabel}</div>
-                                            <div>{continueLabel}</div>
-                                        </div>
-                                    }
-                                    secondary={
+                        {progressBar}
+                        <ListItem className={classes.progressContent} button>
+                            {fileIcon}
+                            <ListItemText
+                                className={classes.listAction}
+                                primary={
+                                    <div className={classes.fileNameContainer}>
                                         <div className={classes.wordBreak}>
-                                            {statusText}
+                                            {uploader.task.name}
                                         </div>
-                                    }
-                                />
-                                {secondaryAction}
-                            </ListItem>
-                        </div>
-                    </ExpansionPanelSummary>
-                    <ExpansionPanelDetails>{taskDetail}</ExpansionPanelDetails>
-                </ExpansionPanel>
-                <Divider />
-            </>
-        )
+                                        <div>{resumeLabel}</div>
+                                        <div>{continueLabel}</div>
+                                    </div>
+                                }
+                                secondary={
+                                    <div className={classes.wordBreak}>
+                                        {statusText}
+                                    </div>
+                                }
+                            />
+                            {secondaryAction}
+                        </ListItem>
+                    </div>
+                </ExpansionPanelSummary>
+                <ExpansionPanelDetails>{taskDetail}</ExpansionPanelDetails>
+            </ExpansionPanel>
+            <Divider />
+        </>
     );
 }