mirror of
https://github.com/apache/superset.git
synced 2024-09-17 11:09:47 -04:00
fix: Fixes top level tabs and automatic scroll (#14624)
This commit is contained in:
parent
3466cb253e
commit
9cb4a4602f
@ -182,7 +182,7 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
|
||||
depth={DASHBOARD_ROOT_DEPTH}
|
||||
index={0}
|
||||
orientation="column"
|
||||
onDrop={() => dispatch(handleComponentDrop)}
|
||||
onDrop={dropResult => dispatch(handleComponentDrop(dropResult))}
|
||||
editMode={editMode}
|
||||
// you cannot drop on/displace tabs if they already exist
|
||||
disableDragdrop={!!topLevelTabs}
|
||||
|
@ -17,7 +17,8 @@
|
||||
* under the License.
|
||||
*/
|
||||
import { throttle } from 'lodash';
|
||||
import getDropPosition from '../../util/getDropPosition';
|
||||
import { DASHBOARD_ROOT_TYPE } from 'src/dashboard/util/componentTypes';
|
||||
import getDropPosition from 'src/dashboard/util/getDropPosition';
|
||||
import handleScroll from './handleScroll';
|
||||
|
||||
const HOVER_THROTTLE_MS = 100;
|
||||
@ -28,9 +29,13 @@ function handleHover(props, monitor, Component) {
|
||||
|
||||
const dropPosition = getDropPosition(monitor, Component);
|
||||
|
||||
handleScroll(dropPosition);
|
||||
const isDashboardRoot =
|
||||
Component?.props?.component?.type === DASHBOARD_ROOT_TYPE;
|
||||
const scroll = isDashboardRoot ? 'SCROLL_TOP' : null;
|
||||
|
||||
if (!dropPosition || dropPosition === 'SCROLL_TOP') {
|
||||
handleScroll(scroll);
|
||||
|
||||
if (!dropPosition) {
|
||||
Component.setState(() => ({ dropIndicator: null }));
|
||||
return;
|
||||
}
|
||||
|
@ -28,6 +28,7 @@ afterAll(() => {
|
||||
|
||||
test('calling: "NOT_SCROLL_TOP" ,"SCROLL_TOP", "NOT_SCROLL_TOP"', () => {
|
||||
window.scroll = jest.fn();
|
||||
document.documentElement.scrollTop = 500;
|
||||
|
||||
handleScroll('NOT_SCROLL_TOP');
|
||||
|
||||
|
@ -20,22 +20,34 @@ let scrollTopDashboardInterval: any;
|
||||
const SCROLL_STEP = 120;
|
||||
const INTERVAL_DELAY = 50;
|
||||
|
||||
export default function handleScroll(dropPosition: string) {
|
||||
if (dropPosition === 'SCROLL_TOP') {
|
||||
if (!scrollTopDashboardInterval) {
|
||||
scrollTopDashboardInterval = setInterval(() => {
|
||||
let scrollTop = document.documentElement.scrollTop - SCROLL_STEP;
|
||||
if (scrollTop < 0) {
|
||||
scrollTop = 0;
|
||||
}
|
||||
window.scroll({
|
||||
top: scrollTop,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}, INTERVAL_DELAY);
|
||||
}
|
||||
}
|
||||
if (dropPosition !== 'SCROLL_TOP' && scrollTopDashboardInterval) {
|
||||
export default function handleScroll(scroll: string) {
|
||||
const setupScroll =
|
||||
scroll === 'SCROLL_TOP' &&
|
||||
!scrollTopDashboardInterval &&
|
||||
document.documentElement.scrollTop !== 0;
|
||||
|
||||
const clearScroll =
|
||||
scrollTopDashboardInterval &&
|
||||
(scroll !== 'SCROLL_TOP' || document.documentElement.scrollTop === 0);
|
||||
|
||||
if (setupScroll) {
|
||||
scrollTopDashboardInterval = setInterval(() => {
|
||||
if (document.documentElement.scrollTop === 0) {
|
||||
clearInterval(scrollTopDashboardInterval);
|
||||
scrollTopDashboardInterval = null;
|
||||
return;
|
||||
}
|
||||
|
||||
let scrollTop = document.documentElement.scrollTop - SCROLL_STEP;
|
||||
if (scrollTop < 0) {
|
||||
scrollTop = 0;
|
||||
}
|
||||
window.scroll({
|
||||
top: scrollTop,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}, INTERVAL_DELAY);
|
||||
} else if (clearScroll) {
|
||||
clearInterval(scrollTopDashboardInterval);
|
||||
scrollTopDashboardInterval = null;
|
||||
}
|
||||
|
@ -17,13 +17,12 @@
|
||||
* under the License.
|
||||
*/
|
||||
import isValidChild from './isValidChild';
|
||||
import { DASHBOARD_ROOT_TYPE, TAB_TYPE, TABS_TYPE } from './componentTypes';
|
||||
import { TAB_TYPE, TABS_TYPE } from './componentTypes';
|
||||
|
||||
export const DROP_TOP = 'DROP_TOP';
|
||||
export const DROP_RIGHT = 'DROP_RIGHT';
|
||||
export const DROP_BOTTOM = 'DROP_BOTTOM';
|
||||
export const DROP_LEFT = 'DROP_LEFT';
|
||||
export const SCROLL_TOP = 'SCROLL_TOP';
|
||||
|
||||
// this defines how close the mouse must be to the edge of a component to display
|
||||
// a sibling type drop indicator
|
||||
@ -55,10 +54,6 @@ export default function getDropPosition(monitor, Component) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (component.type === DASHBOARD_ROOT_TYPE) {
|
||||
return SCROLL_TOP;
|
||||
}
|
||||
|
||||
// TODO need a better solution to prevent nested tabs
|
||||
if (
|
||||
draggingItem.type === TABS_TYPE &&
|
||||
|
Loading…
Reference in New Issue
Block a user