fix: Switch tab on drag hover (#21648)

This commit is contained in:
Michael S. Molina 2022-09-30 08:09:05 -03:00 committed by GitHub
parent 6af35a7d98
commit b2a360fa14
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 15 additions and 0 deletions

View File

@ -42,6 +42,7 @@ const propTypes = {
index: PropTypes.number.isRequired,
style: PropTypes.object,
onDrop: PropTypes.func,
onHover: PropTypes.func,
editMode: PropTypes.bool.isRequired,
useEmptyDragPreview: PropTypes.bool,
@ -61,6 +62,7 @@ const defaultProps = {
disableDragDrop: false,
children() {},
onDrop() {},
onHover() {},
orientation: 'row',
useEmptyDragPreview: false,
isDragging: false,

View File

@ -40,6 +40,8 @@ function handleHover(props, monitor, Component) {
return;
}
Component?.props?.onHover();
Component.setState(() => ({
dropIndicator: dropPosition,
}));

View File

@ -43,6 +43,7 @@ const propTypes = {
depth: PropTypes.number.isRequired,
renderType: PropTypes.oneOf([RENDER_TAB, RENDER_TAB_CONTENT]).isRequired,
onDropOnTab: PropTypes.func,
onHoverTab: PropTypes.func,
editMode: PropTypes.bool.isRequired,
canEdit: PropTypes.bool.isRequired,
@ -64,6 +65,7 @@ const defaultProps = {
availableColumnCount: 0,
columnWidth: 0,
onDropOnTab() {},
onHoverTab() {},
onResizeStart() {},
onResize() {},
onResizeStop() {},
@ -95,6 +97,7 @@ class Tab extends React.PureComponent {
super(props);
this.handleChangeText = this.handleChangeText.bind(this);
this.handleDrop = this.handleDrop.bind(this);
this.handleOnHover = this.handleOnHover.bind(this);
this.handleTopDropTargetDrop = this.handleTopDropTargetDrop.bind(this);
this.handleChangeTab = this.handleChangeTab.bind(this);
}
@ -123,6 +126,10 @@ class Tab extends React.PureComponent {
this.props.onDropOnTab(dropResult);
}
handleOnHover() {
this.props.onHoverTab();
}
handleTopDropTargetDrop(dropResult) {
if (dropResult) {
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
index={componentIndex}
onDrop={this.handleDrop}
onHover={this.handleOnHover}
availableColumnCount={availableColumnCount}
columnWidth={columnWidth}
onResizeStart={onResizeStart}
@ -234,6 +242,7 @@ class Tab extends React.PureComponent {
index={tabComponent.children.length}
depth={depth}
onDrop={this.handleDrop}
onHover={this.handleOnHover}
editMode
className="empty-droptarget"
>
@ -263,6 +272,7 @@ class Tab extends React.PureComponent {
index={index}
depth={depth}
onDrop={this.handleDrop}
onHover={this.handleOnHover}
editMode={editMode}
>
{({ dropIndicatorProps, dragSourceRef }) => (

View File

@ -388,6 +388,7 @@ export class Tabs extends React.PureComponent {
availableColumnCount={availableColumnCount}
columnWidth={columnWidth}
onDropOnTab={this.handleDropOnTab}
onHoverTab={() => this.handleClickTab(tabIndex)}
isFocused={activeKey === tabId}
isHighlighted={
activeKey !== tabId && tabsToHighlight?.includes(tabId)