react-dropzone 7.0.1 → 8.0.3

package/examples/FileDialog/Readme.md

@@ -1,36 +1,53 @@
-**Please note**, that for security reasons most browsers require popups and dialogues to originate from a direct user interaction (i.e. click). If you are calling `dropzoneRef.open()` asynchronously, there’s a good chance it’s going to be blocked by the browser. So if you are calling `dropzoneRef.open()` asynchronously, be sure there is no more than *1000ms* delay between user interaction and `dropzoneRef.open()` call. Due to the lack of official docs on this (at least we haven’t found any. If you know one, feel free to open PR), there is no guarantee that **allowed delay duration** will not be changed in later browser versions. Since implementations may differ between different browsers, avoid calling open asynchronously if possible.
+You can programmatically invoke the default OS file prompt; there are two ways to do that:
 
-You can programmatically invoke default OS file prompt. There are two ways to do that. The first is to provide a function as the child for `Dropzone` to access the `open` method as a parameter. The second way is to set the ref on your `Dropzone` instance and call the instance `open` method.
+- Provide a function as the child for `Dropzone` to access the `open` method as a parameter
+- Set the ref on your `Dropzone` instance and call the instance `open` method
 
-##### Open programmatically by Child Function
+**Note** that for security reasons most browsers require popups and dialogues to originate from a direct user interaction (i.e. click).
 
-```
-<Dropzone onDrop={files => alert(JSON.stringify(files))} disableClick>
-  {({ open }) => (
-    <React.Fragment>
-      <button type="button" onClick={() => open()}>
-        Open File Dialog
-      </button>
-
-      <p>Drop files here.</p>
-    </React.Fragment>
+If you are calling `dropzoneRef.open()` asynchronously, there’s a good chance it’s going to be blocked by the browser. So if you are calling `dropzoneRef.open()` asynchronously, be sure there is no more than *1000ms* delay between user interaction and `dropzoneRef.open()` call.
+
+Due to the lack of official docs on this (at least we haven’t found any. If you know one, feel free to open PR), there is no guarantee that **allowed delay duration** will not be changed in later browser versions. Since implementations may differ between different browsers, avoid calling open asynchronously if possible.
+
+#### Open programmatically using the children function param
+
+```jsx harmony
+<Dropzone
+  onDrop={files => alert(JSON.stringify(files.map(f => f.name)))}
+  disableClick
+>
+  {({getRootProps, getInputProps, open}) => (
+    <div {...getRootProps()}>
+      <input {...getInputProps()} />
+        <p>Drop files here</p>
+
+        <button type="button" onClick={() => open()}>
+          Open File Dialog
+        </button>
+    </div>
   )}
 </Dropzone>
 ```
 
-##### Open programmatically by Ref
+#### Open programmatically using the Dropzone ref
 
-```
+```jsx harmony
 const dropzoneRef = React.createRef();
 
-<div>
-  <Dropzone ref={dropzoneRef} onDrop={(accepted, rejected) => { alert(JSON.stringify(accepted)) }}>
-      <p>Drop files here.</p>
-  </Dropzone>
-  <button type="button" onClick={() => { dropzoneRef.current.open() }}>
-      Open File Dialog
-  </button>
-</div>
+<Dropzone
+  ref={dropzoneRef}
+  onDrop={files => { alert(JSON.stringify(files.map(f => f.name))) }}
+  disableClick
+>
+  {({getRootProps, getInputProps}) => (
+    <div {...getRootProps()}>
+      <input {...getInputProps()} />
+        <p>Drop files here</p>
+
+        <button type="button" onClick={() => dropzoneRef.current.open()}>
+          Open File Dialog
+        </button>
+    </div>
+  )}
+</Dropzone>
 ```
-
-The completion handler for the `open` function is also the `onDrop` function.

package/examples/Folders/Readme.md

