diff --git a/src/Mosaic.tsx b/src/Mosaic.tsx index 44c8ea6..0931b85 100644 --- a/src/Mosaic.tsx +++ b/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 extends className={classNames(className, 'mosaic mosaic-drop-target')} > {this.renderTree()} -
- {_.values(MosaicDropTargetPosition).map((position) => ( - - ))} -
+ ); } diff --git a/src/MosaicDropTarget.tsx b/src/MosaicDropTarget.tsx index 00d9d01..fce14a8 100644 --- a/src/MosaicDropTarget.tsx +++ b/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 { +class MosaicDropTargetClass extends React.PureComponent { static contextTypes = MosaicContext; context: MosaicContext; @@ -70,9 +64,9 @@ class MosaicWindowDropTargetClass extends React.PureComponent { } } -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; + }))(MosaicDropTargetClass) as React.ComponentClass; diff --git a/src/MosaicWindow.tsx b/src/MosaicWindow.tsx index eb54016..e743dc8 100644 --- a/src/MosaicWindow.tsx +++ b/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 { title: string; @@ -206,7 +212,7 @@ export class InternalMosaicWindow extends React.Component { + render() { + return ( +
+ {_.values(MosaicDropTargetPosition).map((position) => ( + + ))} +
+ ); + } +} + +const dropTarget = {}; +export const RootDropTargets = DropTarget(MosaicDragType.WINDOW, dropTarget, (_connect, monitor): RootDropTargetsProps => ({ + isDragging: monitor.getItem() !== null, +}))(RootDropTargetsClass) as React.ComponentClass<{}>; diff --git a/styles/mosaic.less b/styles/mosaic.less index 6430d7d..c140ec1 100644 --- a/styles/mosaic.less +++ b/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%);