rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-08-17 06:36:01 +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(
(props: IDockviewReactProps, ref: React.ForwardedRef<HTMLDivElement>) => {
const domRef = React.useRef<HTMLDivElement>(null);
const dockviewRef = React.useRef<DockviewComponent>();
const [dockview, setDockview] = React.useState<DockviewComponent>();
const [portals, addPortal] = usePortalsLifecycle();
React.useImperativeHandle(ref, () => domRef.current!, []);
React.useEffect(() => {
if (props.disableAutoResizing) {
if (props.disableAutoResizing || !dockview) {
return () => {
//
};
@ -67,13 +67,13 @@ export const DockviewReact = React.forwardRef(
const watcher = watchElementResize(domRef.current!, (entry) => {
const { width, height } = entry.contentRect;
dockviewRef.current?.layout(width, height);
dockview.layout(width, height);
});
return () => {
watcher.dispose();
};
}, [props.disableAutoResizing]);
}, [dockview, props.disableAutoResizing]);
React.useEffect(() => {
const factory: GroupPanelFrameworkComponentFactory = {
@ -122,7 +122,7 @@ export const DockviewReact = React.forwardRef(
const element = document.createElement('div');
const dockview = new DockviewComponent(element, {
const component = new DockviewComponent(element, {
frameworkComponentFactory: factory,
frameworkComponents: props.components,
frameworkTabComponents: props.tabComponents,
@ -134,75 +134,68 @@ export const DockviewReact = React.forwardRef(
: undefined,
});
const disposable = dockview.onDidDrop((event) => {
if (props.onDidDrop) {
props.onDidDrop(event);
}
});
domRef.current?.appendChild(dockview.element);
dockview.deserializer = new ReactPanelDeserialzier(dockview);
domRef.current!.appendChild(component.element);
component.deserializer = new ReactPanelDeserialzier(component);
const { clientWidth, clientHeight } = domRef.current!;
dockview.layout(clientWidth, clientHeight);
component.layout(clientWidth, clientHeight);
if (props.onReady) {
props.onReady({ api: new DockviewApi(dockview) });
props.onReady({ api: new DockviewApi(component) });
}
dockviewRef.current = dockview;
setDockview(component);
return () => {
disposable.dispose();
dockview.dispose();
component.dispose();
element.remove();
};
}, []);
React.useEffect(() => {
if (!dockviewRef.current) {
if (!dockview) {
return;
}
dockviewRef.current.updateOptions({
dockview.updateOptions({
frameworkComponents: props.components,
});
}, [props.components]);
}, [dockview, props.components]);
React.useEffect(() => {
if (!dockviewRef.current) {
if (!dockview) {
return;
}
dockviewRef.current.updateOptions({
dockview.updateOptions({
watermarkFrameworkComponent: props.watermarkComponent,
});
}, [props.watermarkComponent]);
}, [dockview, props.watermarkComponent]);
React.useEffect(() => {
if (!dockviewRef.current) {
if (!dockview) {
return;
}
dockviewRef.current.updateOptions({
dockview.updateOptions({
showDndOverlay: props.showDndOverlay,
});
}, [props.showDndOverlay]);
}, [dockview, props.showDndOverlay]);
React.useEffect(() => {
if (!dockviewRef.current) {
if (!dockview) {
return;
}
dockviewRef.current.updateOptions({
dockview.updateOptions({
frameworkTabComponents: props.tabComponents,
});
}, [props.tabComponents]);
}, [dockview, props.tabComponents]);
React.useEffect(() => {
if (!props.onTabContextMenu || !dockviewRef.current) {
if (!props.onTabContextMenu || !dockview) {
return () => {
//noop
};
}
const disposable = dockviewRef.current.onTabContextMenu((event) => {
const disposable = dockview.onTabContextMenu((event) => {
if (props.onTabContextMenu) {
props.onTabContextMenu(event);
}
@ -211,7 +204,25 @@ export const DockviewReact = React.forwardRef(
return () => {
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 (
<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 gridviewRef = React.useRef<IGridviewComponent>();
const [gridview, setGridview] = React.useState<IGridviewComponent>();
const [portals, addPortal] = usePortalsLifecycle();
React.useImperativeHandle(ref, () => domRef.current!, []);
React.useEffect(() => {
if (props.disableAutoResizing) {
if (props.disableAutoResizing || !gridview) {
return () => {
//
};
@ -48,18 +48,18 @@ export const GridviewReact = React.forwardRef(
const watcher = watchElementResize(domRef.current!, (entry) => {
const { width, height } = entry.contentRect;
gridviewRef.current?.layout(width, height);
gridview.layout(width, height);
});
return () => {
watcher.dispose();
};
}, [props.disableAutoResizing]);
}, [gridview, props.disableAutoResizing]);
React.useEffect(() => {
const element = document.createElement('div');
const gridview = new GridviewComponent(element, {
const component = new GridviewComponent(element, {
proportionalLayout:
typeof props.proportionalLayout === 'boolean'
? props.proportionalLayout
@ -83,31 +83,31 @@ export const GridviewReact = React.forwardRef(
: undefined,
});
domRef.current?.appendChild(gridview.element);
domRef.current!.appendChild(component.element);
const { clientWidth, clientHeight } = domRef.current!;
gridview.layout(clientWidth, clientHeight);
component.layout(clientWidth, clientHeight);
if (props.onReady) {
props.onReady({ api: new GridviewApi(gridview) });
props.onReady({ api: new GridviewApi(component) });
}
gridviewRef.current = gridview;
setGridview(component);
return () => {
gridview.dispose();
component.dispose();
element.remove();
};
}, []);
React.useEffect(() => {
if (!gridviewRef.current) {
if (!gridview) {
return;
}
gridviewRef.current.updateOptions({
gridview.updateOptions({
frameworkComponents: props.components,
});
}, [props.components]);
}, [gridview, 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 paneviewRef = React.useRef<IPaneviewComponent>();
const [paneview, setPaneview] = React.useState<IPaneviewComponent>();
const [portals, addPortal] = usePortalsLifecycle();
React.useImperativeHandle(ref, () => domRef.current!, []);
React.useEffect(() => {
if (props.disableAutoResizing) {
if (props.disableAutoResizing || !paneview) {
return () => {
//
};
@ -53,13 +53,13 @@ export const PaneviewReact = React.forwardRef(
const watcher = watchElementResize(domRef.current!, (entry) => {
const { width, height } = entry.contentRect;
paneviewRef.current?.layout(width, height);
paneview.layout(width, height);
});
return () => {
watcher.dispose();
};
}, [props.disableAutoResizing]);
}, [paneview, props.disableAutoResizing]);
React.useEffect(() => {
const createComponent = (
@ -71,7 +71,7 @@ export const PaneviewReact = React.forwardRef(
addPortal,
});
const paneview = new PaneviewComponent(domRef.current!, {
const component = new PaneviewComponent(domRef.current!, {
frameworkComponents: props.components,
components: {},
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!;
paneview.layout(clientWidth, clientHeight);
component.layout(clientWidth, clientHeight);
if (props.onReady) {
props.onReady({ api });
}
paneviewRef.current = paneview;
setPaneview(component);
return () => {
paneview.dispose();
component.dispose();
};
}, []);
React.useEffect(() => {
if (!paneviewRef.current) {
if (!paneview) {
return;
}
paneviewRef.current.updateOptions({
paneview.updateOptions({
frameworkComponents: props.components,
});
}, [props.components]);
}, [paneview, props.components]);
React.useEffect(() => {
if (!paneviewRef.current) {
if (!paneview) {
return;
}
paneviewRef.current.updateOptions({
paneview.updateOptions({
headerframeworkComponents: props.headerComponents,
});
}, [props.headerComponents]);
}, [paneview, props.headerComponents]);
React.useEffect(() => {
if (!paneviewRef.current) {
if (!paneview) {
return () => {
//
};
}
const paneview = paneviewRef.current;
const disposable = paneview.onDidDrop((event) => {
if (props.onDidDrop) {
props.onDidDrop({
@ -142,7 +140,7 @@ export const PaneviewReact = React.forwardRef(
return () => {
disposable.dispose();
};
}, [props.onDidDrop]);
}, [paneview, 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 splitviewRef = React.useRef<ISplitviewComponent>();
const [splitview, setSplitview] = React.useState<ISplitviewComponent>();
const [portals, addPortal] = usePortalsLifecycle();
React.useImperativeHandle(ref, () => domRef.current!, []);
React.useEffect(() => {
if (props.disableAutoResizing) {
if (props.disableAutoResizing || !splitview) {
return () => {
//
};
@ -48,16 +48,16 @@ export const SplitviewReact = React.forwardRef(
const watcher = watchElementResize(domRef.current!, (entry) => {
const { width, height } = entry.contentRect;
splitviewRef.current?.layout(width, height);
splitview.layout(width, height);
});
return () => {
watcher.dispose();
};
}, [props.disableAutoResizing]);
}, [splitview, props.disableAutoResizing]);
React.useEffect(() => {
const splitview = new SplitviewComponent(domRef.current!, {
const component = 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!;
splitview.layout(clientWidth, clientHeight);
component.layout(clientWidth, clientHeight);
if (props.onReady) {
props.onReady({ api: new SplitviewApi(splitview) });
props.onReady({ api: new SplitviewApi(component) });
}
splitviewRef.current = splitview;
setSplitview(component);
return () => {
splitview.dispose();
component.dispose();
};
}, []);
React.useEffect(() => {
if (!splitviewRef.current) {
if (!splitview) {
return;
}
splitviewRef.current.updateOptions({
splitview.updateOptions({
frameworkComponents: props.components,
});
}, [props.components]);
}, [splitview, props.components]);
return (
<div