mirror of
https://github.com/apache/superset.git
synced 2024-09-17 11:09:47 -04:00
fix: Switch tab on drag hover (#21648)
This commit is contained in:
parent
6af35a7d98
commit
b2a360fa14
@ -42,6 +42,7 @@ const propTypes = {
|
|||||||
index: PropTypes.number.isRequired,
|
index: PropTypes.number.isRequired,
|
||||||
style: PropTypes.object,
|
style: PropTypes.object,
|
||||||
onDrop: PropTypes.func,
|
onDrop: PropTypes.func,
|
||||||
|
onHover: PropTypes.func,
|
||||||
editMode: PropTypes.bool.isRequired,
|
editMode: PropTypes.bool.isRequired,
|
||||||
useEmptyDragPreview: PropTypes.bool,
|
useEmptyDragPreview: PropTypes.bool,
|
||||||
|
|
||||||
@ -61,6 +62,7 @@ const defaultProps = {
|
|||||||
disableDragDrop: false,
|
disableDragDrop: false,
|
||||||
children() {},
|
children() {},
|
||||||
onDrop() {},
|
onDrop() {},
|
||||||
|
onHover() {},
|
||||||
orientation: 'row',
|
orientation: 'row',
|
||||||
useEmptyDragPreview: false,
|
useEmptyDragPreview: false,
|
||||||
isDragging: false,
|
isDragging: false,
|
||||||
|
@ -40,6 +40,8 @@ function handleHover(props, monitor, Component) {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Component?.props?.onHover();
|
||||||
|
|
||||||
Component.setState(() => ({
|
Component.setState(() => ({
|
||||||
dropIndicator: dropPosition,
|
dropIndicator: dropPosition,
|
||||||
}));
|
}));
|
||||||
|
@ -43,6 +43,7 @@ const propTypes = {
|
|||||||
depth: PropTypes.number.isRequired,
|
depth: PropTypes.number.isRequired,
|
||||||
renderType: PropTypes.oneOf([RENDER_TAB, RENDER_TAB_CONTENT]).isRequired,
|
renderType: PropTypes.oneOf([RENDER_TAB, RENDER_TAB_CONTENT]).isRequired,
|
||||||
onDropOnTab: PropTypes.func,
|
onDropOnTab: PropTypes.func,
|
||||||
|
onHoverTab: PropTypes.func,
|
||||||
editMode: PropTypes.bool.isRequired,
|
editMode: PropTypes.bool.isRequired,
|
||||||
canEdit: PropTypes.bool.isRequired,
|
canEdit: PropTypes.bool.isRequired,
|
||||||
|
|
||||||
@ -64,6 +65,7 @@ const defaultProps = {
|
|||||||
availableColumnCount: 0,
|
availableColumnCount: 0,
|
||||||
columnWidth: 0,
|
columnWidth: 0,
|
||||||
onDropOnTab() {},
|
onDropOnTab() {},
|
||||||
|
onHoverTab() {},
|
||||||
onResizeStart() {},
|
onResizeStart() {},
|
||||||
onResize() {},
|
onResize() {},
|
||||||
onResizeStop() {},
|
onResizeStop() {},
|
||||||
@ -95,6 +97,7 @@ class Tab extends React.PureComponent {
|
|||||||
super(props);
|
super(props);
|
||||||
this.handleChangeText = this.handleChangeText.bind(this);
|
this.handleChangeText = this.handleChangeText.bind(this);
|
||||||
this.handleDrop = this.handleDrop.bind(this);
|
this.handleDrop = this.handleDrop.bind(this);
|
||||||
|
this.handleOnHover = this.handleOnHover.bind(this);
|
||||||
this.handleTopDropTargetDrop = this.handleTopDropTargetDrop.bind(this);
|
this.handleTopDropTargetDrop = this.handleTopDropTargetDrop.bind(this);
|
||||||
this.handleChangeTab = this.handleChangeTab.bind(this);
|
this.handleChangeTab = this.handleChangeTab.bind(this);
|
||||||
}
|
}
|
||||||
@ -123,6 +126,10 @@ class Tab extends React.PureComponent {
|
|||||||
this.props.onDropOnTab(dropResult);
|
this.props.onDropOnTab(dropResult);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
handleOnHover() {
|
||||||
|
this.props.onHoverTab();
|
||||||
|
}
|
||||||
|
|
||||||
handleTopDropTargetDrop(dropResult) {
|
handleTopDropTargetDrop(dropResult) {
|
||||||
if (dropResult) {
|
if (dropResult) {
|
||||||
this.props.handleComponentDrop({
|
this.props.handleComponentDrop({
|
||||||
@ -216,6 +223,7 @@ class Tab extends React.PureComponent {
|
|||||||
depth={depth} // see isValidChild.js for why tabs don't increment child depth
|
depth={depth} // see isValidChild.js for why tabs don't increment child depth
|
||||||
index={componentIndex}
|
index={componentIndex}
|
||||||
onDrop={this.handleDrop}
|
onDrop={this.handleDrop}
|
||||||
|
onHover={this.handleOnHover}
|
||||||
availableColumnCount={availableColumnCount}
|
availableColumnCount={availableColumnCount}
|
||||||
columnWidth={columnWidth}
|
columnWidth={columnWidth}
|
||||||
onResizeStart={onResizeStart}
|
onResizeStart={onResizeStart}
|
||||||
@ -234,6 +242,7 @@ class Tab extends React.PureComponent {
|
|||||||
index={tabComponent.children.length}
|
index={tabComponent.children.length}
|
||||||
depth={depth}
|
depth={depth}
|
||||||
onDrop={this.handleDrop}
|
onDrop={this.handleDrop}
|
||||||
|
onHover={this.handleOnHover}
|
||||||
editMode
|
editMode
|
||||||
className="empty-droptarget"
|
className="empty-droptarget"
|
||||||
>
|
>
|
||||||
@ -263,6 +272,7 @@ class Tab extends React.PureComponent {
|
|||||||
index={index}
|
index={index}
|
||||||
depth={depth}
|
depth={depth}
|
||||||
onDrop={this.handleDrop}
|
onDrop={this.handleDrop}
|
||||||
|
onHover={this.handleOnHover}
|
||||||
editMode={editMode}
|
editMode={editMode}
|
||||||
>
|
>
|
||||||
{({ dropIndicatorProps, dragSourceRef }) => (
|
{({ dropIndicatorProps, dragSourceRef }) => (
|
||||||
|
@ -388,6 +388,7 @@ export class Tabs extends React.PureComponent {
|
|||||||
availableColumnCount={availableColumnCount}
|
availableColumnCount={availableColumnCount}
|
||||||
columnWidth={columnWidth}
|
columnWidth={columnWidth}
|
||||||
onDropOnTab={this.handleDropOnTab}
|
onDropOnTab={this.handleDropOnTab}
|
||||||
|
onHoverTab={() => this.handleClickTab(tabIndex)}
|
||||||
isFocused={activeKey === tabId}
|
isFocused={activeKey === tabId}
|
||||||
isHighlighted={
|
isHighlighted={
|
||||||
activeKey !== tabId && tabsToHighlight?.includes(tabId)
|
activeKey !== tabId && tabsToHighlight?.includes(tabId)
|
||||||
|
Loading…
Reference in New Issue
Block a user