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 #74 from mathuo/73-use-more-react-18-friendly-code

Browse Source 
feat: usestate over useref
This commit is contained in:
mathuo 2022-04-23 23:27:20 +01:00 committed by GitHub
commit 1aa215676d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 86 additions and 77 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 dockviewRef = React.useRef<DockviewComponent>(); const [dockview, setDockview] = React.useState<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) { if (props.disableAutoResizing || !dockview) {
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;
dockviewRef.current?.layout(width, height); dockview.layout(width, height);
}); });
return () => { return () => {
watcher.dispose(); watcher.dispose();
}; };
}, [props.disableAutoResizing]); }, [dockview, 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 dockview = new DockviewComponent(element, { const component = new DockviewComponent(element, {
frameworkComponentFactory: factory, frameworkComponentFactory: factory,
frameworkComponents: props.components, frameworkComponents: props.components,
frameworkTabComponents: props.tabComponents, frameworkTabComponents: props.tabComponents,
@ -134,75 +134,68 @@ export const DockviewReact = React.forwardRef(
: undefined, : undefined,
}); });
const disposable = dockview.onDidDrop((event) => { domRef.current!.appendChild(component.element);
if (props.onDidDrop) { component.deserializer = new ReactPanelDeserialzier(component);
props.onDidDrop(event);
}
});
domRef.current?.appendChild(dockview.element);
dockview.deserializer = new ReactPanelDeserialzier(dockview);
const { clientWidth, clientHeight } = domRef.current!; const { clientWidth, clientHeight } = domRef.current!;
dockview.layout(clientWidth, clientHeight); component.layout(clientWidth, clientHeight);
if (props.onReady) { if (props.onReady) {
props.onReady({ api: new DockviewApi(dockview) }); props.onReady({ api: new DockviewApi(component) });
} }
dockviewRef.current = dockview; setDockview(component);
return () => { return () => {
disposable.dispose(); component.dispose();
dockview.dispose();
element.remove(); element.remove();
}; };
}, []); }, []);
React.useEffect(() => { React.useEffect(() => {
if (!dockviewRef.current) { if (!dockview) {
return; return;
} }
dockviewRef.current.updateOptions({ dockview.updateOptions({
frameworkComponents: props.components, frameworkComponents: props.components,
}); });
}, [props.components]); }, [dockview, props.components]);
React.useEffect(() => { React.useEffect(() => {
if (!dockviewRef.current) { if (!dockview) {
return; return;
} }
dockviewRef.current.updateOptions({ dockview.updateOptions({
watermarkFrameworkComponent: props.watermarkComponent, watermarkFrameworkComponent: props.watermarkComponent,
}); });
}, [props.watermarkComponent]); }, [dockview, props.watermarkComponent]);
React.useEffect(() => { React.useEffect(() => {
if (!dockviewRef.current) { if (!dockview) {
return; return;
} }
dockviewRef.current.updateOptions({ dockview.updateOptions({
showDndOverlay: props.showDndOverlay, showDndOverlay: props.showDndOverlay,
}); });
}, [props.showDndOverlay]); }, [dockview, props.showDndOverlay]);
React.useEffect(() => { React.useEffect(() => {
if (!dockviewRef.current) { if (!dockview) {
return; return;
} }
dockviewRef.current.updateOptions({ dockview.updateOptions({
frameworkTabComponents: props.tabComponents, frameworkTabComponents: props.tabComponents,
}); });
}, [props.tabComponents]); }, [dockview, props.tabComponents]);
React.useEffect(() => { React.useEffect(() => {
if (!props.onTabContextMenu || !dockviewRef.current) { if (!props.onTabContextMenu || !dockview) {
return () => { return () => {
//noop //noop
}; };
} }
const disposable = dockviewRef.current.onTabContextMenu((event) => { const disposable = dockview.onTabContextMenu((event) => {
if (props.onTabContextMenu) { if (props.onTabContextMenu) {
props.onTabContextMenu(event); props.onTabContextMenu(event);
} }
@ -211,7 +204,25 @@ export const DockviewReact = React.forwardRef(
return () => { return () => {
disposable.dispose(); disposable.dispose();
}; };
}, [props.onTabContextMenu]); }, [dockview, 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 gridviewRef = React.useRef<IGridviewComponent>(); const [gridview, setGridview] = React.useState<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) { if (props.disableAutoResizing || !gridview) {
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;
gridviewRef.current?.layout(width, height); gridview.layout(width, height);
}); });
return () => { return () => {
watcher.dispose(); watcher.dispose();
}; };
}, [props.disableAutoResizing]); }, [gridview, props.disableAutoResizing]);
React.useEffect(() => { React.useEffect(() => {
const element = document.createElement('div'); const element = document.createElement('div');
const gridview = new GridviewComponent(element, { const component = 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(gridview.element); domRef.current!.appendChild(component.element);
const { clientWidth, clientHeight } = domRef.current!; const { clientWidth, clientHeight } = domRef.current!;
gridview.layout(clientWidth, clientHeight); component.layout(clientWidth, clientHeight);
if (props.onReady) { if (props.onReady) {
props.onReady({ api: new GridviewApi(gridview) }); props.onReady({ api: new GridviewApi(component) });
} }
gridviewRef.current = gridview; setGridview(component);
return () => { return () => {
gridview.dispose(); component.dispose();
element.remove(); element.remove();
}; };
}, []); }, []);
React.useEffect(() => { React.useEffect(() => {
if (!gridviewRef.current) { if (!gridview) {
return; return;
} }
gridviewRef.current.updateOptions({ gridview.updateOptions({
frameworkComponents: props.components, frameworkComponents: props.components,
}); });
}, [props.components]); }, [gridview, 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 paneviewRef = React.useRef<IPaneviewComponent>(); const [paneview, setPaneview] = React.useState<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) { if (props.disableAutoResizing || !paneview) {
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;
paneviewRef.current?.layout(width, height); paneview.layout(width, height);
}); });
return () => { return () => {
watcher.dispose(); watcher.dispose();
}; };
}, [props.disableAutoResizing]); }, [paneview, props.disableAutoResizing]);
React.useEffect(() => { React.useEffect(() => {
const createComponent = ( const createComponent = (
@ -71,7 +71,7 @@ export const PaneviewReact = React.forwardRef(
addPortal, addPortal,
}); });
const paneview = new PaneviewComponent(domRef.current!, { const component = new PaneviewComponent(domRef.current!, {
frameworkComponents: props.components, frameworkComponents: props.components,
components: {}, components: {},
headerComponents: {}, headerComponents: {},
@ -87,49 +87,47 @@ export const PaneviewReact = React.forwardRef(
}, },
}); });
const api = new PaneviewApi(paneview); const api = new PaneviewApi(component);
const { clientWidth, clientHeight } = domRef.current!; const { clientWidth, clientHeight } = domRef.current!;
paneview.layout(clientWidth, clientHeight); component.layout(clientWidth, clientHeight);
if (props.onReady) { if (props.onReady) {
props.onReady({ api }); props.onReady({ api });
} }
paneviewRef.current = paneview; setPaneview(component);
return () => { return () => {
paneview.dispose(); component.dispose();
}; };
}, []); }, []);
React.useEffect(() => { React.useEffect(() => {
if (!paneviewRef.current) { if (!paneview) {
return; return;
} }
paneviewRef.current.updateOptions({ paneview.updateOptions({
frameworkComponents: props.components, frameworkComponents: props.components,
}); });
}, [props.components]); }, [paneview, props.components]);
React.useEffect(() => { React.useEffect(() => {
if (!paneviewRef.current) { if (!paneview) {
return; return;
} }
paneviewRef.current.updateOptions({ paneview.updateOptions({
headerframeworkComponents: props.headerComponents, headerframeworkComponents: props.headerComponents,
}); });
}, [props.headerComponents]); }, [paneview, props.headerComponents]);
React.useEffect(() => { React.useEffect(() => {
if (!paneviewRef.current) { if (!paneview) {
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({
@ -142,7 +140,7 @@ export const PaneviewReact = React.forwardRef(
return () => { return () => {
disposable.dispose(); disposable.dispose();
}; };
}, [props.onDidDrop]); }, [paneview, 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 splitviewRef = React.useRef<ISplitviewComponent>(); const [splitview, setSplitview] = React.useState<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) { if (props.disableAutoResizing || !splitview) {
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;
splitviewRef.current?.layout(width, height); splitview.layout(width, height);
}); });
return () => { return () => {
watcher.dispose(); watcher.dispose();
}; };
}, [props.disableAutoResizing]); }, [splitview, props.disableAutoResizing]);
React.useEffect(() => { React.useEffect(() => {
const splitview = new SplitviewComponent(domRef.current!, { const component = 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!;
splitview.layout(clientWidth, clientHeight); component.layout(clientWidth, clientHeight);
if (props.onReady) { if (props.onReady) {
props.onReady({ api: new SplitviewApi(splitview) }); props.onReady({ api: new SplitviewApi(component) });
} }
splitviewRef.current = splitview; setSplitview(component);
return () => { return () => {
splitview.dispose(); component.dispose();
}; };
}, []); }, []);
React.useEffect(() => { React.useEffect(() => {
if (!splitviewRef.current) { if (!splitview) {
return; return;
} }
splitviewRef.current.updateOptions({ splitview.updateOptions({
frameworkComponents: props.components, frameworkComponents: props.components,
}); });
}, [props.components]); }, [splitview, props.components]);
return ( return (
<div <div