@@ -1,45 +1,49 @@
 Dropzone that accepts folders as drag-and-drop. Supports multiple folders and subfolders.
 
 ```jsx harmony
-const { fromEvent } = require('file-selector')
+const {fromEvent} = require('file-selector')
 
-class FolderDropzone extends React.Component {
+class Folders extends React.Component {
   constructor() {
     super()
-    this.state = { files: [] }
+    this.state = {
+      files: []
+    }
   }
 
   onDrop(files) {
-    this.setState({
-      files
-    })
+    this.setState({files})
   }
 
   render() {
+    const files = this.state.files.map(f => (
+      <li key={f.name}>
+        {f.path} - {f.size} bytes
+      </li>
+    ))
     return (
       <section>
-        <div className="dropzone">
+        <div>
           <Dropzone
             getDataTransferItems={evt => fromEvent(evt)}
             onDrop={this.onDrop.bind(this)}
           >
-            <p>Drop a folder with files here.</p>
+            {({getRootProps, getInputProps}) => (
+              <div {...getRootProps()}>
+                <input {...getInputProps()} />
+                  <p>Drop a folder with files here</p>
+              </div>
+            )}
           </Dropzone>
         </div>
         <aside>
-          <h2>Dropped files and folders</h2>
-          <ul>
-            {this.state.files.map(f => (
-              <li key={f.name}>
-                {f.path} - {f.size} bytes
-              </li>
-            ))}
-          </ul>
+          <h4>Files</h4>
+          <ul>{files}</ul>
         </aside>
       </section>
     )
   }
 }
 
-<FolderDropzone />
+<Folders />
 ```

package/examples/Fullscreen/Readme.md

