bodyshop/client/src/components/trello-board/dnd/Container.jsx

import React, { Component } from "react";
import PropTypes from "prop-types";
import container, { dropHandlers } from "../smooth-dnd";

container.dropHandler = dropHandlers.reactDropHandler().handler;
container.wrapChild = (p) => p; // don't wrap children they will already be wrapped

class Container extends Component {
  constructor(props) {
    super(props);
    this.getContainerOptions = this.getContainerOptions.bind(this);
    this.setRef = this.setRef.bind(this);
    this.prevContainer = null;
  }

  componentDidMount() {
    this.prevContainer = this.containerDiv;
    this.container = container(this.containerDiv, this.getContainerOptions());
  }

  componentWillUnmount() {
    this.container.dispose();
    this.container = null;
  }

  componentDidUpdate() {
    if (this.containerDiv) {
      if (this.prevContainer && this.prevContainer !== this.containerDiv) {
        this.container.dispose();
        this.container = container(this.containerDiv, this.getContainerOptions());
        this.prevContainer = this.containerDiv;
      }
    }
  }

  render() {
    if (this.props.render) {
      return this.props.render(this.setRef);
    } else {
      return (
        <div style={this.props.style} ref={this.setRef}>
          {this.props.children}
        </div>
      );
    }
  }

  setRef(element) {
    this.containerDiv = element;
  }

  getContainerOptions() {
    const functionProps = {};
    const propKeys = [
      "onDragStart",
      "onDragEnd",
      "onDrop",
      "getChildPayload",
      "shouldAnimateDrop",
      "shouldAcceptDrop",
      "onDragEnter",
      "onDragLeave",
      "render",
      "onDropReady",
      "getGhostParent"
    ];

    propKeys.forEach((key) => {
      if (this.props[key]) {
        functionProps[key] = (...p) => this.props[key](...p);
      }
    });

    return { ...this.props, ...functionProps };
  }
}

Container.propTypes = {
  behaviour: PropTypes.oneOf(["move", "copy", "drag-zone"]),
  groupName: PropTypes.string,
  orientation: PropTypes.oneOf(["horizontal", "vertical"]),
  style: PropTypes.object,
  dragHandleSelector: PropTypes.string,
  className: PropTypes.string,
  nonDragAreaSelector: PropTypes.string,
  dragBeginDelay: PropTypes.number,
  animationDuration: PropTypes.number,
  autoScrollEnabled: PropTypes.string,
  lockAxis: PropTypes.string,
  dragClass: PropTypes.string,
  dropClass: PropTypes.string,
  onDragStart: PropTypes.func,
  onDragEnd: PropTypes.func,
  onDrop: PropTypes.func,
  getChildPayload: PropTypes.func,
  shouldAnimateDrop: PropTypes.func,
  shouldAcceptDrop: PropTypes.func,
  onDragEnter: PropTypes.func,
  onDragLeave: PropTypes.func,
  render: PropTypes.func,
  getGhostParent: PropTypes.func,
  removeOnDropOut: PropTypes.bool
};

Container.defaultProps = {
  behaviour: "move",
  orientation: "vertical",
  className: "reactTrelloBoard"
};

export default Container;