Added custom classname props

racingrebel · Aug 13, 2018 · 497d9e2 · 497d9e2
1 parent e51ba52
commit 497d9e2
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 23 deletions.
diff --git a/README.md b/README.md
@@ -59,6 +59,18 @@ Callback when the user stops dragging over the ``frame``
 ##### onFrameDrop - function(event)
 Callback when the user drops files *anywhere* over the ``frame``
 
+#####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
 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.
 
@@ -74,6 +86,13 @@ The ``file-drop-dragging-over-frame`` class will be added to the ``file-drop-tar
 ##### .file-drop > .file-drop-target.file-drop-dragging-over-target
 The ``file-drop-dragging-over-target`` class will be added to the ``file-drop-target`` whenever the user begins dragging a file over the ``file-drop-target`` div, and it will be removed when they leave
 
+For custom class names you can use the following props:
+
+* className
+* targetClassName
+* draggingOverFrameClassName
+* draggingOverTargetClassName
+
 ## Contributing
 Your PRs are welcome! To run the app locally:
 

diff --git a/dist/FileDrop/FileDrop.d.ts b/dist/FileDrop/FileDrop.d.ts
@@ -1,9 +1,11 @@
-/// <reference types="react" />
 import PropTypes from 'prop-types';
 import React, { DragEvent as ReactDragEvent, DragEventHandler as ReactDragEventHandler } from 'react';
 export declare type TDropEffects = 'copy' | 'move' | 'link' | 'none';
 export interface IFileDropProps {
     className?: string;
+    targetClassName?: string;
+    draggingOverFrameClassName?: string;
+    draggingOverTargetClassName?: string;
     frame?: HTMLElement | Document;
     onFrameDragEnter?: (event: DragEvent) => void;
     onFrameDragLeave?: (event: DragEvent) => void;
@@ -21,16 +23,24 @@ declare class FileDrop extends React.PureComponent<IFileDropProps, IFileDropStat
     static defaultProps: {
         dropEffect: TDropEffects;
         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>;
     };
     frameDragCounter: number;
     constructor(props: IFileDropProps);

diff --git a/dist/FileDrop/FileDrop.js b/dist/FileDrop/FileDrop.js
@@ -105,22 +105,29 @@ var FileDrop = /** @class */ (function (_super) {
         window.removeEventListener('drop', this.handleWindowDragOverOrDrop);
     };
     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)));
     };
     FileDrop.defaultProps = {
         dropEffect: 'copy',
         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,
         onDragLeave: PropTypes.func,
         onDrop: PropTypes.func,

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "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",
   "main": "dist/FileDrop/FileDrop.js",
   "types": "dist/FileDrop/FileDrop.d.ts",

diff --git a/src/FileDrop/FileDrop.tsx b/src/FileDrop/FileDrop.tsx
@@ -6,6 +6,9 @@ export type TDropEffects = 'copy' | 'move' | 'link' | 'none';
 
 export interface IFileDropProps {
   className?: string;
+  targetClassName?: string;
+  draggingOverFrameClassName?: string;
+  draggingOverTargetClassName?: string;
   frame?: HTMLElement | Document;
   onFrameDragEnter?: (event:DragEvent) => void;
   onFrameDragLeave?: (event:DragEvent) => void;
@@ -24,9 +27,17 @@ class FileDrop extends React.PureComponent<IFileDropProps, IFileDropState> {
   static defaultProps = {
     dropEffect: ('copy' as TDropEffects),
     frame: window ? window.document : undefined,
+    className: 'file-drop',
+    targetClassName: 'file-drop-target',
+    draggingOverFrameClassName: 'file-drop-dragging-over-frame',
+    draggingOverTargetClassName: 'file-drop-dragging-over-target'
   };
 
   static propTypes = {
+    className: PropTypes.string,
+    targetClassName: PropTypes.string,
+    draggingOverFrameClassName: PropTypes.string,
+    draggingOverTargetClassName: PropTypes.string,
     onDragOver: PropTypes.func,
     onDragLeave: PropTypes.func,
     onDrop: PropTypes.func,
@@ -165,12 +176,19 @@ class FileDrop extends React.PureComponent<IFileDropProps, IFileDropState> {
   }
 
   render() {
-    let className = 'file-drop';
-    if (this.props.className != null) className += ' ' + this.props.className;
-
-    let fileDropTargetClassName = 'file-drop-target';
-    if (this.state.draggingOverFrame) fileDropTargetClassName += ' file-drop-dragging-over-frame';
-    if (this.state.draggingOverTarget) fileDropTargetClassName += ' file-drop-dragging-over-target';
+    const {
+      children,
+      className,
+      targetClassName,
+      draggingOverFrameClassName,
+      draggingOverTargetClassName } = this.props;
+    const {
+      draggingOverTarget,
+      draggingOverFrame } = this.state;
+
+    let fileDropTargetClassName = targetClassName;
+    if (draggingOverFrame) fileDropTargetClassName += ` ${draggingOverFrameClassName}`;
+    if (draggingOverTarget) fileDropTargetClassName += ` ${draggingOverTargetClassName}`;
 
     return (
       <div