From 59bfaf0d209e10058b4eae054cc9fd57c6eff79e Mon Sep 17 00:00:00 2001
From: Andy Chong <andygg1996personal@gmail.com>
Date: Mon, 24 Feb 2020 22:13:01 +0800
Subject: [PATCH] react/drag-drop: add a type test and document shared props
 (#2003)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Update react-dragdrop.md

DragDrop component only accept `uppy` and `locale` props according to the type declared.
```
import { Uppy, Locale } from './CommonTypes';

export interface DragDropProps {
  uppy: Uppy;
  locale?: Locale;
}

/**
 * React component that renders an area in which files can be dropped to be
 * uploaded.
 */
declare const DragDrop: React.ComponentType<DragDropProps>;
export default DragDrop;```

* drag-drop: accept a number for width/height

* docs: add back dragdrop props

* docs: use the same option style as previously [skip ci]

Co-authored-by: Renée Kooi <renee@kooi.me>
---
 packages/@uppy/drag-drop/types/index.d.ts   |  4 ++--
 packages/@uppy/react/types/index.test-d.tsx | 20 ++++++++++++++++++++
 website/src/docs/react-dragdrop.md          | 12 ++++++++++++
 3 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/packages/@uppy/drag-drop/types/index.d.ts b/packages/@uppy/drag-drop/types/index.d.ts
index 6d96d9e3e..b83060eeb 100644
--- a/packages/@uppy/drag-drop/types/index.d.ts
+++ b/packages/@uppy/drag-drop/types/index.d.ts
@@ -7,8 +7,8 @@ declare module DragDrop {
     target?: Uppy.PluginTarget
     inputName?: string
     allowMultipleFiles?: boolean
-    width?: string
-    height?: string
+    width?: string | number
+    height?: string | number
     note?: string
     locale?: DragDropLocale
   }
diff --git a/packages/@uppy/react/types/index.test-d.tsx b/packages/@uppy/react/types/index.test-d.tsx
index 0c3efe9df..32c22dc79 100644
--- a/packages/@uppy/react/types/index.test-d.tsx
+++ b/packages/@uppy/react/types/index.test-d.tsx
@@ -18,3 +18,23 @@ function TestComponent() {
 // inline option should be removed from proptypes because it is always overridden
 // by the component
 expectError(<components.Dashboard inline />)
+
+{
+  const el = (
+    <components.DragDrop
+      width={200}
+      height={200}
+      note="Images up to 200×200px"
+      uppy={uppy}
+      locale={{
+        strings: {
+          // Text to show on the droppable area.
+          // `%{browse}` is replaced with a link that opens the system file selection dialog.
+          dropHereOr: "Drop here or %{browse}",
+          // Used as the label for the link that opens the system file selection dialog.
+          browse: "browse"
+        }
+      }}
+    />
+  )
+}
diff --git a/website/src/docs/react-dragdrop.md b/website/src/docs/react-dragdrop.md
index c9eddc7f7..c03c780b2 100644
--- a/website/src/docs/react-dragdrop.md
+++ b/website/src/docs/react-dragdrop.md
@@ -67,9 +67,21 @@ class MyComponent extends React.Component {
 The `<DragDrop />` component supports all [DragDrop](/docs/drag-drop/) options as props.
 
 ```js
+// assuming `this.uppy` contains an Uppy instance:
+
 <DragDrop
   width="100%"
   height="100%"
   note="Images up to 200×200px"
+  uppy={this.uppy}
+  locale={{
+    strings: {
+      // Text to show on the droppable area.
+      // `%{browse}` is replaced with a link that opens the system file selection dialog.
+      dropHereOr: "Drop here or %{browse}",
+      // Used as the label for the link that opens the system file selection dialog.
+      browse: "browse",
+    },
+  }}
 />
 ```