Skip to content

Commit 46a3e8c

Browse files
apedroferreirabharatkashyap
apedroferreira
and
bharatkashyap
authored
[PageContainer] Allow full-size content (#4480)
Signed-off-by: Pedro Ferreira <[email protected]> Co-authored-by: Bharat Kashyap <[email protected]>
1 parent f65ef9c commit 46a3e8c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+766
-230
lines changed

‎docs/data/toolpad/core/components/page-container/ActionsPageContainer.js

Lines changed: 26 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
import * as React from 'react';
22
import PropTypes from 'prop-types';
33
import { useDemoRouter } from '@toolpad/core/internal';
4-
import { PageContainer, PageContainerToolbar } from '@toolpad/core/PageContainer';
4+
import {
5+
PageContainer,
6+
PageHeader,
7+
PageHeaderToolbar,
8+
} from '@toolpad/core/PageContainer';
59
import { AppProvider } from '@toolpad/core/AppProvider';
610
import { LocalizationProvider } from '@mui/x-date-pickers-pro/LocalizationProvider';
711
import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
@@ -20,9 +24,9 @@ const NAVIGATION = [
2024
];
2125

2226
// preview-start
23-
function PageToolbar({ status }) {
27+
function CustomPageToolbar({ status }) {
2428
return (
25-
<PageContainerToolbar>
29+
<PageHeaderToolbar>
2630
<p>Current status: {status}</p>
2731
<Button startIcon={<FileDownloadIcon />} color="inherit">
2832
Export
@@ -35,21 +39,34 @@ function PageToolbar({ status }) {
3539
slotProps={{ field: { size: 'small' } }}
3640
label="Period"
3741
/>
38-
</PageContainerToolbar>
42+
</PageHeaderToolbar>
3943
);
4044
}
45+
46+
CustomPageToolbar.propTypes = {
47+
status: PropTypes.string.isRequired,
48+
};
49+
50+
function CustomPageHeader({ status }) {
51+
const CustomPageToolbarComponent = React.useCallback(
52+
() => <CustomPageToolbar status={status} />,
53+
[status],
54+
);
55+
56+
return <PageHeader slots={{ toolbar: CustomPageToolbarComponent }} />;
57+
}
4158
// preview-end
4259

43-
PageToolbar.propTypes = {
60+
CustomPageHeader.propTypes = {
4461
status: PropTypes.string.isRequired,
4562
};
4663

4764
export default function ActionsPageContainer() {
4865
const router = useDemoRouter();
49-
const status = 'supesh';
66+
const status = 'Active';
5067

51-
const PageToolbarComponent = React.useCallback(
52-
() => <PageToolbar status={status} />,
68+
const CustomPageHeaderComponent = React.useCallback(
69+
() => <CustomPageHeader status={status} />,
5370
[status],
5471
);
5572
const theme = useTheme();
@@ -58,7 +75,7 @@ export default function ActionsPageContainer() {
5875
<LocalizationProvider dateAdapter={AdapterDayjs}>
5976
<AppProvider navigation={NAVIGATION} router={router} theme={theme}>
6077
<Paper sx={{ width: '100%' }}>
61-
<PageContainer slots={{ toolbar: PageToolbarComponent }}>
78+
<PageContainer slots={{ header: CustomPageHeaderComponent }}>
6279
<PageContent />
6380
</PageContainer>
6481
</Paper>

‎docs/data/toolpad/core/components/page-container/ActionsPageContainer.tsx

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
import * as React from 'react';
22
import { useDemoRouter } from '@toolpad/core/internal';
3-
import { PageContainer, PageContainerToolbar } from '@toolpad/core/PageContainer';
3+
import {
4+
PageContainer,
5+
PageHeader,
6+
PageHeaderToolbar,
7+
} from '@toolpad/core/PageContainer';
48
import { AppProvider } from '@toolpad/core/AppProvider';
59
import { LocalizationProvider } from '@mui/x-date-pickers-pro/LocalizationProvider';
610
import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
@@ -19,9 +23,9 @@ const NAVIGATION = [
1923
];
2024

2125
// preview-start
22-
function PageToolbar({ status }: { status: string }) {
26+
function CustomPageToolbar({ status }: { status: string }) {
2327
return (
24-
<PageContainerToolbar>
28+
<PageHeaderToolbar>
2529
<p>Current status: {status}</p>
2630
<Button startIcon={<FileDownloadIcon />} color="inherit">
2731
Export
@@ -34,17 +38,26 @@ function PageToolbar({ status }: { status: string }) {
3438
slotProps={{ field: { size: 'small' } as any }}
3539
label="Period"
3640
/>
37-
</PageContainerToolbar>
41+
</PageHeaderToolbar>
3842
);
3943
}
44+
45+
function CustomPageHeader({ status }: { status: string }) {
46+
const CustomPageToolbarComponent = React.useCallback(
47+
() => <CustomPageToolbar status={status} />,
48+
[status],
49+
);
50+
51+
return <PageHeader slots={{ toolbar: CustomPageToolbarComponent }} />;
52+
}
4053
// preview-end
4154

4255
export default function ActionsPageContainer() {
4356
const router = useDemoRouter();
44-
const status = 'supesh';
57+
const status = 'Active';
4558

46-
const PageToolbarComponent = React.useCallback(
47-
() => <PageToolbar status={status} />,
59+
const CustomPageHeaderComponent = React.useCallback(
60+
() => <CustomPageHeader status={status} />,
4861
[status],
4962
);
5063
const theme = useTheme();
@@ -53,7 +66,7 @@ export default function ActionsPageContainer() {
5366
<LocalizationProvider dateAdapter={AdapterDayjs}>
5467
<AppProvider navigation={NAVIGATION} router={router} theme={theme}>
5568
<Paper sx={{ width: '100%' }}>
56-
<PageContainer slots={{ toolbar: PageToolbarComponent }}>
69+
<PageContainer slots={{ header: CustomPageHeaderComponent }}>
5770
<PageContent />
5871
</PageContainer>
5972
</Paper>

‎docs/data/toolpad/core/components/page-container/ActionsPageContainer.tsx.preview

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
function PageToolbar({ status }: { status: string }) {
1+
function CustomPageToolbar({ status }: { status: string }) {
22
return (
3-
<PageContainerToolbar>
3+
<PageHeaderToolbar>
44
<p>Current status: {status}</p>
55
<Button startIcon={<FileDownloadIcon />} color="inherit">
66
Export
@@ -13,6 +13,15 @@ function PageToolbar({ status }: { status: string }) {
1313
slotProps={{ field: { size: 'small' } as any }}
1414
label="Period"
1515
/>
16-
</PageContainerToolbar>
16+
</PageHeaderToolbar>
1717
);
18+
}
19+
20+
function CustomPageHeader({ status }: { status: string }) {
21+
const CustomPageToolbarComponent = React.useCallback(
22+
() => <CustomPageToolbar status={status} />,
23+
[status],
24+
);
25+
26+
return <PageHeader slots={{ toolbar: CustomPageToolbarComponent }} />;
1827
}

‎docs/data/toolpad/core/components/page-container/PageContainerFullScreen.js

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import * as React from 'react';
2+
import PropTypes from 'prop-types';
3+
import { createTheme } from '@mui/material/styles';
4+
import MapIcon from '@mui/icons-material/Map';
5+
import { AppProvider } from '@toolpad/core/AppProvider';
6+
import { DashboardLayout } from '@toolpad/core/DashboardLayout';
7+
import { PageContainer } from '@toolpad/core/PageContainer';
8+
import { useDemoRouter } from '@toolpad/core/internal';
9+
10+
const NAVIGATION = [
11+
{
12+
segment: 'map',
13+
title: 'Map',
14+
icon: <MapIcon />,
15+
},
16+
];
17+
18+
const demoTheme = createTheme({
19+
cssVariables: {
20+
colorSchemeSelector: 'data-toolpad-color-scheme',
21+
},
22+
colorSchemes: { light: true, dark: true },
23+
breakpoints: {
24+
values: {
25+
xs: 0,
26+
sm: 600,
27+
md: 600,
28+
lg: 1200,
29+
xl: 1536,
30+
},
31+
},
32+
});
33+
34+
function PageContainerFullScreen(props) {
35+
const { window } = props;
36+
37+
const router = useDemoRouter('/map');
38+
39+
// Remove this const when copying and pasting into your project.
40+
const demoWindow = window !== undefined ? window() : undefined;
41+
42+
return (
43+
<AppProvider
44+
navigation={NAVIGATION}
45+
router={router}
46+
theme={demoTheme}
47+
window={demoWindow}
48+
>
49+
<DashboardLayout defaultSidebarCollapsed>
50+
<PageContainer>
51+
<iframe
52+
title="Google Map"
53+
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"
54+
style={{ flex: 1, border: 0 }}
55+
allowFullScreen
56+
loading="lazy"
57+
/>
58+
</PageContainer>
59+
</DashboardLayout>
60+
</AppProvider>
61+
);
62+
}
63+
64+
PageContainerFullScreen.propTypes = {
65+
/**
66+
* Injected by the documentation to work in an iframe.
67+
* Remove this when copying and pasting into your project.
68+
*/
69+
window: PropTypes.func,
70+
};
71+
72+
export default PageContainerFullScreen;

‎docs/data/toolpad/core/components/page-container/PageContainerFullScreen.tsx

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import * as React from 'react';
2+
import { createTheme } from '@mui/material/styles';
3+
import MapIcon from '@mui/icons-material/Map';
4+
import { AppProvider, type Navigation } from '@toolpad/core/AppProvider';
5+
import { DashboardLayout } from '@toolpad/core/DashboardLayout';
6+
import { PageContainer } from '@toolpad/core/PageContainer';
7+
import { useDemoRouter } from '@toolpad/core/internal';
8+
9+
const NAVIGATION: Navigation = [
10+
{
11+
segment: 'map',
12+
title: 'Map',
13+
icon: <MapIcon />,
14+
},
15+
];
16+
17+
const demoTheme = createTheme({
18+
cssVariables: {
19+
colorSchemeSelector: 'data-toolpad-color-scheme',
20+
},
21+
colorSchemes: { light: true, dark: true },
22+
breakpoints: {
23+
values: {
24+
xs: 0,
25+
sm: 600,
26+
md: 600,
27+
lg: 1200,
28+
xl: 1536,
29+
},
30+
},
31+
});
32+
33+
interface DemoProps {
34+
/**
35+
* Injected by the documentation to work in an iframe.
36+
* Remove this when copying and pasting into your project.
37+
*/
38+
window?: () => Window;
39+
}
40+
41+
export default function PageContainerFullScreen(props: DemoProps) {
42+
const { window } = props;
43+
44+
const router = useDemoRouter('/map');
45+
46+
// Remove this const when copying and pasting into your project.
47+
const demoWindow = window !== undefined ? window() : undefined;
48+
49+
return (
50+
<AppProvider
51+
navigation={NAVIGATION}
52+
router={router}
53+
theme={demoTheme}
54+
window={demoWindow}
55+
>
56+
<DashboardLayout defaultSidebarCollapsed>
57+
<PageContainer>
58+
<iframe
59+
title="Google Map"
60+
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"
61+
style={{ flex: 1, border: 0 }}
62+
allowFullScreen
63+
loading="lazy"
64+
/>
65+
</PageContainer>
66+
</DashboardLayout>
67+
</AppProvider>
68+
);
69+
}

‎docs/data/toolpad/core/components/page-container/PageContainerFullScreen.tsx.preview

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<DashboardLayout defaultSidebarCollapsed>
2+
<PageContainer>
3+
<iframe
4+
title="Google Map"
5+
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"
6+
style={{ flex: 1, border: 0 }}
7+
allowFullScreen
8+
loading="lazy"
9+
/>
10+
</PageContainer>
11+
</DashboardLayout>

‎docs/data/toolpad/core/components/page-container/PageContainerHeader.js

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import * as React from 'react';
2+
// preview-start
3+
import { PageHeader } from '@toolpad/core/PageContainer';
4+
// preview-end
5+
import { AppProvider } from '@toolpad/core/AppProvider';
6+
import { useDemoRouter } from '@toolpad/core/internal';
7+
import { useTheme } from '@mui/material/styles';
8+
import Box from '@mui/material/Box';
9+
import Container from '@mui/material/Container';
10+
import Paper from '@mui/material/Paper';
11+
12+
const NAVIGATION = [
13+
{ segment: '', title: 'Home' },
14+
{ segment: 'orders', title: 'Orders' },
15+
];
16+
17+
export default function PageContainerHeader() {
18+
const router = useDemoRouter('/orders');
19+
20+
const theme = useTheme();
21+
22+
return (
23+
<AppProvider navigation={NAVIGATION} router={router} theme={theme}>
24+
<Paper sx={{ width: '100%' }}>
25+
{/* preview-start */}
26+
<Container sx={{ my: 2 }}>
27+
<PageHeader />
28+
<Box sx={{ mt: 1 }}>Page content</Box>
29+
</Container>
30+
{/* preview-end */}
31+
</Paper>
32+
</AppProvider>
33+
);
34+
}

‎docs/data/toolpad/core/components/page-container/PageContainerHeader.tsx

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import * as React from 'react';
2+
// preview-start
3+
import { PageHeader } from '@toolpad/core/PageContainer';
4+
// preview-end
5+
import { AppProvider } from '@toolpad/core/AppProvider';
6+
import { useDemoRouter } from '@toolpad/core/internal';
7+
import { useTheme } from '@mui/material/styles';
8+
import Box from '@mui/material/Box';
9+
import Container from '@mui/material/Container';
10+
import Paper from '@mui/material/Paper';
11+
12+
const NAVIGATION = [
13+
{ segment: '', title: 'Home' },
14+
{ segment: 'orders', title: 'Orders' },
15+
];
16+
17+
export default function PageContainerHeader() {
18+
const router = useDemoRouter('/orders');
19+
20+
const theme = useTheme();
21+
22+
return (
23+
<AppProvider navigation={NAVIGATION} router={router} theme={theme}>
24+
<Paper sx={{ width: '100%' }}>
25+
{/* preview-start */}
26+
<Container sx={{ my: 2 }}>
27+
<PageHeader />
28+
<Box sx={{ mt: 1 }}>Page content</Box>
29+
</Container>
30+
{/* preview-end */}
31+
</Paper>
32+
</AppProvider>
33+
);
34+
}

0 commit comments

Comments
 (0)