Dashboard - convert some files to typescript - 2

[lakesare]

• converts AddFiles.tsx
• converts Dashboard.tsx

Only merge after #5381, #5380

[github-actions]

Diff output files

diff --git a/packages/@uppy/dashboard/lib/Dashboard.js b/packages/@uppy/dashboard/lib/Dashboard.js
index 51ebe7b..e6d8538 100644
--- a/packages/@uppy/dashboard/lib/Dashboard.js
+++ b/packages/@uppy/dashboard/lib/Dashboard.js
@@ -37,9 +37,6 @@ function createPromise() {
 const defaultOptions = {
   target: "body",
   metaFields: [],
-  inline: false,
-  width: 750,
-  height: 550,
   thumbnailWidth: 280,
   thumbnailType: "image/jpeg",
   waitForThumbnailsBeforeUpload: false,
@@ -52,27 +49,36 @@ const defaultOptions = {
   hidePauseResumeButton: false,
   hideProgressAfterFinish: false,
   note: null,
-  closeModalOnClickOutside: false,
-  closeAfterFinish: false,
   singleFileFullScreen: true,
   disableStatusBar: false,
   disableInformer: false,
   disableThumbnailGenerator: false,
-  disablePageScrollWhenModalOpen: true,
-  animateOpenClose: true,
   fileManagerSelectionType: "files",
   proudlyDisplayPoweredByUppy: true,
   showSelectedFiles: true,
   showRemoveButtonAfterComplete: false,
-  browserBackButtonClose: false,
   showNativePhotoCameraButton: false,
   showNativeVideoCameraButton: false,
   theme: "light",
   autoOpen: null,
   disabled: false,
   disableLocalFiles: false,
+  nativeCameraFacingMode: "",
+  onDragLeave: () => {},
+  onDragOver: () => {},
+  onDrop: () => {},
+  plugins: [],
   doneButtonHandler: undefined,
   onRequestCloseModal: null,
+  inline: false,
+  animateOpenClose: true,
+  browserBackButtonClose: false,
+  closeAfterFinish: false,
+  closeModalOnClickOutside: false,
+  disablePageScrollWhenModalOpen: true,
+  trigger: null,
+  width: 750,
+  height: 550,
 };
 var _disabledNodes = _classPrivateFieldLooseKey("disabledNodes");
 var _generateLargeThumbnailIfSingleFile = _classPrivateFieldLooseKey("generateLargeThumbnailIfSingleFile");
@@ -93,7 +99,7 @@ var _getThumbnailGeneratorId = _classPrivateFieldLooseKey("getThumbnailGenerator
 var _getInformerId = _classPrivateFieldLooseKey("getInformerId");
 export default class Dashboard extends UIPlugin {
   constructor(uppy, _opts) {
-    var _opts$autoOpen, _this$opts4, _this$opts4$onRequest;
+    var _opts$autoOpen, _this$opts, _this$opts$onRequestC;
     const autoOpen = (_opts$autoOpen = _opts == null ? void 0 : _opts.autoOpen) != null ? _opts$autoOpen : null;
     super(uppy, {
       ...defaultOptions,
@@ -501,7 +507,6 @@ export default class Dashboard extends UIPlugin {
       }
     };
     this.handleDragOver = event => {
-      var _this$opts$onDragOver, _this$opts;
       event.preventDefault();
       event.stopPropagation();
       const canSomePluginHandleRootDrop = () => {
@@ -533,21 +538,17 @@ export default class Dashboard extends UIPlugin {
       this.setPluginState({
         isDraggingOver: true,
       });
-      (_this$opts$onDragOver = (_this$opts = this.opts).onDragOver) == null
-        || _this$opts$onDragOver.call(_this$opts, event);
+      this.opts.onDragOver(event);
     };
     this.handleDragLeave = event => {
-      var _this$opts$onDragLeav, _this$opts2;
       event.preventDefault();
       event.stopPropagation();
       this.setPluginState({
         isDraggingOver: false,
       });
-      (_this$opts$onDragLeav = (_this$opts2 = this.opts).onDragLeave) == null
-        || _this$opts$onDragLeav.call(_this$opts2, event);
+      this.opts.onDragLeave(event);
     };
     this.handleDrop = async event => {
-      var _this$opts$onDrop, _this$opts3;
       event.preventDefault();
       event.stopPropagation();
       this.setPluginState({
@@ -574,7 +575,7 @@ export default class Dashboard extends UIPlugin {
         this.uppy.log("[Dashboard] Files dropped");
         this.addFiles(files);
       }
-      (_this$opts$onDrop = (_this$opts3 = this.opts).onDrop) == null || _this$opts$onDrop.call(_this$opts3, event);
+      this.opts.onDrop(event);
     };
     this.handleRequestThumbnail = file => {
       if (!this.opts.waitForThumbnailsBeforeUpload) {
@@ -921,7 +922,9 @@ export default class Dashboard extends UIPlugin {
     Object.defineProperty(this, _addSpecifiedPluginsFromOptions, {
       writable: true,
       value: () => {
-        const plugins = this.opts.plugins || [];
+        const {
+          plugins,
+        } = this.opts;
         plugins.forEach(pluginID => {
           const plugin = this.uppy.getPlugin(pluginID);
           if (plugin) {
@@ -1046,7 +1049,9 @@ export default class Dashboard extends UIPlugin {
         const thumbnail = this.uppy.getPlugin(`${this.id}:ThumbnailGenerator`);
         if (thumbnail) this.uppy.removePlugin(thumbnail);
       }
-      const plugins = this.opts.plugins || [];
+      const {
+        plugins,
+      } = this.opts;
       plugins.forEach(pluginID => {
         const plugin = this.uppy.getPlugin(pluginID);
         if (plugin) plugin.unmount();
@@ -1072,9 +1077,9 @@ export default class Dashboard extends UIPlugin {
         this.requestCloseModal();
       };
     }
-    (_this$opts4$onRequest = (_this$opts4 = this.opts).onRequestCloseModal) != null
-      ? _this$opts4$onRequest
-      : _this$opts4.onRequestCloseModal = () => this.closeModal();
+    (_this$opts$onRequestC = (_this$opts = this.opts).onRequestCloseModal) != null
+      ? _this$opts$onRequestC
+      : _this$opts.onRequestCloseModal = () => this.closeModal();
     this.i18nInit();
   }
   setOptions(opts) {
diff --git a/packages/@uppy/dashboard/lib/components/AddFiles.js b/packages/@uppy/dashboard/lib/components/AddFiles.js
index 8e4ee54..e785890 100644
--- a/packages/@uppy/dashboard/lib/components/AddFiles.js
+++ b/packages/@uppy/dashboard/lib/components/AddFiles.js
@@ -2,17 +2,25 @@ import { Component, Fragment, h } from "preact";
 class AddFiles extends Component {
   constructor() {
     super(...arguments);
+    this.fileInput = null;
+    this.folderInput = null;
+    this.mobilePhotoFileInput = null;
+    this.mobileVideoFileInput = null;
     this.triggerFileInputClick = () => {
-      this.fileInput.click();
+      var _this$fileInput;
+      (_this$fileInput = this.fileInput) == null || _this$fileInput.click();
     };
     this.triggerFolderInputClick = () => {
-      this.folderInput.click();
+      var _this$folderInput;
+      (_this$folderInput = this.folderInput) == null || _this$folderInput.click();
     };
     this.triggerVideoCameraInputClick = () => {
-      this.mobileVideoFileInput.click();
+      var _this$mobileVideoFile;
+      (_this$mobileVideoFile = this.mobileVideoFileInput) == null || _this$mobileVideoFile.click();
     };
     this.triggerPhotoCameraInputClick = () => {
-      this.mobilePhotoFileInput.click();
+      var _this$mobilePhotoFile;
+      (_this$mobilePhotoFile = this.mobilePhotoFileInput) == null || _this$mobilePhotoFile.click();
     };
     this.onFileInputChange = event => {
       this.props.handleInputChange(event);
@@ -305,16 +313,6 @@ class AddFiles extends Component {
       if (hasOnlyMyDevice) list = [];
       const listWithoutLastTwo = [...list];
       const lastTwo = listWithoutLastTwo.splice(list.length - 2, list.length);
-      const renderList = l =>
-        l.map(_ref => {
-          let {
-            key,
-            elements,
-          } = _ref;
-          return h(Fragment, {
-            key: key,
-          }, elements);
-        });
       return h(
         Fragment,
         null,
@@ -325,13 +323,33 @@ class AddFiles extends Component {
             className: "uppy-Dashboard-AddFiles-list",
             role: "tablist",
           },
-          renderList(listWithoutLastTwo),
-          h("span", {
-            role: "presentation",
-            style: {
-              "white-space": "nowrap",
+          listWithoutLastTwo.map(_ref => {
+            let {
+              key,
+              elements,
+            } = _ref;
+            return h(Fragment, {
+              key: key,
+            }, elements);
+          }),
+          h(
+            "span",
+            {
+              role: "presentation",
+              style: {
+                "white-space": "nowrap",
+              },
             },
-          }, renderList(lastTwo)),
+            lastTwo.map(_ref2 => {
+              let {
+                key,
+                elements,
+              } = _ref2;
+              return h(Fragment, {
+                key: key,
+              }, elements);
+            }),
+          ),
         ),
       );
     };
@@ -413,7 +431,7 @@ class AddFiles extends Component {
         this.props.note && h("div", {
           className: "uppy-Dashboard-note",
         }, this.props.note),
-        this.props.proudlyDisplayPoweredByUppy && this.renderPoweredByUppy(this.props),
+        this.props.proudlyDisplayPoweredByUppy && this.renderPoweredByUppy(),
       ),
     );
   }
diff --git a/packages/@uppy/dashboard/lib/components/Dashboard.js b/packages/@uppy/dashboard/lib/components/Dashboard.js
index 1fb0233..189b65d 100644
--- a/packages/@uppy/dashboard/lib/components/Dashboard.js
+++ b/packages/@uppy/dashboard/lib/components/Dashboard.js
@@ -55,7 +55,7 @@ export default function Dashboard(props) {
   const numberOfFilesForRecovery = props.recoveredState ? Object.keys(props.recoveredState.files).length : null;
   const numberOfGhosts = props.files
     ? Object.keys(props.files).filter(fileID => props.files[fileID].isGhost).length
-    : null;
+    : 0;
   const renderRestoredText = () => {
     if (numberOfGhosts > 0) {
       return props.i18n("recoveredXFiles", {
@@ -191,12 +191,23 @@ export default function Dashboard(props) {
             containerWidth: props.containerWidth,
             containerHeight: props.containerHeight,
           })
-          : h(
-            AddFiles,
-            _extends({}, props, {
-              isSizeMD: isSizeMD,
-            }),
-          ),
+          : h(AddFiles, {
+            i18n: props.i18n,
+            i18nArray: props.i18nArray,
+            acquirers: props.acquirers,
+            handleInputChange: props.handleInputChange,
+            maxNumberOfFiles: props.maxNumberOfFiles,
+            allowedFileTypes: props.allowedFileTypes,
+            showNativePhotoCameraButton: props.showNativePhotoCameraButton,
+            showNativeVideoCameraButton: props.showNativeVideoCameraButton,
+            nativeCameraFacingMode: props.nativeCameraFacingMode,
+            showPanel: props.showPanel,
+            activePickerPanel: props.activePickerPanel,
+            disableLocalFiles: props.disableLocalFiles,
+            fileManagerSelectionType: props.fileManagerSelectionType,
+            note: props.note,
+            proudlyDisplayPoweredByUppy: props.proudlyDisplayPoweredByUppy,
+          }),
         h(
           Slide,
           null,

[aduh95]

Let's try to reduce the changes in #5367 (comment) as close to 0 as possible

[lakesare]

@aduh95, as far as I see the only change that I can remove there is to return the renderList function.

I don't believe it's difficult to review here - if you think the version with the renderList was an easier read, I can revert it.

[aduh95]

@lakesare also the changes in AddFiles. If we have a PR with passing tests and no output diff, the reviewing is very straight forward, and it can land almost immediately. The changes that require changing the output/distributed files require more scrutiny.

[lakesare]

@lakesare also the changes in AddFiles. If we have a PR with passing tests and no output diff, the reviewing is very straight forward, and it can land almost immediately. The changes that require changing the output/distributed files require more scrutiny.

We don't need to land it immediately, these are genuine changes! Please review it as if the errors can crawl in, and then I'll throw my eye over it again before merging.
I understand the value of this diff when we're converting files that do not necessitate the change to functionality, but dashboard was relatively a mess type-wise, we did need to change stuff there.

[mifi]

This pr needs to be altered slightly after #5381 is merged, but other than that LGTM. Improving our flawed typings and readability outweighs bigger git diffs and a slight bundle size increase imo.

in the future we can probably increase our target browser supported versions so we don't have to transpile things like this:

-      this.folderInput?.click();
+      var _this$folderInput;
+      (_this$folderInput = this.folderInput) == null || _this$folderInput.click();