fix unmount

packages/app/src/components/PagePanels/index.jsx

@@ -10,7 +10,7 @@ import "./index.less"
 
 export class Tab extends React.Component {
 	state = {
-        error: null
+		error: null,
 	}
 
 	// handle on error
@@ -20,35 +20,36 @@ export class Tab extends React.Component {
 
 	render() {
 		if (this.state.error) {
-            return <antd.Result
+			return (
+				<antd.Result
 					status="error"
 					title="Error"
 					subTitle={this.state.error}
 				/>
+			)
 		}
 
-        return <>
+		return <>{this.props.children}</>
-            {this.props.children}
-        </>
 	}
 }
 
 export const Panel = (props) => {
-    return <div
+	return (
-        {...props.props ?? {}}
+		<div
-        className={classnames(
+			{...(props.props ?? {})}
-            "panel",
+			className={classnames("panel", props.align, props.className)}
-            props.align,
-            props.className
-        )}
 		>
 			{props.children}
 		</div>
+	)
 }
 
 export class PagePanelWithNavMenu extends React.Component {
 	state = {
-        activeTab: new URLSearchParams(window.location.search).get("type") ?? this.props.defaultTab ?? this.props.tabs[0].key,
+		activeTab:
+			new URLSearchParams(window.location.search).get("type") ??
+			this.props.defaultTab ??
+			this.props.tabs[0].key,
 		renders: [],
 	}
 
@@ -62,7 +63,7 @@ export class PagePanelWithNavMenu extends React.Component {
 				id: id,
 				component: component,
 				options: options,
-                ref: React.createRef()
+				ref: React.createRef(),
 			})
 
 			this.setState({
@@ -79,7 +80,7 @@ export class PagePanelWithNavMenu extends React.Component {
 			this.setState({
 				renders: renders,
 			})
-        }
+		},
 	}
 
 	componentDidMount() {
@@ -97,7 +98,9 @@ export class PagePanelWithNavMenu extends React.Component {
 		delete app.layout.page_panels
 
 		if (!app.isMobile) {
+			if (app.layout.header) {
 				app.layout.header.render(null)
+			}
 		} else {
 			app.layout.top_bar.renderDefault()
 		}
@@ -128,12 +131,18 @@ export class PagePanelWithNavMenu extends React.Component {
 				tab = this.props.tabs.find((children) => children.key === key)
 			} else {
 				if (!tab.children) {
-                    console.error("PagePanelWithNavMenu: tab.children is not defined")
+					console.error(
+						"PagePanelWithNavMenu: tab.children is not defined",
+					)
 
-                    return tab = null
+					return (tab = null)
 				}
 
-                tab = tab.children.find((children) => children.key === `${activeTabDirectory[index - 1]}.${key}`)
+				tab = tab.children.find(
+					(children) =>
+						children.key ===
+						`${activeTabDirectory[index - 1]}.${key}`,
+				)
 			}
 		})
 
@@ -142,11 +151,13 @@ export class PagePanelWithNavMenu extends React.Component {
 				return this.props.onNotFound()
 			}
 
-            return <antd.Result
+			return (
+				<antd.Result
 					status="404"
 					title="404"
 					subTitle="Sorry, the tab you visited does not exist."
 				/>
+			)
 		}
 
 		const componentProps = tab.props ?? this.props.tabProps
@@ -186,19 +197,26 @@ export class PagePanelWithNavMenu extends React.Component {
 				})
 			}
 
-            console.warn("PagePanelWithNavMenu: transition is enabled but document.startViewTransition is not compatible with your browser")
+			console.warn(
+				"PagePanelWithNavMenu: transition is enabled but document.startViewTransition is not compatible with your browser",
+			)
 
-            if (this.primaryPanelRef.current && this.primaryPanelRef.current?.classList) {
+			if (
+				this.primaryPanelRef.current &&
+				this.primaryPanelRef.current?.classList
+			) {
 				// set to primary panel fade-opacity-leave class
 				this.primaryPanelRef.current.classList.add("fade-opacity-leave")
 
 				// remove fade-opacity-leave class after animation
 				setTimeout(() => {
-                    this.primaryPanelRef.current.classList.remove("fade-opacity-leave")
+					this.primaryPanelRef.current.classList.remove(
+						"fade-opacity-leave",
+					)
 				}, 300)
 			}
 
-            await new Promise(resolve => setTimeout(resolve, 200))
+			await new Promise((resolve) => setTimeout(resolve, 200))
 		}
 
 		return this.tabChange(key)
@@ -206,7 +224,9 @@ export class PagePanelWithNavMenu extends React.Component {
 
 	getItems = (items) => {
 		if (!Array.isArray(items)) {
-            console.error(`[items] is not an (array), received (${typeof items})`)
+			console.error(
+				`[items] is not an (array), received (${typeof items})`,
+			)
 			return []
 		}
 
@@ -225,44 +245,50 @@ export class PagePanelWithNavMenu extends React.Component {
 	}
 
 	render() {
-        return <>
+		return (
-            {
+			<>
-                app.isMobile && app.layout.top_bar.render(<NavMenu
+				{app.isMobile &&
+					app.layout.top_bar.render(
+						<NavMenu
 							activeKey={this.state.activeTab}
 							items={this.getItems(this.props.tabs)}
 							onClickItem={(key) => this.handleTabChange(key)}
-                />)
+						/>,
-            }
+					)}
 
-            {
+				{!app.isMobile &&
-                !app.isMobile && app.layout.header.render(<NavMenu
+					app.layout.header.render(
+						<NavMenu
 							header={this.props.navMenuHeader}
 							activeKey={this.state.activeTab}
-                    items={this.getItems([...this.props.tabs ?? [], ...this.props.extraItems ?? []])}
+							items={this.getItems([
+								...(this.props.tabs ?? []),
+								...(this.props.extraItems ?? []),
+							])}
 							onClickItem={(key) => this.handleTabChange(key)}
 							renderNames
 						>
-                    {
+							{Array.isArray(this.state.renders) && [
-                        Array.isArray(this.state.renders) && [
 								this.state.renders.map((render, index) => {
-                                return React.createElement(render.component, {
+									return React.createElement(
+										render.component,
+										{
 											...render.options.props,
-                                    ref: render.ref
+											ref: render.ref,
-                                })
+										},
-                            })
+									)
-                        ]
+								}),
-                    }
+							]}
-                </NavMenu>)
+						</NavMenu>,
-            }
+					)}
 
 				<div className="pagePanels">
 					<div className="panel" ref={this.primaryPanelRef}>
-                    {
+						{this.renderActiveTab()}
-                        this.renderActiveTab()
-                    }
 					</div>
 				</div>
 			</>
+		)
 	}
 }