@@ -1,33 +1,29 @@
 You can wrap the whole app into the dropzone. This will make the whole app a Dropzone target.
 
 ```jsx harmony
+const overlayStyle = {
+  position: 'absolute',
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  padding: '2.5em 0',
+  background: 'rgba(0,0,0,0.5)',
+  textAlign: 'center',
+  color: '#fff'
+};
+
 class FullScreen extends React.Component {
   constructor() {
     super()
     this.state = {
       accept: '',
-      files: [],
-      dropzoneActive: false
+      files: []
     }
   }
 
-  onDragEnter() {
-    this.setState({
-      dropzoneActive: true
-    });
-  }
-
-  onDragLeave() {
-    this.setState({
-      dropzoneActive: false
-    });
-  }
-
   onDrop(files) {
-    this.setState({
-      files,
-      dropzoneActive: false
-    });
+    this.setState({files});
   }
 
   applyMimeTypes(event) {
@@ -37,45 +33,36 @@ class FullScreen extends React.Component {
   }
 
   render() {
-    const { accept, files, dropzoneActive } = this.state;
-    const overlayStyle = {
-      position: 'absolute',
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-      padding: '2.5em 0',
-      background: 'rgba(0,0,0,0.5)',
-      textAlign: 'center',
-      color: '#fff'
-    };
+    const { accept } = this.state;
+
+    const files = this.state.files.map((file, index) => (
+      <li key={file.name}>
+        {file.name} - {file.size} bytes
+      </li>
+    ))
+
     return (
       <Dropzone
-        disableClick
-        style={{position: "relative"}}
         accept={accept}
         onDrop={this.onDrop.bind(this)}
-        onDragEnter={this.onDragEnter.bind(this)}
-        onDragLeave={this.onDragLeave.bind(this)}
+        disableClick
       >
-        { dropzoneActive && <div style={overlayStyle}>Drop files...</div> }
-        <div>
-          <h1>My awesome app</h1>
-          <label htmlFor="mimetypes">Enter mime types you want to accept: </label>
-          <input
-            type="text"
-            id="mimetypes"
-            onChange={this.applyMimeTypes.bind(this)}
-          />
-
-          <h2>Dropped files</h2>
-          <ul>
-            {
-              files.map((file, index) => <li key={index}>{file.name} - {file.size} bytes</li>)
-            }
-          </ul>
+        {({getRootProps, getInputProps, isDragActive}) => (
+            <div {...getRootProps()} style={{position: "relative"}}>
+              <input {...getInputProps()} />
+              { isDragActive && <div style={overlayStyle}>Drop files here</div> }    
+              <h4>My awesome app</h4>
+              <label htmlFor="mimetypes">Enter mime types you want to accept: </label>
+              <input
+                type="text"
+                id="mimetypes"
+                onChange={this.applyMimeTypes.bind(this)}
+              />
 
-        </div>
+              <h4>Files</h4>
+              <ul>{files}</ul>
+            </div>
+        )}
       </Dropzone>
     );
   }

package/examples/Nesting/Readme.md

@@ -68,16 +68,23 @@ class NestedDropzone extends React.Component {
             onDragOver={this.createDragHandler('dragover', 'parent')}
             onDragLeave={this.createDragHandler('dragleave', 'parent')}
             onDrop={this.createDropHandler('parent')}
-            style={parentStyle}
           >
-            <Dropzone
-              onDragStart={this.createDragHandler('dragstart', 'child')}
-              onDragEnter={this.createDragHandler('dragenter', 'child')}
-              onDragOver={this.createDragHandler('dragover', 'child')}
-              onDragLeave={this.createDragHandler('dragleave', 'child')}
-              onDrop={this.createDropHandler('child')}
-              style={childStyle}
-            />
+            {({getRootProps, getInputProps}) => (
+              <div {...getRootProps()} style={parentStyle}>
+                <Dropzone
+                  onDragStart={this.createDragHandler('dragstart', 'child')}
+                  onDragEnter={this.createDragHandler('dragenter', 'child')}
+                  onDragOver={this.createDragHandler('dragover', 'child')}
+                  onDragLeave={this.createDragHandler('dragleave', 'child')}
+                  onDrop={this.createDropHandler('child')}
+                  style={childStyle}
+                >
+                {({getRootProps, getInputProps}) => (
+                  <div {...getRootProps()} style={childStyle} />
+                )}
+                </Dropzone>
+              </div>
+            )}
           </Dropzone>
         </div>
         <aside>

package/examples/PluginArchitecture/Readme.md

@@ -18,10 +18,12 @@ async function myCustomFileGetter(evt) {
   return files;
 }
 
-class PulginExample extends React.Component {
+class Plugin extends React.Component {
   constructor() {
     super()
-    this.state = { files: [] }
+    this.state = {
+      files: []
+    }
   }
 
   onDrop(files) {
@@ -31,30 +33,34 @@ class PulginExample extends React.Component {
   }
 
   render() {
+    const files = this.state.files.map(f => (
+      <li key={f.name}>
+        {f.name} has <strong>myProps</strong>: {f.myProp === true ? 'YES' : ''}
+      </li>
+    ))
     return (
       <section>
-        <div className="dropzone">
+        <div>
           <Dropzone
             getDataTransferItems={evt => myCustomFileGetter(evt)}
             onDrop={this.onDrop.bind(this)}
           >
-            <p>Drop some files here ...</p>
+            {({getRootProps, getInputProps}) => (
+              <div {...getRootProps()}>
+                <input {...getInputProps()} />
+                  <p>Drop files here</p>
+              </div>
+            )}
           </Dropzone>
         </div>
         <aside>
-          <h2>Dropped files</h2>
-          <ul>
-            {this.state.files.map(f => (
-              <li key={f.name}>
-                {f.name} has <strong>myProps</strong>: {f.myProp === true ? 'YES' : ''}
-              </li>
-            ))}
-          </ul>
+          <h4>Files</h4>
+          <ul>{files}</ul>
         </aside>
       </section>
     )
   }
 }
 
-<PulginExample />
+<Plugin />
 ```

package/examples/Previews/Readme.md

