rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-02-15 21:05:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: forwardRef the React views

Browse Source
This commit is contained in:
mathuo 2021-03-25 21:42:54 +00:00
parent 9c547f90b6
commit 62e568265e
4 changed files with 313 additions and 288 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -49,13 +49,14 @@ export interface IDockviewReactProps {
disableAutoResizing?: boolean;
}
export const DockviewReact: React.FunctionComponent<IDockviewReactProps> = (
props: IDockviewReactProps
) => {
export const DockviewReact = React.forwardRef(
(props: IDockviewReactProps, ref: React.ForwardedRef<HTMLDivElement>) => {
const domRef = React.useRef<HTMLDivElement>(null);
const dockviewRef = React.useRef<DockviewComponent>();
const [portals, addPortal] = usePortalsLifecycle();
React.useImperativeHandle(ref, () => domRef.current!, []);
React.useEffect(() => {
if (props.disableAutoResizing) {
return () => {
@ -81,9 +82,13 @@ export const DockviewReact: React.FunctionComponent<IDockviewReactProps> = (
componentId: string,
component: React.FunctionComponent<IGroupPanelBaseProps>
): IContentRenderer => {
return new ReactPanelContentPart(componentId, component, {
return new ReactPanelContentPart(
componentId,
component,
{
addPortal,
});
}
);
},
},
tab: {
@ -92,9 +97,13 @@ export const DockviewReact: React.FunctionComponent<IDockviewReactProps> = (
componentId: string,
component: React.FunctionComponent<IGroupPanelBaseProps>
): ITabRenderer => {
return new ReactPanelHeaderPart(componentId, component, {
return new ReactPanelHeaderPart(
componentId,
component,
{
addPortal,
});
}
);
},
},
watermark: {
@ -166,5 +175,6 @@ export const DockviewReact: React.FunctionComponent<IDockviewReactProps> = (
{portals}
</div>
);
};
}
);
DockviewReact.displayName = 'DockviewComponent';

19
packages/splitview/src/react/gridview/gridview.tsx
View File

@ -31,13 +31,14 @@ export interface IGridviewReactProps {
disableAutoResizing?: boolean;
}
export const GridviewReact: React.FunctionComponent<IGridviewReactProps> = (
props: IGridviewReactProps
) => {
export const GridviewReact = React.forwardRef(
(props: IGridviewReactProps, ref: React.ForwardedRef<HTMLDivElement>) => {
const domRef = React.useRef<HTMLDivElement>(null);
const gridviewRef = React.useRef<IGridviewComponent>();
const [portals, addPortal] = usePortalsLifecycle();
React.useImperativeHandle(ref, () => domRef.current!, []);
React.useEffect(() => {
if (props.disableAutoResizing) {
return () => {
@ -64,9 +65,14 @@ export const GridviewReact: React.FunctionComponent<IGridviewReactProps> = (
frameworkComponents: props.components,
frameworkComponentFactory: {
createComponent: (id: string, componentId, component) => {
return new ReactGridPanelView(id, componentId, component, {
return new ReactGridPanelView(
id,
componentId,
component,
{
addPortal,
});
}
);
},
},
styles: props.hideBorders
@ -96,5 +102,6 @@ export const GridviewReact: React.FunctionComponent<IGridviewReactProps> = (
{portals}
</div>
);
};
}
);
GridviewReact.displayName = 'GridviewComponent';

10
packages/splitview/src/react/paneview/paneview.tsx
View File

@ -29,13 +29,14 @@ export interface IPaneviewReactProps {
disableAutoResizing?: boolean;
}
export const PaneviewReact: React.FunctionComponent<IPaneviewReactProps> = (
props: IPaneviewReactProps
) => {
export const PaneviewReact = React.forwardRef(
(props: IPaneviewReactProps, ref: React.ForwardedRef<HTMLDivElement>) => {
const domRef = React.useRef<HTMLDivElement>(null);
const paneviewRef = React.useRef<IPaneviewComponent>();
const [portals, addPortal] = usePortalsLifecycle();
React.useImperativeHandle(ref, () => domRef.current!, []);
React.useEffect(() => {
if (props.disableAutoResizing) {
return () => {
@ -105,5 +106,6 @@ export const PaneviewReact: React.FunctionComponent<IPaneviewReactProps> = (
{portals}
</div>
);
};
}
);
PaneviewReact.displayName = 'PaneviewComponent';

16
packages/splitview/src/react/splitview/splitview.tsx
View File

@ -31,13 +31,14 @@ export interface ISplitviewReactProps {
disableAutoResizing?: boolean;
}
export const SplitviewReact: React.FunctionComponent<ISplitviewReactProps> = (
props: ISplitviewReactProps
) => {
export const SplitviewReact = React.forwardRef(
(props: ISplitviewReactProps, ref: React.ForwardedRef<HTMLDivElement>) => {
const domRef = React.useRef<HTMLDivElement>(null);
const splitviewRef = React.useRef<ISplitviewComponent>();
const [portals, addPortal] = usePortalsLifecycle();
React.useImperativeHandle(ref, () => domRef.current!, []);
React.useEffect(() => {
if (props.disableAutoResizing) {
return () => {
@ -60,7 +61,11 @@ export const SplitviewReact: React.FunctionComponent<ISplitviewReactProps> = (
orientation: props.orientation,
frameworkComponents: props.components,
frameworkWrapper: {
createComponent: (id: string, componentId, component: any) => {
createComponent: (
id: string,
componentId,
component: any
) => {
return new ReactPanelView(id, componentId, component, {
addPortal,
});
@ -92,5 +97,6 @@ export const SplitviewReact: React.FunctionComponent<ISplitviewReactProps> = (
{portals}
</div>
);
};
}
);
SplitviewReact.displayName = 'SplitviewComponent';