1- import React , { Component } from 'react' ;
1+ import React , { useEffect , useState } from 'react' ;
22import PropTypes from 'prop-types' ;
33import { concat } from 'ramda' ;
44
@@ -9,13 +9,23 @@ import ClockIcon from '../icons/ClockIcon.svg';
99import ErrorIcon from '../icons/ErrorIcon.svg' ;
1010import GraphIcon from '../icons/GraphIcon.svg' ;
1111import OffIcon from '../icons/OffIcon.svg' ;
12+ import Expand from '../icons/Expand.svg' ;
1213import { VersionInfo } from './VersionInfo.react' ;
1314import { CallbackGraphContainer } from '../CallbackGraph/CallbackGraphContainer.react' ;
1415import { FrontEndErrorContainer } from '../FrontEnd/FrontEndErrorContainer.react' ;
1516
1617const classes = ( base , variant , variant2 ) =>
1718 `${ base } ${ base } ${ variant } + ( variant2 ? ` ${ base } ${ variant2 } : '' ) ;
1819
20+ const isCollapsed = ( ) => {
21+ try {
22+ return localStorage . getItem ( 'dash_debug_menu_collapsed' ) === 'true' ;
23+ } catch ( e ) {
24+ // If localStorage is not available, default to false
25+ return false ;
26+ }
27+ } ;
28+
1929const MenuContent = ( {
2030 hotReload,
2131 connected,
@@ -77,76 +87,98 @@ const MenuContent = ({
7787 Server
7888 < _StatusIcon className = 'dash-debug-menu__icon' />
7989 </ div >
90+ < div
91+ className = 'dash-debug-menu__divider'
92+ style = { { marginRight : 0 } }
93+ />
8094 </ div >
8195 ) ;
8296} ;
8397
84- class DebugMenu extends Component {
85- constructor ( props ) {
86- super ( props ) ;
98+ const DebugMenu = ( { error, hotReload, config, children} ) => {
99+ const [ popup , setPopup ] = useState ( 'errors' ) ;
100+ const [ collapsed , setCollapsed ] = useState ( isCollapsed ) ;
101+
102+ const errCount = error . frontEnd . length + error . backEnd . length ;
103+ const connected = error . backEndConnected ;
104+
105+ useEffect ( ( ) => {
106+ if ( errCount > 0 && popup == null ) {
107+ setPopup ( 'errors' ) ;
108+ }
109+ } , [ errCount ] ) ;
110+
111+ const toggleErrors = ( ) => {
112+ setPopup ( popup == 'errors' ? null : 'errors' ) ;
113+ } ;
114+
115+ const toggleCallbackGraph = ( ) => {
116+ setPopup ( popup == 'callbackGraph' ? null : 'callbackGraph' ) ;
117+ } ;
118+
119+ const toggleCollapsed = ( ) => {
120+ setCollapsed ( ! collapsed ) ;
121+ try {
122+ localStorage . setItem ( 'dash_debug_menu_collapsed' , ! collapsed ) ;
123+ } catch ( e ) {
124+ // If localStorage is not available, do nothing
125+ }
126+ } ;
127+
128+ const errors = concat ( error . frontEnd , error . backEnd ) ;
129+
130+ const popupContent = (
131+ < div className = 'dash-debug-menu__popup' >
132+ { popup == 'callbackGraph' ? < CallbackGraphContainer /> : undefined }
133+ { popup == 'errors' && errCount > 0 ? (
134+ < FrontEndErrorContainer
135+ clickHandler = { toggleErrors }
136+ errors = { errors }
137+ connected = { error . backEndConnected }
138+ />
139+ ) : undefined }
140+ </ div >
141+ ) ;
87142
88- this . state = {
89- opened : false ,
90- popup : 'errors'
91- } ;
92- }
143+ const menuContent = collapsed ? undefined : (
144+ < MenuContent
145+ popup = { popup }
146+ errCount = { errCount }
147+ toggleErrors = { toggleErrors }
148+ toggleCallbackGraph = { toggleCallbackGraph }
149+ config = { config }
150+ hotReload = { hotReload }
151+ connected = { connected }
152+ />
153+ ) ;
93154
94- render ( ) {
95- const { popup} = this . state ;
96- const { error, hotReload, config} = this . props ;
97- const errCount = error . frontEnd . length + error . backEnd . length ;
98- const connected = error . backEndConnected ;
99-
100- const toggleErrors = ( ) => {
101- this . setState ( { popup : popup == 'errors' ? null : 'errors' } ) ;
102- } ;
103-
104- const toggleCallbackGraph = ( ) => {
105- this . setState ( {
106- popup : popup == 'callbackGraph' ? null : 'callbackGraph'
107- } ) ;
108- } ;
109-
110- const errors = concat ( error . frontEnd , error . backEnd ) ;
111-
112- const popupContent = (
113- < div className = 'dash-debug-menu__popup' >
114- { popup == 'callbackGraph' ? (
115- < CallbackGraphContainer />
116- ) : undefined }
117- { popup == 'errors' && errCount > 0 ? (
118- < FrontEndErrorContainer
119- clickHandler = { toggleErrors }
120- errors = { errors }
121- connected = { error . backEndConnected }
122- />
123- ) : undefined }
124- </ div >
125- ) ;
126-
127- const menuContent = (
128- < MenuContent
129- popup = { popup }
130- errCount = { errCount }
131- toggleErrors = { toggleErrors }
132- toggleCallbackGraph = { toggleCallbackGraph }
133- config = { config }
134- hotReload = { hotReload }
135- connected = { connected }
136- />
137- ) ;
138-
139- return (
140- < div >
141- < div className = { classes ( 'dash-debug-menu__outer' ) } >
142- { popupContent }
143- { menuContent }
144- </ div >
145- { this . props . children }
155+ return (
156+ < div >
157+ < div
158+ className = { classes (
159+ 'dash-debug-menu__outer' ,
160+ collapsed ? 'collapsed' : 'expanded'
161+ ) }
162+ >
163+ { popupContent }
164+ { menuContent }
165+ < button
166+ onClick = { toggleCollapsed }
167+ className = { classes (
168+ 'dash-debug-menu__toggle' ,
169+ collapsed ? 'collapsed' : 'expanded'
170+ ) }
171+ >
172+ < Expand />
173+ { errCount > 0 && collapsed ? (
174+ < div className = 'dash-debug-menu__error-indicator' />
175+ ) : null }
176+ </ button >
146177 </ div >
147- ) ;
148- }
149- }
178+ { children }
179+ </ div >
180+ ) ;
181+ } ;
150182
151183DebugMenu . propTypes = {
152184 children : PropTypes . object ,
0 commit comments