Only show drop targets on drag (#49)

src/Mosaic.tsx

@@ -15,16 +15,14 @@
  * limitations under the License.
  */
 import * as classNames from 'classnames';
-import * as _ from 'lodash';
 import * as React from 'react';
 import { DragDropContext } from 'react-dnd';
 import HTML5 from 'react-dnd-html5-backend';
 import { v4 as uuid } from 'uuid';
 import { MosaicContext, MosaicRootActions } from './contextTypes';
-import { MosaicDropTargetPosition } from './internalTypes';
-import { MosaicWindowDropTarget } from './MosaicDropTarget';
 import { MosaicRoot } from './MosaicRoot';
 import { MosaicZeroState } from './MosaicZeroState';
+import { RootDropTargets } from './RootDropTargets';
 import { MosaicKey, MosaicNode, MosaicPath, MosaicUpdate, ResizeOptions, TileRenderer } from './types';
 import { createExpandUpdate, createHideUpdate, createRemoveUpdate, updateTree } from './util/mosaicUpdates';
 
@@ -111,15 +109,7 @@ export class MosaicWithoutDragDropContext<T extends MosaicKey = string> extends
         className={classNames(className, 'mosaic mosaic-drop-target')}
       >
         {this.renderTree()}
-        <div className='drop-target-container'>
-          {_.values<MosaicDropTargetPosition>(MosaicDropTargetPosition).map((position) => (
-            <MosaicWindowDropTarget
-              position={position}
-              path={[]}
-              key={position}
-            />
-          ))}
-        </div>
+        <RootDropTargets/>
       </div>
     );
   }

src/MosaicDropTarget.tsx

@@ -16,13 +16,12 @@
  */
 import * as classNames from 'classnames';
 import * as React from 'react';
-import { ConnectDropTarget, DropTarget } from 'react-dnd';
+import { ConnectDropTarget, DropTarget, DropTargetMonitor } from 'react-dnd';
 import { MosaicContext } from './contextTypes';
 import { MosaicDragItem, MosaicDropData, MosaicDropTargetPosition } from './internalTypes';
 import { MosaicDragType, MosaicPath } from './types';
-import DropTargetMonitor = __ReactDnd.DropTargetMonitor;
 
