rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-02-08 17:35:44 +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

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

@ -176,75 +176,92 @@ const DockviewDemo = (props: { theme?: string }) => {
setPending([]);
}, [pending]);
const onReady = (event: DockviewReadyEvent) => {
setApi(event.api);
event.api.onDidAddPanel((event) => {
setPanels((_) => [..._, event.id]);
addLogLine(`Panel Added ${event.id}`);
});
event.api.onDidActivePanelChange((event) => {
setActivePanel(event?.id);
addLogLine(`Panel Activated ${event?.id}`);
});
event.api.onDidRemovePanel((event) => {
setPanels((_) => {
const next = [..._];
next.splice(
next.findIndex((x) => x === event.id),
1
);
return next;
});
addLogLine(`Panel Removed ${event.id}`);
});
event.api.onDidAddGroup((event) => {
setGroups((_) => [..._, event.id]);
addLogLine(`Group Added ${event.id}`);
});
event.api.onDidMovePanel((event) => {
addLogLine(`Panel Moved ${event.panel.id}`);
});
event.api.onDidMaximizedGroupChange((event) => {
addLogLine(
`Group Maximized Changed ${event.group.api.id} [${event.isMaximized}]`
);
});
event.api.onDidRemoveGroup((event) => {
setGroups((_) => {
const next = [..._];
next.splice(
next.findIndex((x) => x === event.id),
1
);
return next;
});
addLogLine(`Group Removed ${event.id}`);
});
event.api.onDidActiveGroupChange((event) => {
setActiveGroup(event?.id);
addLogLine(`Group Activated ${event?.id}`);
});
const state = localStorage.getItem('dv-demo-state');
if (state) {
try {
event.api.fromJSON(JSON.parse(state));
return;
} catch {
localStorage.removeItem('dv-demo-state');
}
React.useEffect(() => {
if (!api) {
return;
}
defaultConfig(event.api);
const disposables = [
api.onDidAddPanel((event) => {
setPanels((_) => [..._, event.id]);
addLogLine(`Panel Added ${event.id}`);
}),
api.onDidActivePanelChange((event) => {
setActivePanel(event?.id);
addLogLine(`Panel Activated ${event?.id}`);
}),
api.onDidRemovePanel((event) => {
setPanels((_) => {
const next = [..._];
next.splice(
next.findIndex((x) => x === event.id),
1
);
return next;
});
addLogLine(`Panel Removed ${event.id}`);
}),
api.onDidAddGroup((event) => {
setGroups((_) => [..._, event.id]);
addLogLine(`Group Added ${event.id}`);
}),
api.onDidMovePanel((event) => {
addLogLine(`Panel Moved ${event.panel.id}`);
}),
api.onDidMaximizedGroupChange((event) => {
addLogLine(
`Group Maximized Changed ${event.group.api.id} [${event.isMaximized}]`
);
}),
api.onDidRemoveGroup((event) => {
setGroups((_) => {
const next = [..._];
next.splice(
next.findIndex((x) => x === event.id),
1
);
return next;
});
addLogLine(`Group Removed ${event.id}`);
}),
api.onDidActiveGroupChange((event) => {
setActiveGroup(event?.id);
addLogLine(`Group Activated ${event?.id}`);
}),
];
const loadLayout = () => {
const state = localStorage.getItem('dv-demo-state');
if (state) {
try {
api.fromJSON(JSON.parse(state));
return;
} catch {
localStorage.removeItem('dv-demo-state');
}
return;
}
defaultConfig(api);
};
loadLayout();
return () => {
disposables.forEach((disposable) => disposable.dispose());
};
}, [api]);
const onReady = (event: DockviewReadyEvent) => {
setApi(event.api);
};
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={() => {
if (group) {
props.api.addFloatingGroup(group, {
width: 400,
height: 300,
@ -99,7 +98,6 @@ const GroupAction = (props: {
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
export default function Root({ children }) {
return <RecoilRoot>{children}</RecoilRoot>;
return (
<React.StrictMode>
<RecoilRoot>{children}</RecoilRoot>
</React.StrictMode>
);
}