reason dnd

Layout.re

let component = ReasonReact.statelessComponent("Layout");

let make = (~canDrop: bool, ~isOver: bool, ~connectDropTarget, _children) => {
  ...component,
  render: _self =>
    connectDropTarget(
      <div className="Layout">
        <p>
          (
            ReasonReact.stringToElement(
              canDrop && isOver ? "Release to drop" : "Drag a box here"
            )
          )
        </p>
      </div>
    )
};

let default =
  ReasonReact.wrapReasonForJs(~component, jsProps =>
    make(
      ~canDrop=Js.to_bool(jsProps##canDrop),
      ~isOver=Js.to_bool(jsProps##isOver),
      ~connectDropTarget=jsProps##connectDropTarget,
      [||]
    )
  );

LayoutDrop.re

let dropTarget: ReasonReact.reactClass => ReasonReact.reactClass = [%bs.raw
  {|
  function(componentClass) {
    const boxTarget = {
      drop() {
        return { name: 'Layout' }
      },
    }

    function collect(connect, monitor) {
      return {
        connectDropTarget: connect.dropTarget(),
        isOver: monitor.isOver(),
        canDrop: monitor.canDrop(),
      };
    }

    const DropTarget = require('react-dnd').DropTarget;
    return DropTarget("LAYOUT", boxTarget, collect)(componentClass);
  }
|}
];

let wrapedReactClass = dropTarget(Layout.default);

let make = children =>
  ReasonReact.wrapJsForReason(
    ~reactClass=wrapedReactClass,
    ~props=Js.Obj.empty(),
    children
  );