fix: Leaner code, scrollbar fixes

mui · Aug 16, 2024 · 7a5f6fc · 7a5f6fc
1 parent adc7808
commit 7a5f6fc
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 70 deletions.
diff --git a/docs/src/components/home/ToolpadCoreShowcaseDemo.tsx b/docs/src/components/home/ToolpadCoreShowcaseDemo.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import Paper from '@mui/material/Paper';
 import DashboardIcon from '@mui/icons-material/Dashboard';
 import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
 import BarChartIcon from '@mui/icons-material/BarChart';
@@ -73,7 +72,7 @@ const PlaceHolder = styled('div')<{ height: number }>(({ theme, height }) => ({
 function DashboardLayoutBasic(props: DemoProps) {
   const { window } = props;
 
-  const [pathname, setPathname] = React.useState('/page');
+  const [pathname, setPathname] = React.useState('/dashboard');
 
   const router = React.useMemo<Router>(() => {
     return {
@@ -108,24 +107,8 @@ function DashboardLayoutBasic(props: DemoProps) {
 
 export default function ToolpadDashboardLayout() {
   return (
-    <Paper
-      variant="outlined"
-      sx={(theme) => ({
-        display: 'flex',
-        alignItems: 'center',
-        maxWidth: '100%',
-        mx: 'auto',
-        bgcolor: '#FFF',
-        borderRadius: '8px',
-        overflow: 'hidden',
-        ...theme.applyDarkStyles({
-          bgcolor: 'primaryDark.900',
-        }),
-      })}
-    >
-      <DemoSandbox iframe name="DashboardLayout" onResetDemoClick={NOOP} usesCssVarsTheme>
-        <DashboardLayoutBasic />
-      </DemoSandbox>
-    </Paper>
+    <DemoSandbox iframe name="DashboardLayout" onResetDemoClick={NOOP} usesCssVarsTheme>
+      <DashboardLayoutBasic />
+    </DemoSandbox>
   );
 }
diff --git a/docs/src/components/home/ToolpadShowcase.tsx b/docs/src/components/home/ToolpadShowcase.tsx
@@ -52,18 +52,46 @@ spec:
   - component: codeComponent.map
     name: map
 `;
+
+interface TabContainerProps {
+  index: number;
+  value: number;
+  isDemo: boolean;
+  children: React.ReactNode;
+}
+
+function TabContainer({ index, value, isDemo, children }: TabContainerProps) {
+  return (
+    <Paper
+      variant="outlined"
+      key={index}
+      sx={(theme) => ({
+        width: '100%',
+        maxWidth: '100%',
+        height: 260,
+        display: value === index ? 'flex' : 'none',
+        overflow: isDemo ? 'auto' : 'clip',
+        bgcolor: '#FFF',
+        borderRadius: '8px',
+        boxShadow: `0 4px 8px ${alpha(theme.palette.common.black, 0.1)}`,
+        borderColor: 'grey.200',
+        ...(isDemo && { scrollbarGutter: 'stable' }),
+      })}
+    >
+      {children}
+    </Paper>
+  );
+}
+
 interface ImageProps {
   alt: string;
-  index: number;
   src: string;
-  value: number;
 }
 
-function Image({ alt, index, src, value }: ImageProps) {
+function Image({ alt, src }: ImageProps) {
   return (
     <Box
       component="img"
-      hidden={value !== index}
       src={src}
       alt={alt}
       loading="lazy"
@@ -77,26 +105,24 @@ function Image({ alt, index, src, value }: ImageProps) {
   );
 }
 
-interface DemoProps {
-  value: number;
-  index: number;
-}
-
-function ToolpadCoreShowcaseDemo({ value, index }: DemoProps) {
+function ToolpadCoreShowcaseDemo() {
   return (
-    <Box hidden={value !== index}>
-      <React.Suspense
-        fallback={
-          <Box
-            sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}
-          >
-            <p>Loading...</p>
-          </Box>
-        }
-      >
-        <ToolpadCoreShowcase />
-      </React.Suspense>
-    </Box>
+    <React.Suspense
+      fallback={
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            height: '100%',
+          }}
+        >
+          <p>Loading...</p>
+        </div>
+      }
+    >
+      <ToolpadCoreShowcase />
+    </React.Suspense>
   );
 }
 
@@ -201,32 +227,17 @@ export default function ToolpadShowcase() {
             ))}
           </Tabs>
           <Box sx={{ p: 2 }}>
-            <Paper
-              variant="outlined"
-              sx={(theme) => ({
-                width: '100%',
-                height: 260,
-                overflow: 'auto',
-                scrollbarGutter: 'stable',
-                boxShadow: `0 4px 8px ${alpha(theme.palette.common.black, 0.1)}`,
-                borderColor: 'grey.200',
-                borderRadius: '8px',
-              })}
-            >
-              {tabsCodeInfo.map((tab, index) =>
-                tab.Demo ? (
-                  <tab.Demo index={index} value={tabValue} key={index} />
-                ) : (
-                  <Image
-                    key={index}
-                    index={index}
-                    value={tabValue}
-                    src={tab.imgSrc}
-                    alt={tab.imgAlt}
-                  />
-                ),
-              )}
-            </Paper>
+            {tabsCodeInfo.map((tab, index) =>
+              tab.Demo ? (
+                <TabContainer index={index} value={tabValue} isDemo>
+                  <tab.Demo />
+                </TabContainer>
+              ) : (
+                <TabContainer index={index} value={tabValue} isDemo={false}>
+                  <Image src={tab.imgSrc} alt={tab.imgAlt} />
+                </TabContainer>
+              ),
+            )}
           </Box>
         </Box>
       }