@@ -44,8 +44,7 @@ class DropzoneWithPreview extends React.Component {
 
   onDrop(files) {
     this.setState({
-      files: files.map(file => ({
-        ...file,
+      files: files.map(file => Object.assign(file, {
         preview: URL.createObjectURL(file)
       }))
     });
@@ -53,18 +52,14 @@ class DropzoneWithPreview extends React.Component {
 
   componentWillUnmount() {
     // Make sure to revoke the data uris to avoid memory leaks
-    const {files} = this.state;
-    for (let i = files.length; i >= 0; i--) {
-      const file = files[0];
-      URL.revokeObjectURL(file.preview);
-    }
+    this.state.files.forEach(file => URL.revokeObjectURL(file.preview))
   }
 
   render() {
     const {files} = this.state;
 
     const thumbs = files.map(file => (
-      <div style={thumb}>
+      <div style={thumb} key={file.name}>
         <div style={thumbInner}>
           <img
             src={file.preview}
@@ -76,12 +71,17 @@ class DropzoneWithPreview extends React.Component {
 
     return (
       <section>
-        <div className="dropzone">
-          <Dropzone
-            accept="image/*"
-            onDrop={this.onDrop.bind(this)}
-          />
-        </div>
+        <Dropzone
+          accept="image/*"
+          onDrop={this.onDrop.bind(this)}
+        >
+          {({getRootProps, getInputProps}) => (
+            <div {...getRootProps()}>
+              <input {...getInputProps()} />
+              <p>Drop files here</p>
+            </div>
+          )}
+        </Dropzone>
         <aside style={thumbsContainer}>
           {thumbs}
         </aside>

package/examples/Styling/Readme.md

@@ -1,24 +1,88 @@
-By default, the Dropzone component picks up some default styling to get you started. You can customize `<Dropzone>` by specifying a `style`, `activeStyle` or `rejectStyle` which is applied when a file is dragged over the zone. You can also specify `className`,  `activeClassName` or `rejectClassName` if you would rather style using CSS.
+By default, the Dropzone component doesn't render any styles.
+By providing a function that returns the component's children you can not only style Dropzone appropriately but also render appropriate content.
 
-## Updating styles and contents based on user input
+### Using inline styles
 
 By providing a function that returns the component's children you can not only style Dropzone appropriately but also render appropriate content.
 
-```jsx
-<Dropzone
-  accept="image/png"
->
-  {({ isDragAccept, isDragReject, acceptedFiles, rejectedFiles }) => {
-    if (acceptedFiles.length || rejectedFiles.length) {
-      return `Accepted ${acceptedFiles.length}, rejected ${rejectedFiles.length} files`;
-    }
-    if (isDragAccept) {
-      return "This file is authorized";
-    }
-    if (isDragReject) {
-      return "This file is not authorized";
-    }
-    return "Try dropping some files.";
+```jsx harmony
+const baseStyle = {
+  width: 200,
+  height: 200,
+  borderWidth: 2,
+  borderColor: '#666',
+  borderStyle: 'dashed',
+  borderRadius: 5
+};
+const activeStyle = {
+  borderStyle: 'solid',
+  borderColor: '#6c6',
+  backgroundColor: '#eee'
+};
+const rejectStyle = {
+  borderStyle: 'solid',
+  borderColor: '#c66',
+  backgroundColor: '#eee'
+};
+
+<Dropzone accept="image/*">
+  {({ getRootProps, getInputProps, isDragActive, isDragAccept, isDragReject, acceptedFiles, rejectedFiles }) => {
+    let styles = {...baseStyle}
+    styles = isDragActive ? {...styles, ...activeStyle} : styles
+    styles = isDragReject ? {...styles, ...rejectStyle} : styles
+          
+    return (
+      <div 
+        {...getRootProps()}
+        style={styles}
+      >
+        <input {...getInputProps()} />
+        <div>
+          {isDragAccept ? 'Drop' : 'Drag'} files here...
+        </div>
+        {isDragReject && <div>Unsupported file type...</div>}
+      </div>
+    )
+  }}
+</Dropzone>
+```
+
+### Using styled-components
+
+```jsx harmony
+const styled = require('styled-components').default;
+
+const getColor = (props) => {
+  if (props.isDragReject) {
+      return '#c66';
+  }
+  if (props.isDragActive) {    
+      return '#6c6';
+  } 
+  return '#666';
+};
+
+const Container = styled.div`
+  width: 200px;
+  height: 200px;
+  border-width: 2px;
+  border-radius: 5px;
+  border-color: ${props => getColor(props)};
+  border-style: ${props => props.isDragReject || props.isDragActive ? 'solid' : 'dashed'};
+  background-color: ${props => props.isDragReject || props.isDragActive ? '#eee' : ''};
+`;
+
+<Dropzone accept="image/*">
+  {({ getRootProps, isDragActive, isDragAccept, isDragReject, acceptedFiles }) => {
+    return (
+      <Container
+        isDragActive={isDragActive}
+        isDragReject={isDragReject}
+        {...getRootProps()}
+      >
+        {isDragAccept ? 'Drop' : 'Drag'} files here...
+      </Container>
+    )
   }}
 </Dropzone>
 ```

package/package.json

@@ -134,6 +134,7 @@
     "rollup-plugin-node-resolve": "^3.3.0",
     "rollup-plugin-uglify": "^3.0.0",
     "size-limit": "^0.19.2",
+    "styled-components": "^4.1.2",
     "webpack-blocks": "^1.0.0",
     "sinon": "^3.2.1",
     "style-loader": "^0.18.2",
@@ -147,7 +148,7 @@
       "path": "@commitlint/prompt"
     }
   },
-  "version": "7.0.1",
+  "version": "8.0.3",
   "engines": {
     "node": ">= 6"
   }

package/src/__snapshots__/index.spec.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Dropzone basics should render children 1`] = `"<div class=\\"\\" style=\\"position: relative; width: 200px; height: 200px; border-width: 2px; border-color: #666; border-style: dashed; border-radius: 5px;\\" aria-disabled=\\"false\\"><p>some content</p><input type=\\"file\\" style=\\"position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; opacity: 0.00001; pointer-events: none;\\" multiple=\\"\\" autocomplete=\\"off\\"></div>"`;
+exports[`Dropzone basics should render children 1`] = `"<div tabindex=\\"0\\"><input type=\\"file\\" style=\\"display: none;\\" multiple=\\"\\" autocomplete=\\"off\\" tabindex=\\"-1\\"></div>"`;
 
-exports[`Dropzone document drop protection does not prevent stray drops when preventDropOnDocument is false 1`] = `"<div class=\\"\\" style=\\"position: relative; width: 200px; height: 200px; border-width: 2px; border-color: #666; border-style: dashed; border-radius: 5px;\\" aria-disabled=\\"false\\"><input type=\\"file\\" style=\\"position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; opacity: 0.00001; pointer-events: none;\\" multiple=\\"\\" autocomplete=\\"off\\"></div>"`;
+exports[`Dropzone document drop protection does not prevent stray drops when preventDropOnDocument is false 1`] = `"<div tabindex=\\"0\\"><input type=\\"file\\" style=\\"display: none;\\" multiple=\\"\\" autocomplete=\\"off\\" tabindex=\\"-1\\"></div>"`;
 
-exports[`Dropzone document drop protection installs hooks to prevent stray drops from taking over the browser window 1`] = `"<div class=\\"\\" style=\\"position: relative; width: 200px; height: 200px; border-width: 2px; border-color: #666; border-style: dashed; border-radius: 5px;\\" aria-disabled=\\"false\\"><p>Content</p><input type=\\"file\\" style=\\"position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; opacity: 0.00001; pointer-events: none;\\" multiple=\\"\\" autocomplete=\\"off\\"></div>"`;
+exports[`Dropzone document drop protection installs hooks to prevent stray drops from taking over the browser window 1`] = `"<div tabindex=\\"0\\"><input type=\\"file\\" style=\\"display: none;\\" multiple=\\"\\" autocomplete=\\"off\\" tabindex=\\"-1\\"><p>Content</p></div>"`;