ByoungSooPark/modeling-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

hide closed panels via css instead of unmounting them from dome (test)

Browse Source
This commit is contained in:
Andrew Varga
2025-06-13 17:17:53 +02:00
parent af8d1330fd
commit d3d837c54d
2 changed files with 26 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/ModelingSidebar/ModelingPane.tsx
View File

@ -17,6 +17,7 @@ export interface ModelingPaneProps {
Menu?: React.ReactNode | React.FC Menu?: React.ReactNode | React.FC
detailsTestId?: string detailsTestId?: string
onClose: () => void onClose: () => void
style?: React.CSSProperties
} }
export const ModelingPaneHeader = ({ export const ModelingPaneHeader = ({
@ -64,11 +65,13 @@ export const ModelingPane = ({
detailsTestId, detailsTestId,
onClose, onClose,
title, title,
style,
...props ...props
}: ModelingPaneProps) => { }: ModelingPaneProps) => {
return ( return (
<section <section
{...props} {...props}
style={style}
aria-label={title && typeof title === 'string' ? title : ''} aria-label={title && typeof title === 'string' ? title : ''}
data-testid={detailsTestId} data-testid={detailsTestId}
id={id} id={id}

43
src/components/ModelingSidebar/ModelingSidebar.tsx
View File

@ -298,26 +298,29 @@ export function ModelingSidebar() {
(context.store?.openPanes.length >= 1 ? `w-full` : `hidden`) (context.store?.openPanes.length >= 1 ? `w-full` : `hidden`)
} }
> >
{filteredPanes {filteredPanes.map((pane) => (
.filter((pane) => context?.store.openPanes.includes(pane.id)) <ModelingPane
.map((pane) => ( key={pane.id}
<ModelingPane icon={pane.icon}
key={pane.id} title={pane.sidebarName}
icon={pane.icon} onClose={() => {}}
title={pane.sidebarName} id={`${pane.id}-pane`}
onClose={() => {}} style={
id={`${pane.id}-pane`} context?.store.openPanes.includes(pane.id)
> ? {}
{pane.Content instanceof Function ? ( : { display: 'none' }
<pane.Content }
id={pane.id} >
onClose={() => togglePane(pane.id)} {pane.Content instanceof Function ? (
/> <pane.Content
) : ( id={pane.id}
pane.Content onClose={() => togglePane(pane.id)}
)} />
</ModelingPane> ) : (
))} pane.Content
)}
</ModelingPane>
))}
</ul> </ul>
</div> </div>
</Resizable> </Resizable>