Make component panel resizable (#570)

* Make component panel resizable * this can go * shouldn't be checked in * didn't need this
mui · Jun 20, 2022 · 74db214 · 74db214
1 parent 7935717
commit 74db214
Show file tree

Hide file tree

Showing 4 changed files with 126 additions and 64 deletions.
diff --git a/packages/toolpad-app/pages/_app.tsx b/packages/toolpad-app/pages/_app.tsx
@@ -10,7 +10,6 @@ import theme from '../src/theme';
 import createEmotionCache from '../src/createEmotionCache';
 import { MUI_X_PRO_LICENSE } from '../src/constants';
 import { queryClient } from '../src/api';
-import './reactSplitPane.css';
 
 LicenseInfo.setLicenseKey(MUI_X_PRO_LICENSE);
 

diff --git a/packages/toolpad-app/pages/reactSplitPane.css b/packages/toolpad-app/pages/reactSplitPane.css
diff --git a/packages/toolpad-app/src/components/AppEditor/PageEditor/index.tsx b/packages/toolpad-app/src/components/AppEditor/PageEditor/index.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { styled } from '@mui/material';
 import { useParams } from 'react-router-dom';
 import { NodeId } from '@mui/toolpad-core';
+import SplitPane from '../../SplitPane';
 import RenderPanel from './RenderPanel';
 import ComponentPanel from './ComponentPanel';
 import { PageEditorProvider } from './PageEditorProvider';
@@ -12,24 +13,19 @@ import NotFoundEditor from '../NotFoundEditor';
 import usePageTitle from '../../../utils/usePageTitle';
 
 const classes = {
-  componentPanel: 'Toolpad_ComponentPanel',
   renderPanel: 'Toolpad_RenderPanel',
 };
 
-const PageEditorRoot = styled('div')(({ theme }) => ({
+const PageEditorRoot = styled('div')({
   width: '100%',
   height: '100%',
+  overflow: 'hidden',
   display: 'flex',
   flexDirection: 'row',
-  overflow: 'hidden',
   [`& .${classes.renderPanel}`]: {
     flex: 1,
   },
-  [`& .${classes.componentPanel}`]: {
-    width: 300,
-    borderLeft: `1px solid ${theme.palette.divider}`,
-  },
-}));
+});
 
 interface PageEditorContentProps {
   appId: string;
@@ -40,11 +36,13 @@ function PageEditorContent({ appId, node }: PageEditorContentProps) {
   usePageTitle(`${node.attributes.title.value} | Toolpad editor`);
   return (
     <PageEditorProvider key={node.id} appId={appId} nodeId={node.id}>
-      <PageEditorRoot>
-        <ComponentCatalog />
-        <RenderPanel className={classes.renderPanel} />
-        <ComponentPanel className={classes.componentPanel} />
-      </PageEditorRoot>
+      <SplitPane allowResize split="vertical" defaultSize={300} primary="second">
+        <PageEditorRoot>
+          <ComponentCatalog />
+          <RenderPanel className={classes.renderPanel} />
+        </PageEditorRoot>
+        <ComponentPanel />
+      </SplitPane>
     </PageEditorProvider>
   );
 }

diff --git a/packages/toolpad-app/src/components/SplitPane.tsx b/packages/toolpad-app/src/components/SplitPane.tsx
@@ -0,0 +1,115 @@
+import { styled } from '@mui/material';
+import clsx from 'clsx';
+import * as React from 'react';
+import SplitPane, { SplitPaneProps } from 'react-split-pane';
+
+const classes = {
+  dragging: 'MuiToolpadSplitPaneDragging',
+};
+
+const WrappedSplitPane = React.forwardRef<SplitPane, SplitPaneProps>(
+  ({ className, onDragStarted, onDragFinished, ...props }, ref) => {
+    const [dragActive, setDragActive] = React.useState(false);
+
+    const handleDragStarted = React.useCallback(
+      (...args: Parameters<NonNullable<typeof onDragStarted>>) => {
+        setDragActive(true);
+        onDragStarted?.(...args);
+      },
+      [onDragStarted],
+    );
+
+    const handleDragFinished = React.useCallback(
+      (...args: Parameters<NonNullable<typeof onDragFinished>>) => {
+        setDragActive(false);
+        onDragFinished?.(...args);
+      },
+      [onDragFinished],
+    );
+
+    return (
+      <SplitPane
+        ref={ref}
+        className={clsx({ [classes.dragging]: dragActive }, className)}
+        onDragStarted={handleDragStarted}
+        onDragFinished={handleDragFinished}
+        // Some sensible defaults
+        minSize={20}
+        maxSize={-20}
+        {...props}
+      />
+    );
+  },
+);
+
+const StyledSplitPane = styled(WrappedSplitPane)(({ theme }) => ({
+  [`&.${classes.dragging} *`]: {
+    // Workaround for https://github.com/tomkp/react-split-pane/issues/30
+    pointerEvents: 'none',
+  },
+
+  '& .Pane': {
+    background: theme.palette.background.default,
+  },
+
+  '& .Pane.Vertical': {
+    height: '100%',
+  },
+
+  '& .Pane.Horizontal': {
+    width: '100%',
+  },
+
+  '& .Pane2': {
+    zIndex: 1,
+  },
+
+  '& .Resizer': {
+    background: theme.palette.divider,
+    zIndex: '1',
+    boxSizing: 'border-box',
+    backgroundClip: 'padding-box',
+    flexShrink: '0',
+  },
+
+  '& .Resizer:hover': {
+    transition: 'all 2s ease',
+  },
+
+  '& .Resizer.horizontal': {
+    height: '11px',
+    margin: '-5px 0',
+    borderTop: '5px solid rgba(255, 255, 255, 0)',
+    borderBottom: '5px solid rgba(255, 255, 255, 0)',
+    cursor: 'row-resize',
+    width: '100%',
+  },
+
+  '& .Resizer.horizontal:hover': {
+    borderTop: '5px solid rgba(0, 0, 0, 0.5)',
+    borderBottom: '5px solid rgba(0, 0, 0, 0.5)',
+  },
+
+  '& .Resizer.vertical': {
+    width: '11px',
+    margin: '0 -5px',
+    borderLeft: '5px solid rgba(255, 255, 255, 0)',
+    borderRight: '5px solid rgba(255, 255, 255, 0)',
+    cursor: 'col-resize',
+  },
+
+  '& .Resizer.vertical:hover': {
+    borderLeft: '5px solid rgba(0, 0, 0, 0.5)',
+    borderRight: '5px solid rgba(0, 0, 0, 0.5)',
+  },
+
+  '& .Resizer.disabled': {
+    cursor: 'not-allowed',
+  },
+
+  '& .Resizer.disabled:hover': {
+    borderColor: 'transparent',
+  },
+}));
+
+export default StyledSplitPane;