fixed iframe issues

src/components/SplitPane/hooks/useSplitPaneResize.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { SplitPaneProps, CollapseOptions } from '..';
-import { useDragState, BeginDragCallback } from './effects/useDragState';
+import { useDragState, BeginDragCallback, DragState } from './effects/useDragState';
 import { useMinSizes } from './memos/useMinSizes';
 import { useGetMovedSizes } from './callbacks/useGetMovedSizes';
 import { useIsCollapseReversed } from './memos/useIsCollapseReversed';
@@ -29,6 +29,7 @@ interface SplitPaneResizeReturns {
   childPanes: ChildPane[];
   resizingIndex: Nullable<number>;
   handleDragStart: BeginDragCallback;
+  dragState: DragState | null;
 }
 
 interface SplitPaneResizeOptions
@@ -178,5 +179,6 @@ export const useSplitPaneResize = (options: SplitPaneResizeOptions): SplitPaneRe
     childPanes: childPanesWithSizes,
     resizingIndex: dragState?.index ?? null,
     handleDragStart,
+    dragState,
   };
 };

src/components/SplitPane/index.tsx

@@ -58,7 +58,7 @@ export interface SplitPaneProps {
   children: React.ReactChild[];
 }
 
-export const SplitPane: React.FC<SplitPaneProps> = props => {
+export const SplitPane: React.FC<SplitPaneProps> = (props) => {
   const collapsedSizes = useCollapsedSizes(props);
   const isLtr = useIsLtr(props);
   const isVertical = props.split === 'vertical';
@@ -75,7 +75,7 @@ export const SplitPane: React.FC<SplitPaneProps> = props => {
     convertCollapseSizesToIndices(collapsedSizes)
   );
 
-  const { childPanes, handleDragStart, resizingIndex } = useSplitPaneResize({
+  const { childPanes, handleDragStart, resizingIndex, dragState } = useSplitPaneResize({
     ...props,
     isLtr,
     isVertical,
@@ -99,6 +99,17 @@ export const SplitPane: React.FC<SplitPaneProps> = props => {
     return <>{props.children}</>;
   }
 
+  // STATE: if dragging, contains which pane is dragging and what the offset is.  If not dragging then null
+  // const { dragState } = useDragState(isVertical, () => {});
+
+  const mouseEventBlockerStyle: React.CSSProperties = {
+    width: '100%',
+    height: '100%',
+    position: 'fixed',
+    zIndex: 100,
+    opacity: 0,
+  };
+
   // stacks the children and places a resizer in between each of them. Each resizer has the same index as the pane that it controls.
   const entries = childPanes.map((pane, paneIndex) => {
     const resizerPaneIndex = isReversed ? paneIndex : paneIndex - 1;
@@ -119,6 +130,7 @@ export const SplitPane: React.FC<SplitPaneProps> = props => {
             onCollapseToggle={toggleCollapse}
           />
         ) : null}
+        {dragState !== null && <div style={mouseEventBlockerStyle} />}
         <Pane
           key={`pane.${paneIndex}`}
           forwardRef={pane.ref}