Dashboard - convert some files to typescript

[lakesare]

This PR converts selected @uppy/dashboard files to typescript.

This PR also adds back some props that were lost somewhere along the way, bringing back the "shorten/lengthen file names" functionality.

Before

After

[github-actions]

Diff output files

diff --git a/packages/@uppy/dashboard/lib/components/Dashboard.js b/packages/@uppy/dashboard/lib/components/Dashboard.js
index 41aa638..1fb0233 100644
--- a/packages/@uppy/dashboard/lib/components/Dashboard.js
+++ b/packages/@uppy/dashboard/lib/components/Dashboard.js
@@ -168,18 +168,15 @@ export default function Dashboard(props) {
         showFileList
           ? h(FileList, {
             id: props.id,
-            error: props.error,
             i18n: props.i18n,
             uppy: props.uppy,
             files: props.files,
-            acquirers: props.acquirers,
             resumableUploads: props.resumableUploads,
             hideRetryButton: props.hideRetryButton,
             hidePauseResumeButton: props.hidePauseResumeButton,
             hideCancelButton: props.hideCancelButton,
             showLinkToFileUploadResult: props.showLinkToFileUploadResult,
             showRemoveButtonAfterComplete: props.showRemoveButtonAfterComplete,
-            isWide: props.isWide,
             metaFields: props.metaFields,
             toggleFileCard: props.toggleFileCard,
             handleRequestThumbnail: props.handleRequestThumbnail,
@@ -191,6 +188,8 @@ export default function Dashboard(props) {
             toggleAddFilesPanel: props.toggleAddFilesPanel,
             isSingleFile: isSingleFile,
             itemsPerRow: itemsPerRow,
+            containerWidth: props.containerWidth,
+            containerHeight: props.containerHeight,
           })
           : h(
             AddFiles,
diff --git a/packages/@uppy/dashboard/lib/components/FileItem/Buttons/index.js b/packages/@uppy/dashboard/lib/components/FileItem/Buttons/index.js
index bd1d585..4d9fb90 100644
--- a/packages/@uppy/dashboard/lib/components/FileItem/Buttons/index.js
+++ b/packages/@uppy/dashboard/lib/components/FileItem/Buttons/index.js
@@ -101,20 +101,22 @@ function RemoveButton(_ref2) {
     ),
   );
 }
-const copyLinkToClipboard = (event, props) => {
-  copyToClipboard(props.file.uploadURL, props.i18n("copyLinkToClipboardFallback")).then(() => {
-    props.uppy.log("Link copied to clipboard.");
-    props.uppy.info(props.i18n("copyLinkToClipboardSuccess"), "info", 3000);
-  }).catch(props.uppy.log).then(() =>
-    event.target.focus({
-      preventScroll: true,
-    })
-  );
-};
-function CopyLinkButton(props) {
-  const {
+function CopyLinkButton(_ref3) {
+  let {
+    file,
+    uppy,
     i18n,
-  } = props;
+  } = _ref3;
+  const copyLinkToClipboard = event => {
+    copyToClipboard(file.uploadURL, i18n("copyLinkToClipboardFallback")).then(() => {
+      uppy.log("Link copied to clipboard.");
+      uppy.info(i18n("copyLinkToClipboardSuccess"), "info", 3000);
+    }).catch(uppy.log).then(() =>
+      event.target.focus({
+        preventScroll: true,
+      })
+    );
+  };
   return h(
     "button",
     {
@@ -122,7 +124,7 @@ function CopyLinkButton(props) {
       type: "button",
       "aria-label": i18n("copyLink"),
       title: i18n("copyLink"),
-      onClick: event => copyLinkToClipboard(event, props),
+      onClick: event => copyLinkToClipboard(event),
     },
     h(
       "svg",
@@ -184,8 +186,7 @@ export default function Buttons(props) {
       ? h(RemoveButton, {
         i18n: i18n,
         file: file,
-        uppy: uppy,
-        onClick: () => uppy.removeFile(file.id, "removed-by-user"),
+        onClick: () => uppy.removeFile(file.id),
       })
       : null,
   );
diff --git a/packages/@uppy/dashboard/lib/components/FileItem/FileInfo/index.js b/packages/@uppy/dashboard/lib/components/FileItem/FileInfo/index.js
index 145e427..07b4bf7 100644
--- a/packages/@uppy/dashboard/lib/components/FileItem/FileInfo/index.js
+++ b/packages/@uppy/dashboard/lib/components/FileItem/FileInfo/index.js
@@ -1,6 +1,6 @@
 import prettierBytes from "@transloadit/prettier-bytes";
 import truncateString from "@uppy/utils/lib/truncateString";
-import { Fragment, h } from "preact";
+import { h } from "preact";
 import MetaErrorMessage from "../MetaErrorMessage.js";
 const renderFileName = props => {
   const {
@@ -82,6 +82,13 @@ const ErrorButton = _ref => {
 export default function FileInfo(props) {
   const {
     file,
+    i18n,
+    toggleFileCard,
+    metaFields,
+    toggleAddFilesPanel,
+    isSingleFile,
+    containerHeight,
+    containerWidth,
   } = props;
   return h(
     "div",
@@ -94,10 +101,15 @@ export default function FileInfo(props) {
       {
         className: "uppy-Dashboard-Item-fileName",
       },
-      renderFileName(props),
+      renderFileName({
+        file,
+        isSingleFile,
+        containerHeight,
+        containerWidth,
+      }),
       h(ErrorButton, {
-        file: props.file,
-        onClick: () => alert(props.file.error),
+        file: file,
+        onClick: () => alert(file.error),
       }),
     ),
     h(
@@ -105,15 +117,23 @@ export default function FileInfo(props) {
       {
         className: "uppy-Dashboard-Item-status",
       },
-      renderAuthor(props),
-      renderFileSize(props),
-      ReSelectButton(props),
+      renderAuthor({
+        file,
+      }),
+      renderFileSize({
+        file,
+      }),
+      ReSelectButton({
+        file,
+        toggleAddFilesPanel,
+        i18n,
+      }),
     ),
     h(MetaErrorMessage, {
-      file: props.file,
-      i18n: props.i18n,
-      toggleFileCard: props.toggleFileCard,
-      metaFields: props.metaFields,
+      file: file,
+      i18n: i18n,
+      toggleFileCard: toggleFileCard,
+      metaFields: metaFields,
     }),
   );
 }
diff --git a/packages/@uppy/dashboard/lib/components/FileItem/FileProgress/index.js b/packages/@uppy/dashboard/lib/components/FileItem/FileProgress/index.js
index f4d0ac6..90c3773 100644
--- a/packages/@uppy/dashboard/lib/components/FileItem/FileProgress/index.js
+++ b/packages/@uppy/dashboard/lib/components/FileItem/FileProgress/index.js
@@ -90,6 +90,9 @@ export default function FileProgress(props) {
   if (!props.file.progress.uploadStarted) {
     return null;
   }
+  if (props.file.progress.percentage === undefined) {
+    return null;
+  }
   if (props.isUploaded) {
     return h(
       "div",
@@ -120,7 +123,7 @@ export default function FileProgress(props) {
     );
   }
   if (props.recoveredState) {
-    return undefined;
+    return null;
   }
   if (props.error && !props.hideRetryButton) {
     return h(
diff --git a/packages/@uppy/dashboard/lib/components/FileItem/index.js b/packages/@uppy/dashboard/lib/components/FileItem/index.js
index 7bc984a..7bfda5e 100644
--- a/packages/@uppy/dashboard/lib/components/FileItem/index.js
+++ b/packages/@uppy/dashboard/lib/components/FileItem/index.js
@@ -38,8 +38,8 @@ export default class FileItem extends Component {
       file,
     } = this.props;
     const isProcessing = file.progress.preprocess || file.progress.postprocess;
-    const isUploaded = file.progress.uploadComplete && !isProcessing && !file.error;
-    const uploadInProgressOrComplete = file.progress.uploadStarted || isProcessing;
+    const isUploaded = !!file.progress.uploadComplete && !isProcessing && !file.error;
+    const uploadInProgressOrComplete = !!file.progress.uploadStarted || !!isProcessing;
     const uploadInProgress = file.progress.uploadStarted && !file.progress.uploadComplete || isProcessing;
     const error = file.error || false;
     const {
@@ -87,7 +87,6 @@ export default class FileItem extends Component {
           hideCancelButton: this.props.hideCancelButton,
           hidePauseResumeButton: this.props.hidePauseResumeButton,
           recoveredState: this.props.recoveredState,
-          showRemoveButtonAfterComplete: this.props.showRemoveButtonAfterComplete,
           resumableUploads: this.props.resumableUploads,
           individualCancellation: this.props.individualCancellation,
           i18n: this.props.i18n,
@@ -100,8 +99,6 @@ export default class FileItem extends Component {
         },
         h(FileInfo, {
           file: file,
-          id: this.props.id,
-          acquirers: this.props.acquirers,
           containerWidth: this.props.containerWidth,
           containerHeight: this.props.containerHeight,
           i18n: this.props.i18n,
diff --git a/packages/@uppy/dashboard/lib/components/FileList.js b/packages/@uppy/dashboard/lib/components/FileList.js
index a407d68..64a63c9 100644
--- a/packages/@uppy/dashboard/lib/components/FileList.js
+++ b/packages/@uppy/dashboard/lib/components/FileList.js
@@ -19,18 +19,15 @@ function chunks(list, size) {
 export default function FileList(_ref) {
   let {
     id,
-    error,
     i18n,
     uppy,
     files,
-    acquirers,
     resumableUploads,
     hideRetryButton,
     hidePauseResumeButton,
     hideCancelButton,
     showLinkToFileUploadResult,
     showRemoveButtonAfterComplete,
-    isWide,
     metaFields,
     isSingleFile,
     toggleFileCard,
@@ -47,12 +44,12 @@ export default function FileList(_ref) {
   } = _ref;
   const rowHeight = itemsPerRow === 1 ? 71 : 200;
   const rows = useMemo(() => {
-    const sortByGhostComesFirst = (file1, file2) => files[file2].isGhost - files[file1].isGhost;
+    const sortByGhostComesFirst = (file1, file2) => Number(files[file2].isGhost) - Number(files[file1].isGhost);
     const fileIds = Object.keys(files);
     if (recoveredState) fileIds.sort(sortByGhostComesFirst);
     return chunks(fileIds, itemsPerRow);
   }, [files, itemsPerRow, recoveredState]);
-  const renderRow = (row) =>
+  const renderRow = row =>
     h(
       "div",
       {
@@ -65,9 +62,7 @@ export default function FileList(_ref) {
           key: fileID,
           uppy: uppy,
           id: id,
-          error: error,
           i18n: i18n,
-          acquirers: acquirers,
           resumableUploads: resumableUploads,
           individualCancellation: individualCancellation,
           hideRetryButton: hideRetryButton,
@@ -75,7 +70,6 @@ export default function FileList(_ref) {
           hideCancelButton: hideCancelButton,
           showLinkToFileUploadResult: showLinkToFileUploadResult,
           showRemoveButtonAfterComplete: showRemoveButtonAfterComplete,
-          isWide: isWide,
           metaFields: metaFields,
           recoveredState: recoveredState,
           isSingleFile: isSingleFile,