@uppy/react: refactor to TS

[aduh95]

No description provided.

[github-actions]

Diff output files

diff --git a/packages/@uppy/react/lib/Dashboard.js b/packages/@uppy/react/lib/Dashboard.js
index 3f35eef..ea4a4a5 100644
--- a/packages/@uppy/react/lib/Dashboard.js
+++ b/packages/@uppy/react/lib/Dashboard.js
@@ -1,8 +1,9 @@
 import DashboardPlugin from "@uppy/dashboard";
+import PropTypes from "prop-types";
 import { Component, createElement as h } from "react";
 import getHTMLProps from "./getHTMLProps.js";
 import nonHtmlPropsHaveChanged from "./nonHtmlPropsHaveChanged.js";
-import { dashboard as basePropTypes } from "./propTypes.js";
+import { cssSize, locale, metaFields, plugins, uppy as uppyPropType } from "./propTypes.js";
 class Dashboard extends Component {
   componentDidMount() {
     this.installPlugin();
@@ -12,11 +13,13 @@ class Dashboard extends Component {
       this.uninstallPlugin(prevProps);
       this.installPlugin();
     } else if (nonHtmlPropsHaveChanged(this.props, prevProps)) {
-      const options = {
+      const {
+        uppy,
+        ...options
+      } = {
         ...this.props,
         target: this.container,
       };
-      delete options.uppy;
       this.plugin.setOptions(options);
     }
   }
@@ -26,13 +29,13 @@ class Dashboard extends Component {
   installPlugin() {
     const {
       uppy,
-    } = this.props;
-    const options = {
+      ...options
+    } = {
       id: "react:Dashboard",
+      inline: true,
       ...this.props,
       target: this.container,
     };
-    delete options.uppy;
     uppy.use(DashboardPlugin, options);
     this.plugin = uppy.getPlugin(options.id);
   }
@@ -55,8 +58,22 @@ class Dashboard extends Component {
     });
   }
 }