-export interface MosaicWindowDropTargetProps {
+export interface MosaicDropTargetProps {
   position: MosaicDropTargetPosition;
   path: MosaicPath;
 }
@@ -33,10 +32,10 @@ interface DropTargetProps {
   draggedMosaicId: string | undefined;
 }
 
-type Props = MosaicWindowDropTargetProps & DropTargetProps;
+type Props = MosaicDropTargetProps & DropTargetProps;
 
 const dropTarget = {
-  drop: (props: Props, monitor: DropTargetMonitor, component: MosaicWindowDropTargetClass): MosaicDropData => {
+  drop: (props: Props, monitor: DropTargetMonitor, component: MosaicDropTargetClass): MosaicDropData => {
     if (component.context.mosaicId === ((monitor.getItem() || {}) as MosaicDragItem).mosaicId) {
       return {
         path: props.path,
@@ -48,12 +47,7 @@ const dropTarget = {
   },
 };
 
-@(DropTarget(MosaicDragType.WINDOW, dropTarget, (connect, monitor): DropTargetProps => ({
-  connectDropTarget: connect.dropTarget(),
-  isOver: monitor.isOver(),
-  draggedMosaicId: ((monitor.getItem() || {}) as MosaicDragItem).mosaicId,
-})) as ClassDecorator)
-class MosaicWindowDropTargetClass extends React.PureComponent<Props> {
+class MosaicDropTargetClass extends React.PureComponent<Props> {
   static contextTypes = MosaicContext;
   context: MosaicContext<any>;
 
@@ -70,9 +64,9 @@ class MosaicWindowDropTargetClass extends React.PureComponent<Props> {
   }
 }
 
-export const MosaicWindowDropTarget =
+export const MosaicDropTarget =
   DropTarget(MosaicDragType.WINDOW, dropTarget, (connect, monitor): DropTargetProps => ({
     connectDropTarget: connect.dropTarget(),
     isOver: monitor.isOver(),
     draggedMosaicId: ((monitor.getItem() || {}) as MosaicDragItem).mosaicId,
-  }))(MosaicWindowDropTargetClass) as React.ComponentClass<MosaicWindowDropTargetProps>;
+  }))(MosaicDropTargetClass) as React.ComponentClass<MosaicDropTargetProps>;

src/MosaicWindow.tsx

@@ -17,16 +17,22 @@
 import * as classNames from 'classnames';
 import * as _ from 'lodash';
 import * as React from 'react';
-import { ConnectDragPreview, ConnectDragSource, ConnectDropTarget, DragSource, DropTarget } from 'react-dnd';
+import {
+  ConnectDragPreview,
+  ConnectDragSource,
+  ConnectDropTarget,
+  DragSource,
+  DragSourceMonitor,
+  DropTarget,
+} from 'react-dnd';
 import { DEFAULT_CONTROLS_WITH_CREATION, DEFAULT_CONTROLS_WITHOUT_CREATION } from './buttons/defaultToolbarControls';
 import { Separator } from './buttons/Separator';
 import { MosaicContext, MosaicWindowActionsPropType, MosaicWindowContext } from './contextTypes';
 import { MosaicDragItem, MosaicDropData, MosaicDropTargetPosition } from './internalTypes';
-import { MosaicWindowDropTarget } from './MosaicDropTarget';
+import { MosaicDropTarget } from './MosaicDropTarget';
 import { CreateNode, MosaicBranch, MosaicDirection, MosaicDragType, MosaicKey } from './types';
 import { createDragToUpdates } from './util/mosaicUpdates';
 import { getAndAssertNodeAtPathExists } from './util/mosaicUtilities';
-import DragSourceMonitor = __ReactDnd.DragSourceMonitor;
 
 export interface MosaicWindowProps<T extends MosaicKey> {
   title: string;
@@ -206,7 +212,7 @@ export class InternalMosaicWindow<T extends MosaicKey> extends React.Component<I
     const { path } = this.props;
 
     return (
-      <MosaicWindowDropTarget
+      <MosaicDropTarget
         position={position}
         path={path}
         key={position}

src/RootDropTargets.tsx

@@ -0,0 +1,36 @@
+import * as classNames from 'classnames';
+import * as _ from 'lodash';
+import * as React from 'react';
+import { DropTarget } from 'react-dnd';
+import { MosaicDropTargetPosition } from './internalTypes';
+import { MosaicDropTarget } from './MosaicDropTarget';
+import { MosaicDragType } from './types';
+
+export interface RootDropTargetsProps {
+  isDragging: boolean;
+}
+
+class RootDropTargetsClass extends React.PureComponent<RootDropTargetsProps> {
+  render() {
+    return (
+      <div
+        className={classNames('drop-target-container', {
+          '-dragging': this.props.isDragging,
+        })}
+      >
+        {_.values<MosaicDropTargetPosition>(MosaicDropTargetPosition).map((position) => (
+          <MosaicDropTarget
+            position={position}
+            path={[]}
+            key={position}
+          />
+        ))}
+      </div>
+    );
+  }
+}
+
+const dropTarget = {};
+export const RootDropTargets = DropTarget(MosaicDragType.WINDOW, dropTarget, (_connect, monitor): RootDropTargetsProps => ({
+  isDragging: monitor.getItem() !== null,
+}))(RootDropTargetsClass) as React.ComponentClass<{}>;

styles/mosaic.less

@@ -115,17 +115,18 @@
     display: block;
   }
 
-  &.mosaic > .drop-target-container {
-    display: block;
-    .drop-target {
-      .split-percentages(10px);
-    }
+  &.mosaic > .drop-target-container .drop-target {
+    .split-percentages(10px);
   }
 
   .drop-target-container {
     .absolute-fill();
     display: none;
 
+    &.-dragging {
+      display: block;
+    }
+
     .drop-target {
       .absolute-fill();
       .split-percentages(30%);