Allow DataGrid height to be styled, fix HUD position in full-page ele…

…ments
mui · Sep 4, 2023 · 1fc9961 · 1fc9961
1 parent 1eb90b1
commit 1fc9961
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 29 deletions.
diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/RenderPanel/NodeHud.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/RenderPanel/NodeHud.tsx
@@ -12,13 +12,18 @@ import {
   RECTANGLE_EDGE_LEFT,
   RECTANGLE_EDGE_RIGHT,
 } from '../../../../utils/geometry';
+import { usePageEditorState } from '../PageEditorProvider';
 
 const HINT_POSITION_TOP = 'top';
 const HINT_POSITION_BOTTOM = 'bottom';
+const HINT_POSITION_BOTTOM_INNER = 'bottomInner';
 
 const HUD_HEIGHT = 30; // px
 
-type HintPosition = typeof HINT_POSITION_TOP | typeof HINT_POSITION_BOTTOM;
+type HintPosition =
+  | typeof HINT_POSITION_TOP
+  | typeof HINT_POSITION_BOTTOM
+  | typeof HINT_POSITION_BOTTOM_INNER;
 
 function stopPropagationHandler(event: React.SyntheticEvent) {
   event.stopPropagation();
@@ -84,7 +89,11 @@ const SelectionHintWrapper = styled('div', {
     zIndex: 1000,
     ...(hintPosition === HINT_POSITION_TOP
       ? { top: 0, transform: 'translate(0, -100%)' }
-      : { bottom: 0, transform: 'translate(0, 100%)' }),
+      : {
+          bottom: 0,
+          transform:
+            hintPosition === HINT_POSITION_BOTTOM_INNER ? 'translate(0, 0)' : 'translate(0, 100%)',
+        }),
   },
 }));
 
@@ -177,7 +186,19 @@ export default function NodeHud({
   isHoverable = true,
   isHovered = false,
 }: NodeHudProps) {
-  const hintPosition = rect.y > HUD_HEIGHT ? HINT_POSITION_TOP : HINT_POSITION_BOTTOM;
+  const { nodeId: pageNodeId, viewState } = usePageEditorState();
+
+  const { nodes: nodesInfo } = viewState;
+
+  const pageNodeRect = nodesInfo[pageNodeId]?.rect;
+
+  let hintPosition: HintPosition = HINT_POSITION_BOTTOM;
+  if (rect.y > HUD_HEIGHT) {
+    hintPosition = HINT_POSITION_TOP;
+  }
+  if (pageNodeRect && rect.y + rect.height + HUD_HEIGHT >= pageNodeRect.height) {
+    hintPosition = HINT_POSITION_BOTTOM_INNER;
+  }
 
   const interactiveNodeClipPath = React.useMemo(
     () =>

diff --git a/packages/toolpad-components/src/DataGrid.tsx b/packages/toolpad-components/src/DataGrid.tsx
@@ -36,6 +36,7 @@ import {
   Typography,
   Tooltip,
   Popover,
+  Container,
 } from '@mui/material';
 import { getObjectKey } from '@mui/toolpad-utils/objectKey';
 import { errorFrom } from '@mui/toolpad-utils/errors';
@@ -366,6 +367,7 @@ const DataGridComponent = React.forwardRef(function DataGridComponent(
     selection,
     onSelectionChange,
     hideToolbar,
+    sx,
     ...props
   }: ToolpadDataGridProps,
   ref: React.ForwardedRef<HTMLDivElement>,
@@ -487,37 +489,34 @@ const DataGridComponent = React.forwardRef(function DataGridComponent(
 
   return (
     <LicenseInfoProvider info={LICENSE_INFO}>
-      <div
+      <Container
         ref={ref}
-        style={{ height: heightProp, minHeight: '100%', width: '100%', position: 'relative' }}
+        disableGutters
+        sx={{ ...sx, minHeight: heightProp, position: 'relative' }}
       >
         <ErrorOverlay error={error} />
-
-        <div
-          style={{
-            position: 'absolute',
-            inset: '0 0 0 0',
+        <DataGridPro
+          apiRef={apiRef}
+          slots={{
+            toolbar: hideToolbar ? null : GridToolbar,
+            loadingOverlay: SkeletonLoadingOverlay,
+          }}
+          onColumnResize={handleResize}
+          onColumnOrderChange={handleColumnOrderChange}
+          rows={rows}
+          columns={columns}
+          key={gridKey}
+          getRowId={getRowId}
+          onRowSelectionModelChange={onSelectionModelChange}
+          rowSelectionModel={selectionModel}
+          {...props}
+          sx={{
+            height: heightProp,
+            minHeight: '100%',
             visibility: error ? 'hidden' : 'visible',
           }}
-        >
-          <DataGridPro
-            apiRef={apiRef}
-            slots={{
-              toolbar: hideToolbar ? null : GridToolbar,
-              loadingOverlay: SkeletonLoadingOverlay,
-            }}
-            onColumnResize={handleResize}
-            onColumnOrderChange={handleColumnOrderChange}
-            rows={rows}
-            columns={columns}
-            key={gridKey}
-            getRowId={getRowId}
-            onRowSelectionModelChange={onSelectionModelChange}
-            rowSelectionModel={selectionModel}
-            {...props}
-          />
-        </div>
-      </div>
+        />
+      </Container>
     </LicenseInfoProvider>
   );
 });