react-file-drop - npm Package Compare versions

Comparing version 0.2.6 to 0.2.7

dist/FileDrop/FileDrop.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="react" />
 import PropTypes from 'prop-types';
@@ -7,2 +6,5 @@ import React, { DragEvent as ReactDragEvent, DragEventHandler as ReactDragEventHandler } from 'react';
     className?: string;
+    targetClassName?: string;
+    draggingOverFrameClassName?: string;
+    draggingOverTargetClassName?: string;
     frame?: HTMLElement | Document;
@@ -25,12 +27,20 @@ onFrameDragEnter?: (event: DragEvent) => void;
         frame: Document;
+        className: string;
+        targetClassName: string;
+        draggingOverFrameClassName: string;
+        draggingOverTargetClassName: string;
     };
     static propTypes: {
-        onDragOver: PropTypes.Requireable<any>;
-        onDragLeave: PropTypes.Requireable<any>;
-        onDrop: PropTypes.Requireable<any>;
-        dropEffect: PropTypes.Requireable<any>;
+        className: PropTypes.Requireable<string>;
+        targetClassName: PropTypes.Requireable<string>;
+        draggingOverFrameClassName: PropTypes.Requireable<string>;
+        draggingOverTargetClassName: PropTypes.Requireable<string>;
+        onDragOver: PropTypes.Requireable<(...args: any[]) => any>;
+        onDragLeave: PropTypes.Requireable<(...args: any[]) => any>;
+        onDrop: PropTypes.Requireable<(...args: any[]) => any>;
+        dropEffect: PropTypes.Requireable<string>;
         frame: (props: any, propName: any, componentName: any) => Error;
-        onFrameDragEnter: PropTypes.Requireable<any>;
-        onFrameDragLeave: PropTypes.Requireable<any>;
-        onFrameDrop: PropTypes.Requireable<any>;
+        onFrameDragEnter: PropTypes.Requireable<(...args: any[]) => any>;
+        onFrameDragLeave: PropTypes.Requireable<(...args: any[]) => any>;
+        onFrameDrop: PropTypes.Requireable<(...args: any[]) => any>;
     };
@@ -37,0 +47,0 @@ frameDragCounter: number;

dist/FileDrop/FileDrop.js

@@ -108,12 +108,11 @@ var __extends = (this && this.__extends) || (function () {
     FileDrop.prototype.render = function () {
-        var className = 'file-drop';
-        if (this.props.className != null)
-            className += ' ' + this.props.className;
-        var fileDropTargetClassName = 'file-drop-target';
-        if (this.state.draggingOverFrame)
-            fileDropTargetClassName += ' file-drop-dragging-over-frame';
-        if (this.state.draggingOverTarget)
-            fileDropTargetClassName += ' file-drop-dragging-over-target';
+        var _a = this.props, children = _a.children, className = _a.className, targetClassName = _a.targetClassName, draggingOverFrameClassName = _a.draggingOverFrameClassName, draggingOverTargetClassName = _a.draggingOverTargetClassName;
+        var _b = this.state, draggingOverTarget = _b.draggingOverTarget, draggingOverFrame = _b.draggingOverFrame;
+        var fileDropTargetClassName = targetClassName;
+        if (draggingOverFrame)
+            fileDropTargetClassName += " " + draggingOverFrameClassName;
+        if (draggingOverTarget)
+            fileDropTargetClassName += " " + draggingOverTargetClassName;
         return (React.createElement("div", { className: className, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop },
-            React.createElement("div", { className: fileDropTargetClassName }, this.props.children)));
+            React.createElement("div", { className: fileDropTargetClassName }, children)));
     };
@@ -123,4 +122,12 @@ FileDrop.defaultProps = {
         frame: window ? window.document : undefined,
+        className: 'file-drop',
+        targetClassName: 'file-drop-target',
+        draggingOverFrameClassName: 'file-drop-dragging-over-frame',
+        draggingOverTargetClassName: 'file-drop-dragging-over-target',
     };
     FileDrop.propTypes = {
+        className: PropTypes.string,
+        targetClassName: PropTypes.string,
+        draggingOverFrameClassName: PropTypes.string,
+        draggingOverTargetClassName: PropTypes.string,
         onDragOver: PropTypes.func,
@@ -127,0 +134,0 @@ onDragLeave: PropTypes.func,

package.json

 {
   "name": "react-file-drop",
   "author": "https://sarink.net",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "description": "React component for Gmail or Facbook -like drag and drop file uploader. Drag files anywhere onto the window to highlight a 'drop area' of the page",
@@ -6,0 +6,0 @@ "main": "dist/FileDrop/FileDrop.js",

README.md

@@ -62,2 +62,14 @@ # react-file-drop
 
+##### className - string (default: file-drop)
+Class given to the outer container div.
+
+##### targetClassName - string (default: file-drop-target)
+Class given to the target div.
+
+##### draggingOverFrameClassName - string (default: file-drop-dragging-over-frame)
+Class given to the target div when file is being dragged over frame.
+
+##### draggingOverTargetClassName - string (default: file-drop-dragging-over-target)
+Class given to the target div when file is being dragged over target.
+
 ## Styling
@@ -78,2 +90,9 @@ By default, the component comes with no styles. You can grab the [demo CSS](https://raw.githubusercontent.com/sarink/react-file-drop/master/src/Demo/Demo.css) to get you started.
 
+For custom class names you can use the following props:
+
+* className
+* targetClassName
+* draggingOverFrameClassName
+* draggingOverTargetClassName
+
 ## Contributing
@@ -80,0 +99,0 @@ Your PRs are welcome! To run the app locally:

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 2 instances in 1 package

Improved metrics

Total package byte prevSize

160874

increased by1.5%

Lines of code

1159

increased by3.11%

Number of lines in readme file

110

increased by20.88%

Worsened metrics

Number of low supply chain risk alerts

5

increased by66.67%

No dependency changes