| undefined}
className={classNames('drop-target', position, {
'drop-target-hover': isOver && draggedMosaicId === mosaicId,
})}
diff --git a/src/MosaicRoot.tsx b/src/MosaicRoot.tsx
index 4e5131b..f75d154 100644
--- a/src/MosaicRoot.tsx
+++ b/src/MosaicRoot.tsx
@@ -1,5 +1,5 @@
import flatten from 'lodash/flatten';
-import React from 'react';
+import React, { JSX } from 'react';
import { MosaicContext } from './contextTypes';
import { Split } from './Split';
import { MosaicBranch, MosaicDirection, MosaicKey, MosaicNode, ResizeOptions, TileRenderer } from './types';
diff --git a/src/MosaicWindow.tsx b/src/MosaicWindow.tsx
index fd4d2e7..c69828d 100644
--- a/src/MosaicWindow.tsx
+++ b/src/MosaicWindow.tsx
@@ -4,7 +4,7 @@ import dropRight from 'lodash/dropRight';
import isEmpty from 'lodash/isEmpty';
import isEqual from 'lodash/isEqual';
import values from 'lodash/values';
-import React, { useContext } from 'react';
+import React, { JSX, useContext } from 'react';
import {
ConnectDragPreview,
ConnectDragSource,
@@ -104,31 +104,32 @@ export class InternalMosaicWindow
extends React.Component<
return (
- {connectDropTarget(
- (this.rootElement = element)}
- >
- {this.renderToolbar()}
-
{this.props.children}
- {!disableAdditionalControlsOverlay && (
-
{
- this.setAdditionalControlsOpen(false);
- }}
- />
- )}
-
{additionalControls}
- {connectDragPreview(renderPreview!(this.props))}
-
- {values(MosaicDropTargetPosition).map(this.renderDropTarget)}
-
-
,
- )}
+
{
+ this.rootElement = element;
+ connectDropTarget(element);
+ }}
+ >
+ {this.renderToolbar()}
+
{this.props.children}
+ {!disableAdditionalControlsOverlay && (
+
{
+ this.setAdditionalControlsOpen(false);
+ }}
+ />
+ )}
+
{additionalControls}
+
connectDragPreview(element) as any}>{renderPreview!(this.props)}
+
+ {values(MosaicDropTargetPosition).map(this.renderDropTarget)}
+
+
);
}
@@ -145,26 +146,38 @@ export class InternalMosaicWindow
extends React.Component<
}
private renderToolbar() {
- const { title, draggable, additionalControls, additionalControlButtonText, path, renderToolbar } = this.props;
+ const {
+ title,
+ draggable,
+ additionalControls,
+ additionalControlButtonText,
+ path,
+ renderToolbar,
+ connectDragSource,
+ } = this.props;
const { additionalControlsOpen } = this.state;
const toolbarControls = this.getToolbarControls();
const draggableAndNotRoot = draggable && path.length > 0;
- const connectIfDraggable = draggableAndNotRoot ? this.props.connectDragSource : (el: React.ReactElement) => el;
if (renderToolbar) {
- const connectedToolbar = connectIfDraggable(renderToolbar(this.props, draggable)) as React.ReactElement;
return (
- {connectedToolbar}
+
connectDragSource(el) as any : undefined}>
+ {renderToolbar(this.props, draggable)}
+
+ const titleDiv = (
+
connectDragSource(el) as any : undefined}
+ >
{title}
-
,
- )!;
+