Skip to content

Commit 1065688

Browse files
mlaursenmlaursen
committed
chore(docs): updated layout demos for mini layout support
1 parent 36b3cbc commit 1065688

File tree

4 files changed

+252
-96
lines changed

4 files changed

+252
-96
lines changed

‎packages/documentation/src/components/Demos/Layout/ConfigurableLayout.tsx

Lines changed: 91 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,91 @@
1-
import React, { FC, useState } from "react";
2-
import { Form, Select } from "@react-md/form";
1+
import React, { ReactElement, useState } from "react";
32
import {
43
DEFAULT_DESKTOP_LAYOUT,
54
DEFAULT_LANDSCAPE_TABLET_LAYOUT,
65
DEFAULT_PHONE_LAYOUT,
6+
DEFAULT_TABLET_LAYOUT,
77
Layout,
8+
LayoutNavigationTree,
89
SupportedPhoneLayout,
910
SupportedTabletLayout,
1011
SupportedWideLayout,
12+
useLayoutNavigation,
1113
} from "@react-md/layout";
12-
import { Text } from "@react-md/typography";
13-
import { Grid } from "@react-md/utils";
14-
15-
import Code from "components/Code/Code";
14+
import {
15+
HomeSVGIcon,
16+
SecuritySVGIcon,
17+
SettingsSVGIcon,
18+
ShareSVGIcon,
19+
SnoozeSVGIcon,
20+
StarSVGIcon,
21+
StorageSVGIcon,
22+
} from "@react-md/material-icons";
1623

17-
import CloseButton from "./CloseButton";
24+
import { ConfigurationForm } from "./ConfigurationForm";
25+
import { CurrentChildren } from "./CurrentChildren";
1826

19-
const PHONE_LAYOUTS: SupportedPhoneLayout[] = ["temporary"];
20-
const TABLET_LAYOUTS: SupportedTabletLayout[] = [
21-
...PHONE_LAYOUTS,
22-
"toggleable",
23-
];
24-
const WIDE_LAYOUTS: SupportedWideLayout[] = [
25-
...TABLET_LAYOUTS,
26-
"clipped",
27-
"floating",
28-
"full-height",
29-
];
27+
const navItems: LayoutNavigationTree = {
28+
"/": {
29+
itemId: "/",
30+
parentId: null,
31+
children: "Home",
32+
leftAddon: <HomeSVGIcon />,
33+
},
34+
"/route-1": {
35+
itemId: "/route-1",
36+
parentId: null,
37+
children: "Route 1",
38+
leftAddon: <StarSVGIcon />,
39+
},
40+
"/divider-1": {
41+
itemId: "/divider-1",
42+
parentId: null,
43+
divider: true,
44+
isCustom: true,
45+
},
46+
"/route-2": {
47+
itemId: "/route-2",
48+
parentId: null,
49+
children: "Route 2",
50+
leftAddon: <ShareSVGIcon />,
51+
},
52+
"/route-2-1": {
53+
itemId: "/route-2-1",
54+
parentId: "/route-2",
55+
children: "Route 2-1",
56+
leftAddon: <SettingsSVGIcon />,
57+
},
58+
"/route-2-2": {
59+
itemId: "/route-2-2",
60+
parentId: "/route-2",
61+
children: "Route 2-2",
62+
leftAddon: <StorageSVGIcon />,
63+
},
64+
"/route-2-3": {
65+
itemId: "/route-2-3",
66+
parentId: "/route-2",
67+
children: "Route 2-3",
68+
leftAddon: <SecuritySVGIcon />,
69+
},
70+
"/route-3": {
71+
itemId: "/route-3",
72+
parentId: null,
73+
children: "Route 3",
74+
leftAddon: <SnoozeSVGIcon />,
75+
},
76+
"/route-4": {
77+
itemId: "/route-4",
78+
parentId: null,
79+
children: "Route 4",
80+
},
81+
};
3082

