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

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

Browse Source 
Revert "feat: usestate over useref"
This commit is contained in:
mathuo 2022-04-23 23:42:14 +01:00 committed by GitHub
commit 8cec47ef81
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 77 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -53,13 +53,13 @@ export interface IDockviewReactProps {
export const DockviewReact = React.forwardRef( export const DockviewReact = React.forwardRef(
(props: IDockviewReactProps, ref: React.ForwardedRef<HTMLDivElement>) => { (props: IDockviewReactProps, ref: React.ForwardedRef<HTMLDivElement>) => {
const domRef = React.useRef<HTMLDivElement>(null); const domRef = React.useRef<HTMLDivElement>(null);
const [dockview, setDockview] = React.useState<DockviewComponent>(); const dockviewRef = React.useRef<DockviewComponent>();
const [portals, addPortal] = usePortalsLifecycle(); const [portals, addPortal] = usePortalsLifecycle();
React.useImperativeHandle(ref, () => domRef.current!, []); React.useImperativeHandle(ref, () => domRef.current!, []);
React.useEffect(() => { React.useEffect(() => {
if (props.disableAutoResizing || !dockview) { if (props.disableAutoResizing) {
return () => { return () => {
// //
}; };
@ -67,13 +67,13 @@ export const DockviewReact = React.forwardRef(
const watcher = watchElementResize(domRef.current!, (entry) => { const watcher = watchElementResize(domRef.current!, (entry) => {
const { width, height } = entry.contentRect; const { width, height } = entry.contentRect;
dockview.layout(width, height); dockviewRef.current?.layout(width, height);
}); });
return () => { return () => {
watcher.dispose(); watcher.dispose();
}; };
}, [dockview, props.disableAutoResizing]); }, [props.disableAutoResizing]);
React.useEffect(() => { React.useEffect(() => {
const factory: GroupPanelFrameworkComponentFactory = { const factory: GroupPanelFrameworkComponentFactory = {
@ -122,7 +122,7 @@ export const DockviewReact = React.forwardRef(
const element = document.createElement('div'); const element = document.createElement('div');
const component = new DockviewComponent(element, { const dockview = new DockviewComponent(element, {
frameworkComponentFactory: factory, frameworkComponentFactory: factory,
frameworkComponents: props.components, frameworkComponents: props.components,
frameworkTabComponents: props.tabComponents, frameworkTabComponents: props.tabComponents,
@ -134,68 +134,75 @@ export const DockviewReact = React.forwardRef(
: undefined, : undefined,
}); });
domRef.current!.appendChild(component.element); const disposable = dockview.onDidDrop((event) => {
component.deserializer = new ReactPanelDeserialzier(component); if (props.onDidDrop) {
props.onDidDrop(event);
}
});
domRef.current?.appendChild(dockview.element);
dockview.deserializer = new ReactPanelDeserialzier(dockview);
const { clientWidth, clientHeight } = domRef.current!; const { clientWidth, clientHeight } = domRef.current!;
component.layout(clientWidth, clientHeight); dockview.layout(clientWidth, clientHeight);
if (props.onReady) { if (props.onReady) {
props.onReady({ api: new DockviewApi(component) }); props.onReady({ api: new DockviewApi(dockview) });
} }
setDockview(component); dockviewRef.current = dockview;
return () => { return () => {
component.dispose(); disposable.dispose();
dockview.dispose();
element.remove(); element.remove();
}; };
}, []); }, []);
React.useEffect(() => { React.useEffect(() => {
if (!dockview) { if (!dockviewRef.current) {
return; return;
} }
dockview.updateOptions({ dockviewRef.current.updateOptions({
frameworkComponents: props.components, frameworkComponents: props.components,
}); });
}, [dockview, props.components]); }, [props.components]);
React.useEffect(() => { React.useEffect(() => {
if (!dockview) { if (!dockviewRef.current) {
return; return;
} }
dockview.updateOptions({ dockviewRef.current.updateOptions({
watermarkFrameworkComponent: props.watermarkComponent, watermarkFrameworkComponent: props.watermarkComponent,
}); });
}, [dockview, props.watermarkComponent]); }, [props.watermarkComponent]);
React.useEffect(() => { React.useEffect(() => {
if (!dockview) { if (!dockviewRef.current) {
return; return;
} }
dockview.updateOptions({ dockviewRef.current.updateOptions({
showDndOverlay: props.showDndOverlay, showDndOverlay: props.showDndOverlay,
}); });
}, [dockview, props.showDndOverlay]); }, [props.showDndOverlay]);
React.useEffect(() => { React.useEffect(() => {
if (!dockview) { if (!dockviewRef.current) {
return; return;
} }
dockview.updateOptions({ dockviewRef.current.updateOptions({
frameworkTabComponents: props.tabComponents, frameworkTabComponents: props.tabComponents,
}); });
}, [dockview, props.tabComponents]); }, [props.tabComponents]);
React.useEffect(() => { React.useEffect(() => {
if (!props.onTabContextMenu || !dockview) { if (!props.onTabContextMenu || !dockviewRef.current) {
return () => { return () => {
//noop //noop
}; };
} }
const disposable = dockview.onTabContextMenu((event) => { const disposable = dockviewRef.current.onTabContextMenu((event) => {
if (props.onTabContextMenu) { if (props.onTabContextMenu) {
props.onTabContextMenu(event); props.onTabContextMenu(event);
} }
@ -204,25 +211,7 @@ export const DockviewReact = React.forwardRef(
return () => { return () => {
disposable.dispose(); disposable.dispose();
}; };
}, [dockview, props.onTabContextMenu]); }, [props.onTabContextMenu]);
React.useEffect(() => {
if (!dockview) {
return () => {
//
};
}
const disposable = dockview.onDidDrop((event) => {
if (props.onDidDrop) {
props.onDidDrop(event);
}
});
return () => {
disposable.dispose();
};
}, [dockview, props.onDidDrop]);
return ( return (
<div <div

26
packages/dockview/src/react/gridview/gridview.tsx
View File

@ -34,13 +34,13 @@ export interface IGridviewReactProps {
export const GridviewReact = React.forwardRef( export const GridviewReact = React.forwardRef(
(props: IGridviewReactProps, ref: React.ForwardedRef<HTMLDivElement>) => { (props: IGridviewReactProps, ref: React.ForwardedRef<HTMLDivElement>) => {
const domRef = React.useRef<HTMLDivElement>(null); const domRef = React.useRef<HTMLDivElement>(null);
const [gridview, setGridview] = React.useState<IGridviewComponent>(); const gridviewRef = React.useRef<IGridviewComponent>();
const [portals, addPortal] = usePortalsLifecycle(); const [portals, addPortal] = usePortalsLifecycle();
React.useImperativeHandle(ref, () => domRef.current!, []); React.useImperativeHandle(ref, () => domRef.current!, []);
React.useEffect(() => { React.useEffect(() => {
if (props.disableAutoResizing || !gridview) { if (props.disableAutoResizing) {
return () => { return () => {
// //
}; };
@ -48,18 +48,18 @@ export const GridviewReact = React.forwardRef(
const watcher = watchElementResize(domRef.current!, (entry) => { const watcher = watchElementResize(domRef.current!, (entry) => {
const { width, height } = entry.contentRect; const { width, height } = entry.contentRect;
gridview.layout(width, height); gridviewRef.current?.layout(width, height);
}); });
return () => { return () => {
watcher.dispose(); watcher.dispose();
}; };
}, [gridview, props.disableAutoResizing]); }, [props.disableAutoResizing]);
React.useEffect(() => { React.useEffect(() => {
const element = document.createElement('div'); const element = document.createElement('div');
const component = new GridviewComponent(element, { const gridview = new GridviewComponent(element, {
proportionalLayout: proportionalLayout:
typeof props.proportionalLayout === 'boolean' typeof props.proportionalLayout === 'boolean'
? props.proportionalLayout ? props.proportionalLayout
@ -83,31 +83,31 @@ export const GridviewReact = React.forwardRef(
: undefined, : undefined,
}); });
domRef.current!.appendChild(component.element); domRef.current?.appendChild(gridview.element);
const { clientWidth, clientHeight } = domRef.current!; const { clientWidth, clientHeight } = domRef.current!;
component.layout(clientWidth, clientHeight); gridview.layout(clientWidth, clientHeight);
if (props.onReady) { if (props.onReady) {
props.onReady({ api: new GridviewApi(component) }); props.onReady({ api: new GridviewApi(gridview) });
} }
setGridview(component); gridviewRef.current = gridview;
return () => { return () => {
component.dispose(); gridview.dispose();
element.remove(); element.remove();
}; };
}, []); }, []);
React.useEffect(() => { React.useEffect(() => {
if (!gridview) { if (!gridviewRef.current) {
return; return;
} }
gridview.updateOptions({ gridviewRef.current.updateOptions({
frameworkComponents: props.components, frameworkComponents: props.components,
}); });
}, [gridview, props.components]); }, [props.components]);
return ( return (
<div <div

36
packages/dockview/src/react/paneview/paneview.tsx
View File

@ -39,13 +39,13 @@ export interface IPaneviewReactProps {
export const PaneviewReact = React.forwardRef( export const PaneviewReact = React.forwardRef(
(props: IPaneviewReactProps, ref: React.ForwardedRef<HTMLDivElement>) => { (props: IPaneviewReactProps, ref: React.ForwardedRef<HTMLDivElement>) => {
const domRef = React.useRef<HTMLDivElement>(null); const domRef = React.useRef<HTMLDivElement>(null);
const [paneview, setPaneview] = React.useState<IPaneviewComponent>(); const paneviewRef = React.useRef<IPaneviewComponent>();
const [portals, addPortal] = usePortalsLifecycle(); const [portals, addPortal] = usePortalsLifecycle();
React.useImperativeHandle(ref, () => domRef.current!, []); React.useImperativeHandle(ref, () => domRef.current!, []);
React.useEffect(() => { React.useEffect(() => {
if (props.disableAutoResizing || !paneview) { if (props.disableAutoResizing) {
return () => { return () => {
// //
}; };
@ -53,13 +53,13 @@ export const PaneviewReact = React.forwardRef(
const watcher = watchElementResize(domRef.current!, (entry) => { const watcher = watchElementResize(domRef.current!, (entry) => {
const { width, height } = entry.contentRect; const { width, height } = entry.contentRect;
paneview.layout(width, height); paneviewRef.current?.layout(width, height);
}); });
return () => { return () => {
watcher.dispose(); watcher.dispose();
}; };
}, [paneview, props.disableAutoResizing]); }, [props.disableAutoResizing]);
React.useEffect(() => { React.useEffect(() => {
const createComponent = ( const createComponent = (
@ -71,7 +71,7 @@ export const PaneviewReact = React.forwardRef(
addPortal, addPortal,
}); });
const component = new PaneviewComponent(domRef.current!, { const paneview = new PaneviewComponent(domRef.current!, {
frameworkComponents: props.components, frameworkComponents: props.components,
components: {}, components: {},
headerComponents: {}, headerComponents: {},
@ -87,47 +87,49 @@ export const PaneviewReact = React.forwardRef(
}, },
}); });
const api = new PaneviewApi(component); const api = new PaneviewApi(paneview);
const { clientWidth, clientHeight } = domRef.current!; const { clientWidth, clientHeight } = domRef.current!;
component.layout(clientWidth, clientHeight); paneview.layout(clientWidth, clientHeight);
if (props.onReady) { if (props.onReady) {
props.onReady({ api }); props.onReady({ api });
} }
setPaneview(component); paneviewRef.current = paneview;
return () => { return () => {
component.dispose(); paneview.dispose();
}; };
}, []); }, []);
React.useEffect(() => { React.useEffect(() => {
if (!paneview) { if (!paneviewRef.current) {
return; return;
} }
paneview.updateOptions({ paneviewRef.current.updateOptions({
frameworkComponents: props.components, frameworkComponents: props.components,
}); });
}, [paneview, props.components]); }, [props.components]);
React.useEffect(() => { React.useEffect(() => {
if (!paneview) { if (!paneviewRef.current) {
return; return;
} }
paneview.updateOptions({ paneviewRef.current.updateOptions({
headerframeworkComponents: props.headerComponents, headerframeworkComponents: props.headerComponents,
}); });
}, [paneview, props.headerComponents]); }, [props.headerComponents]);
React.useEffect(() => { React.useEffect(() => {
if (!paneview) { if (!paneviewRef.current) {
return () => { return () => {
// //
}; };
} }
const paneview = paneviewRef.current;
const disposable = paneview.onDidDrop((event) => { const disposable = paneview.onDidDrop((event) => {
if (props.onDidDrop) { if (props.onDidDrop) {
props.onDidDrop({ props.onDidDrop({
@ -140,7 +142,7 @@ export const PaneviewReact = React.forwardRef(
return () => { return () => {
disposable.dispose(); disposable.dispose();
}; };
}, [paneview, props.onDidDrop]); }, [props.onDidDrop]);
return ( return (
<div <div

24
packages/dockview/src/react/splitview/splitview.tsx
View File

@ -34,13 +34,13 @@ export interface ISplitviewReactProps {
export const SplitviewReact = React.forwardRef( export const SplitviewReact = React.forwardRef(
(props: ISplitviewReactProps, ref: React.ForwardedRef<HTMLDivElement>) => { (props: ISplitviewReactProps, ref: React.ForwardedRef<HTMLDivElement>) => {
const domRef = React.useRef<HTMLDivElement>(null); const domRef = React.useRef<HTMLDivElement>(null);
const [splitview, setSplitview] = React.useState<ISplitviewComponent>(); const splitviewRef = React.useRef<ISplitviewComponent>();
const [portals, addPortal] = usePortalsLifecycle(); const [portals, addPortal] = usePortalsLifecycle();
React.useImperativeHandle(ref, () => domRef.current!, []); React.useImperativeHandle(ref, () => domRef.current!, []);
React.useEffect(() => { React.useEffect(() => {
if (props.disableAutoResizing || !splitview) { if (props.disableAutoResizing) {
return () => { return () => {
// //
}; };
@ -48,16 +48,16 @@ export const SplitviewReact = React.forwardRef(
const watcher = watchElementResize(domRef.current!, (entry) => { const watcher = watchElementResize(domRef.current!, (entry) => {
const { width, height } = entry.contentRect; const { width, height } = entry.contentRect;
splitview.layout(width, height); splitviewRef.current?.layout(width, height);
}); });
return () => { return () => {
watcher.dispose(); watcher.dispose();
}; };
}, [splitview, props.disableAutoResizing]); }, [props.disableAutoResizing]);
React.useEffect(() => { React.useEffect(() => {
const component = new SplitviewComponent(domRef.current!, { const splitview = new SplitviewComponent(domRef.current!, {
orientation: props.orientation, orientation: props.orientation,
frameworkComponents: props.components, frameworkComponents: props.components,
frameworkWrapper: { frameworkWrapper: {
@ -81,27 +81,27 @@ export const SplitviewReact = React.forwardRef(
}); });
const { clientWidth, clientHeight } = domRef.current!; const { clientWidth, clientHeight } = domRef.current!;
component.layout(clientWidth, clientHeight); splitview.layout(clientWidth, clientHeight);
if (props.onReady) { if (props.onReady) {
props.onReady({ api: new SplitviewApi(component) }); props.onReady({ api: new SplitviewApi(splitview) });
} }
setSplitview(component); splitviewRef.current = splitview;
return () => { return () => {
component.dispose(); splitview.dispose();
}; };
}, []); }, []);
React.useEffect(() => { React.useEffect(() => {
if (!splitview) { if (!splitviewRef.current) {
return; return;
} }
splitview.updateOptions({ splitviewRef.current.updateOptions({
frameworkComponents: props.components, frameworkComponents: props.components,
}); });
}, [splitview, props.components]); }, [props.components]);
return ( return (
<div <div