rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-08-16 22:26:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #76 from mathuo/73-use-more-react-18-friendly-code

Browse Source 
feat: react 18
This commit is contained in:
mathuo 2022-04-24 11:22:19 +01:00 committed by GitHub
commit 979cb9aa5c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 34676 additions and 21010 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14910
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

32510
packages/dockview-demo/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

27
packages/dockview-demo/package.json
View File

@ -14,24 +14,25 @@
"author": "https://github.com/mathuo", "author": "https://github.com/mathuo",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@mdx-js/react": "^2.1.1",
"dockview": "^1.2.0", "dockview": "^1.2.0",
"react": "^17.0.2", "react": "^18.0.0",
"react-dom": "^17.0.2", "react-dom": "^18.0.0",
"recoil": "^0.7.2" "recoil": "^0.7.2"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.17.9", "@babel/core": "^7.17.9",
"@storybook/addon-actions": "^6.4.22", "@storybook/addon-actions": "^6.5.0-beta.0",
"@storybook/addon-controls": "^6.4.22", "@storybook/addon-controls": "^6.5.0-beta.0",
"@storybook/addon-docs": "^6.4.22", "@storybook/addon-docs": "^6.5.0-beta.0",
"@storybook/addon-essentials": "^6.4.22", "@storybook/addon-essentials": "^6.5.0-beta.0",
"@storybook/addon-links": "^6.4.22", "@storybook/addon-links": "^6.5.0-beta.0",
"@storybook/addon-storysource": "^6.4.22", "@storybook/addon-storysource": "^6.5.0-beta.0",
"@storybook/builder-webpack5": "^6.4.22", "@storybook/builder-webpack5": "^6.5.0-beta.0",
"@storybook/manager-webpack5": "^6.4.22", "@storybook/manager-webpack5": "^6.5.0-beta.0",
"@storybook/react": "^6.4.22", "@storybook/react": "^6.5.0-beta.0",
"@types/react": "^17.0.40", "@types/react": "^18.0.5",
"@types/react-dom": "^17.0.13", "@types/react-dom": "^18.0.1",
"babel-loader": "^8.2.4", "babel-loader": "^8.2.4",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",

9
packages/dockview-demo/src/index.tsx
View File

@ -1,14 +1,15 @@
import * as React from 'react'; import * as React from 'react';
import * as ReactDOM from 'react-dom'; import * as ReactDOM from 'react-dom/client';
import { Application } from './layout-grid/application'; import { Application } from './layout-grid/application';
import { RecoilRoot } from 'recoil'; import { RecoilRoot } from 'recoil';
import './index.scss'; import './index.scss';
document.getElementById('app').classList.add('dockview-theme-dark'); document.getElementById('app').classList.add('dockview-theme-dark');
ReactDOM.render( const root = ReactDOM.createRoot(document.getElementById('app'));
root.render(
<RecoilRoot> <RecoilRoot>
<Application /> <Application />
</RecoilRoot>, </RecoilRoot>
document.getElementById('app')
); );

8201
packages/dockview/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
packages/dockview/package.json
View File

@ -70,7 +70,7 @@
"typedoc": "^0.22.15" "typedoc": "^0.22.15"
}, },
"peerDependencies": { "peerDependencies": {
"react": ">=16.8.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
"react-dom": ">=16.8.0" "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
} }
} }

25
packages/dockview/src/react/dockview/dockview.tsx
View File

@ -134,12 +134,6 @@ export const DockviewReact = React.forwardRef(
: undefined, : undefined,
}); });
const disposable = dockview.onDidDrop((event) => {
if (props.onDidDrop) {
props.onDidDrop(event);
}
});
domRef.current?.appendChild(dockview.element); domRef.current?.appendChild(dockview.element);
dockview.deserializer = new ReactPanelDeserialzier(dockview); dockview.deserializer = new ReactPanelDeserialzier(dockview);
@ -153,12 +147,29 @@ export const DockviewReact = React.forwardRef(
dockviewRef.current = dockview; dockviewRef.current = dockview;
return () => { return () => {
disposable.dispose();
dockview.dispose(); dockview.dispose();
element.remove(); element.remove();
}; };
}, []); }, []);
React.useEffect(() => {
if (!dockviewRef.current) {
return () => {
// noop
};
}
const disposable = dockviewRef.current.onDidDrop((event) => {
if (props.onDidDrop) {
props.onDidDrop(event);
}
});
return () => {
disposable.dispose();
};
}, [props.onDidDrop]);
React.useEffect(() => { React.useEffect(() => {
if (!dockviewRef.current) { if (!dockviewRef.current) {
return; return;