31-
const ConfigurableLayout: FC = () => {
83+
export default function ConfigurableLayout(): ReactElement {
3284
const [phoneLayout, setPhoneLayout] = useState<SupportedPhoneLayout>(
3385
DEFAULT_PHONE_LAYOUT
3486
);
3587
const [tabletLayout, setTabletLayout] = useState<SupportedTabletLayout>(
36-
DEFAULT_LANDSCAPE_TABLET_LAYOUT
88+
DEFAULT_TABLET_LAYOUT
3789
);
3890
const [
3991
landscapeTabletLayout,
@@ -47,6 +99,8 @@ const ConfigurableLayout: FC = () => {
4799
setLargeDesktopLayout,
48100
] = useState<SupportedWideLayout>(DEFAULT_DESKTOP_LAYOUT);
49101

102+
const [selectedId, setSelectedId] = useState("/");
103+
50104
return (
51105
<Layout
52106
id="configurable-layout"
@@ -56,84 +110,27 @@ const ConfigurableLayout: FC = () => {
56110
tabletLayout={tabletLayout}
57111
landscapeTabletLayout={landscapeTabletLayout}
58112
desktopLayout={desktopLayout}
59-
navProps={{
60-
children: (
61-
<>
62-
<CloseButton />
63-
<Text style={{ padding: "1rem" }}>
64-
Here is some amazing content that should normally be a navigation
65-
tree. You can actually still display a navigation tree along with
66-
any custom content you want by using the{" "}
67-
<Code>navProps.children</Code>
68-
</Text>
69-
</>
70-
),
113+
treeProps={{
114+
...useLayoutNavigation(navItems, selectedId),
115+
onItemSelect: setSelectedId,
71116
}}
72117
// this is only required since I already have a main element due to the
73118
// documentation site's Layout component
74119
mainProps={{ component: "div" }}
75120
>
76-
<Grid cloneStyles columns={2} desktopColumns={4}>
77-
<Form>
78-
<Select
79-
id="phone-layout-type"
80-
label="Phone Layout"
81-
value={phoneLayout}
82-
options={PHONE_LAYOUTS}
83-
onChange={(nextValue) => {
84-
if (PHONE_LAYOUTS.includes(nextValue as SupportedPhoneLayout)) {
85-
setPhoneLayout(nextValue as SupportedPhoneLayout);
86-
}
87-
}}
88-
/>
89-
<Select
90-
id="tablet-layout-type"
91-
label="Tablet Layout"
92-
value={tabletLayout}
93-
options={TABLET_LAYOUTS}
94-
onChange={(nextValue) => {
95-
if (TABLET_LAYOUTS.includes(nextValue as SupportedTabletLayout)) {
96-
setTabletLayout(nextValue as SupportedTabletLayout);
97-
}
98-
}}
99-
/>
100-
<Select
101-
id="landscape-tablet-layout-type"
102-
label="Landscape Tablet Layout"
103-
value={landscapeTabletLayout}
104-
options={TABLET_LAYOUTS}
105-
onChange={(nextValue) => {
106-
if (TABLET_LAYOUTS.includes(nextValue as SupportedTabletLayout)) {
107-
setLandscapeTabletLayout(nextValue as SupportedTabletLayout);
108-
}
109-
}}
110-
/>
111-
<Select
112-
id="desktop-layout-type"
113-
label="Desktop Layout"
114-
value={desktopLayout}
115-
options={WIDE_LAYOUTS}
116-
onChange={(nextValue) => {
117-
if (WIDE_LAYOUTS.includes(nextValue as SupportedWideLayout)) {
118-
setDesktopLayout(nextValue as SupportedWideLayout);
119-
}
120-
}}
121-
/>
122-
<Select
123-
id="large-desktop-layout-type"
124-
label="Large Desktop Layout"
125-
value={largeDesktopLayout}
126-
options={WIDE_LAYOUTS}
127-
onChange={(nextValue) => {
128-
if (WIDE_LAYOUTS.includes(nextValue as SupportedWideLayout)) {
129-
setLargeDesktopLayout(nextValue as SupportedWideLayout);
130-
}
131-
}}
132-
/>
133-
</Form>
134-
</Grid>
121+
<CurrentChildren route={selectedId} />
122+
<ConfigurationForm
123+
phoneLayout={phoneLayout}
124+
setPhoneLayout={setPhoneLayout}
125+
tabletLayout={tabletLayout}
126+
setTabletLayout={setTabletLayout}
127+
landscapeTabletLayout={landscapeTabletLayout}
128+
setLandscapeTabletLayout={setLandscapeTabletLayout}
129+
desktopLayout={desktopLayout}
130+
setDesktopLayout={setDesktopLayout}
131+
largeDesktopLayout={largeDesktopLayout}
132+
setLargeDesktopLayout={setLargeDesktopLayout}
133+
/>
135134
</Layout>
136135
);
137-
};
138-
139-
export default ConfigurableLayout;
136+
}

‎packages/documentation/src/components/Demos/Layout/ConfigurationForm.tsx

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
import React, { ReactElement } from "react";
2+
import { Form, Select } from "@react-md/form";
3+
import {
4+
SupportedPhoneLayout,
5+
SupportedTabletLayout,
6+
SupportedWideLayout,
7+
useLayoutConfig,
8+
} from "@react-md/layout";
9+
import { Text } from "@react-md/typography";
10+
import { Grid, useAppSize } from "@react-md/utils";
11+
import Code from "components/Code/Code";
12+
13+
interface ConfigurationFormProps {
14+
phoneLayout: SupportedPhoneLayout;
15+
setPhoneLayout(phoneLayout: SupportedPhoneLayout): void;
16+
tabletLayout: SupportedTabletLayout;
17+
setTabletLayout(tabletLayout: SupportedTabletLayout): void;
18+
landscapeTabletLayout: SupportedTabletLayout;
19+
setLandscapeTabletLayout(landscapeTabletLayout: SupportedTabletLayout): void;
20+
desktopLayout: SupportedWideLayout;
21+
setDesktopLayout(desktopLayout: SupportedWideLayout): void;
22+
largeDesktopLayout: SupportedWideLayout;
23+
setLargeDesktopLayout(largeDesktopLayout: SupportedWideLayout): void;
24+
}
25+
26+
const PHONE_LAYOUTS: SupportedPhoneLayout[] = ["temporary", "temporary-mini"];
27+
const TABLET_LAYOUTS: SupportedTabletLayout[] = [
28+
...PHONE_LAYOUTS,
29+
"toggleable",
30+
"toggleable-mini",
31+
];
32+
const WIDE_LAYOUTS: SupportedWideLayout[] = [
33+
...TABLET_LAYOUTS,
34+
"clipped",
35+
"floating",
36+
"full-height",
37+
];
38+
39+
export function ConfigurationForm({
40+
phoneLayout,
41+
setPhoneLayout,
42+
tabletLayout,
43+
setTabletLayout,
44+
landscapeTabletLayout,
45+
setLandscapeTabletLayout,
46+
desktopLayout,
47+
setDesktopLayout,
48+
largeDesktopLayout,
49+
setLargeDesktopLayout,
50+
}: ConfigurationFormProps): ReactElement {
51+
const { layout } = useLayoutConfig();
52+
const { isTablet, isDesktop, isLargeDesktop, isLandscape } = useAppSize();
53+
let size = "Phone";
54+
if (isTablet) {
55+
size = `${isLandscape ? "Landscape " : ""}Tablet`;
56+
} else if (isLargeDesktop) {
57+
size = "Large Desktop";
58+
} else if (isDesktop) {
59+
size = "Desktop";
60+
}
61+
62+
return (
63+
<>
64+
<Grid cloneStyles columns={1}>
65+
<Text type="headline-3" margin="top">
66+
Configuration
67+
</Text>
68+
<Text margin="none">
69+
The current app size is: <Code>{size}</Code>
70+
</Text>
71+
<Text margin="none">
72+
The current layout is: <Code>{layout}</Code>
73+
</Text>
74+
</Grid>
75+
<Grid cloneStyles columns={2} desktopColumns={4}>
76+
<Form>
77+
<Select
78+
id="phone-layout-type"
79+
label="Phone Layout"
80+
value={phoneLayout}
81+
options={PHONE_LAYOUTS}
82+
onChange={(nextValue) => {
83+
if (PHONE_LAYOUTS.includes(nextValue as SupportedPhoneLayout)) {
84+
setPhoneLayout(nextValue as SupportedPhoneLayout);
85+
}
86+
}}
87+
/>
88+
<Select
89+
id="tablet-layout-type"
90+
label="Tablet Layout"
91+
value={tabletLayout}
92+
options={TABLET_LAYOUTS}
93+
onChange={(nextValue) => {
94+
if (TABLET_LAYOUTS.includes(nextValue as SupportedTabletLayout)) {
95+
setTabletLayout(nextValue as SupportedTabletLayout);
96+
}
97+
}}
98+
/>
99+
<Select
100+
id="landscape-tablet-layout-type"
101+
label="Landscape Tablet Layout"
102+
value={landscapeTabletLayout}
103+
options={TABLET_LAYOUTS}
104+
onChange={(nextValue) => {
105+
if (TABLET_LAYOUTS.includes(nextValue as SupportedTabletLayout)) {
106+
setLandscapeTabletLayout(nextValue as SupportedTabletLayout);
107+
}
108+
}}
109+
/>
110+
<Select
111+
id="desktop-layout-type"
112+
label="Desktop Layout"
113+
value={desktopLayout}
114+
options={WIDE_LAYOUTS}
115+
onChange={(nextValue) => {
116+
if (WIDE_LAYOUTS.includes(nextValue as SupportedWideLayout)) {
117+
setDesktopLayout(nextValue as SupportedWideLayout);
118+
}
119+
}}
120+
/>
121+
<Select
122+
id="large-desktop-layout-type"
123+
label="Large Desktop Layout"
124+
value={largeDesktopLayout}
125+
options={WIDE_LAYOUTS}
126+
onChange={(nextValue) => {
127+
if (WIDE_LAYOUTS.includes(nextValue as SupportedWideLayout)) {
128+
setLargeDesktopLayout(nextValue as SupportedWideLayout);
129+
}
130+
}}
131+
/>
132+
</Form>
133+
</Grid>
134+
</>
135+
);
136+
}

‎packages/documentation/src/components/Demos/Layout/ControllingTheLayout.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@ import CloseButton from "./CloseButton";
1010

1111
const options: SupportedWideLayout[] = [
1212
"temporary",
13-
// 'temporary-mini', // not supported yet
13+
"temporary-mini",
1414
"toggleable",
15-
// 'toggleable-mini', // not supported yet
15+
"toggleable-mini",
1616
"clipped",
1717
"floating",
1818
"full-height",

‎packages/documentation/src/components/Demos/Layout/CurrentChildren.tsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { Text } from "@react-md/typography";
2+
import { Grid } from "@react-md/utils";
3+
import Code from "components/Code/Code";
4+
import React, { ReactElement } from "react";
5+
6+
export interface CurrentChildrenProps {
7+
route: string;
8+
}
9+
10+
export function CurrentChildren({
11+
route,
12+
}: CurrentChildrenProps): ReactElement | null {
13+
return (
14+
<Grid columns={1}>
15+
<Text type="headline-3" margin="none">
16+
Contents
17+
</Text>
18+
<Text margin="none">
19+
The current route is: <Code>{route}</Code>
20+
</Text>
21+
</Grid>
22+
);
23+
}

0 commit comments

Comments
 (0)