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

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

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

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

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

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

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