-Dashboard.propTypes = basePropTypes;
-Dashboard.defaultProps = {
-  inline: true,
+Dashboard.propsTypes = {
+  uppy: uppyPropType,
+  disableInformer: PropTypes.bool,
+  disableStatusBar: PropTypes.bool,
+  disableThumbnailGenerator: PropTypes.bool,
+  height: cssSize,
+  hideProgressAfterFinish: PropTypes.bool,
+  hideUploadButton: PropTypes.bool,
+  locale,
+  metaFields,
+  note: PropTypes.string,
+  plugins,
+  proudlyDisplayPoweredByUppy: PropTypes.bool,
+  showProgressDetails: PropTypes.bool,
+  width: cssSize,
+  thumbnailType: PropTypes.string,
+  thumbnailWidth: PropTypes.number,
 };
 export default Dashboard;
diff --git a/packages/@uppy/react/lib/DashboardModal.js b/packages/@uppy/react/lib/DashboardModal.js
index 9374119..6d18922 100644
--- a/packages/@uppy/react/lib/DashboardModal.js
+++ b/packages/@uppy/react/lib/DashboardModal.js
@@ -18,11 +18,14 @@ class DashboardModal extends Component {
       this.uninstallPlugin(prevProps);
       this.installPlugin();
     } else if (nonHtmlPropsHaveChanged(this.props, prevProps)) {
-      const options = {
+      const {
+        uppy,
+        ...options
+      } = {
         ...this.props,
+        inline: false,
         onRequestCloseModal: onRequestClose,
       };
-      delete options.uppy;
       this.plugin.setOptions(options);
     }
     if (prevProps.open && !open) {
@@ -36,19 +39,20 @@ class DashboardModal extends Component {
   }
   installPlugin() {
     const {
-      id = "react:DashboardModal",
       target = this.container,
       open,
       onRequestClose,
       uppy,
+      ...rest
     } = this.props;
     const options = {
-      ...this.props,
-      id,
+      ...rest,
+      id: "react:DashboardModal",
+      inline: false,
       target,
+      open,
       onRequestCloseModal: onRequestClose,
     };
-    delete options.uppy;
     uppy.use(DashboardPlugin, options);
     this.plugin = uppy.getPlugin(options.id);
     if (open) {
@@ -81,7 +85,6 @@ DashboardModal.propTypes = {
   onRequestClose: PropTypes.func,
   closeModalOnClickOutside: PropTypes.bool,
   disablePageScrollWhenModalOpen: PropTypes.bool,
-  inline: PropTypes.bool,
   plugins,
   width: cssSize,
   height: cssSize,
@@ -89,7 +92,7 @@ DashboardModal.propTypes = {
   note: PropTypes.string,
   metaFields,
   proudlyDisplayPoweredByUppy: PropTypes.bool,
-  autoOpen: PropTypes.oneOf(["imageEditor", "metaEditor", null]),
+  autoOpenFileEditor: PropTypes.bool,
   animateOpenClose: PropTypes.bool,
   browserBackButtonClose: PropTypes.bool,
   closeAfterFinish: PropTypes.bool,
@@ -116,7 +119,6 @@ DashboardModal.propTypes = {
 DashboardModal.defaultProps = {
   metaFields: [],
   plugins: [],
-  inline: false,
   width: 750,
   height: 550,
   thumbnailWidth: 280,
@@ -143,7 +145,7 @@ DashboardModal.defaultProps = {
   showRemoveButtonAfterComplete: false,
   browserBackButtonClose: false,
   theme: "light",
-  autoOpen: false,
+  autoOpenFileEditor: false,
   disabled: false,
   disableLocalFiles: false,
   open: undefined,
diff --git a/packages/@uppy/react/lib/DragDrop.js b/packages/@uppy/react/lib/DragDrop.js
index 1a26ebe..bda3b42 100644
--- a/packages/@uppy/react/lib/DragDrop.js
+++ b/packages/@uppy/react/lib/DragDrop.js
@@ -13,11 +13,13 @@ class DragDrop extends Component {
       this.uninstallPlugin(prevProps);
       this.installPlugin();
     } else if (nonHtmlPropsHaveChanged(this.props, prevProps)) {
-      const options = {
+      const {
+        uppy,
+        ...options
+      } = {
         ...this.props,
         target: this.container,
       };
-      delete options.uppy;
       this.plugin.setOptions(options);
     }
   }
@@ -42,7 +44,6 @@ class DragDrop extends Component {
       note,
       target: this.container,
     };
-    delete options.uppy;
     uppy.use(DragDropPlugin, options);
     this.plugin = uppy.getPlugin(options.id);
   }
diff --git a/packages/@uppy/react/lib/FileInput.js b/packages/@uppy/react/lib/FileInput.js
index 1fee5b0..d826e67 100644
--- a/packages/@uppy/react/lib/FileInput.js
+++ b/packages/@uppy/react/lib/FileInput.js
@@ -29,7 +29,6 @@ class FileInput extends Component {
       inputName,
       target: this.container,
     };
-    delete options.uppy;
     uppy.use(FileInputPlugin, options);
     this.plugin = uppy.getPlugin(options.id);
   }
diff --git a/packages/@uppy/react/lib/ProgressBar.js b/packages/@uppy/react/lib/ProgressBar.js
index 443182a..f445cca 100644
--- a/packages/@uppy/react/lib/ProgressBar.js
+++ b/packages/@uppy/react/lib/ProgressBar.js
@@ -13,11 +13,13 @@ class ProgressBar extends Component {
       this.uninstallPlugin(prevProps);
       this.installPlugin();
     } else if (nonHtmlPropsHaveChanged(this.props, prevProps)) {
-      const options = {
+      const {
+        uppy,
+        ...options
+      } = {
         ...this.props,
         target: this.container,
       };
-      delete options.uppy;
       this.plugin.setOptions(options);
     }
   }
@@ -36,7 +38,6 @@ class ProgressBar extends Component {
       hideAfterFinish,
       target: this.container,
     };
-    delete options.uppy;
     uppy.use(ProgressBarPlugin, options);
     this.plugin = uppy.getPlugin(options.id);
   }
diff --git a/packages/@uppy/react/lib/StatusBar.js b/packages/@uppy/react/lib/StatusBar.js
index c1c644e..15ef807 100644
--- a/packages/@uppy/react/lib/StatusBar.js
+++ b/packages/@uppy/react/lib/StatusBar.js
@@ -13,11 +13,13 @@ class StatusBar extends Component {
       this.uninstallPlugin(prevProps);
       this.installPlugin();
     } else if (nonHtmlPropsHaveChanged(this.props, prevProps)) {
-      const options = {
+      const {
+        uppy,
+        ...options
+      } = {
         ...this.props,
         target: this.container,
       };
-      delete options.uppy;
       this.plugin.setOptions(options);
     }
   }
@@ -46,7 +48,6 @@ class StatusBar extends Component {
       doneButtonHandler,
       target: this.container,
     };
-    delete options.uppy;
     uppy.use(StatusBarPlugin, options);
     this.plugin = uppy.getPlugin(options.id);
   }
diff --git a/packages/@uppy/react/lib/Wrapper.js b/packages/@uppy/react/lib/Wrapper.js
index e0a4c1b..0bf7e8f 100644
--- a/packages/@uppy/react/lib/Wrapper.js
+++ b/packages/@uppy/react/lib/Wrapper.js
@@ -2,9 +2,11 @@ import PropTypes from "prop-types";
 import { Component, createElement as h } from "react";
 import { uppy as uppyPropType } from "./propTypes.js";
 class UppyWrapper extends Component {
-  constructor(props) {
-    super(props);
-    this.refContainer = this.refContainer.bind(this);
+  constructor() {
+    super(...arguments);
+    this.refContainer = container => {
+      this.container = container;
+    };
   }
   componentDidMount() {
     this.installPlugin();
@@ -38,9 +40,6 @@ class UppyWrapper extends Component {
     } = this.props;
     uppy.getPlugin(plugin).unmount();
   }
-  refContainer(container) {
-    this.container = container;
-  }
   render() {
     return h("div", {
       className: "uppy-Container",
diff --git a/packages/@uppy/react/lib/propTypes.js b/packages/@uppy/react/lib/propTypes.js
index 354b1d6..beaea49 100644
--- a/packages/@uppy/react/lib/propTypes.js
+++ b/packages/@uppy/react/lib/propTypes.js
@@ -13,22 +13,4 @@ const metaField = PropTypes.shape({
 });
 const metaFields = PropTypes.oneOfType([PropTypes.arrayOf(metaField), PropTypes.func]);
 const cssSize = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
-const dashboard = {
-  uppy,
-  inline: PropTypes.bool,
-  plugins,
-  width: cssSize,
-  height: cssSize,
-  showProgressDetails: PropTypes.bool,
-  hideUploadButton: PropTypes.bool,
-  hideProgressAfterFinish: PropTypes.bool,
-  note: PropTypes.string,
-  metaFields,
-  proudlyDisplayPoweredByUppy: PropTypes.bool,
-  disableStatusBar: PropTypes.bool,
-  disableInformer: PropTypes.bool,
-  disableThumbnailGenerator: PropTypes.bool,
-  thumbnailWidth: PropTypes.number,
-  locale,
-};
-export { cssSize, dashboard, locale, metaFields, plugins, uppy };
+export { cssSize, locale, metaFields, plugins, uppy };

[Murderlon]

Two Qs, almost done

[Murderlon]

Should have reviewed this in the other PR but didn't foresee how we'd use it, but I initially envisioned we'd import DashboardInlineOptions which does this trick inside @uppy/dashboard. Then we keep the conditions of the discriminated union in one place instead of repeating it everywhere.

What do you think? Doesn't need a separate PR.

[aduh95]

I'm not sure if it's worth it, exporting a single type is less likely to confuse users. The fact that we need to remove the discriminated union here is probably more the exception than the rule.

[Murderlon]

Is this still used? I'm not sure what it does

[aduh95]

Yes it is exported:

uppy/packages/@uppy/react/src/Wrapper.ts

Line 59 in aa2c532

export default UppyWrapper