1
- import React , { FC , useState } from "react" ;
2
- import { Form , Select } from "@react-md/form" ;
1
+ import React , { ReactElement , useState } from "react" ;
3
2
import {
4
3
DEFAULT_DESKTOP_LAYOUT ,
5
4
DEFAULT_LANDSCAPE_TABLET_LAYOUT ,
6
5
DEFAULT_PHONE_LAYOUT ,
6
+ DEFAULT_TABLET_LAYOUT ,
7
7
Layout ,
8
+ LayoutNavigationTree ,
8
9
SupportedPhoneLayout ,
9
10
SupportedTabletLayout ,
10
11
SupportedWideLayout ,
12
+ useLayoutNavigation ,
11
13
} 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" ;
16
23
17
- import CloseButton from "./CloseButton" ;
24
+ import { ConfigurationForm } from "./ConfigurationForm" ;
25
+ import { CurrentChildren } from "./CurrentChildren" ;
18
26
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
+ } ;
30
82
31
- const ConfigurableLayout : FC = ( ) => {
83
+ export default function ConfigurableLayout ( ) : ReactElement {
32
84
const [ phoneLayout , setPhoneLayout ] = useState < SupportedPhoneLayout > (
33
85
DEFAULT_PHONE_LAYOUT
34
86
) ;
35
87
const [ tabletLayout , setTabletLayout ] = useState < SupportedTabletLayout > (
36
- DEFAULT_LANDSCAPE_TABLET_LAYOUT
88
+ DEFAULT_TABLET_LAYOUT
37
89
) ;
38
90
const [
39
91
landscapeTabletLayout ,
@@ -47,6 +99,8 @@ const ConfigurableLayout: FC = () => {
47
99
setLargeDesktopLayout ,
48
100
] = useState < SupportedWideLayout > ( DEFAULT_DESKTOP_LAYOUT ) ;
49
101
102
+ const [ selectedId , setSelectedId ] = useState ( "/" ) ;
103
+
50
104
return (
51
105
< Layout
52
106
id = "configurable-layout"
@@ -56,84 +110,27 @@ const ConfigurableLayout: FC = () => {
56
110
tabletLayout = { tabletLayout }
57
111
landscapeTabletLayout = { landscapeTabletLayout }
58
112
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 ,
71
116
} }
72
117
// this is only required since I already have a main element due to the
73
118
// documentation site's Layout component
74
119
mainProps = { { component : "div" } }
75
120
>
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
+ />
135
134
</ Layout >
136
135
) ;
137
- } ;
138
-
139
- export default ConfigurableLayout ;
136
+ }
0 commit comments