rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-02-13 03:45:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

fixup demo wrt React.StrictMode

Browse Source
This commit is contained in:
mathuo 2025-01-10 22:09:24 +00:00
parent 1a3c6ea7db
commit c122bfd310
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
3 changed files with 88 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx
View File

@ -176,18 +176,21 @@ const DockviewDemo = (props: { theme?: string }) => {
setPending([]); setPending([]);
}, [pending]); }, [pending]);
const onReady = (event: DockviewReadyEvent) => { React.useEffect(() => {
setApi(event.api); if (!api) {
return;
}
event.api.onDidAddPanel((event) => { const disposables = [
api.onDidAddPanel((event) => {
setPanels((_) => [..._, event.id]); setPanels((_) => [..._, event.id]);
addLogLine(`Panel Added ${event.id}`); addLogLine(`Panel Added ${event.id}`);
}); }),
event.api.onDidActivePanelChange((event) => { api.onDidActivePanelChange((event) => {
setActivePanel(event?.id); setActivePanel(event?.id);
addLogLine(`Panel Activated ${event?.id}`); addLogLine(`Panel Activated ${event?.id}`);
}); }),
event.api.onDidRemovePanel((event) => { api.onDidRemovePanel((event) => {
setPanels((_) => { setPanels((_) => {
const next = [..._]; const next = [..._];
next.splice( next.splice(
@ -198,24 +201,24 @@ const DockviewDemo = (props: { theme?: string }) => {
return next; return next;
}); });
addLogLine(`Panel Removed ${event.id}`); addLogLine(`Panel Removed ${event.id}`);
}); }),
event.api.onDidAddGroup((event) => { api.onDidAddGroup((event) => {
setGroups((_) => [..._, event.id]); setGroups((_) => [..._, event.id]);
addLogLine(`Group Added ${event.id}`); addLogLine(`Group Added ${event.id}`);
}); }),
event.api.onDidMovePanel((event) => { api.onDidMovePanel((event) => {
addLogLine(`Panel Moved ${event.panel.id}`); addLogLine(`Panel Moved ${event.panel.id}`);
}); }),
event.api.onDidMaximizedGroupChange((event) => { api.onDidMaximizedGroupChange((event) => {
addLogLine( addLogLine(
`Group Maximized Changed ${event.group.api.id} [${event.isMaximized}]` `Group Maximized Changed ${event.group.api.id} [${event.isMaximized}]`
); );
}); }),
event.api.onDidRemoveGroup((event) => { api.onDidRemoveGroup((event) => {
setGroups((_) => { setGroups((_) => {
const next = [..._]; const next = [..._];
next.splice( next.splice(
@ -226,17 +229,20 @@ const DockviewDemo = (props: { theme?: string }) => {
return next; return next;
}); });
addLogLine(`Group Removed ${event.id}`); addLogLine(`Group Removed ${event.id}`);
}); }),
event.api.onDidActiveGroupChange((event) => { api.onDidActiveGroupChange((event) => {
setActiveGroup(event?.id); setActiveGroup(event?.id);
addLogLine(`Group Activated ${event?.id}`); addLogLine(`Group Activated ${event?.id}`);
}); }),
];
const loadLayout = () => {
const state = localStorage.getItem('dv-demo-state'); const state = localStorage.getItem('dv-demo-state');
if (state) { if (state) {
try { try {
event.api.fromJSON(JSON.parse(state)); api.fromJSON(JSON.parse(state));
return; return;
} catch { } catch {
localStorage.removeItem('dv-demo-state'); localStorage.removeItem('dv-demo-state');
@ -244,7 +250,18 @@ const DockviewDemo = (props: { theme?: string }) => {
return; return;
} }
defaultConfig(event.api); defaultConfig(api);
};
loadLayout();
return () => {
disposables.forEach((disposable) => disposable.dispose());
};
}, [api]);
const onReady = (event: DockviewReadyEvent) => {
setApi(event.api);
}; };
const [watermark, setWatermark] = React.useState<boolean>(false); const [watermark, setWatermark] = React.useState<boolean>(false);

2
packages/docs/sandboxes/react/dockview/demo-dockview/src/groupActions.tsx
View File

@ -88,7 +88,6 @@ const GroupAction = (props: {
} }
onClick={() => { onClick={() => {
if (group) { if (group) {
props.api.addFloatingGroup(group, { props.api.addFloatingGroup(group, {
width: 400, width: 400,
height: 300, height: 300,
@ -99,7 +98,6 @@ const GroupAction = (props: {
right: 50, right: 50,
}, },
}); });
} }
}} }}
> >

6
packages/docs/src/theme/Root.tsx
View File

@ -3,5 +3,9 @@ import { RecoilRoot } from 'recoil';
// Default implementation, that you can customize // Default implementation, that you can customize
export default function Root({ children }) { export default function Root({ children }) {
return <RecoilRoot>{children}</RecoilRoot>; return (
<React.StrictMode>
<RecoilRoot>{children}</RecoilRoot>
</React.StrictMode>
);
} }