[PageContainer] Allow full-size content (#4480)

Signed-off-by: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Co-authored-by: Bharat Kashyap <bharatkashyap@outlook.com>
mui · Dec 12, 2024 · 46a3e8c · 46a3e8c
1 parent f65ef9c
commit 46a3e8c
Show file tree

Hide file tree

Showing 43 changed files with 766 additions and 230 deletions.
diff --git a/docs/data/toolpad/core/components/page-container/ActionsPageContainer.js b/docs/data/toolpad/core/components/page-container/ActionsPageContainer.js
@@ -1,7 +1,11 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useDemoRouter } from '@toolpad/core/internal';
-import { PageContainer, PageContainerToolbar } from '@toolpad/core/PageContainer';
+import {
+  PageContainer,
+  PageHeader,
+  PageHeaderToolbar,
+} from '@toolpad/core/PageContainer';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { LocalizationProvider } from '@mui/x-date-pickers-pro/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
@@ -20,9 +24,9 @@ const NAVIGATION = [
 ];
 
 // preview-start
-function PageToolbar({ status }) {
+function CustomPageToolbar({ status }) {
   return (
-    <PageContainerToolbar>
+    <PageHeaderToolbar>
       <p>Current status: {status}</p>
       <Button startIcon={<FileDownloadIcon />} color="inherit">
         Export
@@ -35,21 +39,34 @@ function PageToolbar({ status }) {
         slotProps={{ field: { size: 'small' } }}
         label="Period"
       />
-    </PageContainerToolbar>
+    </PageHeaderToolbar>
   );
 }
+
+CustomPageToolbar.propTypes = {
+  status: PropTypes.string.isRequired,
+};
+
+function CustomPageHeader({ status }) {
+  const CustomPageToolbarComponent = React.useCallback(
+    () => <CustomPageToolbar status={status} />,
+    [status],
+  );
+
+  return <PageHeader slots={{ toolbar: CustomPageToolbarComponent }} />;
+}
 // preview-end
 
-PageToolbar.propTypes = {
+CustomPageHeader.propTypes = {
   status: PropTypes.string.isRequired,
 };
 
 export default function ActionsPageContainer() {
   const router = useDemoRouter();
-  const status = 'supesh';
+  const status = 'Active';
 
-  const PageToolbarComponent = React.useCallback(
-    () => <PageToolbar status={status} />,
+  const CustomPageHeaderComponent = React.useCallback(
+    () => <CustomPageHeader status={status} />,
     [status],
   );
   const theme = useTheme();
@@ -58,7 +75,7 @@ export default function ActionsPageContainer() {
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <AppProvider navigation={NAVIGATION} router={router} theme={theme}>
         <Paper sx={{ width: '100%' }}>
-          <PageContainer slots={{ toolbar: PageToolbarComponent }}>
+          <PageContainer slots={{ header: CustomPageHeaderComponent }}>
             <PageContent />
           </PageContainer>
         </Paper>

diff --git a/docs/data/toolpad/core/components/page-container/ActionsPageContainer.tsx b/docs/data/toolpad/core/components/page-container/ActionsPageContainer.tsx
@@ -1,6 +1,10 @@
 import * as React from 'react';
 import { useDemoRouter } from '@toolpad/core/internal';
-import { PageContainer, PageContainerToolbar } from '@toolpad/core/PageContainer';
+import {
+  PageContainer,
+  PageHeader,
+  PageHeaderToolbar,
+} from '@toolpad/core/PageContainer';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { LocalizationProvider } from '@mui/x-date-pickers-pro/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
@@ -19,9 +23,9 @@ const NAVIGATION = [
 ];
 
 // preview-start
-function PageToolbar({ status }: { status: string }) {
+function CustomPageToolbar({ status }: { status: string }) {
   return (
-    <PageContainerToolbar>
+    <PageHeaderToolbar>
       <p>Current status: {status}</p>
       <Button startIcon={<FileDownloadIcon />} color="inherit">
         Export
@@ -34,17 +38,26 @@ function PageToolbar({ status }: { status: string }) {
         slotProps={{ field: { size: 'small' } as any }}
         label="Period"
       />
-    </PageContainerToolbar>
+    </PageHeaderToolbar>
   );
 }
+
+function CustomPageHeader({ status }: { status: string }) {
+  const CustomPageToolbarComponent = React.useCallback(
+    () => <CustomPageToolbar status={status} />,
+    [status],
+  );
+
+  return <PageHeader slots={{ toolbar: CustomPageToolbarComponent }} />;
+}
 // preview-end
 
 export default function ActionsPageContainer() {
   const router = useDemoRouter();
-  const status = 'supesh';
+  const status = 'Active';
 
-  const PageToolbarComponent = React.useCallback(
-    () => <PageToolbar status={status} />,
+  const CustomPageHeaderComponent = React.useCallback(
+    () => <CustomPageHeader status={status} />,
     [status],
   );
   const theme = useTheme();
@@ -53,7 +66,7 @@ export default function ActionsPageContainer() {
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <AppProvider navigation={NAVIGATION} router={router} theme={theme}>
         <Paper sx={{ width: '100%' }}>
-          <PageContainer slots={{ toolbar: PageToolbarComponent }}>
+          <PageContainer slots={{ header: CustomPageHeaderComponent }}>
             <PageContent />
           </PageContainer>
         </Paper>

diff --git a/docs/data/toolpad/core/components/page-container/ActionsPageContainer.tsx.preview b/docs/data/toolpad/core/components/page-container/ActionsPageContainer.tsx.preview
@@ -1,6 +1,6 @@
-function PageToolbar({ status }: { status: string }) {
+function CustomPageToolbar({ status }: { status: string }) {
   return (
-    <PageContainerToolbar>
+    <PageHeaderToolbar>
       <p>Current status: {status}</p>
       <Button startIcon={<FileDownloadIcon />} color="inherit">
         Export
@@ -13,6 +13,15 @@ function PageToolbar({ status }: { status: string }) {
         slotProps={{ field: { size: 'small' } as any }}
         label="Period"
       />
-    </PageContainerToolbar>
+    </PageHeaderToolbar>
   );
+}
+
+function CustomPageHeader({ status }: { status: string }) {
+  const CustomPageToolbarComponent = React.useCallback(
+    () => <CustomPageToolbar status={status} />,
+    [status],
+  );
+
+  return <PageHeader slots={{ toolbar: CustomPageToolbarComponent }} />;
 }
diff --git a/docs/data/toolpad/core/components/page-container/PageContainerFullScreen.js b/docs/data/toolpad/core/components/page-container/PageContainerFullScreen.js
@@ -0,0 +1,72 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { createTheme } from '@mui/material/styles';
+import MapIcon from '@mui/icons-material/Map';
+import { AppProvider } from '@toolpad/core/AppProvider';
+import { DashboardLayout } from '@toolpad/core/DashboardLayout';
+import { PageContainer } from '@toolpad/core/PageContainer';
+import { useDemoRouter } from '@toolpad/core/internal';
+
+const NAVIGATION = [
+  {
+    segment: 'map',
+    title: 'Map',
+    icon: <MapIcon />,
+  },
+];
+
+const demoTheme = createTheme({
+  cssVariables: {
+    colorSchemeSelector: 'data-toolpad-color-scheme',
+  },
+  colorSchemes: { light: true, dark: true },
+  breakpoints: {
+    values: {
+      xs: 0,
+      sm: 600,
+      md: 600,
+      lg: 1200,
+      xl: 1536,
+    },
+  },
+});
+
+function PageContainerFullScreen(props) {
+  const { window } = props;
+
+  const router = useDemoRouter('/map');
+
+  // Remove this const when copying and pasting into your project.
+  const demoWindow = window !== undefined ? window() : undefined;
+
+  return (
+    <AppProvider
+      navigation={NAVIGATION}
+      router={router}
+      theme={demoTheme}
+      window={demoWindow}
+    >
+      <DashboardLayout defaultSidebarCollapsed>
+        <PageContainer>
+          <iframe
+            title="Google Map"
+            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d387190.2799181496!2d-74.25987571760744!3d40.69767006358627!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259af18b60165%3A0x8b621f8a7a7d28a4!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2s!4v1633452834502!5m2!1sen!2s"
+            style={{ flex: 1, border: 0 }}
+            allowFullScreen
+            loading="lazy"
+          />
+        </PageContainer>
+      </DashboardLayout>
+    </AppProvider>
+  );
+}
+
+PageContainerFullScreen.propTypes = {
+  /**
+   * Injected by the documentation to work in an iframe.
+   * Remove this when copying and pasting into your project.
+   */
+  window: PropTypes.func,
+};
+
+export default PageContainerFullScreen;
diff --git a/docs/data/toolpad/core/components/page-container/PageContainerFullScreen.tsx b/docs/data/toolpad/core/components/page-container/PageContainerFullScreen.tsx
@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { createTheme } from '@mui/material/styles';
+import MapIcon from '@mui/icons-material/Map';
+import { AppProvider, type Navigation } from '@toolpad/core/AppProvider';
+import { DashboardLayout } from '@toolpad/core/DashboardLayout';
+import { PageContainer } from '@toolpad/core/PageContainer';
+import { useDemoRouter } from '@toolpad/core/internal';
+
+const NAVIGATION: Navigation = [
+  {
+    segment: 'map',
+    title: 'Map',
+    icon: <MapIcon />,
+  },
+];
+
+const demoTheme = createTheme({
+  cssVariables: {
+    colorSchemeSelector: 'data-toolpad-color-scheme',
+  },
+  colorSchemes: { light: true, dark: true },
+  breakpoints: {
+    values: {
+      xs: 0,
+      sm: 600,
+      md: 600,
+      lg: 1200,
+      xl: 1536,
+    },
+  },
+});
+
+interface DemoProps {
+  /**
+   * Injected by the documentation to work in an iframe.
+   * Remove this when copying and pasting into your project.
+   */
+  window?: () => Window;
+}
+
+export default function PageContainerFullScreen(props: DemoProps) {
+  const { window } = props;
+
+  const router = useDemoRouter('/map');
+
+  // Remove this const when copying and pasting into your project.
+  const demoWindow = window !== undefined ? window() : undefined;
+
+  return (
+    <AppProvider
+      navigation={NAVIGATION}
+      router={router}
+      theme={demoTheme}
+      window={demoWindow}
+    >
+      <DashboardLayout defaultSidebarCollapsed>
+        <PageContainer>
+          <iframe
+            title="Google Map"
+            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d387190.2799181496!2d-74.25987571760744!3d40.69767006358627!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259af18b60165%3A0x8b621f8a7a7d28a4!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2s!4v1633452834502!5m2!1sen!2s"
+            style={{ flex: 1, border: 0 }}
+            allowFullScreen
+            loading="lazy"
+          />
+        </PageContainer>
+      </DashboardLayout>
+    </AppProvider>
+  );
+}
diff --git a/docs/data/toolpad/core/components/page-container/PageContainerFullScreen.tsx.preview b/docs/data/toolpad/core/components/page-container/PageContainerFullScreen.tsx.preview
@@ -0,0 +1,11 @@
+<DashboardLayout defaultSidebarCollapsed>
+  <PageContainer>
+    <iframe
+      title="Google Map"
+      src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d387190.2799181496!2d-74.25987571760744!3d40.69767006358627!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259af18b60165%3A0x8b621f8a7a7d28a4!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2s!4v1633452834502!5m2!1sen!2s"
+      style={{ flex: 1, border: 0 }}
+      allowFullScreen
+      loading="lazy"
+    />
+  </PageContainer>
+</DashboardLayout>
diff --git a/docs/data/toolpad/core/components/page-container/PageContainerHeader.js b/docs/data/toolpad/core/components/page-container/PageContainerHeader.js
@@ -0,0 +1,34 @@
+import * as React from 'react';
+// preview-start
+import { PageHeader } from '@toolpad/core/PageContainer';
+// preview-end
+import { AppProvider } from '@toolpad/core/AppProvider';
+import { useDemoRouter } from '@toolpad/core/internal';
+import { useTheme } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Container from '@mui/material/Container';
+import Paper from '@mui/material/Paper';
+
+const NAVIGATION = [
+  { segment: '', title: 'Home' },
+  { segment: 'orders', title: 'Orders' },
+];
+
+export default function PageContainerHeader() {
+  const router = useDemoRouter('/orders');
+
+  const theme = useTheme();
+
+  return (
+    <AppProvider navigation={NAVIGATION} router={router} theme={theme}>
+      <Paper sx={{ width: '100%' }}>
+        {/* preview-start */}
+        <Container sx={{ my: 2 }}>
+          <PageHeader />
+          <Box sx={{ mt: 1 }}>Page content</Box>
+        </Container>
+        {/* preview-end */}
+      </Paper>
+    </AppProvider>
+  );
+}
diff --git a/docs/data/toolpad/core/components/page-container/PageContainerHeader.tsx b/docs/data/toolpad/core/components/page-container/PageContainerHeader.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+// preview-start
+import { PageHeader } from '@toolpad/core/PageContainer';
+// preview-end
+import { AppProvider } from '@toolpad/core/AppProvider';
+import { useDemoRouter } from '@toolpad/core/internal';
+import { useTheme } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Container from '@mui/material/Container';
+import Paper from '@mui/material/Paper';
+
+const NAVIGATION = [
+  { segment: '', title: 'Home' },
+  { segment: 'orders', title: 'Orders' },
+];
+
+export default function PageContainerHeader() {
+  const router = useDemoRouter('/orders');
+
+  const theme = useTheme();
+
+  return (
+    <AppProvider navigation={NAVIGATION} router={router} theme={theme}>
+      <Paper sx={{ width: '100%' }}>
+        {/* preview-start */}
+        <Container sx={{ my: 2 }}>
+          <PageHeader />
+          <Box sx={{ mt: 1 }}>Page content</Box>
+        </Container>
+        {/* preview-end */}
+      </Paper>
+    </AppProvider>
+  );
+}