alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(panel): forward ref to inner panel div

Browse Source
This commit is contained in:
Christopher Möller
2024-11-18 14:59:11 +01:00
parent 1e38733da5
commit 02532fcdc5
1 changed files with 17 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react/src/components/Panel/index.tsx
+17 -14
View File
@@ -1,4 +1,4 @@
import type { HTMLAttributes, ReactNode } from 'react'; import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
import cc from 'classcat'; import cc from 'classcat';
import type { PanelPosition } from '@xyflow/system'; import type { PanelPosition } from '@xyflow/system';
@@ -15,17 +15,20 @@ export type PanelProps = HTMLAttributes<HTMLDivElement> & {
const selector = (s: ReactFlowState) => (s.userSelectionActive ? 'none' : 'all'); const selector = (s: ReactFlowState) => (s.userSelectionActive ? 'none' : 'all');
export function Panel({ position = 'top-left', children, className, style, ...rest }: PanelProps) { export const Panel = forwardRef<HTMLDivElement, PanelProps>(
const pointerEvents = useStore(selector); ({ position = 'top-left', children, className, style, ...rest }, ref) => {
const positionClasses = `${position}`.split('-'); const pointerEvents = useStore(selector);
const positionClasses = `${position}`.split('-');
return ( return (
<div <div
className={cc(['react-flow__panel', className, ...positionClasses])} className={cc(['react-flow__panel', className, ...positionClasses])}
style={{ ...style, pointerEvents }} style={{ ...style, pointerEvents }}
{...rest} ref={ref}
> {...rest}
{children} >
</div> {children}
); </div>
} );
}
);