rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-02-19 14:45:44 +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; disableAutoResizing?: boolean;
} }
export const DockviewReact: React.FunctionComponent<IDockviewReactProps> = ( export const DockviewReact = React.forwardRef(
props: IDockviewReactProps (props: IDockviewReactProps, ref: React.ForwardedRef<HTMLDivElement>) => {
) => {
const domRef = React.useRef<HTMLDivElement>(null); const domRef = React.useRef<HTMLDivElement>(null);
const dockviewRef = React.useRef<DockviewComponent>(); const dockviewRef = React.useRef<DockviewComponent>();
const [portals, addPortal] = usePortalsLifecycle(); const [portals, addPortal] = usePortalsLifecycle();
React.useImperativeHandle(ref, () => domRef.current!, []);
React.useEffect(() => { React.useEffect(() => {
if (props.disableAutoResizing) { if (props.disableAutoResizing) {
return () => { return () => {
@ -81,9 +82,13 @@ export const DockviewReact: React.FunctionComponent<IDockviewReactProps> = (
componentId: string, componentId: string,
component: React.FunctionComponent<IGroupPanelBaseProps> component: React.FunctionComponent<IGroupPanelBaseProps>
): IContentRenderer => { ): IContentRenderer => {
return new ReactPanelContentPart(componentId, component, { return new ReactPanelContentPart(
componentId,
component,
{
addPortal, addPortal,
}); }
);
}, },
}, },
tab: { tab: {
@ -92,9 +97,13 @@ export const DockviewReact: React.FunctionComponent<IDockviewReactProps> = (
componentId: string, componentId: string,
component: React.FunctionComponent<IGroupPanelBaseProps> component: React.FunctionComponent<IGroupPanelBaseProps>
): ITabRenderer => { ): ITabRenderer => {
return new ReactPanelHeaderPart(componentId, component, { return new ReactPanelHeaderPart(
componentId,
component,
{
addPortal, addPortal,
}); }
);
}, },
}, },
watermark: { watermark: {
@ -166,5 +175,6 @@ export const DockviewReact: React.FunctionComponent<IDockviewReactProps> = (
{portals} {portals}
</div> </div>
); );
}; }
);
DockviewReact.displayName = 'DockviewComponent'; DockviewReact.displayName = 'DockviewComponent';

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

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

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

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

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

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