@@ -59,7 +59,6 @@ const useStyles = makeStyles((theme) => ({
59
59
color : theme . palette . primary . main ,
60
60
} ,
61
61
} ,
62
- // https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items
63
62
toolbarIe11 : {
64
63
display : 'flex' ,
65
64
} ,
@@ -110,11 +109,11 @@ function getActivePages(tree, pathname) {
110
109
}
111
110
} ) ;
112
111
113
- const activePages = { } ;
112
+ const activePages = [ ] ;
114
113
if ( activePage ) {
115
- activePages [ activePage . id ] = true ;
116
- tree . loopParents ( this , activePage . id , function ( parentid ) {
117
- activePages [ parentid ] = true ;
114
+ activePages . push ( activePage . id ) ;
115
+ tree . loopParents ( this , activePage . id , function ( parentid , page ) {
116
+ activePages . push ( parentid . toString ( ) ) ;
118
117
} ) ;
119
118
}
120
119
return activePages ;
@@ -127,36 +126,49 @@ function AppDrawer(props) {
127
126
const pages = useSelector ( state => state . pages . pages ) ;
128
127
let { pathname, hash } = useLocation ( ) ;
129
128
130
- const tree = getPagesTree ( pages ) ;
131
-
132
- // Add support for leading / in development mode.
133
- if ( pathname !== '/' ) {
134
- // The leading / is only added to support static hosting (resolve /index.html).
135
- // We remove it to normalize the pathname.
136
- // See `rewriteUrlForNextExport` on Next.js side.
137
- pathname = pathname . replace ( / \/ $ / , '' ) ;
138
- }
129
+ const navigate = useNavigate ( ) ;
139
130
140
- const activePages = getActivePages ( tree , `${ pathname } ${ hash } ` ) ;
131
+ const [ tree , setTree ] = React . useState ( getPagesTree ( pages ) ) ;
132
+ const [ expandedItems , setExpandedItems ] = React . useState ( [ ] ) ;
133
+ const [ selectedItem , setSelectedItem ] = React . useState ( null ) ;
141
134
142
135
useEffect ( ( ) => {
143
136
if ( ! loaded ) {
144
137
dispatch ( load ( ) ) ;
138
+ } else {
139
+ setTree ( getPagesTree ( pages ) ) ;
145
140
}
146
- // eslint-disable-next-line react-hooks/exhaustive-deps
147
- } , [ ] /* run only once */ ) ;
148
- const navigate = useNavigate ( ) ;
141
+ } , [ loaded , dispatch , pages ] ) ;
142
+
143
+ React . useEffect ( ( ) => {
144
+ // Add support for leading / in development mode.
145
+ if ( pathname !== '/' ) {
146
+ // The leading / is only added to support static hosting (resolve /index.html).
147
+ // We remove it to normalize the pathname.
148
+ // See `rewriteUrlForNextExport` on Next.js side.
149
+ pathname = pathname . replace ( / \/ $ / , '' ) ;
150
+ }
151
+
152
+ const activePages = getActivePages ( tree , `${ pathname } ${ hash } ` ) ;
153
+ setSelectedItem ( activePages . length > 0 ? activePages [ 0 ] : null ) ;
154
+ setExpandedItems ( activePages ) ;
155
+ } , [ pathname , tree ] ) ;
156
+
157
+ const handleExpandedItemsChange = ( event , itemIds ) => {
158
+ setExpandedItems ( itemIds ) ;
159
+ } ;
160
+
149
161
const children = { } ;
150
162
tree . loopPostOrder ( this , ( pageid , page , parentid , parent ) => {
151
- const handleClick = ( ) => {
163
+ const handleClick = ( event , nodeId ) => {
164
+ setSelectedItem ( nodeId ) ;
152
165
props . onClose ( ) ;
153
166
navigate ( page . pathname ) ;
154
167
} ;
155
168
if ( pageid > 0 ) {
156
169
children [ parentid ] = children [ parentid ] || [ ] ;
157
170
if ( children [ pageid ] ) {
158
171
const title = pageToTitle ( page ) ;
159
- const topLevel = activePages [ pageid ] ;
160
172
children [ parentid ] . push (
161
173
< TreeItem
162
174
itemId = { page . id }
@@ -186,7 +198,11 @@ function AppDrawer(props) {
186
198
187
199
return (
188
200
< PersistScroll >
189
- < SimpleTreeView >
201
+ < SimpleTreeView
202
+ expandedItems = { expandedItems }
203
+ selectedItems = { selectedItem ? [ selectedItem ] : [ ] }
204
+ onExpandedItemsChange = { handleExpandedItemsChange }
205
+ >
190
206
{ children [ 0 ] }
191
207
</ SimpleTreeView >
192
208
</ PersistScroll >
0 commit comments