jprdonnelly/nebula.js
1
0
Fork 0
mirror of https://github.com/qlik-oss/nebula.js.git synced 2025-12-19 17:58:43 -05:00
Code Issues Projects Releases Wiki Activity

fix: detach selection toolbar from title (#1708)

Browse Source
This commit is contained in:
Jingjing Xie
2025-03-31 13:59:34 +02:00
committed by GitHub
parent fbe90c224d
commit df928c25b5
1 changed files with 3 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
apis/nucleus/src/components/Header.jsx
View File

@@ -4,7 +4,6 @@ import { styled } from '@mui/material/styles';
import { Grid, Tooltip, Typography } from '@mui/material'; import { Grid, Tooltip, Typography } from '@mui/material';
import ActionsToolbar from './ActionsToolbar'; import ActionsToolbar from './ActionsToolbar';
import useRect from '../hooks/useRect';
const PREFIX = 'Header'; const PREFIX = 'Header';
@@ -23,12 +22,6 @@ const StyledGrid = styled(Grid)(({ theme }) => ({
}, },
})); }));
const ITEM_WIDTH = 32;
const ITEM_SPACING = 4;
const DIVIDER = 1;
const NUMBER_OF_ITEMS = 6;
const MIN_WIDTH = (ITEM_WIDTH + ITEM_SPACING) * NUMBER_OF_ITEMS + DIVIDER + ITEM_SPACING;
/** /**
* @interface * @interface
* @extends HTMLElement * @extends HTMLElement
@@ -55,9 +48,6 @@ function Header({ layout, sn, anchorEl, hovering, focusHandler, titleStyles = {}
const showInSelectionActions = layout.qSelectionInfo && layout.qSelectionInfo.qInSelections; const showInSelectionActions = layout.qSelectionInfo && layout.qSelectionInfo.qInSelections;
const [actions, setActions] = useState([]); const [actions, setActions] = useState([]);
const [containerRef, containerRect] = useRect();
const [shouldShowPopoverToolbar, setShouldShowPopoverToolbar] = useState(false);
useEffect(() => { useEffect(() => {
if (!sn || !sn.component || !sn.component.isHooked) { if (!sn || !sn.component || !sn.component.isHooked) {
return; return;
@@ -67,20 +57,13 @@ function Header({ layout, sn, anchorEl, hovering, focusHandler, titleStyles = {}
}); });
}, [sn]); }, [sn]);
useEffect(() => {
if (!containerRect) return;
const { width } = containerRect;
setShouldShowPopoverToolbar(width < MIN_WIDTH);
}, [containerRect]);
const showTitles = showTitle || showSubtitle; const showTitles = showTitle || showSubtitle;
const cls = [classes.containerStyle, ...(showTitles ? [classes.containerTitleStyle] : [])]; const cls = [classes.containerStyle, ...(showTitles ? [classes.containerTitleStyle] : [])];
const showPopoverToolbar = (hovering || showInSelectionActions) && (shouldShowPopoverToolbar || !showTitles); const showPopoverToolbar = hovering || showInSelectionActions;
const showToolbar = showTitles && !showPopoverToolbar && !shouldShowPopoverToolbar;
const Toolbar = ( const Toolbar = (
<ActionsToolbar <ActionsToolbar
show={showToolbar} show={false}
selections={{ selections={{
show: showInSelectionActions, show: showInSelectionActions,
api: sn.component.selections, api: sn.component.selections,
@@ -94,7 +77,7 @@ function Header({ layout, sn, anchorEl, hovering, focusHandler, titleStyles = {}
); );
return ( return (
<StyledGrid ref={containerRef} item container wrap="nowrap" className={cls.join(' ')}> <StyledGrid item container wrap="nowrap" className={cls.join(' ')}>
<Grid item zeroMinWidth xs> <Grid item zeroMinWidth xs>
<Grid container wrap="nowrap" direction="column"> <Grid container wrap="nowrap" direction="column">
{showTitle && ( {showTitle && (