diff --git a/src/components/FileList.tsx b/src/components/FileList.tsx
new file mode 100644
index 000000000..c28b08f81
--- /dev/null
+++ b/src/components/FileList.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { FixedSizeList as List } from 'react-window';
+import styled from 'styled-components';
+
+interface Iprops {
+ fileList: any[];
+}
+
+export const Wrapper = styled.div`
+ padding-left: 30px;
+ margin-top: 15px;
+ margin-bottom: 0px;
+`;
+
+export default function FileList(props: Iprops) {
+ const Row = ({ index, style }) => (
+
{props.fileList[index % props.fileList.length]}
+ );
+
+ return (
+
+
+ {Row}
+
+
+ );
+}
diff --git a/src/components/pages/gallery/UploadProgress.tsx b/src/components/pages/gallery/UploadProgress.tsx
index 5758aeea1..34e0c4e53 100644
--- a/src/components/pages/gallery/UploadProgress.tsx
+++ b/src/components/pages/gallery/UploadProgress.tsx
@@ -9,7 +9,7 @@ import { DESKTOP_APP_DOWNLOAD_URL } from 'utils/common';
import constants from 'utils/strings/constants';
import { ButtonVariant, getVariantColor } from './LinkButton';
import { FileUploadResults, UPLOAD_STAGES } from 'constants/upload';
-
+import FileList from 'components/FileList';
interface Props {
fileCounter;
uploadStage;
@@ -28,17 +28,6 @@ interface FileProgresses {
progress: number;
}
-export const FileList = styled.ul`
- padding-left: 30px;
- margin-top: 5px;
- margin-bottom: 0px;
- & > li {
- padding-left: 5px;
- margin-bottom: 10px;
- color: #ccc;
- }
-`;
-
const SectionTitle = styled.div`
display: flex;
justify-content: space-between;
@@ -49,7 +38,6 @@ const SectionTitle = styled.div`
const Section = styled.div`
margin: 20px 0;
- word-break: break-word;
padding: 0 20px;
`;
const SectionInfo = styled.div`
@@ -69,6 +57,16 @@ const NotUploadSectionHeader = styled.div`
margin: 0 20px;
`;
+const ItemContainer = styled.li`
+ padding-left: 5px;
+ margin-bottom: 10px;
+ color: #ccc;
+ max-width: 366px;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+`;
+
interface ResultSectionProps {
filenames: Map;
fileUploadResultMap: Map;
@@ -96,13 +94,13 @@ const ResultSection = (props: ResultSectionProps) => {
{props.sectionInfo && (
{props.sectionInfo}
)}
-
- {fileList.map((fileID) => (
-
+ (
+
{props.filenames.get(fileID)}
-
+
))}
-
+ />
@@ -118,7 +116,7 @@ interface InProgressProps {
}
const InProgressSection = (props: InProgressProps) => {
const [listView, setListView] = useState(true);
- const fileList = props.fileProgressStatuses;
+ const fileList = props.fileProgressStatuses ?? [];
return (
@@ -134,15 +132,15 @@ const InProgressSection = (props: InProgressProps) => {
{props.sectionInfo && (
{props.sectionInfo}
)}
-
- {fileList.map(({ fileID, progress }) => (
-
+ (
+
{`${props.filenames.get(
fileID
)} - ${progress}%`}
-
+
))}
-
+ />