react-dropzone - npm Package Compare versions

Comparing version 1.2.2 to 1.2.3

index.js

@@ -19,3 +19,7 @@ var React = require('react');
     onDrop: React.PropTypes.func.isRequired,
+    onDragOver: React.PropTypes.func,
+    onDragLeave: React.PropTypes.func,
     size: React.PropTypes.number,
+    width: React.PropTypes.number,
+    height: React.PropTypes.number,
     style: React.PropTypes.object,
@@ -31,2 +35,6 @@ supportClick: React.PropTypes.bool,
     });
+
+    if (this.props.onDragLeave) {
+      this.props.onDragLeave(e);
+    }
   },
@@ -36,2 +44,3 @@
     e.preventDefault();
+    e.stopPropagation();
     e.dataTransfer.dropEffect = 'copy';
@@ -42,2 +51,6 @@
     });
+
+    if (this.props.onDragOver) {
+      this.props.onDragOver(e);
+    }
   },
@@ -83,3 +96,2 @@
   render: function() {
-
     var className = this.props.className || 'dropzone';
@@ -90,14 +102,35 @@ if (this.state.isDragActive) {
 
-    var style = this.props.style || {
-      width: this.props.size || 100,
-      height: this.props.size || 100,
-      borderStyle: this.state.isDragActive ? 'solid' : 'dashed'
-    };
+    var style = {};
+    if (this.props.style) { // user-defined inline styles take priority
+      style = this.props.style;
+    } else if (!this.props.className) { // if no class or inline styles defined, use defaults
+      style = {
+        width: this.props.width || this.props.size || 100,
+        height: this.props.height || this.props.size || 100,
+        borderStyle: this.state.isDragActive ? 'solid' : 'dashed'
+      };
+    }
 
-
     return (
-        React.createElement('div', {className: className, style: style, onClick: this.onClick, onDragLeave: this.onDragLeave, onDragOver: this.onDragOver, onDrop: this.onDrop},
-            React.createElement('input', {style: {display: 'none'}, type: 'file', multiple: this.props.multiple, ref: 'fileInput', onChange: this.onDrop, accept: this.props.accept}),
-            this.props.children
-        )
+      React.createElement('div',
+        {
+          className: className,
+          style: style,
+          onClick: this.onClick,
+          onDragLeave: this.onDragLeave,
+          onDragOver: this.onDragOver,
+          onDrop: this.onDrop
+        },
+        React.createElement('input',
+          {
+            style: { display: 'none' },
+            type: 'file',
+            multiple: this.props.multiple,
+            ref: 'fileInput',
+            onChange: this.onDrop,
+            accept: this.props.accept
+          }
+        ),
+        this.props.children
+      )
     );
@@ -104,0 +137,0 @@ }

package.json

 {
   "name": "react-dropzone",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "Simple HTML5 drag-drop zone in React",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -15,4 +15,8 @@ react-dropzone
 
-You can also specify a `style` object to apply to the `Dropzone` component. Optionally pass in a `size` property to configure the size of the Dropzone.
+You can specify a `style` object to apply some basic styles to the `Dropzone` component, or alternatively use the `className` property to style the component with custom CSS.
 
+If no `style` or `className` properties are defined, the style object will default to the `width` and `height` properties (or `100px` if they aren't defined) along with a `borderStyle` of "solid" or "dashed" depending on if drag actions are taking place.
+
+You can alternatively specify a `size` property which is an integer that sets both `style.width` and `style.height` to the same value.
+
 ```jsx
@@ -32,3 +36,3 @@
           <div>
-            <Dropzone onDrop={this.onDrop} size={150} >
+            <Dropzone onDrop={this.onDrop} width={150} height={100}>
               <div>Try dropping some files here, or click to select files to upload.</div>
@@ -44,3 +48,2 @@ </Dropzone>
 
-
 Using `react-dropzone` is similar to using a file form field, but instead of getting the `files` property from the field, you listen to the `onDrop` callback to handle the files. Simple explanation here: http://abandon.ie/notebook/simple-file-uploads-using-jquery-ajax
@@ -47,0 +50,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

657261

increased by0.18%

Lines of code

17909

increased by0.18%

Number of lines in readme file

105

increased by2.94%

No dependency changes