35 lines
1.0 KiB
TypeScript
35 lines
1.0 KiB
TypeScript
import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
|
|
import cc from 'classcat';
|
|
import type { PanelPosition } from '@xyflow/system';
|
|
|
|
import { useStore } from '../../hooks/useStore';
|
|
import type { ReactFlowState } from '../../types';
|
|
|
|
export type PanelProps = HTMLAttributes<HTMLDivElement> & {
|
|
/** Set position of the panel
|
|
* @example 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'
|
|
*/
|
|
position?: PanelPosition;
|
|
children: ReactNode;
|
|
};
|
|
|
|
const selector = (s: ReactFlowState) => (s.userSelectionActive ? 'none' : 'all');
|
|
|
|
export const Panel = forwardRef<HTMLDivElement, PanelProps>(
|
|
({ position = 'top-left', children, className, style, ...rest }, ref) => {
|
|
const pointerEvents = useStore(selector);
|
|
const positionClasses = `${position}`.split('-');
|
|
|
|
return (
|
|
<div
|
|
className={cc(['react-flow__panel', className, ...positionClasses])}
|
|
style={{ ...style, pointerEvents }}
|
|
ref={ref}
|
|
{...rest}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
);
|