Full Body Dropdown Example with React Redux

actionTypes.jsx

export const SET_DROP_ZONE = 'SET_DROP_ZONE';

App.jsx

import React, {PropTypes} from 'react'
import { Router, Route, Link } from 'react-router'
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as commonActions from '../actions/commonActions';

// https://github.com/okonet/react-dropzone
import Dropzone from 'react-dropzone';

// REMOVES DEFAULT STYLE FROM DROPZONE
var dropStyle = {

};
var dropActiveStyle = {
};

class App extends React.Component{
  constructor(props, context){
    super(props, context);
    this.state = {
    };
    this.onDrop = this.onDrop.bind(this);
    this.onDragEnter = this.onDragEnter.bind(this);
    this.onDragLeave = this.onDragLeave.bind(this);
  }

  onDrop(acceptedFiles, rejectedFiles){
    // After dropping a file, set the global dropzonestate to false
    this.props.common_actions.setDropZone(false);
    console.log('Accepted files: ', acceptedFiles);
    console.log('Rejected files: ', rejectedFiles);
  }
  onDragEnter(){
    console.log("Entered Drag Dropzone");
    // When you drag a file over the dropzone, set the global dropzonestate to true
    this.props.common_actions.setDropZone(true);
  }
  onDragLeave(){
    console.log("Left Drag Dropzone")
    // When you drag off the dropzone, set the global dropzonestate to false
    this.props.common_actions.setDropZone(false);
  }
  
  // Checks the global dropZoneState for its value and conditionally adds the div   
  displayDropZoneModal(){
    if (this.props.ui.dropZoneState){
      return <div id="dropZoneModal"></div>
    }else{
      return ""
    }
  }

  render(){
    let childrenPages = this.props.children;
    
    return(
      <div>
        
        <Dropzone
          onDrop={this.onDrop}
          style={dropStyle}
          activeStyle={dropActiveStyle}
          className={""}
          activeClassName={""}
          disableClick={true}
          onDragEnter={this.onDragEnter}
          onDragLeave={this.onDragLeave}
          accept={"text/csv"}
          >
  
          <div className="container-fluid">
            {this.displayDropZoneModal()}
            <div id="containerPage">
              <div id="appBody">
                {childrenPages}
              </div>
            </div>
          </div>
        </Dropzone>
      </div>
    );
  }
}

App.propTypes = {
  children: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  ui: state.ui
})

function mapDispatchToProps(dispatch){
  return{
    common_actions: bindActionCreators(commonActions, dispatch)
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

commonActions.jsx

import * as types from './actionTypes';

export function setDropZone(dropZoneState){
  return {type: types.SET_DROP_ZONE, dropZoneState: dropZoneState};
}

main.scss

body{
  /* DISPLAYS AN OVERLAY OF ANY COLOR ACROSS THE ENTIRE WINDOW */
  #dropZoneModal{
    opacity:    0.5;
    background: #fff;
    width:      100%;
    height:     100%;
    z-index:    100000;
    position: fixed;
    left:0;
    top:0;
  }
}

uiReducer.jsx

import * as types from '../actions/actionTypes';

export default function ui(state = [], action){
  switch(action.type){
    
    // Reducer updates the global state 
    case types.SET_DROP_ZONE:
      return Object.assign({}, state, {
        dropZoneState: action.dropZoneState
      });

    default:
      return state;
  }
}

Nice idea.

I tried this using react component state + react-portal and it works.

However the onDragEnter & onDragLeave events are called multiple times while you are over the Dropzone.

Did you have a similar experience?

I am using Chrome 54 on OSX:

@wvance https://github.com/react-dropzone/react-dropzone/#word-of-caution-when-working-with-previews set disablePreview: true to avoid memory leaks